Издательский дом ООО "Гейм Лэнд"ЖУРНАЛ ХАКЕР #100, АПРЕЛЬ 2007 г.

Новая волна JavaScript

Борис Вольфсон

Хакер, номер #100, стр. 124

(borisvolfson@gmail.com, http://splendot.com)

Основные возможности JavaScript-фреймворка jQuery для верстки

Исходники написаны на трех «языках»: HTML, CSS и JavaScript, по возможности надо сохранить название языка, на котором они написаны (или цветом выделить), так как вставляться они будут в шаблон странички, где отмечено, что и куда вставлять.

Кроме изображений в формате BMP, я вложил и «исходники» - PSD и VSD на случай, если не устроит качество или размер BMP.

«Никогда не изобретай велосипед» - это одно из основных правил программирования и веб-разработки. Зачем что-то делать заново, если есть уже готовое? А если нет подходящего целого велосипеда, можно взять от него раму (точнее, каркас) и нацепить все, чего не хватает. При помощи такого каркаса, или фреймворка, как говорят наши иностранные друзья, работа пойдет намного быстрее и приятней. В этой статье я расскажу о JavaScript-фреймворке jQuery, который не только увеличит твою производительность, но и сделает программирование увлекательным.

Intro

Раньше, когда программисты жили в пещерах и носили вместо одежды шкуры убитых ими зверей, фреймворков и библиотек для JavaScript не существовало. Трудные были времена, и немногие их пережили :). Когда фреймворки и библиотеки стали появляться как грибы после дождя, у веб-разработчиков появился огромный выбор. К несчастью, большинство фреймворков – это просто ничем не выдающиеся «библиотеки спецэффектов». Однако существуют и достойные представители этого семейства, которые значительно увеличивают общую эффективность работы веб-разработчика. Благодаря популярности проекта Ruby on Rails очень распространился фреймворк Prototype. В настоящее время все большую популярность приобретает jQuery, о ней и пойдет речь в сегодняшней статье.

Кошерность

Я люблю писать валидный (на языке веб-разработчиков - «кошерный») код. Например, всегда стоит указывать в начале HTML тип документа, но в рамках статьи приходится этой самой валидностью жертвовать ради простоты и понятности, поэтому огромная просьба к поборникам валидаторов и прочей нечисти - камнями в меня при встрече не кидать :).

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

Hello, jQuery!

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

Для начала нужно скачать с официального сайта (или взять на диске) один файл jquery.js, который весит около 18 Кб. После этого наше первое приложение будет выглядеть так:

«Hello, world!» с использованием jQuery

ЯЗЫК: HTML, CSS, JavaScript

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("a").click(function() {

alert("Hello, world!");

});

});

</script>

</head>

<body>

<a href="#">Hello, world!</a>

</body>

</html>

Гигантский функционал этой странички заключается в том, что при клике на ссылку нашему вниманию представится окошко с надписью: «Hello, world!». Теперь разберемся, как это работает. Для обработки событий мы используем асинхронный механизм (иначе говоря, передаем в метод функцию, которую следуют вызвать, когда событие произойдет). Первое событие, которое мы обрабатываем, – это $(document).ready. Оно происходит, когда документ загружен и готов к обработке. Очень грубо можно сравнить его с событием традиционного JavaScript window.onload. Однако $(document).ready происходит быстрее, так как нет ожидания загрузки всех элементов веб-страницы, которые могут быть не нужны для работы скрипта, например большие изображения. Что же происходит в обработчике события? Он просто вешает еще одну функцию-триггер $("a").click для обработки щелчка по любой ссылке. А что делает функция alert, честно говоря, я не знаю :).

Теперь посмотрим на общий шаблон для наших дальнейших научных изысканий:

Шаблон веб-страницы

ЯЗЫК: HTML, CSS, JavaScript

<html>

<head>

<style>

/* Здесь идут каскадные таблицы стилей */

</style>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

// Здесь идет наш JavaScript

</script>

</head>

<body>

<!—Здесь идет HTML -->

</body>

</html>

