JavaScript *

В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.

Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.

Например, для сохранения уникального номера блока часто пишут так:

<div class="items">
  <div class="item1">...</div>
  <div class="item3">...</div>
  <div class="item6">...</div>
  <div class="item1">...</div>
  ...
</div>

А если нам нужно добавить еще один класс для каждого элемента? Или модификатор для отдельных? Да, конечно, можно обрезать регуляркой или другим костыликом на ваш вкус.

Как может показаться, тут можно задействовать id, но у нас могут быть блоки с одинаковым номером.

Иногда используют атрибут ‘rel’, но его можно использовать только для ссылок, хотя я видел и у других элементов. И опять же недостаток — мы можем записать в него только одно значение.

И вот нам на помощь спешат Чип и Дейл атрибуты data-*.

Привет Хабр!
Буквально вчера возникла необходимость объединить два объекта javascript. Покопавшись в интернетах узнал, что единственный способ объединить два объекта это скопировать поля из одного в другой. («Разрывная» — подумал Штирлиц) Пораскинув мозгами создал свой велосипед метод для этого дела.

В эти выходные я имел удовольствие разбираться с асинхронными api IndexedDB.

Поле разбора примера от mozilla мне показалось, что код не так хорош, как мог бы быть.

И я решил для развития своих псионных навыков работы c IndexedDB написать обертку к его асинхронному api.

Если честно, то я не любитель писать статьи, потому что мне всегда было лень читать слова, я люблю читать код, поэтому в моих статьях его как правило много.

Если вы тоже любите код, то я выложил его на github

Фактически эта статья описывает то что написано в примерах использования обертки, ну может чуть больше.

Во время разработки своего экспериментального WEB-проекта на Node.JS, о котором я рассказал в двух предыдущих статьях, я столкнулся с проблемой выбора шаблонизатора. Несмотря на то, что готовых решений существует довольно много, мне не удалось найти то, которое бы удовлетворяло меня на 100%. Так родился JUST.

Конкуренты

Jade

github.com/visionmedia/jade

Этот шаблонизатор достаточно популярен среди Node.JS разработчиков. Он обладает хорошим функционалом и скоростью работы, но содержит и спорные моменты:

1. Отказ от использования тегов в том месте, для которого они, собственно, и были придуманы. С таким подходом я, мягко говоря, не согласен. Конечно, это очень субъективно, но вид разметки страницы без привычных тегов, взрывает мозг. Верстальщик, далёкий от новомодных технологий шаблонизации, не скажет спасибо, если ему придётся вносить изменения в такой код. Также потребуется дополнительная работа при перенесении вёрстки в шаблоны, что замедлит ход разработки.
2. Перегруженность функционалом. Любой разработчик старается сделать свой продукт максимально универсальным, но иногда нужно уметь вовремя остановиться. На мой взгляд, Jade уже перешёл эту грань.

В данном посте хочу рассказать как предпочитаю реализовывать наследование в объемном JavaScript приложении.

Допустим для проекта необходимо множество родственных и не очень классов.
Если мы попытаемся каждый тип поведения описать в отдельном классе, то классов может стать очень много. И у финальных классов может быть с десяток предков. В таком случае обычного JavaScript наследования через prototype может оказаться не достаточно. Например мне понадобилась возможность из метода вызывать аналогичный метод класса-предка. И захотелось создавать и наследовать некоторые статические свойства и методы класса. Такую функциональность можно добавить, вызывая для каждого класса ниже изложенную ф-ию extend:

Функция extend

