Обновить
143.28

JavaScript *

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

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

Нужны ли «приватные» свойства объектов в Javascript?

Время на прочтение4 мин
Охват и читатели5K
В последнее время во многих статьях (на Хабре и не только) я часто вижу примеры эмуляции приватных свойств объектов в JS через замыкания. Авторы обычно объясняют это своим желанием использовать такой механизм ООП, как инкапсуляция, и тем самым гарантировать работу с объектом исключительно посредством его методов, не затрагивая напрямую свойства.

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

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

Парсим 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.8K
Суть паттерна в том, что есть класс с фактической функциональностью (компонент) и опциональными классами-обертками, которые дополняют основной функционал (декораторы). А фишка в том, что декораторов может быть сколько угодно, совмещаться они могут в произвольном порядке и (поскольку требуют от компонента только интерфейса) — могут работать с разными компонентами.

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

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

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

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

Javascript от а и до… II

Время на прочтение7 мин
Охват и читатели11K
Вот и продолжение первой части, много времени прошло, и вот… здесь я, как и обещал, расскажу поподробней об основных типах. Для начала пара замечаний, первая часть не прошла естественно без критики, так что вступление будет 'работой над ошибками'. В дальнейшем такие работы над ошибками буду вставлять регулярно, и надеюсь хабралюди этому посодействуют…
Читать дальше →

Копируем в буфер обмена в 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 современных веб-приложений.

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

Оптимизация с помощью замыканий

Время на прочтение2 мин
Охват и читатели1.7K
Дано — раз в секунду дергается AJAX'ом скрипт, в нем несколько вызовов одной функции (назовем ее updater) с разными аргументами. Функция в соответствии с аргументами апдейтит некоторый набор DOM-элементов (меняет контент, скрывает, показывает) на текущей странице. Используется jQuery, визэффекты и т.п. Т.е. на клиента приходит примерно такой код…
updater('id1', 10, 20);
updater('id33', 11, 22);
updater('id181', 102, 27);


* This source code was highlighted with Source Code Highlighter.

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

Требуется по-возможности быстро и безболезненно, не меняя верстку и не отказываясь от jQuery оптимизировать процесс.
Далее...

InfoVis Toolkit

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

Передача функций через JSON

Время на прочтение3 мин
Охват и читатели18K
Из этого топика вы узнаете как отправить JavaScript функции, через JSON используя PHP (сама концепция может быть применена и для других языков).

PHP, начиная с версии 5.2.0, включает функции json_encode() и json_decode(). Эти функции кодируют данные в формат JSON и декодиуют JSON в ассоциативные массивы. В json_encode() не может быть закодирована функция. В ряде случаев это чертовски неудобно.
  1. Добавлен пример реализации в Zend Framework.
  2. Вопрос к кармавампирам — вы знаете вариант как передать handler для создания объекта иначе?
  3. Комментарий о том для чего и кому это нужно.
Читать дальше →

prettyPrint

Время на прочтение1 мин
Охват и читатели9.5K
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.

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

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

Скорость работы у последних коммуникаторов

Время на прочтение1 мин
Охват и читатели615
Был произведет тест по скорости работы JavaScript в браузерах на основе WebKit. Тесты производились на коммункаторах последних поколений. Естественно iPhone 3G S занимает первенство, как в рекламных целях, так и не стоит забывать о мощности его процессора. Для тестов использовался SunSpider Benchmark
image

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
Декораторы функций позволяют добавить дополнительное поведение функции, не изменяя ее. Сигнатура оригинальной и декорированной функции полностью совпадают.
Читать дальше

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