JavaScript *

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

Следующая строка подло скопирована с 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), то есть конкретная Нокиевская платформа, но, думаю, многим интересно будет почитать, возможно найдёте для себя что-то новое. Есть действительно полезные советы, но есть и вредные, особенно в свете современной разработки _под все браузеры_.
Сначала думал оформить как топик-ссылку, но под катом я обращу внимание на некоторые проблемы этой статьи. Статью прочитать стоит но ни в коем случае не относитесь к ней, как к истине в последней инстанции.

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

Уже сейчас XUI поддерживает такие мобильные браузеры, как WebKit, Fennec и Opera. В ближайшем будущем поддержка IE Mobile и BlackBerry.

Сайт библиотеки →

Есть javascript код:

1. var A = function () {};
2. A.prototype.b = 100;
3. var a = new A();
4. A.prototype.c = 101;
5. a.c = -100;
6. A.prototype = {};
7. A.prototype.b = 536;
8. /* 1 */ console.log(a.__proto__.constructor.prototype.b === 536);
9. var b = new A();
10. /* 2 */ console.log(a.__proto__.__proto__.constructor === a.__proto__.constructor.prototype.constructor);
11. /* 3 */ console.log(b instanceof A);
12. /* 4 */ console.log(!(a instanceof Object));

Вопрос. Что возвратят выражения 1-4 и почему?

Затрудняетесь ответить?
Тогда вам стоит пройти под кат ;-) (Далее 600 Кб больших изображений)

В последнее время стали очень популярны тесты производительности JavaScript движков, но в основном они касаются Client Side JavaScript. Меня заинтересовал вопрос: как обстоят дела с Server Side? Но тестировать только Google V8 и SpiderMonkey было бы неинтересно. Ясно, что результаты будут схожи с Client Side — движки-то те же. Поэтому нужно было добавить к тестам что-то, что недоступно в браузере, однако достаточно распространено, а также постараться использовать специфичные для серверных задач тесты. Этим недостающим объектом для тестов виделся компилятор JScript из .Net Framework. Однако предварительные результаты тестов стали сюрпризом для меня, и я решил добавить четвертого игрока из той же команды.

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

Задача

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

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

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

Собственно, этим и занимается мой небольшой класс WaitSync =)

WaitSync.js

Пользоваться элементарно просто:

1. Создаем объект типа WaitSync, передав в конструктор callback функцию, которая будет вызвана после того, как отработают нужные задачи.

	var vulture = new WaitSync(function () {
		console.debug('Start eating: ', arguments);
	});

2. Вместо простого

	$.getJSON(
		'savannah/get_prey', 
		function (data) {
			console.log('... prey found: ' + data);
		}
	);
	
	$.getJSON(
		'savannah/get_other_predators', 
		function () {
			console.log('... predators are done eating');
		}
	);

«заворачиваем» задачи в метод .wrap

	$.getJSON(
		'savannah/get_prey', 
		vulture.wrap( 
			function (data) {
				console.log('... prey found: ' + data);
			}
		)
	);
	
	$.getJSON(
		'savannah/get_other_predators', 
		vulture.wrap(
			function () {
				console.log('... predators are done eating');
			}
		)
	);

3. Все =) Как только будут выполнены оба AJAX запроса, стервятник начнет есть.

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

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

var process = processFsAndDb.after('fs', 'db');

asyncFsAccess( file, process.fs);
asyncDbAccess(query, process.db);