Обновить
256K+

JavaScript *

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

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

Парсим URL

Время на прочтение25 мин
Охват и читатели68K
Хочу поделиться одной полезной утилиткой, написанной на pure JavaScript, — URL. По сути это небольшой парсер URL'ов, работающий почти как window.location, но не перезагружающий страницу браузера при манипуляциях.

А заодно скажу пару слов про getters & setters в JavaScript.

UPD1: по просьбам трудящихся, вынесу сюда примеры:
// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href // my.site.com/somepath/relative/path/index.html
u.href = '/absolute/path.php?a=8#some-hash'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.hash // #some-hash
u.protocol = 'https:'
u.href // my.site.com/absolute/path.php?a=8#some-hash
u.host = 'another.site.com:8080'
u.href // another.site.com:8080/absolute/path.php?a=8#some-hash
u.port // 8080
// и так далее, и тому подобное

* This source code was highlighted with Source Code Highlighter.

Работает в FF3+ (может и в 2+, не пробовал) и в IE6+ ( и это — моё ноу-хау :-) ).
Разобрана в статье также полностью кросс-браузерная реализация, но в использовании — немного более громоздкая:
// Пусть текущий URL = 'http://my.site.com/somepath/'
var u = new URL('relative/path/index.html')
u.href() // my.site.com/somepath/relative/path/index.html
u.href('/absolute/path.php?a=8#some-hash')
u.href() // my.site.com/absolute/path.php?a=8#some-hash
// и т.д.

* This source code was highlighted with Source Code Highlighter.


Да, и я привожу свой листинг полностью, извиняйте, так надо.

Прошу под кат...

Реализация паттерна декоратор на JS

Время на прочтение10 мин
Охват и читатели6.9K
Суть паттерна в том, что есть класс с фактической функциональностью (компонент) и опциональными классами-обертками, которые дополняют основной функционал (декораторы). А фишка в том, что декораторов может быть сколько угодно, совмещаться они могут в произвольном порядке и (поскольку требуют от компонента только интерфейса) — могут работать с разными компонентами.

Безусловно, реализовать что-то похожее можно даже за счет только лишь того, что функции в JS являются объектами первого уровня, но мне бы хотелось поделиться реализацией весьма близкой к ГОСТу GoF'у.

UPD: ссылка на рабочий пример, спасибо Barttos.

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

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

Копируем в буфер обмена в FireFox 3.5 и IE8

Время на прочтение4 мин
Охват и читатели33K
С приходом 10го флеша, ФФ3.5 и ИЕ8, на многих сайтах перестала работать волшебная кнопка «Скопировать в буфер». Перестала работать из соображений безопасности (что бы когда заходишь на какой либо сайт, у тебя в буфере не появилась левая ссылка, или рекламный текст, или злоумышленники не применили это фичу в других целях).
Как же с этим бороться?

Русские пароли в Safari/Mac OS X

Время на прочтение2 мин
Охват и читатели14K
Сегодня столкнулся с такой проблемой: нужно ввести пароль, содержащий русские символы. Но не тут-то было. Safari просто отказалась переключать язык! Простым решением было бы ввести пароль в TextEdit и скопипастить его в поле для ввода пароля, но организм требовал более элегантного решения проблемы. И вот, вспомнив приемы CSS-джитсу и Javascript-фу, превозмогая пятничное стремление пойти напиться или пройти наконец Braid, ваш покорный слуга ринулся в бой...
Читать дальше →

Электронное табло

Время на прочтение1 мин
Охват и читатели3.9K
В одном из моих проектов, которому возможно никогда не суждено родиться (из-за отсутствия времени), понадобилось электронное табло.
Но прилагательное «электронное» носит исключительно образный характер. Нужна была реализация электронного табло в Веб, такого, чтобы никого не убило током и визуально было похоже на своих настоящих электрородителей.
Что же получилось?

Шпаргалка => Cross Domain AJAX. Dynamic script Tag Hack

Время на прочтение2 мин
Охват и читатели5.7K
Так сложилось исторически (из-за соображений безопасности), что Javascript-обьект XMLHttpRequest, который лежит в основе AJAX, не может делать кросс-доменные вызовы. Это бесполезное ограничение: для злоумышленников не представляет особой проблемы, а для разработчиков создает некоторое неудобство. В следующих поколениях браузеров эту проблему обещали решить, но не раньше чем W3C хотя бы одобрит новые стандарты.

