JavaScript *

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

1. // getRectangleArea(x1, y1, x2, y2) или
2. // getRectangleArea(width, height)
3. function getRectangleArea(x1, y1, x2, y2) {
4.   if(arguments.length==2) return x1*y1;
5.   return (x2-x1)*(y2-y1);
6. }

* This source code was highlighted with Source Code Highlighter.

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

Пост про (вполне логичные) особенности javascript ( habrahabr.ru/blogs/javascript/84311 ) вызвал бурное обсуждение. Я вслед за автором WTFJS.com сильно облажался, считая эти странности действительно чем-то мистическим ) Большое спасибо всем тем, кто объяснил, почему так происходит на самом деле или для чего так сделано. Понимание таких тонкостей позволяет перейти в общении с языком на «ты». Кто-то скажет, что это должен знать любой программист, хоть как-то владеющий JS? Возможно. Но, как оказалось, многие не знали, и я в их числе.

Считаете себя гуру JS'а? Попробуйте предсказать результаты следующих операций:

Number.MIN_VALUE > 0; // true or false?

typeof null; // what type?
null === Object; // true or false?

// и самый сок

NaN === NaN; // true or false?

typeof NaN; // what type?


* This source code was highlighted with Source Code Highlighter.

Сомневаетесь? Тогда именно для вас Брайан Леру (Brian Leroux) создал WTFJS — сайт, содержащий коллекцию странностей JS. «JavaScript — это язык, который мы любим несмотря на все его ненавистные особенности».

Для нетерпеливых ответы под катом.

Добрый вечер уважаемые читатели,

На хабре последнее время проскакивало несколько упоминаний о node, быстрой платформе для создания вэб приложений на javascript, обладающей довольно уникальной на сегодняшний день особенностью, неблокирующим I/O (вводом/выводом).

Для начала о nodeJS:

1) В качестве языка используется JavaScript
2) Для выполнения JavaScript используется движок V8 от Google, который работает довольно быстро благодаря компиляции в машинный код перед выполнением.
3) Для реализации неблокирующего I/O используются libev и libeio, (libev показывает более хорошие результаты по сравнению с libevent)
4) Для реализации подключения библиотек выбран синтаксис commonJS
5) Есть возможность писать модули ещё и на C/C++, при этом подключаются они точно так-же как и js модули, это позволит Вам, к примеру, любое узкое место в вашем приложении переписать на C++ без каких либо трудностей.

В процессе изучения данного момента, что в итоге привело к написанию этой статьи я успел довольно неплохо поиграться с этой особоенностью. И могу сказать, что неблокирующий ввод/вывод очень и очень позитивно сказывается на производительности и устойчивости к нагрузкам.

Я разработал хорошую на мой взгляд галерею изображений под названием iLoad. Сегодня опубликовал уже 3 версию. Галерея может достаточно много всего, хотя и работает только с изображениями. Подробнее можно прочитать в большущем посте вот тут или посмотреть на работу галереи на странице скачивания. Надеюсь, вы оцените.

UPD

Подготовил версию 3.2.5. Теперь галерея стабильно работает в IE9. Пофиксены все найденные баги.

Внезапно потребовалось выводить на странице виджет Яндекс.Карт с какими-то накладываемыми слоями. Проблема заключалась в необходимости дать пользователю редактировать эти слои.

Быстрый поиск редакторов накладываемых примитивов дал только конструктор схем проезда от Яндекса и какой-то убогий php'шный конструктор карт (к тому же ещё и платный). А редактор был нужен. По этому пришлось сесть и быстренько написать.

Наткнулся вчера на этот инструмент и не смог пройти мимо, провел ночь за написанием тестов, а теперь хочу поделиться находкой. QUnit — это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на javascript. Удобна в использовании, ничего лишнего, осваивается за 20 минут, выгода от применения — колоссальная.

Самым нетерпеливым сразу ссылки:
Официальная документация на сайте jquery: docs.jquery.com/QUnit
Реальные примеры тестов (для модулей jquery): view.jquery.com/trunk/jquery/test/unit
Руководство для начинающих (англ): www.swift-lizard.com/2009/11/24/test-driven-development-with-jquery-qunit
Система распределенного тестирования (гениально и просто): testswarm.com

Под катом информация о преимуществах юнит-тестирования применительно к js и разбор возможностей библиотеки на примерах.

Те, кто пишут на C# очень хорошо знают и часто используют механизм String.Format, которого сильно не хватает в JavaScript. Несмотря на его простоту и удобство, на просторах Сети мало что можно накопать, в основном вариации на тему sprintf (привет сишникам). Достаточно давно был написан скрипт, который позволял форматировать строки на JavaScript и был похож на String.Format C#. Форматирование стало использоваться коллегами достаточно плотно в скриптах и я решил немного причесать код и опубликовать для тех, кто хочет получить String.Format в JavaScript.

Недавно у меня появился ряд задач, связанных с процедурной графикой в вебе, анимацией и механикой.
Став искать простые пути там, где их обычно нет, я наткнулся на чудненькую библиотеку «Bacon And Eggs» от Эндрю Хойера.

В феврале пройдут мастер-классы по javascript в Москве и Санкт-Петербурге.
Даты — 20 и 21 февраля для Москвы, 27 и 28 февраля для Санкт-Петербурга.

• Профессиональное javascript-программирование.
• Сложный AJAX и COMET: тонкости Web 2.0.
• Мастер-класс по клиентской оптимизации.
• Секреты jQuery.

