JavaScript *

Вы наверняка не раз видели javascript-реализации контекстных меню на базе популярных библиотек, таких как jQuery и prototype. А значит обязательно сталкивались с основными их недостатками: неудобностью API, большим количеством кода, требовательностью к ресурсам, любовью к генерации огромного количества html кода. В один прекрасный момент эти проблемы пересилили мою лень и я решил бороться с ними, поставив следующие задачи:

• Минимум html кода, генерируемого для меню (зачем нам засорять ДОМ)
• Лаконичность js кода для создания меню (API вызова без копипасты)
• Оптимум гибкости при работе (многоуровневые, динамически модифицируемые меню)
• Как можно меньше кода в реализации библиотеки (6302 байта в несжатом виде)
• Минимальное количество jQuery-вызовов (чтобы можно было легко от них отказаться тем, кто jQuery не использует)
• Inline-события где это возможно вместо биндов (меньше ресурсов сожрет)

UPD: разместил проект в google code, пользуйтесь, развивайте:
svn checkout js-cmenu.googlecode.com/svn/trunk js-cmenu-read-only

Да, я знаю, что такое синтаксический анализ. И знаю много разных библиотек для подсветки чего угодно. Только это всё не то, когда надо подсветить простенький примерчик, не содержащий всяких кодоизвращений. И уж совсем негоже тянуть для этого много-много байт _правильно_ разбирающих _любой_ код.

Для случаев без кодоизврата (а их большинство) можно использовать такой код:

