JavaScript *

Всем привет!

Очень часто слышу вопрос «где в интернете взять справочник по javascript»?

Большинство справочников содержат устаревшую информацию и практики программирования.
До текущего момента самое современное, чем можно было пользоваться — MDC/MSDN. А там многое только на английском.

Хочу представить новый, лично мною переведенный/написанный справочник: http://javascript.ru/manual.

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

P.S. Пожалуйста, пишите комментарии, давайте на него ссылки и рекомендуйте. Будем улучшать и дальше.

P.P.S. Оффлайн-вариант справочника также есть, в формате CHM.

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

Проверяет на валидность json код, строит разного вида древа элементов.

Проект парсера

Раньше я проанализировал функциональность обьектов и свойств ECMAScript 5. Это огромный новый аспект языка и он заслуживает особого рассмотрения.

Есть целый ряд других новых функций и API, которые также требуют внимания. Самыми значимыми из которых являются строгий режим и родная поддержка JSON.

ECMAScript 5 идёт по своему пути. Воскреснув из пепла ECMAScript 4, который был ужат обратно к ECMAScript 3.1, который далее был вновь назван ECMAScript 5 (подробнее) — он приходит с новым слоем функциональности, построенным на базе нашего любимого ECMAScript 3.

Анонсировано несколько новых API, включённых в спецификацию, но самая интересная функциональность заключена в коде обьектов и свойств. Этот новый код дает возможность существенно влиять на то, как пользователи смогут взаимодействовать с объектами, позволяя обеспечить геттеры и сеттеры, предотвратить перечисление, манипуляции, или удаление, и даже предотвратить добавление новых свойств. Короче говоря: Вы будете иметь возможность повторить и расширить существующий набор API для JavaScript (например, DOM), с помощью JavaScript (не используя более ничего).

Многие знают о механизме Event-Dispatcher-Listener'ов, реализованному во многих языках программирования. Я же создам подобный механизм не для Event'ов, а для любого метода объекта JavaScript — Object.
Я не претендую на оригинальность, нет. Основная цель статьи — рассмотреть интересные механизмы прототипирования в JavaScript, создание декораторов и, собственно, постараться хоть немного раскрыть мощь и гибкость это чудесного языка, который так часто обижают и недооценивают.

UPD1: краткое содержание:
1. Создание декоратора на JavaScript
2. Создание механизма Function call listener с помощью декораторов

UPD2: от 09.06.2009
В конце статьи я добавил раздел Update: Decorator Mark II. В нём — исправления и улучшения (я не перекраивал всю статью из-за этого)

Итак, первый (и, надеюсь, не последний) рецепт в моей поваренной книге JavaScript.

Итак, мы выбрали браузер вместо отдельно стоящего толстого клиента. Пользователь очень хочет вводить данные. Однако, обычные формы плохие. Потому, что:

Данный язык уже был на хабре, однако пост был посвещен самому Processing, думаю многим будет интерессно почитать и про Processing.js.
Processing.js — это открытый язык программирования для визуализации в вебе который представляет собой портированный Processing на JavaScript. Processing.js использует Js для анимации и тег canvas для работы с изображением. Сразу же можно заметить некоторый минус данного подхода, он не особо дружен с IE, причем по заявлениям Microsoft поддерживать тег canvas они и в дальнейшем не собираются. Во всяком случае 8 работать отказался. Синтаксис реализации очень похож на синтаксис Java.

Привет, Хабр

В этом коротком очерке хотел бы рассказать о маленькой (по словам авторов) библиотеки на JavaScript — Raphaël. Данная библиотека использует для работы SVG и VML и служит, как не сложно догадаться для облегчения работы с векторная графикой в вебе.
Так же по утверждению создателей работает во всех актуальных на даных момент браузерах, а именно Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. К сожалению обошли создатели внимание вторую лису, хотя сюда по данным лайвинтернета на ней приходится почти 2% пользователей, что вообще немало. Да, и не смотря на то, что Хром не заявлен, в нем тоже все работает как часы.