Комментариями я пометил, где нужно вставлять тот или иной тип кода (для начинающих). На всякий случай уточню, что в большинстве случаев код JavaScript будет написан в конструкции:

Шаблон для конструкции $(document).ready

ЯЗЫК: JavaScript

<script type="text/javascript">

$(document).ready(function() {

// Здесь идет наш JavaScript

});

</script>

Опять же повторюсь – CSS и JavaScript лучше вынести в отдельные файлы.

jQuery для верстальщика

Раньше эту профессию называли «веб-дизайном», сейчас же технический прогресс и буржуазная мысль подарили нам эффективное разделение труда: дизайнер рисует, верстальщик (обычно вместе с программистом) воплощает картинку в жизнь при помощи HTML, CSS и JavaScript. Мы же начнем свое знакомство с jQuery именно с позиции верстальщика. Этот подход позволит нам познакомиться ближе с функцией $(…), про которую я намеренно умолчал выше. Первым в нашем списке развлечений значится работа со ссылками, так что запрягаем коней и вперед.

Исходной нашей задачей будет привязка к каждой ссылке с правой стороны небольшого изображения стрелочки, свидетельствующего, что текст является ссылкой. Такая фишка позволяет дополнительно указать пользователю на ссылку в тексте страницы, и ее используют многие сайты, включая один из самых популярных ресурсов интернета - «Википедию». Как ты думаешь, много ли кода придется писать? Одну строчку (точнее, целых три, если считать стандартное начало и конец):

Цепляем изображение стрелочки к ссылкам

ЯЗЫК: JavaScript

$(document).ready(function() {

$("a").append("<img src='link_arrow.png' />");

});

Про конструкцию $(document).ready я уже рассказывал, и теперь настало время поближе познакомиться с функцией $(…). Это основа основ фреймворка jQuery, которая по данному ей описанию находит на странице нужные элементы. Я не зря употребил слово «описание» - это может быть CSS и XPath, а при помощи плагинов - и другие дополнительные форматы. То есть конструкция $("a") находит список всех ссылок, точнее, элементов, которые представляют собой тэг «а». Чтобы выбрать текущий элемент, для которого происходит обработка, надо использовать переменную this. Метод append приписывает справа строку, которая передается ему в параметрах. That’s all folks! Скрипт готов к работе, хотя желательно еще прописать CSS для изображений:

Убираем рамку у изображений

ЯЗЫК: CSS

a img { border: none; }

Теперь любые ссылки на нашей страничке будут с небольшой стрелочкой, изображение которой хранится в файле link_arrow.png.

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

Чтобы понять, чем нам в этом деле может помочь jQuery, нужно сначала разобраться, как при помощи функции $(…) выбирать ссылки с определенным значением href – адреса, куда эта ссылка ведет. Для примера рассмотрим схожую задачу с меню.

Красивые менюшки

Меню – фундаментальный элемент пользовательского интерфейса как GUI, так и веб-приложений. На нескольких небольших примерах мы посмотрим, как с помощью jQuery создать элемент навигации, а заодно - изучим обещанные возможности функции $(…) по работе со свойствами элементов.

Вертикальные меню представляют собой обычные списки ссылок:

Вертикальное меню – список ссылок

ЯЗЫК: HTML

<ul>

<li><a href="/menu.html">Главная</a></li>

<li><a href="/articles.html">Статьи</a></li>

<li><a href="/forum.html">Форум</a></li>

<li><a href="/links.html">Ссылки</a></li>

<li><a href="/about.html">О нас</a></li>

</ul>

Его можно красиво оформить через таблицы стилей, и мне бы очень хотелось, чтобы текущий раздел меню был выделен жирным шрифтом – это даст пользователю понять, где он сейчас находится. Действовать можно по-разному: либо на стороне сервера, либо на стороне клиента.

