JavaScript *

Вступление

Мне нравится осваивать новые технологии, делая то, чем раньше вообще не занимался. А еще мне нравится TRON. Оба фильма, кстати. Помню, еще до того, как я их посмотрел, в студенческие дремучие времена, я играл в Armagetron и фанател от гонок на светоциклах. После просмотра TRON: Legacy мне внезапно захотелось сделать свой Tron с гридом и изоморфами. Недолго думая, я запустил любимую Visual Studio Express и задумался — а чем это мое творение будет отличаться от свалки клонов «Трона»? Студия плавно закрылась, а мой энтузиазм несколько поутих. Ровно до того момента, как мне на глаза попалась какая-то статья о WebGL. Глаза снова загорелись, а руки сами потянулись к редактору. В голову как-то не приходила мысль, что последний раз я на JavaScript делал обработчик нажатия кнопки на зачет по какому-то предмету.

Итак, сегодня в программе:

• Низкоуровневое программирование WebGL.
• Рендеринг простого трехмерного объекта.
• Подробные комментарии процесса разработки.
• Много букв и код на JavaScript.
• Бесплатная выпивка и приятная музыка.

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

Одним из незамеченных героев вселенной HTML5 является XMLHttpRequest 2. Строго говоря XHR2 не является частью HTML5 и не является самостоятельным объектом. XHR2 это тот же XMLHttpRequest, но с некоторыми изменениями. XHR2 является неотъемлемой частью сложных веб-приложений, поэтому ему стоит уделить большее внимание.

Наш старый друг XMLHttpRequest сильно изменился, но не многие знают о его изменениях. XMLHttpRequest Level 2 включает в себя новые возможности, которые положат конец нашим безумным хакам и пляскам с бубном вокруг XMLHttpRequest: кросс-доменные запросы, процесс загрузки файлов, загрузка и отправка двоичных данных. Эти возможности позволяют AJAX уверенно работать без каких-либо хаков с новейшими технологиями HTML5: File System API, Web Audio API, и WebGL.

В этой статье будут освещены новые возможности XMLHttpRequest, особенно те, которые можно использовать при работе с файлами.

Привет %username%,
Сегодня, я бы хотел, представить сообществу утилиту написанную мои другом Николаем Бабинским — Cactus Obfuscator.
Cactus Obfuscator — это трех-модульное приложение созданное для обфускации JavaScript и CSS кода.

Cactus Obfuscator использует:
Apache Maven — плагин для Maven версий 2-3.
YUI Compressor — js/css обфускация.
Simple XML — XML мэппинг и (де)сериализация.

Содержание:
1. Использование как Maven плагина.
2. Использование как консольного приложения.
3. Создание конфигурационных файлов(XML).

Cactus может использоваться, как Maven плагин в java-проектах, а так же, как консольная утилита.