cSO = {}; // Просто для отдельного пространства имен.
cSO.extend = function(child, parent, other) {
  if(parent) {
    var F = function() {};
    F.prototype = parent.prototype;
    child.prototype = new F();
    child.prototype.constructor = child;
    child.prototype.proto = function() {
      return parent.prototype;
    }
    // Пока все стандартно.
  } else {
    child.prototype.proto = function() {
      return;
    }
  }
  /*
   * У классов есть параметр stat, предназначенный для статических ф-ий и данных.
   * Он доступен через _class.stat или из объекта(экземпляра) класса через this.stat.
   * Потомки могут обращаться к статическому методу предка, для этого их нужно
   * объявлять так: _class.stat.prototype.myStaticMethod = function() {...

Существует замечательное и буквально завораживающее семейство фрактальных кривых — кривые дракона. Кто не знаком с ними принцип их построения проще всего объяснить при помощи полоски бумаги. Итак, возьмём полоску бумаги и сложим её несколько раз пополам, а затем развернем так чтобы между углами сгиба образовались прямые углы. В итоге мы получим кривую дракона. Поскольку толщина сложенной полоски каждый раз удваивается, а длина отдельного звена уменьшается в два раза, то мы не можем получить таким наивным способом длинных кривых.
К счастью длинные кривые легко рисуются другим способом, а точнее множеством способов. В частности, в Сети можно встретить рекурсивную программу порождающую кривую дракона достраивая катеты к отрезкам исходной кривой, как гипотенузам. Но я решил поручить это дело черепашке. Поскольку кривая дракона состоит из серии поворотов «налево» и «направо», то черепашка должна уметь только делать шаг в перёд и поворачивать. Главное, что я хотел увидеть — это сплетение кривых дракона. Да! Эти кривые сочетаются между собой в разных и интересных позициях, что кажется невероятным для таких сложных и запутанных кривых.

В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

Привет, Хабр.

Сегодня я расскажу о своих достижениях в области моментального изменения страницы — динамической смене языка. Эта штука понадобилась мне совершенно недавно, а так как сторонним реализациям я не доверяю (даже как-то и не нашёл их), то пришлось написать свою. За время её использования (где-то около полугода) я исправил все самые заметные баги (но это не означает, что их там больше не осталось :) ), и теперь представляю рабочую версию.

Кто-то скажет, что осуществлять перевод на клиенте нецелесообразно, но у меня получилось как раз такая ситуация, что по-другому никак нельзя: для серверного перевода приходится принудительно закрывать веб-приложения на странице, чтобы не потерять данные; в случае же с динамическим изменением языка, просто заменятся тексты на элементах и работа продолжается. Думаю, не меня одного раздражало «Настройки будут применены при перезагрузке». Моя реализация хоть и сложновата, но решает эту проблему.

Для того чтобы не путаться, я определю для данной статьи следующий перечень терминов:
Словарь — хранилище ключей, по которым осуществляется доступ к локализации на данном языке. По сути дела представляет собой обычный JavaScript-объект, где свойства — ключи доступа, а их значения — переведенные строки.
Хэш — объект, который является результатом упорядоченного слияния словарей; общий словарь, из которого впоследствии ведётся выборка перевода.

Теперь более детально.

При разработке одного сервиса я столкнулся с необходимостью дать возможность пользователям сообщать об ошибках. Проблема заключалась в том, чтобы пользователь мог сделать скриншот без использования стороннего софта или сервиса.

Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.

Сразу предупрежу, да, статья немного некорректная, добро пожаловать в комментарии, там неплохие уточнения ).

Доброго времени суток.

В JavaScript есть два похожих оператора: == и ===. Если не знать их отличия, это может обернуться кучей ошибок. Так что решил раскрыть эту тему. Чем именно отличаются == и ===, как они работают, почему так происходит, и как избежать ошибок.

Оператор == сравнивает на равенство, а вот === — на идентичность. Плюс оператора === состоит в том, что он не приводит два значения к одному типу. Именно из-за этого он обычно и используется.

 

Чрезвычайно важно понимать, как работают JavaScript таймеры. Зачастую их поведение не совпадает с нашим интуитивным восприятием многопоточности, и это связано с тем, что в действительности они выполняются в одном потоке. Давайте рассмотрим четыре функции, с помощью которых мы можем управлять таймерами:

• var id = setTimeout(fn, delay); — Создает простой таймер, который вызовет заданную функцию после заданной задержки. Функция возвращает уникальный ID, с помощью которого таймер может быть приостановлен.
• var id = setInterval(fn, delay); — Похоже на setTimeout, но непрерывно вызывает функцию с заданным интервалом (пока не будет остановлена).
• clearInterval(id);, clearTimeout(id); — Принимает таймер ID (возвращаемый одной из функций, описанных выше) и останавливает выполнение callback'a.

Главная идея, которую нужно рассмотреть, заключается в том, что точность периода задержки таймера не гарантируется. Начнем с того, что браузер исполняет все асинхронные JavaScript-события в одном потоке (такие как клик мышью или таймеры) и только в то время, когда пришла очередь этого события. Лучше всего это демонстрирует следующая диаграмма:

Комитет ECMA сейчас работает над разработкой следующей версии JavaScript, известной под кодовым названием Harmony. Он должен быть закончен к концу следующего года и станет самым большим обновлением за всю историю языка. Разработчики Chrome и V8 решили уже сейчас реализовать некоторые будущие функции JavaScript в браузере Chrome (версия для разработчиков).

Чтобы активировать новые функции, нужно в последнем релизе с dev-канала набрать chrome://flags и включить флаг Experimental JavaScript features.

Здравствуйте, дорогие друзья!

В один чудесный день в один чудесный час возникла острейшая необходимость в JS|HTML препроцессоре и как обычно поиск готового решения не увенчался успехом, везде чего-то не хватало (не было глобальных переменных, вставки строк, замены строк, импорта и т.п.). Ну и поскольку я суровый якутский парень, то выход был один — сделать все самому. Ну? что ж, результат моего труда я решил выложить на мнение комьюнити.

Всем добрый день.

Недавно я задумался надо вопросом фонового обновления информации и мне пришла в голову одна идея.

Суть задачи — мы находимся на странице списка новостей. Необходимо обновлять список по мере поступления новых новостей. Серверный язык PHP

Рад представить вашему вниманию еще одну крохотную, но полезную open-source-утилиту своего авторства — Simplify.js.



Simplify.js — очень быстрая реализация упрощения ломаных линий на JavaScript. Изначально написав ее для Leaflet (библиотеки для интерактивных карт), после небольшого эксперимента по оптимизации захотелось выпустить ее в качестве отдельной библиотеки без зависимостей, которую можно использовать как в браузере, так и на серверных платформах, таких, как Node.js, и применять и для 2D, и для 3D-точек.

Подобное упрощение позволяет на несколько порядков уменьшить количество точек в ломаной линии (например, представляющей длинный маршрут на карте или график), при этом максимально сохранив ее очертания (с заданной точностью). Соответственно резко уменьшается занимаемый линией размер памяти и время, требуемое для ее обработки.

По следам недавних топиков, а также постоянных рассказов в стиле «мой стартап не взлетел, потому что его зохавала лапша из callback-ов».

Как раз недавно я закончил небольшой проект (ссылку не даю, чтобы не заподозрили — кому надо см. профиль), полностью и на всех этапах написанном только на JS, и притом полностью асинхронный. Разумеется, я столкнулся с пресловутой проблемой «лапши». И, вы не поверите, совершенно спокойно решил её без всяких там фреймворков и хитрых приемов.

Итак, допустим, у нас есть задача: асинхронно выбрать из базы количество книг, потом асинхронно же выбрать из базы нужную пачку книг, потом асинхронно же выбрать из базы метаданные по книгам, а потом свести всё это в один dataset и отрендерить шаблон. Как это обычно выглядит?

Node.js – платформа для построения быстрых масштабируемых server-side приложений на JavaScript. Вопреки распространённому отношению к JavaScript как к “несерьёзному” языку, Node.js позволяет писать вполне серьёзные вещи. Node.js – это разруливамая событиями, не блокирующая I/O модель, что делает её легковесной и эффективной. Идеально подходит для приложений, нагруженных данными.

О Node.js уже писали на хабре, а в этом видео Антон Кекс рассказывает о Node.js, попутно рассказывая про опыт использования в некоторых реальных проектах.

www.devclub.eu/2012/02/03/anton-keks-nodejs

Как это писалось

Одним долгим зимним вечером моя жена играла в Bookworm adventures, и периодически пинала меня по поводу составления слов подлиннее из имеющихся букв. Быстрый поиск по интернету страничек, позволяющих составлять слова из набора букв дал кучу сайтов, которые пытаются делать это на серверной стороне, и один, который делает это на клиентской ява-апплетом. Те, которые составляют слова мощностями сервера либо имеют ограничение на размер набора букв (обычно, почему-то в 8), либо глубоко задумываются, если им послать набор «abcdefghijklmnopqrstuvwxyz». Ява-апплет же имел ограничение в 12 букв, работал шустро и почти подходил (в игре предлагаются 16 букв для составления слов).

Доброго времени суток, Хабровчане.

Может для большинства здешних обитателей моя статья покажется слишком скучной и «и так понятно», но думаю новичкам будет в чем-то полезной.
Стояла передо мной как-то задача сделать сортировку таблицы по разным колонкам. Данный брались из базы, каждый раз их вытаскивать — накладно, решил задействовать JavaScript.
Были небольшие трудности из-за использования различной стилистики строк в таблице, а именно был разный цвет фона, в зависимости от данных самой таблицы.
Стилистику нарушать было нельзя. Кого заинтересовало, прошу под кат.