Честно говоря, у меня, давно сложилось впечатление, что если клиент (в данном случае броузер) что-то должен с сервера забирать без перезагрузки страницы, то это обязательно должен быть AJAX XMLHttpRequest. Ткнул куда-то пользователь, сработало событие, сгенерировался AJAX XMLHttpRequest-запрос, пришел с сервера ответ, коллбэк обработал его и пользователь что-то увидел.

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

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

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

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

После небольшого исследования выяснилось, что не всегда данный размер возможно получить обычными способами. Будь то методы jQuery, prototype или обычное обращение к параметрам DOM.

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

Многим JavaScript-разработчикам приходилось сталкиваться с объектами, перечисленными в заголовке, например, при решении следующих задач:
— создание визуальных редакторов (wysiwyg),
— поиск в окне браузера,
— выставление BB-кода,
и т.д.

В этой статье автором предпринята попытка собрать перевод документации об этих объектах в одном месте + написать небольшие сопроводительные примеры. Перевод вольный, не дословный, так что если встретите неточность или корявую формулировку — пишите в комментариях.

В целом пост носит справочный характер, и, надеюсь, кому-то упростит разработку.

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

Test case:




Проверено в Safari 4 Public Beta (528.16) под Windows.

В отличие от расширения Greasemonkey в мозилле, Опера не предоставляет аналога функции GM_xmlhttpRequest для кросс-доменных запросов (XDR). Это, понятное дело, сильно ограничивает возможности и сферу применения UserJS. Используя XDR, например, можно реализовать Last.fm-скробблер для различных онлайн-проигрывателей музыки (типа vkontakte.ru или MySpace).

Однако кросс-доменные запросы можно заставить работать в Опере с помощью трюков с iframe'ами и window.name транспортом. Под катом я покажу как это сделать и предъявлю простую библиотеку, реализующую все колдовство.

Начал замечать что на Хабре появляются статьи по программированию, может на это натолкнули фразы типа «хабр уже не тот», но это не так важно, потому как мне это нравится, всегда хотелось узнать что-то новенькое … моя первая статья привела к огромному краху, поэтому почитав людей, я повторю свои усилия и начну цикл заметок о JavaScript от самого начала и до тех пор, пока это будет востребовано =)

Мы парсим JSON-строку в JSON-объект, когда обрабатываем AJAX-ответы сервера. Обычно, для парсинга JSON-строки мы используем eval или new Function, однако IE8 и Firefox3.1 имеют встроенную поддержку JSON (встроенный парсинг работает значительно быстрее). Как определить на практике выбор между этими тремя методами? И как узнать чья производительность быстрее среди такого большого количества браузеров?

Достаточно много браузеров (Opera 9.6, Google Chrome 2, Safari 4, Firefox 3.5) обзавелись поддержкой весьма удобного интерфейса ElementTraversal, который позволяет перемещаться по DOM-дереву, игнорируя текстовые узлы. В этих браузерах для каждого элемента стал доступен следующий набор новых getter'ов:

• firstElementChild — первый дочерний элемент;
• lastElementChild — последний дочерний элемент;
• nextElementSibling — следующий соседний элемент;
• previousElementSibling — предыдущий соседний элемент;
• childElementCount — количество дочерних элементов.

Вспомнили на работе про клавогонки. Я немного поиграл, но мои навыки машинистки не дают мне особых шансов )

Зато шансы даёт мой ум — и я им воспользуюсь в полной мере.
Итак, всего-то и необходимо, что знать немного JavaScript, да представлять, как создатели могли защитить своё детище.

Защиты, из тех, что я увидел — это подсовывание левых букв при копировании и подмена русских букв английскими. Естественно я это увидел не с первого раза )

В итоге задача проста: берём слова из источника (благо они так мило выделяются), вставляем по буковке (мы же печатаем) в поле для ввода, не забывая вызывать событие нажатия кнопки (конкретнее — keyup). Не хватает, конечно, возможности ошибаться — но добавить её легко — было бы время. Также не пугает капча, вылезающая при переходе за 500 знаков в минуту — она обходится с помощью знакомых, или помощью того же JavaScript'а.

Ну и да, ещё необходимы Firefox + Firebug :)

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

Сегодня я расскажу о библиотеке Typeface.js, которая, как видно из названия, работает на чистом JavaScript.