JavaScript *

Умла́ут или реже умля́ут (нем. Umlaut) — диакритический знак, указывающий на фонетическое явление умлаута гласных звуков в немецком и некоторых других языках. Обычно изображается в виде двух точек над буквой, в готическом же шрифте традиционно (за исключением последних десятилетий) выглядел как маленькая надстрочная буква e. В немецком присутствует в таких буквах, как Ää, Öö и Üü (называемых «A-умляут», «O-умляут» и «U-умляут» соответственно).
Wikipedia

Как вы замеряете производительность javascript кода?
У меня это происходило так:

1. создаю файл index.html;
2. копирую откуда-нибудь шаблон HTML;
3. добаляю тэг script, в котором будет жить тестируемый код;
4. если нужно замерить работу с массивами, то обязательно создаю или беру готовый генератор случайных массивов.

Эта статья предназначена для тех, кого бесят мильён левых служб и драйверов, которые ставят любые виртуалки. Тем, кто будут ставить доп. пакеты Node.js
Все остальные могут скачать скомпилированный Node.js node-js.prcn.co.cc
Или же установить Node.js из-под виртуалки nodejs.ru/25

Прошу под кат

QooxDoo — достаточно хорошо проработанная JS-библиотека для разработки RIA (Rich Internet Applications). Углубляться в подробности библиотеки и описывать, откуда растут ноги проблемы не буду. Кто столкнулся с проблемой — тот поймет что к чему.
И так. Проблема заключается в том, что source-версия приложения, в том виде в котором ее собирает компилятор, не запускается с вебсервера (эмулирует denwer) а только как локальный файл.

CoffeeScript — это новый язык/надстройка/сахарная пудра над обычным JavaScript. Если кто ещё не слышал о нём, то можете прочитать эту отличную вводную статью.

По своей магической природе, сам компилятор для coffee-скриптов написан на coffee-скрипте. Но на наше счастье, пакет исходников CoffeeScript уже содержит готовые к употреблению js-скрипты. И сейчас я расскажу вам как их использовать в windows с помощью Node.js, Cygwin и Nant, ибо дело это не совсем простое, на первый взгляд.

Brendan Eich (создатель языка JavaScript) между делом пишет о том, как язык создавался, и почему он такой, какой есть.

JS был обязан «выглядеть как Java», только поменьше, быть эдаким младшим братом-тупицей для Java. Кроме того, он должен был быть написан за 10 дней, а иначе мы бы имели что-то похуже JS.
…
что-то вроде PHP, только еще хуже. Его босс Netcsape быстро «зарубил» (в июле 1995, если мне не изменяет память; я сдлелал JS в начале/середине мая), т.к. это был уже третий язык после Java и JS. Было и так трудно обосновать то, что у нас 2 новых языка программирования для web.
…

В то время мы должны были двигаться очень быстро, т.к. знали, что Microsoft идет за нами.
…

Считайте, что JavaScript (пожалуйста, только не «JScript») спас вас от VBScript.
…

10 дней на то, чтобы сделать лексер, парсер, компилятор в байткод (bytecode emitter), интерпретатор, встроенные классы и декомпилятор. Помощь была только с файлом jsdate.c — от Ken Smith из Netscape (который, по нашему излишне оптимистичному соглашению, склонировал java.util.Date — Y2K баги и т.д. Гослинг...).

Простите, времени было мало для того, чтобы сделать правильную оптимизацию хвостовой рекурсии. 10 дней почти без сна, чтобы сделать JS с чистого листа, заставить его «выглядеть как Java» (я сделал, чтобы он выглядел как C), и тайком протащить туда его спасительные фишки: first class functions (замыкания сделал позже, но они были частью плана сразу) и прототипы (примерно как в языке Self).

I'll do better in the next life.

Просматривая обзоры инди-игрушек наткнулся на весьма интересный проект — Biolab Disaster (да поможет ему НЛО выдержать хабраэффект) — браузерный платформер на чистых HTML5 & JavaScript, навеивающий воспоминания о тех временах, когда каждую игру делали с душой.
Коротенькая и незатейливая игрушка крутится необычайно быстро и красиво, оставляя за собой приятное впечатление, активированные чекпоинты и маленькие кусочки врагов :)
Выполнена она на движке автора этой же игры, Impact HTML5 Game Engine, в качестве демонстрации его возможностей. Движок на данный момент все еще находится в состоянии разработки, но предлагает уведомить нас электронным письмом по официальному выходу в свет.
За новостями можно так же следить в блоге автора.

На закуску — видео с геймплеем, некоторыми моментами создания игры и редактором уровней — с комментариями автора.

(Благодаря видео можно узнать ссылку на официально еще не опубликованный, но вполне рабочий level editor)

Флеш становится все менее значимым, что не может не радовать.
Приятного пятничного ковыряния в коде ^_^

Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

В этой заметке расскажу о своем опыте юнит-тестирования JS-кода, опыте использования среды выполнения тестов js-test-driver, ее возможности code coverage и скручивании ежа с ужом, а именно данных о code coverage от js-test-driver и генератора отчетов о покрытии PHP_CodeCоverage. Расскажу и покажу как получить вот такие отчеты о покрытии кода...

Навигация по странице

Всё чаще и чаще в web появляются сайты, использующие навигацию, написанную на JavaScript. Типичный случай использования javascript для навигации: страница с меню и блоком контента, куда через AJAX подгружается содержимое:



