JavaScript *

Привет.

Наверное, многие из вас пользовались стандартными javascript-виджетами, написанными как безвестными разработчиками, так и крепкими профессионалами, так и гуру. Есть великолепные коллекции виджетов, поставляемых в качестве плагинов к известным фреймворкам (вроде jQuery, Prototype JS, YUI), так и целые фреймворки, акцентирующие свое внимание на создании виджетов, вроде Ext JS или qooXdoo.

Но что, если вы не хотите использовать достаточно объемный фреймворк для создания простого диалогового окна, или хотите разобраться в том, как создаются такие виджеты, или даже разрабатываете собственный фреймворк?

Об этом и пойдет речь в сегодняшнем посте — как сделать простейшее диалоговое окно и alert средствами чистого javascript, без применения каких-либо фреймворков.

Привет.
Решил я познакомится с технологией canvas и написал ардкадную игрушку.

Использовал для старта руководство.

Иногда приходится искать файлы на всяких файлопомойках типа rapidshare. Так как единого поискового механизма не предлагается, слепил левою рукою такую штуковину–искалку. Её можно вставлять в страницы, при нажатии на линк «искать» выкидывается промпт, куда задаётся искомое понятие, по нажатию «поиск» открывается новое окно/таб с результатами поиска. Набросал две версии, для ие и фф. К тому ж вывешиваю список 1689 файлопомоек, которые можно вставлять в искалку. И ещё учитывайте, что гуглостринг ограничен по длине.

Для ФФ
a href="javascript:Qr=document.getSelection();if(!Qr){void(Qr=prompt('Find files ',''))};if(Qr)location.href='http://www.google.com/search?num=50&hl=en&safe=off&q='+escape(Qr)+'+%28rapidshare.+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Search'" target="_blank" rel="nofollow" >Find files</a

Для ИЕ
a href="javascript:Qr=document.selection.createRange().text;if(!Qr){void(Qr=prompt('Find files ',''))}if(Qr)location.href='http://www.google.com/search?hl=en&q='+escape(Qr)+'+%28rapidshare+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Google+Search'" target="_blank" onclick="Qr=prompt('Dateien bei Free File Hosters finden','');if(Qr)location.href='http://www.google.com/search?hl=en&q='+escape(Qr)+'+%28rapidshare+%7C+megaupload+%7C+любое другое название файлопомойки%29&btnG=Google+Search';return false" rel="nofollow" >Find files</a

Список 1689 файлопомоек

посмотреть, как работает, можно тут.

UPDFree file hosting services часто называются файлопомойками из–за несортированности складируемых файлов и неразборчивости сервисов в вопросах того, что там складируется. И вы и я знаем об этом, поэтому большая просьба не обижаться на это название и не обвинять меня в попытке оскорбления.

Когда то давно, не помню где я читал о том, что обычный скрол можно сделать более функциональным и предлагалось ряд решений.
Мне эти идеи понравились и вот спустя много лет :)…
Предлагаю свою реализацию на javascripte. Идея в том чтобы на фоне скрола показывать эскиз всего текста, а с помощью движка скрола видимую часть текста. При таком подходе сразу видно где находится картинка, заголовок, а где параграф.

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

Есть у меня идея, почему бы вместе всем не собраться и не сделать сайт, на котором будем выкладывать наши творения или создавать что-то совместно?

Эдакий репозиторий с плагинами.
Лично я пишу для mootols\jquery.

Развитие компьютерной графики подталкивает нас к изобретению всё новых способов графического представления данных. Разрабатывались различные прикладные программы для визуализации данных на локальных компьютерах. Однако всё изменилось с развитием интернета: в нём содержатся колоссальные объёмы информации, которые нам постоянно хочется представить как-то удобнее, дружелюбнее, понятнее. Что же мы имеем на сегодняшний день?

Существует немалое число серверных библиотек и утилит, способных генерировать сложные графики. Однако я считаю, что такой подход не всегда оптимален. Если мы можем производить визуализацию на стороне клиента с помощью JavaScript, то почему бы нам не воспользоваться такой возможностью? Логика работы подобной связки проста: сервер генерирует данные, а клиент их визуализирует.

Разумеется, вы можете воспользоваться Flash, Silverlight или Java-апплетами, однако в этом обзоре я хотел бы вам показать библиотеки визуализации, написанные на чистом JavaScript.

Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (WYSIWYG).
Пример можно посмотреть, в google.docs или на некоторых продвинутых форумах.

Уверен, многим это будет интересно.

Атрибут contentEditable и параметр designMode

Именно contentEditable или designMode и делает для нас всю основную «грязную» работу.

Если этот атрибут поставить в тег, то всё, что внутри тега, становится автоматически редактируемым.

<html><head></head><body>
  <div contentEditable="true"><b>C</b>ontent<u>!!!</u></div>
</body></html>

работающий пример

Этот атрибут не поддерживается сейчас некоторыми старыми браузерами (например, FireFox 2.0). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —

Вы наверняка не раз видели 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) почти не тормозит жду ваших комментариев. Может кто предложит еще както оптимизировать код ( Фраемворки не предлагать только алгоритмы).

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

Jaxer — это первый в мире AJAX сервер. HTML, JavaScript и CSS являются для Jaxer родными, также как и XMLHttpRequest, JSON, DOM и др. Будучи сервером он предоставляет доступ к базам данных, файлам, логгированию, управлению процессами, безопасностью, интеграционными API и многому другому.

И сейчас, Tom Kirkpatrick описал новый раздел API Jaxer, называемый Jaxer.Process, который позволяет вызывать операционную систему хоста.