Разработчик Kevin Gaad, который судя по его профилю работает в компании Mozilla, представил свою разработку – компилятор .NET(C#) кода в JavaScript. Для демонстрации работоспособности библиотеки Кевин опубликовал портированный пример демонстрационного проекта игры на базе XNA 3.1.



Игра работает в браузерах IE9+, Firefox 4+, and Chrome 11. Разработчик пишет, что Opera не поддерживается из-за проблем браузера с ECMAScript5 и в Chrome 12 и 13 есть баги, которые мешают нормальной работе.

Проект компилятора с открытым кодом доступен на сайте GitHub. Разработчик сделал анонсы своей работы на Hacker News и Reddit, где можно ее прокомментировать. Кроме того, демонстрационный проект с игрой доступен здесь: Platformer.zip.

Выглядит впечатляюще.

Буквально недавно стало известно, что Firefox 6 получит SSE (уже есть в Opera 10.6+, Chrome, WebKit 5+, iOS Safari 4+, Opera Mobile 10+) так, что поддержка более половины всех браузеров (охват аудитории пользователей) уже не за горами. Настало время присмотреться к этой технологии. SSE предложил Ian Hickson более 7 лет назад, но только год назад она стала появляться в браузерах. У нас же есть WebSockets зачем нам ещё один какой-то протокол?! Но во всем есть свои плюсы и минусы, давайте посмотрим чем же SSE может быть полезен.

Идея SSE проста — клиент подписывается на события сервера и как только происходит событие — клиент сразу же получает уведомление и некоторые данные, связанные с этим событием. Чтобы понять полезность протокола SSE необходимо сравнить его с привычными методами получения событий, вкратце объясню их суть:

Эта статья объясняет как работает with в JavaScript и почему его не рекомендуется использовать.

Синтаксис оператора with

  with (object)
        statement

with создает новую область видимости «scope» и представляет свойства объекта «object» как локальные переменные выражения «statement». Пример (скобки не обязательны для одного выражения, но их рекомендуется использовать):

with({ first: "John" }) { console.log("Hello " + first); } // Hello John

Существует похожий объект свойства которого одновременно являются глобальными переменными — этот объект называется global (в браузерах это window). Но в отличии от глобального объекта, переменные, которые объявлены в выражении with (блок statement) не добавляются к объекту «object», а просачиваются во внешний scope и существуют дальше.

with({}) { var x = "abc"; }
console.log(x) // 'abc'

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

После четвёртой версии Firefox перешёл на новый ускоренный цикл релизов, так что новые версии браузера теперь будут выходить гораздо быстрее, чем раньше. Пятый Firefox уже дошёл до стадии беты, а в мае появилась альфа-версия Firefox 6 на движке Gecko 6.0. Финальный релиз ожидается в III кв. 2011 года, уже составлен предварительный список нововведений, которые важны для веб-разработчиков.



Интересным в Firefox 6 будет новая функция Scratchpad для удобного тестирования фрагментов Javascript прямо в браузере (расширение Workspace).

Объекты, классы, конструкторы

ECMAScript, будучи высоко-абстрактным объектно-ориентированным языком программирования, оперирует объектами. Существуют также и примитивы, но и они, когда требуется, также преобразуются в объекты. Объект — это коллекция свойств, имеющая также связанный с ней объект-прототип. Прототипом является либо также объект, или же значение null.

В JavaScript нет привычных классов, но есть функции-конструкторы, порождающие объекты по определенным алгоритмам (см. Оператор new).

Прототипное делегирующее наследование

Классическое наследование очень похоже на то, как люди наследуют гены своих предков. Есть какие-то базовые особенности: люди могут ходить, говорить… И есть характерные черты для для каждого человека. Люди не в состоянии изменить себя — свой класс (но могут поменять собственные свойства) и бабушки, дедушки, мамы и папы не могут динамически повлиять на гены детей и внуков. Все очень по земному.

Теперь представим другую планету, на которой не такое как на Земле генное наследование. Там обитают мутанты с «телепатическим наследованием», которые способны изменять гены своих потомков.
Разберем пример. Отец наследует гены от Дедушки, а Сын наследует гены от Отца, который наследует от Дедушки. Каждый мутант может свободно мутировать, и может менять гены своих потомков. Например у Дедушки был зеленый цвет кожи, Отец цвет унаследовал, Сын тоже унаследовал цвет. И вдруг Дед решил: «надоело мне ходить зеленым — хочу стать сними», смутировал (изменил прототип своего класса) и «телепатически» распространил эту мутацию Отцу и Сыну, вобщем посинели все. Тут Отец подумал: «Дед на старости лет совсем двинулся» и поменял свой цвет в генах обратно на зеленый(изменил прототип своего класса), и распространил «телепатически» свой цвет сыну. Отец и Сын зеленые, Дед синий. Теперь как бы дед ни старался Отец и сын цвет не поменяют, т.к сейчас Отец в своем прототипе прописал цвет, а Сын в первую очередь унаследует от Прототипа Отца. Теперь Сын решает: «Поменяю ка я свой цвет на черный, а моё потомство пусть наследует цвет от Отца» и прописал собственное свойство, которое не влияет на потомство. И так далее.

Несколько дней назад мы с TheShock создали топик в котором собирали ваши вопросы, касательно JavaScript (архитектура, фрэймворки, проблемы). Настало время ответить на них. Мы получили очень много вопросов, как в комментариях так и по email. Эта первая часть ответов — те вопросы, которые достались мне.

Веб-навигация — это только одно из применений фреймворка DepthJS, который представляет собой полноценную среду для взаимодействия веб-страницы и игрового контроллера. Kinect теперь можно использовать в играх и других веб-приложениях, причём для этого не нужно изучать никакой язык кроме Javascript.

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

Джед Шмидт, Томас Фухс и Дастин Диаз — достаточно известные в JavaScript-коммьюнити ребята в последнее время нашли себе новую развлекуху — писать полезные штуки размером не больше одного твита, то есть 140 байт. Даже домен зарегали — 140byt.es, куда приглашаются все желающие попробовать свои силы в написании супер-компактных функций.

Естественно, в ход идут все самые изощренные способы и техники уменьшения размера исходника. У них есть вики-страничка с советами, которую я и решил перевести.

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

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

Мы ответим на ваши вопросы, касаемо сомнительных моментов языка(this, arguments, bind, функции, замыкания, модули), ECMAScript 3, 5, 6+, реализации языка в конкретных браузерах, фрэймворков(jQuery, Prototype, Mootools...), архитектуре приложений(паттерны, MVC...), тестировании, и вообще всего с чем связан JavaScript и разработка на JavaScript(как клиентской так и серверной).

Если у вас нет возможности задать вопрос в комментарии, то вы можете связаться с нами по другим источникам, которые вы можете найти в профиле: azproduction, TheShock или по email: azazel.private@gmail.com, shocksilien@gmail.com

В конце недели, начале следующей мы опубликуем ответы на все ваши вопросы.
Этот пост краток, а ответы будут развернутыми!

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

С появлением WebGL появились и несколько новых типов данных, в частности типизированные массивы. Они все обладают похожим интерфейсом и по скорости значительно превосходят обычные массивы, обладают контролем границ и всего двумя методами и одним свойством. На данный момент если я не ошибаюсь то типизированные массивы поддерживаются последними версиями FireFox и Chrome.
Подробнее о типизированных массивах можно почитать в спецификации
Ну, а в статье мы рассмотрим основы основ

В настоящее в время существует огромное количество сетей распределенных вычислений. Я насчитал порядка 30. Наиболее крупные — Folding@home, BOINC, SETI@home, Einstein@Home, Rosetta@home (по результатам их вычислений было написано несколько десятков диссертаций). Вычисляют они все, что только можно вычислять распределено — от подбора md5 паролей до симуляции свертывания белка.
Каждая из эти сетей имеет необычно высокую производительность и включает в себя миллионы нодов. Производительность каждой сравнима с производительностью суперкомпьютера.

• Rosetta@home — более 110 Тфлопс
• Einstein@Home — более 355 Тфлопс
• SETI@home — более 560 Тфлопс
• BOINC — более 5.6 Пфлопс
• Folding@home — более 5.9 Пфлопс
• Bitcoin — более 9.4 Пфлопс

Сравните с суперкомпьютерами:

• Blue Gene/L (2006) — 478.2 Тфлопс
• Jaguar (суперкомпьютер) (2008) — 1.059 Пфлопс
• IBM Roadrunner (2008) — 1.042 Пфлопс
• Jaguar Cray XT5-HE (2009) — 1.759 Пфлопс
• Тяньхэ-1А (2010) — 2.507 Пфлопс
• IBM Sequoia (2012) — 20 Пфлопс

А теперь, давайте, подсчитаем существующий неиспользуемый потенциал пользователей интернет:
По расчетам на конец 2010 года пользователей Инернет было около 2000000000 (2 млрд).
Каждый пользователь имеет хотя бы 1 ядро процессора производительностью не менее 8 Гфлопс (AMD Athlon 64 2,211 ГГц).

По нехитрым математическим расчетам производительность такой сети составит:
8 * 109 * 2 * 109 = 16 эксафлопс (10¹⁸).
Такая сеть в 800 раз производительней, чем ещё не построенная IBM Sequoia (2012), в 1700 раз производительней, чем сеть Bitcoin и производительней всех суперкомьютеров и вычислительных сетей вместе взятых! Сейчас число пользователей ПК и Интерент растет, растет и число ядер. Безусловно, это число (16 эксафлопс) идеальное, никто не будет вычислять 24/7, но если каждый пользователь будет вычислять хотя бы 2 минуты в день (что, впринципе, более чем реально), то такая сеть сравнится с IBM Sequoia.

Сейчас распределенные браузерные вычислительные сети на JavaScript более чем реальны.

Всем привет. Данная статья посвящается методологии Разработки через тестирование (TDD) в применении c JavaScript.
Напишу лишь вкратце о методологии TDD, более подробную информацию можно почерпнуть из ссылки выше.

Разработка через тестирование подразумевает, что перед написанием кода необходимо:

• создать тест, который будет тестировать несуществующий код, тест соответственно не пройдет
• написать код и убедиться, что тест прошел
• почистить код
• повторить

Гибкость Javascript позволяет создавать объекты множеством способов. Но как это нередко случается, разнообразие таит в себе множество подводных камней. Из этой статьи Вы узнаете о том, как разглядеть и обогнуть эти опасные рифы.

13 мая компания CloudMade (со-основатель компании — основатель OpenStreetMap Стив Кост) объявила о новой open source JavaScript-библиотеке для любых карт под названием Leaflet.

Как написал Mourner (он же на Хабре — Mourner), автор этой библиотеки, живущий в Киеве (кстати, он будет рад услышать отзывы и ответить на ваши вопросы на форуме OpenStreetMap и здесь на Хабрахабре):

«Leaflet задумана как библиотека, одинаково хорошо работающая и на десктопных браузерах, и на мобильных устройствах (iPhone/iPad, Android) — очень быстрая, легковесная, с простым API, красивым и понятным ООП-кодом. В отличии от OpenLayers (самого популярного выбора на сегодняшний день) мы не пытаемся впихнуть в нее все фичи, о которых только можно помыслить, раздувая код до немыслимых размеров — только самое основное, минимальный набор, который удовлетворяет нужды 99% применений карт в онлайне (тайлы, маркеры, векторы, попапы), но реализовывая их максимально лучшим образом.»

Взаимодействие частей приложения друг с другом — важная часть архитектуры любой программы.
И существует немало паттернов для их реализации. Я бы хотел на примере веб-приложения показать применение одного из них, а именно — Event-driven модели.
Она хорошо известна любому frontend-разработчику — всякий раз, работая с событиями DOM, вы используете эту модель. Давайте попробуем построить на ней не маленькое веб-приложение — файловый менеджер.