Есть море хаков чтобы обойти это ограничение, но самый популярный это Dynamic Script Tag Hack. Именно через этот хак организован доступ к многим API современных веб-приложений.

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

InfoVis Toolkit

Время на прочтение1 мин
Охват и читатели2.4K
InfoVis Toolkit — предоставляет инструменты для создания интерактивных представлений данных в Веб с помощью JavaScript. Распространяется с открытым исходным кодом под лицензией BSD. Поддерживаются основные браузеры: IE6+, Firefox2+, Safari3+, Opera9.5+
Читать дальше →

prettyPrint

Время на прочтение1 мин
Охват и читатели9.6K
imageТе из вас кто следит за автором на Github могли заметить, что недавно он добавил новый проект под названием «prettyPrint».
«prettyPrint» — браузерный дампер переменных для JavaScript аналогичный cfdump для ColdFusion. Он позволяет выводить на экран объекты любого типа в виде таблиц для просмотра во время отладки.
Посмотреть пример.
Читать дальше →

Подводные камни оператора сравнения

Время на прочтение1 мин
Охват и читатели11K
Оператор сравнения (==) в JavaScript не является транзитивным. Переводя с математического, это означает, что из того, что a==b и a==c не следует, что b==c.

Простой пример:

var a = "строка";
var b = new String(a);
var c = new String(a);

alert(a==b); // true
alert(a==c); // true
alert(b==c); // false


В чём же дело? А дело в том, что переменные b и c — это объекты (причём разные), а a — примитивное значение (строковой литерал). Две переменных-объекта считаются неравными, если они ссылаются на разные объекты. При сравнении же примитивного значения и объекта используются другие правила — всё приводится к строкам и затем сравнивается.

Чем это чревато? Чревато очень трудноуловимыми ошибками. С точки зрения программиста примитивное значение типа string и объект, созданный из строки конструктором String(), практически неотличимы, и даже во многих книгах этот момент упоминается мимоходом, без конкретных примеров.

Аналогичная ситуация и с другими примитивными типами и соответствующими объектами, например, Number.

Так что будьте осторожны при сравнивании двух переменных!

MooTools — AJAX + document.write

Время на прочтение1 мин
Охват и читатели1.9K
Наконец кто-либо из «библиотек-гигантов» решил внедрить корректную обработку document.write при использовании AJAX. MooTools Core Dev Thomas Aylott демонстрирует алгоритм переопределения document.write.

Использование данного алгоритма позволит в AJAX осуществлять подгрузку HTML страниц со скриптами содержащими document.write. Такими могут быть страницы с Google AddSense, страницы содержащие JavaFX, другие.

Из анализа алгоритма вытекает
Читать дальше →

JsImageBox — легкий аналог LightBox

Время на прочтение1 мин
Охват и читатели8.3K
jsImageBox — компактный, легкий в подключении скрипт, аналог lightbox. Позволяет показывать увеличенные изображения во всплывающем блоке.

Код скрипта занимает всего 9кб.

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

Бесплатен. (лицензия GPL)

Изначально разрабатывался для собственного использования.

Сайт проекта JSImageBox — JavaScript галерея

Безопасный JSONP? Интересная особенность Bing API

Время на прочтение3 мин
Охват и читатели1.9K
Я только что изучил API нового поисковика Bing от Microsoft (который фактически является ребрендингом Live Search, также с переключением на «просмотр с малой полосой пропускания», чтобы иметь возможность использовать документы более гибко), и нашёл интересный финт для защиты кода от выброса исключений.
Читать дальше →

Справочник по javascript

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

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

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

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

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

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

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

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

Микропаттерны оптимизации в Javascript: декораторы функций debouncing и throttling

Время на прочтение2 мин
Охват и читатели60K
Декораторы функций позволяют добавить дополнительное поведение функции, не изменяя ее. Сигнатура оригинальной и декорированной функции полностью совпадают.
Читать дальше

ECMAscript 5: Строгий режим, JSON, и так далее

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

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

ECMAscript 5: Обьекты и Свойства

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

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

Слушаем вызовы функций в Javascript

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

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

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

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

Улучшаем формы или Веб-Восемь-Ноль-Сто-Три

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

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

Processing.js

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