На мастер-классы приходят как начинающие, но желающие вырасти побыстрее, так и ведущие специалисты серьезных компаний.
Все говорят спасибо. Это не шутка, материала много и он интересный.

Мероприятие платное, но цена очень доступная. Приходите, узнаете много нового.

Регистрация открыта на javascript.ru/mk, там же больше информации о мастер-классах.

Викторина для тех, кто любит JavaScript больше ECMAScript. Главный приз: пирожок на полке.

Update: Пояснение. Для тех кто совсем не в теме. ECMAScript — это стандарт языка, на котором основаны реализации JavaScript в современных браузерах. Именно этот стандарт определяет поведение программ в этой статье. JavaScript является «надстройкой» над ECMAScript.

Пояснение номер 2. Глюки IE не имеют прямого отношения к викторине поскольку это ошибки (ну или «особенности») реализации стандартов.

В связи с недавней серией постов на тему визуализации данных в вебе меня попросили посоветовать библиотеки для рисования диаграмм Ганта, что с удовольствием и делаю.

Диаграмма Ганта (англ. Gantt chart, также ленточная диаграмма, график Ганта) — это популярный тип столбчатых диаграмм, который используется для иллюстрации плана, графика работ по какому-либо проекту. Является одним из методов планирования проектов.

Без малого год назад, я уже писал (http://habrahabr.ru/blogs/javascript/50544/) о самом коротком способе определение браузера Internet Explorer, но вот некто Aleko нашел еще более короткий вариант:

-[1,]

Всего 5 байт. Пример использования:
if(-[1,]){
alert("Not IE!");
}

Продолжаем тему визуализации данных в интернете.

Предыдущие топики:

• Изумительные диаграммы с новым Chart контролом
• Визуализация направленных графов в вебе
• Список Javascript библиотек для рисования графиков и диаграмм — habrahabr.ru/blogs/javascript/79960 (публикация в блоге — msug.vn.ua/blogs/akrakovetsky/archive/2010/01/04/javascript-charting-libraries.aspx)

О визуализация графов в вебе говорили здесь, навеяно этой статьей.

Под катом обзор JavaScript библиотек для рисования графов, диаграмм и прочей красоты.

Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:



Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

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

Обратите внимание на вот эту иллюстрацию:



Красиво, правда?

Вышел первый стабильный релиз свободного графического Ajax-фреймворка Qooxdoo (произносится ['ku:ksdu:]), использующего JavaScript и предоставляющего почти всё необходимое для создания web-приложений с десктопоподобным интерфейсом. По словам разработчиков, web-приложения при помощи Qooxdoo можно создавать даже без знания HTML, CSS и DOM модели.

Фреймворк запускается в большинстве браузеров (Internet Explorer, Firefox, Safari, Opera и Chrome). Чтобы получить представление о работе фреймворка можно взглянуть на тестовую среду и демо-приложения, демонстрирующие в интерактивном режиме возможности qooxdoo, такие как многочисленные виджеты, Drag&Drop интерфейс, диспетчеры компоновки, визуальные темы, поддержку организации работы многоязычного интерфейса. Для разработчиков особый интерес представляет поставляемый в составе пакета инструментарий, полностью охватывающий процесс разработки, включая валидацию кода, компиляцию JavaScript, юнит-тесты, автоматическое тестирование GUI и средства отладки аналогичные Firebug.

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

UPD1: те, кто здесь впервые, — обязательно читайте комментарии к этой статье, в них очень много интересного накидали (как я и надеялся). Спасибо!

UPD2: найдено решение задачи авторесайза для всего, кроме Opera < 10.

UPD3: полностью кроссбраузерное решение задачи с ресайзом приводится ниже. Его особенности: а) не портится history, б) работает даже в Опере 7 и IE6, в) для ускорения работы высота фрейма всегда делается кратной N=30 пикселям. Фактически, там 2 алгоритма — для IE (через location.hash) и для «не-IE» (через window.name и «простукивание» возможных высот в цикле). См. также комментарии к статье, там разъяснения, почему так, а не иначе.

UPD4: статья начала принимать черты монументальной, посему она переехала ко мне в Наблы на dkLab: dklab.ru/chicken/nablas/58.html — там же все примеры кода самой последней актуальности. Но, конечно, в случае изменений я буду их и тут тоже анонсировать, добавляя UPD5, UPD6 и т.д.

В связи с последними инициативами гугла учитывать время загрузки страницы становится всё более актуально асинхронно подгружать части веб-страниц уже после загрузки основного минимума. Реклама — один из претендентов на отложенную загрузку, но простой ajax тут не поможет, т.к. в общем случае в подгружаемом куске может встречаться, например, document.write, и если документ уже загружен и закрыт то данный метод открывает его заново, обнуляя при этом.

Гугл в этом плане не сильно помогает, т.к. основной описываемый метод — подмена document.write своим собственным методом, который тупо добавляет аргумент в конец документа, но если вызов идёт не в конце и писать надо куда-то в середину — возникает проблема. На хабре описывался фрейморк Fullajax, который вроде справляется с этим, но как именно — я пока не смотрел.

У меня возникла другая идея, возможно — велосипед, но желание попробовать было слишком сильным. А именно, подгружать отложенный код в скрытый iframe, а после загрузки переносить его содержимое туда, где оно должно быть. Более того, чтобы не делать лишних запросов к серверу, используется data URI. Такой подход работает в FF и Opera но не работает в IE и Chrome.