JavaScript *

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

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

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

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

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

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

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

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

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

Одна из мощнейших средств Ослика (начиная с пятой (!) версии) — 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)
   
   
   

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



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

© shamansir.wordpress.com

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

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

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

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

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

Заглянем в прошлое

Не так давно в статьях раздела JavaScript были представлены широкой публике трекбары:



Проект неожиданно получил продолжение. К разработке присоединились камрады abarmot и 1602, а активное обсуждение привело к улучшению текущего и реализации нового функционала. Поэтому, появилось желание сделать проекту свой собственный «дом», где он будет жить и развиваться, что было успешно реализовано на sourceforge.net. Теперь вместо того, чтобы писать статью на каждое изменение в трекбарах автор может спокойно обновлять архивы и описания, а вы самостоятельно скачивать последние версии.

Пройдясь по хабра-поиску выяснил, что готового решения для кропа-ресайза изображений, на движке JavaScript/HTML/CSS еще не предлагалось. Поэтому, позвольте представить вашему вниманию модуль для ваших сайтов, частично реализуюший функционал редактирования, распространенный на фото-хостингах.

К делу

Внешне задумка выглядит так:

В данной версии разработчики добавили очень нужную вещь: селективное отключение JavaScript debugger-a и Net мониторинга, ибо не для каждого сайта нужны эти опции, а производительность Firefox-a они кушают значительно.

Всем привет.

Иногда на клиентской стороне необходимо выполнять фоновые задачи. Главное требование чтобы они не прерывали работу всего веб-приложения а, спокойно в фоновом режиме общались между собой, завершались и добавлялись. Цель предложенного планировщика снять с разработчика головную боль о таких задачах и свести к общему интерфейсу, с помощью которого можно постепенно расширять спектр решаемых задач.

Совсем недавно на хабре пользователем bur был опубликован пост про приятные ползунки TrackBar. Они мне понравились своей простотой и возможностью их использования в совокупности с jQuery. Чуть позже был так же пост про слайдер, который определял диапазон времени, но его порицали за большой вес и «тяжесть». Тогда у меня и родилась идея создать на основе TrackBar ползунков для выбора произвольного диапазона времени. Придумано – сделано. И сейчас я представляю свои наработки хабраобщественности.

Итак, было:

Стало:

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

Не так давно на Хабре был опубликован сей труд: «Еще раз о трекбаре», в котором описывается простой скрипт для создания таких вот ползунков:


Благодаря откликам пользователей возможности первой версии скрипта были существенно расширены. Она выросла до v3.0, с одновременным обновлением статьи, описывающей новый функционал. Однако, некоторые изменения откладывались «на потом», т.к. требовали более серьезного вмешательства в код. И вот долгожданное «потом» настало и вышла четвертая версия JS-TrackBar.

Могу ошибаться, но решения данной проблемы на Хабре еще не приводилось, так что позвольте поделиться с вами полезным куском кода. Задача: по нажатию Ctrl+S заблокировать браузерный диалог о сохранении страницы и запустить пользовательскую функцию.