Обновить
142.88

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Iterators & Generators

Время на прочтение12 мин
Охват и читатели20K
Обработка элементов коллекции/массива обычная и частая операция. В JavaScript есть несколько способов обхода коллекции начиная с простого for(;;) и for a in b

var divs = document.querySelectorAll('div');
for (var i = 0, c = divs.length; i < c; i++) {
    console.log(divs[i].innerHTML);
}

var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
    console.log(i, obj[i]);
}

У объекта Array есть методы обхода всех элементов map(), filter()
var numbers = [1, 2, 3, 4, 5];
var doubled = numbers.map(function (item) {
    return item * 2;
});
console.log(doubled);

В Firefox есть "заполнитель массива" (Array comprehensions)
var numbers = [1, 2, 3, 4];
var doubled = [i * 2 for each (i in numbers)];
console.log(doubled); // [2, 4, 6, 8]

Итераторы и Генераторы появились в JavaScript 1.7 (по версии Mozilla) они есть пока в Firefox 2+ (в статье будет упомянут способ как их можно «эмулировать» почти во всех браузерах с костылем) Итераторы и Генераторы вносят механизм, позволяющий управлять поведением for in и инкапсулировать процесс получения следующего элемента в списке объектов.

Часто для обхода и обработки элементов массива мы пишем большие конструкции, часто копипастим их части. Задача Генераторов и Итераторов усовершенствовать этот процесс, добавив синтаксический сахар.
Читать дальше →

Введение в prototype.js

Время на прочтение4 мин
Охват и читатели29K
Подключаюсь к разработке проекта, в котором используется этот замечательный js-фреймворк. До этого использовал только jQuery, поэтому пришлось изучать эту новую для меня библиотеку.

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

Все заинтересованных — прошу под кат
Читать дальше →

Flash vs JavaScript, V8 Benchmark Suite

Время на прочтение2 мин
Охват и читатели3.9K
iq12 (что примечательно, это студия, которая профессионально занимается разработкой при помощи Flash) портировали на Flash V8 Benchmark Suite — набор тестов предназначенный для определения скорости исполнения JavaScript в разных средах. Основной целью этого было сравнить скорость исполнения Flash vs JavaScript (вычислений, но не отрисовки). И, в итоге, они получили очень интересные результаты — за последние два года все популярные JavaScript-движки обогнали Flash по скорости вычислений:


Читать дальше →

Пример использования KnockoutJS

Время на прочтение9 мин
Охват и читатели17K
День добрый, хабрасообщество!В статье будет рассмотрен процесс создания web-страницы редактирования списка пользователей. Готовый пример можно забрать тут. Статья является не обзорной, а приближенной к реальным боевым действиям, потому настоятельно рекомендую ознакомиться с простым примером.
Мне интересны детали

Модульное проектирование RIA проектов

Время на прочтение4 мин
Охват и читатели3.4K

Проблемы при разработке больших проектов


ninjaОтделение котлет данных от представления, проектирование, велосипеды… главное без фанатизма. Какая проблема часто встречается при разработке RIA приложений. Команда сильных программистов «влюбляется» в новый проект, и с мыслями «сейчас мы сделаем нечто — главное все сделать самим, чтобы ни один чужой баг не закрался» начинают отказываться от готовых фреймворков, библиотек, решений.
Правда существует одно логичное объяснение этой тенденции, боязнь завязаться на чужой продукт, бывает такое, что в ходе разработки выясняется — такой интерфейс будет очень сложно разработать на доступном инструментарии, и рождаются костыли, правки чужих фреймворков и тд. Хотел бы предложить решение этой проблемы. Создание менеджера интерфейсов (модулей). Один модуль может использовать ExtJS, другой dhtmlx, а может и вообще чистый Javascript
Читать дальше →

Lightcycle demo using WebGL (part 0)

Время на прочтение17 мин
Охват и читатели4.4K

Вступление


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

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


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

Новые возможности XMLHttpRequest2

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

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

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

Cactus Obfuscator обфускатор JavaScript/CSS

Время на прочтение4 мин
Охват и читатели9.6K
Привет %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-проектах, а так же, как консольная утилита.

Читать дальше →

Компилятор .NET в JavaScript и пример XNA-демо в браузере

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

image

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

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

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

Создание приложений реального времени с помощью Server-Sent Events

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

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

Оператор with и почему его не стоит использовать

Время на прочтение2 мин
Охват и читатели14K
Эта статья объясняет как работает 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'

Читать дальше →

Cross-domain «ajax» — простое решение

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

В Firefox 6 интегрируют расширение Workspace для предпросмотра скриптов

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



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

Ближайшие события

Основы и заблуждения насчет JavaScript

Время на прочтение9 мин
Охват и читатели57K

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

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

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


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

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

JavaScript F.A.Q: Часть 1

Время на прочтение15 мин
Охват и читатели75K
image

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

DepthJS: фреймворк для веб-навигации с помощью Kinect

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

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

Техники сжатия кода

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

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

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

Читать дальше →

FAQ по JavaScript: задавайте вопросы

Время на прочтение1 мин
Охват и читатели7.6K

Предлагаю продолжить тему часто задаваемых вопросов на хабре. Неделя 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

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

Пять способов вызвать функцию

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

Типизированые массивы

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

Вклад авторов