Серверный скрипт еще при генерации страницы в состоянии определить, какой пункт меню соответствует текущей странице, и прописать нужный класс у элемента списка. У этого варианта есть недостатки: придется писать систему генерации меню на стороне сервера, при использовании же готовых скриптов трудно будет модифицировать модуль по работе с меню. Кстати, иногда возможность написания серверных скриптов вообще отсутствует как таковая. Второй вариант лишен вышеперечисленных недостатков, и реализовать мы его можем, написав всего одну строчку в конструкции $(document).ready:

Выделение жирным шрифтом текущей страницы

ЯЗЫК: JavaScript

$("a[@href$=" + document.location.pathname + "]").css({fontWeight: "bold"})

При изменении формата ссылок (я использовал относительные пути) необходимо будет поменять и скрипт. Что касается одной строчки, которая делает всю работу, то в ней задействуется уже знакомая нам функция $(…), которая в данном случае выбирает все ссылки со значением атрибута href, заканчивающегося на document.location.pathname. В этой переменной, в свою очередь, хранится путь до текущей страницы. Также мы используем метод css для установки параметра каскадных таблиц стилей font-weight. Если ты обратил внимание, то название параметра font-weight написано немного по-другому: «fontWeight», то есть стилем «верблюд», который используется в JavaScript. В качестве завершающего штриха я предлагаю сделать так, чтобы клик по элементу меню текущего раздела отменялся. Это очень разумное решение, ведь нельзя перейти на страницу, на которой уже находишься. А еще мне удастся продемонстрировать цепочку вызовов, которые постоянно используются в скриптах с jQuery:

Цепочка вызовов

ЯЗЫК: JavaScript

$(document).ready(function() {

$("a[@href$=" + document.location.pathname + "]")

.css({fontWeight: "bold"})

.click(function() { retu false; } );

});

У нас получилось обойтись без дополнительных переменных, что в простых случаях сокращает код без ущерба для ясности. В этом исходнике ты можешь также увидеть стиль оформления, который удачно подойдет в следующем случае: вместо одной строчки я бью цепочку вызовов на несколько, чтобы показать, где вызовы происходят (????). Я думаю, что теперь тебе не составит труда изменить скрипт для прикрепления стрелочки только к внешним ссылкам. Очень рекомендую посмотреть для простоты, какие операторы эквивалентности есть, кроме «$=», и что именно они делают.

Горизонтальное меню

Теперь рассмотрим еще один пример, в котором верстка уже немного переплетается с программированием. Создадим горизонтальное меню с эффектом выделения квадратными скобками элемента, на который наведен указатель «№ устройства графического ввода типа “мышь”» :).

В отличие от предыдущего случая, давай поставим ограничение, чтобы квадратными скобками не выделялись никакие другие ссылки, кроме элементов меню. Для этого присвоим списку класс, по которому будем производить отбор:

Горизонтальное меню – список с классом menu

ЯЗЫК: HTML

<ul class="menu">

<li><a href="/menu.html">Главная</a></li>

<li><a href="/articles.html">Статьи</a></li>

<li><a href="/forum.html">Форум</a></li>

<li><a href="/links.html">Ссылки</a></li>

<li><a href="/about.html">О нас</a></li>

</ul>

Чтобы сделать меню горизонтальным, воспользуемся CSS:

Горизонтальный список

ЯЗЫК: CSS

ul.menu li { display: inline; }

Для нужного эффекта нам необходимо найти все ссылки в списках, класса menu, или на языке CSS «ul.menu a» (????). К ссылке с одной стороны надо добавить открывающуюся скобку, а с другой – закрывающуюся. Событие, которое происходит при наведении курсора мышки, называется hover. Ему передается две функции: первая срабатывает при наведении курсора, вторая - при выходе курсора из области элемента.

Скрипт для добавления и удаления квадратных скобок

ЯЗЫК: JavaScript

$(document).ready(function() {

$("ul.menu a").hover(

function() {

$(this).prepend("[");

$(this).append("]");

},

function() {

var s = $(this).html();

$(this).html(s.substr(1, s.length-2));

})

});

Несколько пояснений относительно второй функции. Метод html() возвращает (или устанавливает, если есть параметр) содержимое элемента в виде строки. Метод substr строкового класса возвращает часть строки указанной длины, начиная с указанного номера. То есть в этой функции я просто беру часть строки, начиная с первого символа и заканчивая предпоследним. Выпадают символы скобок – нулевой и последний.