Пользователь кликает по пункту, JavaScript грузит из сети содержимое, вставляет в блок контента, пользователь доволен: страница без перезагрузки показывает требуемое и траффика потребовалось меньше за счёт того, что не потребовалось грузить все эти HEAD, BODY, STYLE и прочие элементы.

Но вот проблема: URL страницы. Если на old scool сайтах на каждый пункт меню показывается новая HTML страница, и у пользователя есть вменяемый URI, который он может скопировать из адресной строки бразуера, послать другу или положить в закладки, то в случае AJAX интерфейсов в URI странице зачастую нет никаких ссылок на текущий контент документа.

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

Не с секрет, что для решения этой проблемы многие программисты кодируют ссылку на текущее просматриваемое содержимое в якорь (anchor) URI документа. К примеру, на сайте jqapi.com (скриншот которого приведён вначале топика) при выборе того или иного пункта меню якорь страницы меняется на #p={contentId}.

Сегодня существует множество браузеров и все они как-то борются друг с другом ради рынка. Основные игроки: Internet Explorer, Mozilla Firefox, Google Chrome, Safari. И на сегодня они друг у друга копируют внешний вид (все пытаются походить на Google Chrome) и все поголовно хвалятся кто из них лучше соответствует HTML 5, правда главное, что они в нем нахваливают — это тэг canvas.

Вот и получается, что все они практически одинаковы, но как-то ведь им надо выделяться, чтобы быть лучшими? А здесь есть еще кое-что, что они всегда нахваливают — скорость работы. Лет 10 назад под скоростью работы браузера подразумевалась скорость загрузки страницы (например, часть армии поклонников Opera как раз из за этой возможности). А вообще на сегодня важна работа Javascript, реализацией которого кичится каждый браузер. Они даже движкам Javascript дают свои имена и это становится их очередной торговой маркой. Вот именно та самая скорость работы Javascript и является сегодня основным достоинством того или другого браузера.

Подведены итоги конкурса скриптов размером 1024 байт или меньше. Ниже список победителей.

1. Legend Of The Bouncing Beholder (автор: @marijnjh)
2. Миниатюрные шахматы (Oscar Toledo G.)
3. Тетрис со звуком (@sjoerd_visscher)
4. WOLF1K и буквы в цветах радуги (@p01)
5. Бинарные часы (tweetable) (@alexeym)
6. Mother fucking lasers (@evilhackerdude)
7. Схема графического движка (Lars Ronnback)
8. Многопользовательский настольный теннис (@feiss)
9. Генератор кода по азбуке Морзе (@chrissmoak)
10. Пульсирующие 3D-провода (@unconed)

Сайт с демками пока лежит, но некоторые из них можно найти на сайтах авторов.

Нашел в коде Javascript библиотеки вот такую вот конструкцию:

if ('is_public' in profile) {
...
}

Очень заинтересовало, как это работает. До этого использовал оператор 'in' только для итерации, а тут вот такая вот проверка интересная. Покопавшись я обнаружил для себя, что оператор 'in' также можно использоваться для проверки существования метода объекта, свойства объекта и индекса элемента в массиве. Ниже несколько примеров:

Задача

При помощи javascript'а получить объект, содержащий данные формы. Набор полей и свойств должен задаваться разметкой формы. Зачем — чтоб из этого объекта получить json, xml, да и мало ли еще применений можно найти.

Довольно часто во многих статьях я вижу, как люди захватывают контекст this для использования в анонимной функции и удивляюсь — то, что уже стало стандартом — просто ужасная практика, которая противоречит всем канонам программирования. Вам знакома такая запись?
var self = this;
Может вам тоже стоит переосмыслить этот аспект?

Одним из компонентов нашего проекта Shopium.ua является административный интерфейс, который строится как полностью выполняющийся на клиенте rich internet application.

Для отрисовки данных приходящих с сервера в HTML нам часто нужен Javascript-шаблонизатор.

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

К хорошему быстро привыкаешь, и мы быстро привыкли к синтаксису шаблонов Jinja2 который мы используем для генерации HTML на стороне сервера. И захотели такой же, но с перламутровыми пуговицамино для Javascript.

И сформировали к нему такие требования:

Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 

В замечательном браузере Chromium (я думаю, это так же относится и к Google Chrome) события клавиатуры, которые можно обрабатывать JavaScript'ом, почему-то ведут себя очень странным, как по мне, образом. Я столкнулся с двумя интересными его проявлениями:

1. Событие onkeyup генерируется сразу же после события onkeydown, при этом при «зажатии» клавиши эта пара событий начинает генерироваться с завидной частотой в 25 миллисекунд, однако с некоторой паузой в начале.
2. Если после нажатия и удержания одной клавиши нажать следующую — происходит пауза ~500мс, и затем пара onkeydown/onkeyup уже генерируется для новой клавиши.

Ниже приведу свой способ обходить такие «милые» баги реализации.
CAUTION! Способ не идеален, и по большей части это dirty hack, чем работающее решение.

Идея генерации html с помощью javascript меня не отпустила. Напомню eе суть с помощью jQuery

$("<div>", {"class":"something",id:10})


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

Сейчас, после выхода стабильной версии Node.JS 0.2.0, я решил начать цикл статей по программированию с его использованием.

Основная концепция Node.JS — любые операции ввода-вывода по умолчанию реализованы как асинхронные, после выполнения операции будет вызвана функция обратного вызова, первым параметром которой будет являться ошибка или null.

Скрываем асинхронную вложенность

Предположим, нам нужно создать каталог, включая всех его родителей. И только в случае, если его удалось создать, начать писать в этот каталог.

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