JavaScript *

Однажды я зашел на rememberthemilk.com и понял, что хочу такое же контекстное autocomplete меню в свой проект. В результате получился небольшой jquery плагин, который хочу презентовать в этом посте. Работает в ie6+, opera, safari, firefox, chrome (тестировал в последних версиях). В кратце расскажу в чем суть «контекстного» меню в RTM-стиле.

Это меню присоединяется к input-элементу, но, в отличие от обычных autocomplete меню, оно «всплывает» не для ввода всего значения элемента, а для какой-то логической части поля ввода. При этом меню позиционируется непосредственно под автодополняемым текстом. Вот как это выглядит:



Лицензия проекта — MIT / beerware.
Скачать библиотеку с примерами можно тут: js-context-autocomplete.googlecode.com/files/js-autocomplete-v5.tar
Последнюю ревизию забираем тут: svn checkout js-context-autocomplete.googlecode.com/svn/trunk js-context-autocomplete-read-only
Кому интересно поучаствовать в проекте — пишите в личку.
Временное online-demo (upd)

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

Нашел интересный ява-скриптовый спецэффект, которым под Новый Год можно украсить страницы сайта. Нет, это не доставшие всех снежинки, это ёлочная гирлянда, лампочки которой весело лопаются при наведении на них курсора мыши. Почти что пупырчатый полиэтилен :)

Посмотреть на результат работы скрипта можно на странице автора. Там же, если заглянуть в исходники, можно легко разобраться как подключить его к своей странице. Также, до старого нового года, результат работы скрипта в условиях приближенных к боевым можно увидеть на моем Зеруте. Скачать гирлянду, вместе со снежинками, можно со страницы www.schillmania.com/projects/snowstorm.

Обратите внимание на вот эту иллюстрацию:



Красиво, правда?

Для меня одним из самых проблемных мест Javascript было управление переменными. Излагаю простым русским языком.

Вышел первый стабильный релиз свободного графического Ajax-фреймворка Qooxdoo (произносится ['ku:ksdu:]), использующего JavaScript и предоставляющего почти всё необходимое для создания web-приложений с десктопоподобным интерфейсом. По словам разработчиков, web-приложения при помощи Qooxdoo можно создавать даже без знания HTML, CSS и DOM модели.

Фреймворк запускается в большинстве браузеров (Internet Explorer, Firefox, Safari, Opera и Chrome). Чтобы получить представление о работе фреймворка можно взглянуть на тестовую среду и демо-приложения, демонстрирующие в интерактивном режиме возможности qooxdoo, такие как многочисленные виджеты, Drag&Drop интерфейс, диспетчеры компоновки, визуальные темы, поддержку организации работы многоязычного интерфейса. Для разработчиков особый интерес представляет поставляемый в составе пакета инструментарий, полностью охватывающий процесс разработки, включая валидацию кода, компиляцию JavaScript, юнит-тесты, автоматическое тестирование GUI и средства отладки аналогичные Firebug.

Как известно, при работе с фреймами для обеспечения безопасности браузеры не позволяют JavaScript-коду обращаться со страницы одного домена на страницу другого домена. В этой краткой статье мы рассмотрим аспекты кросс-доменной работы в JavaScript, опишем один из «хороших» частных случаев, а в конце — я надеюсь в хабракомментах получить ответы на оставшиеся вопросы.

UPD1: те, кто здесь впервые, — обязательно читайте комментарии к этой статье, в них очень много интересного накидали (как я и надеялся). Спасибо!

UPD2: найдено решение задачи авторесайза для всего, кроме Opera < 10.

UPD3: полностью кроссбраузерное решение задачи с ресайзом приводится ниже. Его особенности: а) не портится history, б) работает даже в Опере 7 и IE6, в) для ускорения работы высота фрейма всегда делается кратной N=30 пикселям. Фактически, там 2 алгоритма — для IE (через location.hash) и для «не-IE» (через window.name и «простукивание» возможных высот в цикле). См. также комментарии к статье, там разъяснения, почему так, а не иначе.

UPD4: статья начала принимать черты монументальной, посему она переехала ко мне в Наблы на dkLab: dklab.ru/chicken/nablas/58.html — там же все примеры кода самой последней актуальности. Но, конечно, в случае изменений я буду их и тут тоже анонсировать, добавляя UPD5, UPD6 и т.д.

В связи с последними инициативами гугла учитывать время загрузки страницы становится всё более актуально асинхронно подгружать части веб-страниц уже после загрузки основного минимума. Реклама — один из претендентов на отложенную загрузку, но простой ajax тут не поможет, т.к. в общем случае в подгружаемом куске может встречаться, например, document.write, и если документ уже загружен и закрыт то данный метод открывает его заново, обнуляя при этом.