Круглые уголочки

В качестве завершения темы верстки с использованием jQuery я покажу, как использовать этот фреймворк для создания круглых (или скругленных) уголков. Эта тенденция стала своеобразным фетишем у современных веб-мастеров. Как можно сделать кругленькие уголки? Умудренный жизнью верстальщик ответит тебе примерно следующее:

Круглые уголки: традиционный вариант

ЯЗЫК: HTML

<div class="d">

<div class="hd">

<div class="c"></div>

</div>

<div class="bd">

<div class="c">

<div class="s">

<-- Здесь идет контент -->

</div>

</div>

</div>

<div class="ft">

<div class="c"></div>

</div>

</div>

Плюс к этому еще и CSS, а про картинки я вообще молчу. Но кто-то говорил о том, что надо отделять контент (HTML) от оформления (CSS)? Отлично, идеальный выход - следующий код:

Круглые уголки: идеальный вариант

ЯЗЫК: HTML

<div class="round">

<-- Здесь идет контент -->

</div>

Конечно, мы живем не в идеальном мире… Хотя почему? Давай заставим этот код работать! Для этого нам понадобится плагин jQuery coer, который отвечает за создание различных видов углов. Для этого надо скачать файл jquery.coer.js (адреса смотри в конце статьи, а исходники будут на диске к журналу). Файл весит 6 Кб в несжатом виде с комментариями и тестами. Теперь переборем себя и напишем целую строчку кода в конструкции $(document).ready:

Скругляем углы

ЯЗЫК: JavaScript

$('.round').coer();

Для красоты (а точнее, чтобы результат работы был виден) зададим цвет и внутренние отступы для слоя:

Стиль round

ЯЗЫК: CSS

.round {

padding: 20px;

background-color: green;

}

Сразу скажу, что полезность плагина только круглыми уголками не ограничивается. Ты можешь создавать не только круглые, но и треугольные, «покусанные» уголки, а также уголки многих других форм. Кроме того, можно определять, какие именно углы подвергнутся декоративному украшению, задавать другие параметры для метода coer.

Выводы верстальщика

Мечтой парней из W3C всегда было максимально возможное разделение контента и его представления. Большую роль в этом играют каскадные таблицы стилей, но функционала этого стандарта не хватает для разнообразных нужд верстки. Поэтому приходится прибегать к JavaScript, который не до конца адаптирован к подобным задачам. Исправить эту ситуацию можно с использованием фреймворка jQuery, который позволяет находить различные элементы веб-странички с помощью функции $(…). С точки зрения верстальщика, jQuery действует как таблица стилей с расширенными возможностями.

Outro

Я всегда был ленивым (и поэтому - хорошим :)) программистом. Я искал более простые действия для совершения того или иного, пытался автоматизировать в своей деятельности все что возможно и старался не изобретать велосипедов, а брать готовое. При разработке на JavaScript можно обойтись без всяких фреймворков и библиотек, но такая работа займет много времени, которое уйдет на программирование рутинных операций и увеличит общий объем кода. Кроме того, программист вряд ли сможет один написать действительно качественный и продуманный набор базовых функций, как это сделано в jQuery.

Если ты сомневаешься, советую провести эксперимент: напиши одно и то же приложение сначала без jQuery, а потом с его использованием. И, что называется, «почувствуй разницу».

Адреса и явки

ТИП: WWW

www.jquery.com – официальный сайт jQuery;

www.leaingjquery.com – ресурс, посвященный изучению jQuery;

www.visualjquery.com – онлайн-документация по jQuery;

www.15daysofjquery.com – блог, посвященный jQuery.

«В концептуальном плане jQuery – это расширения CSS, с точки зрения верстальщика»

«jQuery обладает лучшим в индустрии соотношением “размер/функциональность”»

«Кода будет насколько мало… Тебе покажется, что jQuery читает твои мысли»

Содержание
ttfb: 5.8660507202148 ms