code = code
// ключевые слова (список неполон, написал, что в голову пришло)
.replace(/(var|function|typeof|new|return|if|for|in|while|break|do|continue|switch|case)([^a-z0-9\$_])/gi,
'<span class="kwrd">$1</span>$2')
// всякие скобочки
.replace(/(\{|\}|\]|\[|\|)/gi,'<span class="kwrd">$1</span>')
// однострочные комментарии
.replace(/(\/\/[^\n\r]*(\n|\r\n))/g,'<span class="comm">$1</span>')
// строки
.replace(/('.*?')/g,'<span class="str">$1</span>')
// функции (когда после идентификатора идет скобка)
.replace(/([a-z\_\$][a-z0-9_]*)\(/gi,'<span class="func">$1</span>(')
// не люблю восьмизначные табы, пусть лучше будет 4 пробела
.replace(/\t/g,'    ');

Хочу представить вам одну библиотеку для яваскрипта, под названием BlackBird. Основное ее назначение, избавить разработчика от не нужного дебага при помощи alert(), о чем собственно и говорит слоган «Скажите привет BlackBird и скажите пока alert()» ( Say hello to Blackbird and 'goodbye' to alert() ).

Хотя наш обзор немного запоздал, оригинальный Dojo 1.2 вышел в релизной версии ещё 6-го октября, но сейчас мы наверстаем упущенное. И так, Dojo Toolkit — это самая мощная и гибкая ajax-библиотека из всех, что есть на рынке, она активно развивается и имеет большое комьюнити. Кстати, это самое комьюнити, совместно с компанией Sitepen, имеет ещё несколько проектов, среди которых и Cometd и некоторые другие, не менее интересные, о которых мы скоро вам расскажем. Сегодня же все внимание на флагманский продукт — Dojo 1.2.

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

Я работаю в небольшой студии веб-дизайна. Очередной раз наблюдая многодневные мучения наших программистов, отчаянно пытающихся реализовать задуманную дизайнером идею в JavaScript (ведь, как обычно, нужно что бы работало везде, чтоб выглядело эстетично и конечно не тормозило). У меня возник простой вопрос…

Игру «линии», думаю, знают многие. Цель — выстроить как можно больше линий из пяти одинаковых шариков. При каждом ходе на поле выкидываются по три случайных шарика.

Максим Захаров отлично реализовал игру на JavaScript. Замечательная графика и очень даже хороший код.

Играем и рассматриваем

Недавно, в Dojo появилась возможность производить cross site POST запросы, т.е. отправка POST запросов на другие сайты, с другими доменными именами. Это событие осталось незамеченным в нашем сообществе JavaScript разработчиков. По крайней мере, никто и слова про это не сказал. А зря…

В один прекрасный момент

JavaScript — очень динамический язык, в нём заложена возможность менять язык под себя и создавать удобные инструменты для дальнейшей работы. «Реализация классического наследования» — как раз один из таких инструментов. В данный момент я не представляю себе, как я программировал бы на JS без «классов».

Для меня «Классы» — это, скорее, подход к проектированию и реализации поставленной задачи. В нашем новом проекте такой подход используется по полной программе (и, я думаю, что он оправдывает себя на все 100%).

Для начала. Что же такое скриптлет?

Скриптлет — яваскрипт, помещеный в закладку и выполняемый на открытой странице при нажатии на ту самую закладку.

С помощбю скриптлетов можно видоизменять страницу, редактировать или отлаживать дизайн, искать ошибки в своих скриптах и еще очень много чего…

Одна из мощнейших средств Ослика (начиная с пятой (!) версии) — HTA или HTML Application (безбраузерные приложения), позволяет создавать Windows-приложения используя HTML, CSS и Javascript/VBscript. Сразу хочу заметить, что в этой статье используется исключительно Javascript.

С точки зрения пользователя, созданная «программа» ничем, кроме расширения (*.hta), не отличается от любой другой программы: заголовок окна, иконка, отображение на панели задач, а самое главное никаких предупреждений при доступе к файлам компьютера. При всем этом вам не придется устанавливать никаких отдельных приложений или плагинов, достаточно Internet Explorer-а!

Недавно на хабре был топик, в котром было рассказано об облаке на флеше. Посмотрел, понравилось, решил повторить на javascript-e. Вот что получилось: demo зеркало архив.
Создание облака происходит так:

var cloud = new Cloud(
   {
        radius:200,
      parent:document.body
   });
   cloud.addTag([
      
      {href:"#",w:"2",text:"нло"},
      {href:"#",w:"2",text:"общение"},
      {href:"#",w:"1",text:"по"},
      {href:"#",w:"1",text:"подкаст"}
   ]
   );

Не знаю, пригодится ли, при большом количестве тагов жутко тормозит.
Тестировал в Mozilla 3, IE7.

P.S. Если понравится, можно будет его еще как-то улучшить, но пока смысла не вижу :)

Вот хабра юзер Kron0S сделал плагин для wordpress на основе моего скрипта.

Судя по комментариям сильно тормозит, я провел не большую оптимизацию при тегах в количестве 100 штук на моей машине(ntel Core 2 Duo 2.3 с 2Gb Vista FF3) почти не тормозит жду ваших комментариев. Может кто предложит еще както оптимизировать код ( Фраемворки не предлагать только алгоритмы).

Эту статью я хочу посвятить тонкостям работы с массивами в JavaScript.

Наверное, у каждого JavaScript-разработчика есть фунции (самописные или библиотечные) $ (выбор элемента по id) и $$ (выбор элементов по CSS-классу). Если мы выбираем несколько элементов по CSS-классу, то мы хотим произвести с ними определенные действия. Напрашивается цикл. А если нужна выборка среди них? Преобразования? Действия над нужными элементами? Непростой получается код.

JavaScript не стоит на месте, Mozilla неустанно улучшает JavaSript в своем движке Gecko и грех не пользоваться этими нововведениями. В JavaScript 1.6 добавлены новые полезные методы для упрощения кода, необходимого в вышеописанных ситуациях.

В последнее время столкнулся с тем, что Prototype не такая уж клевая библиотека. Даже в компрессии напару с scriptaculous занимают много места да и синтаксис странный. Для меня загадка, почему в Rails включили именно его. jQuery по синтаксису намного больше похож на Ruby и более легковесная библиотека. Собственно немного порыскал и нашел неплохие шпаргалки на jQuery, чтоб освоение протекало несколько легче.