Гугл в этом плане не сильно помогает, т.к. основной описываемый метод — подмена document.write своим собственным методом, который тупо добавляет аргумент в конец документа, но если вызов идёт не в конце и писать надо куда-то в середину — возникает проблема. На хабре описывался фрейморк Fullajax, который вроде справляется с этим, но как именно — я пока не смотрел.

У меня возникла другая идея, возможно — велосипед, но желание попробовать было слишком сильным. А именно, подгружать отложенный код в скрытый iframe, а после загрузки переносить его содержимое туда, где оно должно быть. Более того, чтобы не делать лишних запросов к серверу, используется data URI. Такой подход работает в FF и Opera но не работает в IE и Chrome.

Когда-то я уже писал, как интегрировать OpenID авторизацию в ваш сайт. Речь шла о серверной части.
Сейчас же я говорю о UI части — виджет для выбора провайдера.

В качестве клиентской библиотеки для своего проекта я выбрал prototype и первым делом я полез в гугл поискать готовое решение. Удалось найти такое, но только для JQuery — code.google.com/p/openid-selector

И так мне ничего не оставалось как написать OpenID selector самому. Вот что получилось

Вот такая простенькая задачка поставила меня в тупик:

var a=2
b=a++ + (--a * ++a)
//Чему равно b?

Исходя из приоритета операций скобки () имеют наивысший приоритет, значит сначала должно выполняться выражение в скобках, затем все остальное?

Напишите ваш вариант ответа, а потом запустите код в браузере (любом).

26 декабря, в Киеве, состоятся мастер-классы: «Профессиональноe javascript-программирование + COMET» и «Секреты клиентской оптимизации».

Мероприятия уникальные, проводятся в Киеве впервые.

Недавно столкнулся в исследованиях с проектом trimpath. Лично для себя ничего интересного не обнаружил, кроме интересного способа расстановки точек останова (я его немного видоизменил от оригинала — иначе длинные строки некорректно отображались в опере и ИА)

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

Столкнулись тут мы с валом резюме на вакансию JS программера в нашу новую компанию. Понятно, что обработать огромное количество заявок силами двух человек весьма сложно. Разумным выходом является тест, по результатам которого некоторую часть кандидатов мы приглашаем на собеседование. Тест я написал на этих выходных, результат под катом.

Внимание, вопрос JS программерам, есть ли какие-то вещи, которые не нашли отражения в этом тесте?

Здравстуйте, уважаемое хабрасообщество. Реквестирую консультацию.
Позавчера, во время разработки jQuery.keyboard столкнулся с абсолютной браузерной несовместимостью, ужасно неприятной непоследовательностью и т.д. в возврашении значения event.keyCode в различных браузерах. На удивление, единственный, кто меня порадовал — IE 6 (ies4linux) и больше всех огорчила — опера 10. Хромиум и фокс же ж вернули приблизительно одинаковый результат.

Многие задают мне один и тот же вопрос:
«Как дебажить этот $%*!%$! JavaScript?».

Так вот, во-первых JavaScript — не $%*!%$! А как я его дебажу — сейчас расскажу.

(Примечание: наверное эта статья больше для новичков. Так что не судите строго)

Есть случайное такое хобби — программирование на JavaScript.

Недавно возник у меня глобальный вопрос:
Как часто JS программисты задумываются над [function statement]?

Вот такие необычные часы сделал с помощью JavaScript и MooTools какой-то француз со смешным ником TOKI WOKI.

Исходый код часов

Встал задача, выбрать JS библиотеку для нового проекта. Я уже работал с Prototype и JQuery, в разных проектах и выбирал в основном из них. Обе библиотеки имеют свои слабые и сильные стороны. Холивар на данную тему можно развивать до бесконечности, но меня в первую очередь интересует скорость.

Благодаря приложению пользователя lusever, я провел тест производительности. В тесте так же участвовала не без известная библиотека Ext JS. Тестируется скорость выборки DOM элементов по селекторам, можно зайти на сайт и попробовать пройти тест самостоятельно, кстати, там есть очень интересные примеры селекторов, о которых я ранее не знал.

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

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

Вот этим навеяло habrahabr.ru/blogs/javascript/66242

Вопреки расхожему мнению ИЕ все таки умеет назначать аксессоры, правда только в VB, чего для некоторых задач вполне достаточно.

<script language="vbscript">
' Объявляем класс, экземпляр которого в последствии будем использовать из яваскрипта
Class Accessor
  Public Property Let hook(val)  ' объявляем сеттер для свойства hook класса Accessor
   MsgBox val
  End Property
End Class

Dim access ' объявление переменных в VB обязательно
Set access = New Accessor  ' создаем экземпляр класса Accessor
</script>

<script language="jscript">
// т.к. у VB и JS общее пространство имен, можно вполне использовать созданный ранее access
access.hook = 'ololo';
</script>

* This source code was highlighted with Source Code Highlighter.

Другими словами аксессоры есть в VB, VB есть во всех IE и пространство имен VB и JS общее, можно пользовать.