Как стать автором

JavaScript *

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

СтатьиПостыНовостиАвторыКомпании

sunnybear 3 дек 2008 в 20:50

Yet Another cSS selector = YASS

11 мин

1.6K

После заметки о Peppy я почти обрадовался — вот оно, счастье. Наконец появился движок CSS-селекторов, который делает тоже самое, что и jQuery, только быстрее. Сильно быстрее.

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

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

В этом топике нет шлюх и блэкджека

+57

voicer 2 дек 2008 в 09:18

widget своими руками

8 мин

12K

Привет.

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

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

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

Поехали?

+36

no_smoking 14 ноя 2008 в 10:38

Вертикальный скрол c краткой информацией.

1 мин

2.3K

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

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

+85

akira 10 ноя 2008 в 10:32

Плагинописателям.

1 мин

621

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

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

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

+60

dinamyte 2 ноя 2008 в 07:49

Визуализируем данные на JavaScript

3 мин

4.5K

Перевод

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

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

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

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

+70

l2k 27 окт 2008 в 14:34

Подсветка текста в «TextArea»

4 мин

20K

Эта статья покажет, как в современных браузерах можно сделать подсветку текста в поле редактирования (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). Но есть более «глобальный» параметр страницы, который сейчас поддерживают все браузеры, который нам может помочь —

+46

1602 24 окт 2008 в 09:59

Контекстное меню на javascript: небольшое, но мощное

5 мин

14K

Вы наверняка не раз видели 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

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

+74

1602 23 окт 2008 в 11:26

Подсветка синтаксиса несколькими строками javascript

4 мин

21K

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

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

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,'    ');

под катом CSS, плагин jQuery, пример и некоторые пояснения-рассуждения

+56

HeadWithoutBrains 16 окт 2008 в 07:55

Удобный дебаг с BlackBird

1 мин

838

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

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

+27

kylish 8 окт 2008 в 07:25

Несколько простых вопросов про JavaScript

1 мин

1.7K

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

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

+33

SamDark 7 окт 2008 в 10:33

Color Lines

1 мин

6.9K

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

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

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

+42

sirus 5 окт 2008 в 15:30

JavaScript Cross Site (XSS) POST

4 мин

13K

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

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

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

+52

MYPABEU 23 сен 2008 в 19:13

Скриптлеты для Web-разработчика + подарок

41 мин

6.4K

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

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

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

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

+100

EugeneDest 23 сен 2008 в 17:12

Безбраузерные приложения на Javascript (HTA)

3 мин

40K

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

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

Мусолить не буду, сразу приступим к делу

+65

no_smoking 27 авг 2008 в 14:46

Вращающееся облако тегов на javascripte

1 мин

13K

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

+110

mdevils 12 июл 2008 в 16:21

Работаем с массивами в JavaScript без велосипедов

2 мин

42K

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

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

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

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

+39

spacer 10 июл 2008 в 05:17

Шпаргалки по jQuery

1 мин

1.8K

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

jQuery Color Cheatsheet (PNG)

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

+53

anyxem 8 июл 2008 в 20:11

Meteora

2 мин

1.4K

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

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

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

+33

DarkFighter 2 июл 2008 в 03:12

16 действительно полезных решений для JavaScript

16 мин

7.3K

© shamansir.wordpress.com

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

+69

l2k 2 июл 2008 в 01:26

Шаблоны

9 мин

3.1K

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

И вот то, что у меня в результате получилось

+44

1 2 ...

143