JavaScript *

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

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

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

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

Сообщество JavaScript в курсе этого, особенно сообщество Node.JS, так как Node.JS ставит акцент на асинхронном коде.

Напишем эту алгоритмическую игру [1] так, чтобы извлечь из неё максимальную образовательную пользу в области алгоритмов, языка Javascript, хорошего стиля программ, умения оптимизировать код. Центральным местом обсуждения будет не игра, а код, способы реализации, оптимизация.

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

Недавно проведённый на Хабре опрос [3] показал реальную картину — 20% программистов написали когда-либо её работающую реализацию, а порядка 10% о ней не слышали. Что ж, тем интереснее будет оставшимся 80% узнать, что можно извлечь из реализации игры.

Автовставка точек с запятой (";") — одна из наиболее спорных особенностей яваскрипта, вокруг которой скопилось много непонимания.

Некоторые программисты ставят ";" в конце каждого оператора, некоторые — только там, где строго необходимо. Большинство же где-то посередине, хотя есть и такие, которые добавляют лишние ";" из стилистических соображений.

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

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

var Foo = new Class({
	Extends: Bar,
	initialize: function(firstname, lastname) {
		this.parent(firstname);
		this.lastname = lastname;
	},
	sayHello: function(){
		alert(this.lastname || this.firstname);
	}
});

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Продолжение статьи про рисование на холсте, в которой мы научимся использовать изображения. Естественно рисовать на холсте примитивами очень не удобно и требует определённых трудозатрат, и результат иногода явно хромает качеством. Поэтому естественно в canvas api предусмотрено взаимодействие с изображениями. Добавление изображения условно можно разделить на два шага: создание JavaScript объекта Image, а второй и заключительный шаг это отрисовка изображения на холсте при помощи функции drawImage. Рассмотрим оба шага подробнее.

CANVAS шаг за шагом:

1. Основы
2. Изображения
3. Понг
4. Пятнашки

Если верить англо-русскому словарю, то можно узнать что canvas переводится как холст, а если верить википедии, то можно узнать что тег canvas, это элемент HTML 5, который предназначен для создания растрового изображения при помощи JavaScript. Тому как создать это растровое изображение и будет посвящен мой небольшой текст. Прежде чем начинать пробовать свои силы в этом не легком деле рекомендуется уже иметь базовые знания о том что такое HTML и с чем едят JavaScript.

Вступление

Доброго всем времени суток. Поздравляю вас с праздниками и перехожу к теме.
Когда вы выходите за рамки написания простых фрагментов jQuery и приступаете к разработке более сложных взаимодействий пользователей, ваш код может быстро стать громоздким и трудным для отладки. Эта статья покажет вам начать думать об этих взаимодействий в терминах «частичек поведения» используя паттерн проектирования object literal.

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

Но подождите. Допустим, теперь требования изменились. Теперь код, который работал для трех элементов должен работать для десяти. Или ваш код должен быть повторно использован для несколько иного приложения, в котором все идентификаторы разные. Как не потеряться в коде, который является не просто вызовом плагина или парой строчек типа show() и hide()?

Информация для тех кто не знает что такое стековый язык:

Следующая строка подло скопирована с Wikipedia
Стековый язык программирования — это язык программирования, в котором для передачи параметров используется машинная модель стека.

О языке

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

Функция с сопоставлением будет определяться следующим образом:
value name = operations
Где value это шаблон для сопоставления, a operations это тело функции.

Если же определяется функция без сопоставления то она будет записана следующим образом:
name = operations
Но в теле функции можно использовать константу op значением которой будет операнд с котором была вызвана функция то-есть вершина стека.

Что-бы ввести в стек значение нужно просто ввести число.

А что-бы перевести верхний элемент стека в переменную нужно написать:
-> name
Из стандартных операция будут только + — * /

Так например функция увеличения элемента с вершины стека на 1 будет записана так:
++ = op 1 +

А вот для реализации функция факториала потребуется сопоставление с образцом и кодом будет:
0 ! = 1
! = op 1 - ! op *

Реализация

Будет написан только интерпретатор, который будет реализован как контекст.
Работу с этим контекстом будет осуществлять отдельный скрипт. В подробности которого мы вдаваться не будем. Скажу лишь то что он выводит в «консоль» вершину стека или 'nil'

Первые шаги

Первым делом мы как и полагается опишем контекст как конструктор и обозначим его HContext

HContext = function(){
this.stack = []; //Стек
this.vars = []; // Переменные
this.funs = []; //Функции

}

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

this.run = function(code){
lexems = code.split(' ');
if(lexems.oneOf('=')){
this.define(lexems);}else{
this.exec(lexems,'');}}