1. jQuery Color Cheatsheet (PNG)
   
   
   

Для начала я хочу поблагодарить m007, который подал идею, как можно упростить Programmer-friendly интерфейс взаимодействия Клиент(JS)-Сервер(PHP), что и поспособствовало написанию этой статьи.

Данная статья является заключительной, в которой я объединю JS-Шаблоны, PHP Model-controller, и добавлю Динамическое создание UI методов на JS (некоторые идеи которого были взяты из статьи m007). Тем самым мы получим на выходе неплохой и удобный фундамент для создания своих AJAX приложений.

Уже имеется множество javascript фреймворков, инструментов, множество обсуждалось и тут, однако один очень интересный проект мы упустили из виду. Итак, встречайте



Сам по себе это не самостоятельный фрэймворк, это набор виджетов (как их называют разработчики проекта). Сам пакет основан на MooTools. Однако имеет уже множество встроенных функций, таких как автокомплит, календари и т.п.

Все что описано ниже касается только клиентской части реализованной на JavaScript. Приветствуется критика технического характера (например, пути обхода), но не критка в стиле «нафига это нужно».

При разработке модуля подключения апплетов к некой платформе (назовем ее Hyper) появилась задача обеспечения безопасности, так как подключаемый апплет кроме пассивного блока данных (content) содержит и активный (code). А в активном блоке невнимательный разработчик (злоумышленник) может обратиться к глобальному объекту window и получить доступ к переменным или важным методам ядра и сделать подмену, что в лучшем случае просто приведет к краху платформы (в пределах браузера конечно), а в худшем установка различных хуков не влияющих на работу системы, но перехватывающих персональные данные пользователя. В дальнейшем ничего не подозревающий пользователь будет пользоваться гаджетом «Часы от Боба», который по тихому собирает о нем информацию, или рассылает спам по адресам из контакт листа.

© shamansir.wordpress.com

Представляю вам набор функций, которые у меня лежат в отдельном файле utils.js — это функции, которые я использую чаще всего. Они стараются быть кроссбраузерными и проверены на IE6/7, FF2 и Safari 2 и на боевой, сложной системе, в XHTML документах. Должны, по идее, работать, и на других, но не очень старых версиях браузеров — проверку браузера я использовал только в исключительных случаях. Некоторая часть из них, конечно же, просто нарыта на просторах интернета (где — обычно указано) и заимствована ввиду открытости, а большая часть — сконструирована из многих ресурсов и своих идей (и советов коллег), дабы работать на ура — поскольку часто в разных скриптах не учитываются разные тонкости, которые, тем не менее — при ближайшем рассмотрении — оказываются общностями :), ну и быть довольно читабельными.

Сейчас на 99.9% сайтов используются PHP шаблоны. Во многих движках это является неотемлемой частью. Я хочу представить вам совершенно другой подход.
Недавно я разрабатывал тестовое задание и решил попробовать использовать JS шаблоны.

Заглянув в код страницы internet.yandex.ru, увидел интересную штуку:

< — NOTE: Не подключать в production -->

Сам яваскрипт в файле оказался следующим

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

Открытый проект Helma — написанная на Java платформа для исполнения серверных приложений на JavaScript. Сейчас поддерживается версия 1.7, однако с развитием движка Rhino, который отвечает во всех проектах подобного рода за интерпретацию JS, будем ожидать, что и вторая версия будет поддерживаться. Платформа обладает и встроенным веб-сервером, в качестве которого используется Jetty, и даже собственная объектно-ориентированная база данных (на основе XML), которая прозрачно интегрирована в платформу и позволяет сохранять и кешировать объекты между сессиями. Также есть встроенные средства отладки приложений, при этом все доступно через веб-интерфейс.