Примечание:те кто внимательно читали код могли заметить метод oneOf, это метод из так называемого мной extend.js который был написан мной после того как я прочитал фразу «Если тебе что то нужно, но этого еще нет, то создай это сам.», в дальнейшем функции из этой библиотеки также будут применяться.

Теперь напишем функцию exec которая будет выполнять код. В самом начале если аргумент op не определен то присвоим ему значение 3.

Затем создадим цикл который будет шагать по массиву из лексем и в зависимости от лексемы выполнять различные операции.
Если это 'op' — положить значение op в стек.
Если это число — положить его в стек.
Если есть переменная с таким именем — положить её значение в стек.
Если есть функция с таким именем — вызвать её. Функция call
Если одна из математических операция — вызовем её. Функция mathOp
А если это -> — увеличим счетчик на 1 и присвоим переменной имя которой есть текущая лексема значение с вершины стека.

this.exec = function(code,op){
op = op || 0;
for(var cp=0;cp<code.length;cp++){
if(code[cp]=='op'){this.stack.push(op)}
else if(code[cp].isNum()){this.stack.push(parseFloat(code[cp]))}
else if(this.vars[code[cp]] != undefined){this.stack.push(this.vars[code[cp]])}
else if(this.funs[code[cp]] != undefined){this.call(code[cp])}
else if(this.mathOps.oneOf(code[cp])){this.mathOp(code[cp])}
else if(code[cp] == '->'){cp++;this.vars[code[cp]]=this.stack.pop();}}}//


Математические операции

Создадим массив с возможными математическими операциями.
this.mathOps = ['+','-','*','/'];

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

this.mathOp = function(op){
nums = [this.stack.pop(),this.stack.pop()];
this.stack.push(eval(nums[1] + ' ' + op + ' ' + nums[0]));}

Функции

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

Напишем метод определения функции:

this.define = function(code){
eq = code.pos('='); //Определим позицию знака равно
op = code[eq-2] || 'op'; //Шаблоном будет элементом с ключом на 2 меньше знака = но если его нет то 'op'
name = code[eq-1]; //Именем будет элементом с ключом на 1
cmds = code.slice(eq+1); //А телом будут все элементы с ключом на 1 больше
if(this.funs[name] == undefined){this.funs[name] = [];} //Если функция с данным именем отсутствует, то определим
this.funs[name][op] = cmds; //Теперь занесем это в массив функций}

А теперь будем вызывать функции, для этого выделим метод call (Большинство, а особенно программисты на ассемблере точно не найдут название смешным)

this.call = function(fun){
op = this.stack.pop(); //Получаем операнд
cd = this.funs[fun][op] || this.funs[fun]['op']; //Ищем функцию с совпадением иначе берем универсальную
this.exec(cd,op);} //И выполняем её код

Попробовать:

Псевдо-консоль находится тут. Там же расположены примеры.

Так получилось, что в течение нескольких месяцев я занимался разработкой букмарклетов, сделав их около десятка. Использовал как jQuery, так и native JavaScript. О том, с какими подводными камнями я столкнулся, что нового узнал и нашел — об этом пойдет речь под катом.

audio.js — это javascript библиотека, позволяющая использовать HTML5 тэг повсюду. Что скрывается за словом «повсюду». Если есть возможность использовать тэг , то будет использоваться он, иначе будет подключен плеер на flash. В библиотеку так же входит и UI отображение для этого плеера, которое может быть видоизменено с помощью css.

Бывают ситуации, когда веб-приложению требуется поднять кучу данных с сервера, раскодировать их и отправить дальше по назначению. Примером этому может быть онлайн 3d редактор, где каждая модель может занимать несколько мегабайт в gzip'аном json'e.

Что же делать когда браузер среднего пользователя подвисает на секунду или даже больше при загрузке и распаковке данных?
1. Придумать что-нибудь на flash (я не уверен на 100%, но некоторые браузеры запускают плагины в основном потоке)
2. Загружать данные кусками, обрабатывать кусками.
3. Попросить пользователя сделать апгрэйд компьютера.

Все 3 варианта не очень, правда?

Под катом элегантное решение (без лишних скриптов и дописывания кода приложения) этой проблемы.

    По следам моего хабратопика про тестирование ServerSide решил опубликовать небольшой информационный пост о том, как использовать движок Microsoft JScript 9.0 вне IE 9. А точнее самым доступным способом — через Windows Script Host.
     Какая от этого может быть польза? Да хотя бы для тестирования производительности исключительно JavaScript, вне зависимости от рендеринга HTML. Можно протестировать свою будущую <подставь свое>-killer JavaScript библиотеку в более приспособленном для автоматического тестирования окружении. Да мало ли применений может придумать хабрачитатель для свежей версии Javascript движка.
В общем, тем кто заинтересовался, добро пожаловать под кат.

Французская веб-студия Revolver3 создала мультиплеерную игру на HTML5 с использованием серверной технологии NodeJS и Websockets

Играть (нужен ФБ акк)
Мышью ходить, пробел — кидать, любая буква — чат

Сегодня мы будем тестировать 2 блока кода, выполняющие следующую операцию:
Дается массив, необходимо выбрать все элементы, степень 2 которых больше 5.

В синем углу Вариант А: Низкоуровневый код — старый и страшный (поддающийся частичной оптимизации)

1.    for (i = 0, res = []; i < c; i++) {
2.        t = a[i];
3.        if (t >= 2.236067) {
4.            continue;
5.        } else {
6.            res.push(t * t);
7.        }
8.    }

В красном углу Вариант Б: Высокоуровневый код — молодой и красивый (не поддающийся частичной оптимизации)

1. a.map(function (t) { return t * t}).filter(function (t) { return t > 5});

Битвы будут происходить на 3 аренах.
1. AO args — Параметры объекта активации функции.
2. AO — Локальные переменные объекта активации функции.
3. Global — Глобальные переменные.

Сегодня состоялся релиз Impact JS, дважаскриптовый движок, который в взаимодействии с html5 canvas позволит вам создавать игры. Пример такой игры — Biolab Disaster

Немного огорчает стоимость лицензии — 99$. Но уверен в скором будущем появятся бесплатные альтернативы.

Видео по созданию игры на Impact.

Небольшой обзор ImpactJS

Всем привет! Вторая часть про миниатюрный javascript фреймворк Atom (бывший Nano).
Теперь из Core убрано всё лишнее, вес — 1 кб.
Как и прежде — полный отказ от устаревших браузеров.
Dom, Class, Ajax и т.п. — подключаются как плагины.
Поменялся адрес репозитария: github.com/theshock/atomjs
Под катом — расскажу, что нового и опишу, как создавать плагины

На прошлой неделе вышел очередной релиз QooxDoo. Основная задача фреймворка — предоставить возможность проектировать многофункциональные кросс-браузерные веб-приложения. При этом, как сказано на qooxdoo.org, знания HTML, CSS, DOM не требуются.
Каких-то принципиальных новшеств в новом релизе лично я для себя не отметил. Хотя, безусловно, есть некоторые полезные плюшки, такие как Tri-state CheckBox.
В целом библиотека очень функциональна, хорошо продумана, реализована и задокументирована. Для тех кто впервые слышит о ней — отмечу несколько моментов.

Привет, читатель. Есть много прекрасных и мощных JavaScript-фреймворков. JQuery, MooTools, ExtJS, и множество других. Они кроссбраузерны и громадны. И пользоваться ими — одно удовольствие.

Но иногда, бывает, хочется написать какой-нибудь небольшой скриптик на 5 килобайт и как-то совесть мучает подключать JQuery, который весит в сжатом виде 75 килобайт. И каждый раз начинаешь писать свой мини-фреймворк:

var dom = {
	id  : function (id)  { return document.getElementById(id); },
	tag : function (tag) { return document.getElementsByTagName(tag); },
};

Вроде бы, больше для начала и не надо. А потом вспоминаешь про createElement, легкий способ присвоить CSS, наследование, расширение прототип. И в общем каждый раз пишешь свой велосипед.
В этот раз я решил написать миниатюрный фреймворк, который можно было бы без зазрений совести подключать даже к самым маленьким проектам. В сжатом виде он весит всего 4 килобайта (в 20 раз меньше JQuery).
И в нём есть еще одно преимущество по сравнению со всеми современными фреймворками — полный отказ от устаревших браузеров, за счёт чего в эти 4 килобайта вместилася половина JQuery.

Итак, приветствуйте, JavaScript-фреймворк Nano

Читайте актуальную вторую часть!

Сегодня мы представляем вам Crankshaft (коленчатый вал — прим. пер.), новую инфраструктуру компиляции для V8, JavaScript движка Google Chrome. Используя агрессивную оптимизацию, Crankshaft значительно повышает производительность ресурсоёмких JavaScript приложений — часто более чем в два раза! Это делает интернет-страницы и приложения, использующие сложный код, более отзывчивыми и быстрыми для пользователей. Сравним производительность Chrome с Crankshaft и без него на стандартном наборе тестов V8:

Наткнулся на интересный документ в Твиттере.

JavaScript Performance Best Practices

В заголовке указана категория WRT (Nokia Web Runtime or Widget for S60), то есть конкретная Нокиевская платформа, но, думаю, многим интересно будет почитать, возможно найдёте для себя что-то новое. Есть действительно полезные советы, но есть и вредные, особенно в свете современной разработки _под все браузеры_.
Сначала думал оформить как топик-ссылку, но под катом я обращу внимание на некоторые проблемы этой статьи. Статью прочитать стоит но ни в коем случае не относитесь к ней, как к истине в последней инстанции.