ОГЛАВЛЕНИЕ
Недостающее признание ...............................................................................................................11 Об авторе ....................................................................................................................................11 О творческом коллективе .....................................................................................................11 Слова благодарности ..............................................................................................................12 Введение ..............................................................................................................................................13 Что такое JavaScript ................................................................................................................13 Немного истории ............................................................................................................... 14 JavaScript повсюду ............................................................................................................ 16 Что такое jQuery? ....................................................................................................................16 HTML: скелет-основа.............................................................................................................17 Как работают HTML-теги .............................................................................................. 20 CSS: добавление стилей на веб-страницу .......................................................................22 Анатомия стиля .................................................................................................................. 23 Программное обеспечение для программирования на языке JavaScript .............26 Бесплатные программы ................................................................................................... 26 Коммерческие программы.............................................................................................. 27 Об этой книге ............................................................................................................................28 Подход к JavaScript, принятый в книге ..................................................................... 29 Структура книги ................................................................................................................ 30 Самое основное.........................................................................................................................32 Об ⇒ этих ⇒ стрелках ..................................................................................................... 33 Примеры для книги .......................................................................................................... 34 ЧАСТЬ I. ВВЕДЕНИЕ В JAVASCRIPT Глава 1. Ваша первая программа на языке JavaScript .........................................................36 Введение в программирование ...........................................................................................37 Что такое компьютерная программа .......................................................................... 40 Как добавить JavaScript на страницу ................................................................................41 Внешние файлы JavaScript ............................................................................................ 43 Ваша первая программа на языке JavaScript .................................................................47 Написание текста на веб-странице ....................................................................................50 Прикрепление внешнего файла JavaScript .....................................................................52 Отслеживание ошибок...........................................................................................................55 Консоль JavaScript в браузере Firefox........................................................................ 56 Отображение консоли ошибок в браузере Internet Explorer 9 ......................... 58 Открытие консоли JavaScript в браузере Chrome ................................................. 59 Доступ к консоли ошибок в браузере Safari ............................................................ 59 Глава 2. Грамматика языка JavaScript .......................................................................................62 Утверждения..............................................................................................................................62 Встроенные функции .............................................................................................................63 Типы данных..............................................................................................................................64 Числа ...................................................................................................................................... 64 Строки.................................................................................................................................... 65 Логический (булев) тип данных .................................................................................. 66 Переменные ...............................................................................................................................67 Создание переменной ...................................................................................................... 68 Использование переменных .......................................................................................... 70 Работа с типами данных и переменными ........................................................................73 Основные математические операторы ...................................................................... 74 Порядок операций ............................................................................................................. 75 Объединение строк ........................................................................................................... 76 Объединение чисел и строк ........................................................................................... 77 Изменение значений в переменных............................................................................ 79 Урок: использование переменных для создания сообщений ...................................80
5
Оглавление
Урок: запрос информации.....................................................................................................83 Массивы ......................................................................................................................................86 Создание массива .............................................................................................................. 87 Доступ к элементам массива ......................................................................................... 89 Добавление элементов в массив ................................................................................... 91 Удаление элементов из массива ................................................................................... 95 Урок: написание текста на веб-странице с помощью массивов ...............................96 Небольшой урок, посвященный объектам ................................................................... 100 Комментарии .......................................................................................................................... 103 Когда использовать комментарии .............................................................................104 Комментарии в этой книге ...........................................................................................106 Глава 3. Добавление в программу логики и контроля...................................................... 108 Интеллектуальная реакция программы ....................................................................... 108 Основы условных выражений ....................................................................................110 Добавление альтернативного плана..........................................................................114 Проверка более одного условия .................................................................................116 Более сложные условия ................................................................................................119 Вложение условных выражений ................................................................................122 Советы по написанию условных выражений ........................................................123 Урок: использование условных выражений ................................................................ 125 Работа с повторяющимися задачами с использованием циклов ......................... 130 Циклы While .....................................................................................................................130 Циклы и массивы.............................................................................................................133 Циклы For...........................................................................................................................135 Циклы Do/While .............................................................................................................137 Функции: превращение полезного кода в многократно используемые команды .................................................................................................................................... 139 Мини-урок .........................................................................................................................142 Сообщение информации функциям.........................................................................142 Возвращение информации от функций ..................................................................145 Предупреждение конфликта переменных .............................................................147 Урок: простая викторина .................................................................................................... 151 ЧАСТЬ II. НАЧАЛО РАБОТЫ С JQUERY Глава 4. Введение в jQuery ......................................................................................................... 160 О библиотеках JavaScript................................................................................................... 160 Где взять jQuery ..................................................................................................................... 163 Ссылки на файл jQuery, расположенный на сервере CDN ..............................164 Загрузка файла jQuery...................................................................................................164 Добавление библиотеки jQuery на страницу .............................................................. 167 Модифицирование веб-страниц: обзор......................................................................... 170 Объектная модель документа (DOM) .......................................................................... 173 Выбор элементов страницы: подход jQuery ................................................................ 176 Основные селекторные константы ...........................................................................177 Фильтры jQuery ...............................................................................................................184 Понимание выборок jQuery.........................................................................................186 Добавление содержимого на страницу.......................................................................... 188 Замена и перемещение выборок ................................................................................192 Установка и чтение атрибутов тега ................................................................................. 194 Классы..................................................................................................................................195 Чтение и изменение свойств CSS ..............................................................................197 Одновременное изменение нескольких свойств CSS ........................................199 Чтение, установка и удаление атрибутов HTML ...................................................... 202 Работа с каждым элементом выборки ........................................................................... 203 Анонимные функции .....................................................................................................204 Автоматические «броские цитаты» ................................................................................ 207 Обзор ....................................................................................................................................208 Программирование .........................................................................................................209
6
Оглавление
Глава 5. Действие/реакция: оживление страниц с помощью событий ...................... 215 Что такое события? .............................................................................................................. 215 События мыши .................................................................................................................217 События документа/окна .............................................................................................218 События форм ..................................................................................................................220 События клавиатуры......................................................................................................221 Использование событий: способ jQuery ....................................................................... 222 Урок: введение в события .................................................................................................. 225 Больше концепций для событий jQuery ....................................................................... 231 Ожидание загрузки HTML-кода ...............................................................................232 События jQuery ................................................................................................................234 Объект события ................................................................................................................237 Отмена обычного поведения событий .....................................................................239 Удаление событий............................................................................................................239 Продвинутое управление событиями............................................................................ 241 Другие способы использования функции bind() .................................................244 Урок: FAQ на одной странице ........................................................................................... 246 Обзор задачи......................................................................................................................247 Программирование .........................................................................................................247 Глава 6. Анимация и эффекты .................................................................................................. 253 Эффекты jQuery .................................................................................................................... 253 Основы отображения и сокрытия .............................................................................255 Постепенное появление и исчезновение элементов ...........................................256 Скользящие элементы ...................................................................................................257 Урок: всплывающее окно авторизации ......................................................................... 259 Программирование .........................................................................................................260 Анимация................................................................................................................................. 263 Параметр easing ................................................................................................................266 Выполнение действия после завершения эффекта .................................................. 268 Урок: анимированная панель навигации ...................................................................... 272 Программирование .........................................................................................................273 ЧАСТЬ III. ОБЕСПЕЧЕНИЕ ИНТЕРАКТИВНЫХ ВОЗМОЖНОСТЕЙ ВЕБ-СТРАНИЦ Глава 7. Улучшение изображений ........................................................................................... 280 Смена изображений ............................................................................................................. 280 Изменение атрибута src изображения .....................................................................280 Предварительная загрузка изображений................................................................283 Сменяемые изображения..............................................................................................284 Урок: добавление сменяемых изображений ................................................................ 286 Обзор задачи......................................................................................................................287 Программирование .........................................................................................................288 Урок: фотогалерея с эффектами ...................................................................................... 293 Обзор задачи......................................................................................................................294 Программирование .........................................................................................................295 Продвинутая галерея с использованием плагина jQuery FancyBox ................... 300 Основы.................................................................................................................................301 Создание галереи изображений .................................................................................305 Настройка плагина FancyBox .....................................................................................306 Урок: фотогалерея FancyBox ............................................................................................ 313 Глава 8. Улучшение навигации ................................................................................................. 318 Некоторые основы работы со ссылками....................................................................... 318 Выборка ссылок с помощью языка JavaScript ......................................................318 Определение направления ссылки ...........................................................................319 Не переходите по этой ссылке ....................................................................................320 Открытие внешних ссылок в новом окне..................................................................... 322
7
Оглавление
Создание новых окон .......................................................................................................... 326 Свойства окна ...................................................................................................................327 Открытие страниц в окне на текущей странице ........................................................ 332 Урок: открытие страницы внутри страницы ............................................................... 336 Простое анимированное меню навигации ................................................................... 338 HTML-код ..........................................................................................................................339 Каскадная таблица стилей ...........................................................................................341 JavaScript ............................................................................................................................343 Урок ........................................................................................................................................... 344 Глава 9. Улучшение веб-форм ................................................................................................... 348 Структура форм .................................................................................................................... 348 Выбор элементов формы ..............................................................................................351 Получение и установка значений элементов форм ............................................354 Проверка наличия меток для кнопок и флажков ................................................355 События формы ...............................................................................................................356 Усовершенствование форм ................................................................................................ 362 Фокус на первом поле формы.....................................................................................363 Выключение и включение полей ...............................................................................364 Сокрытие и отображение параметров формы ......................................................367 Урок: усовершенствование простой формы ................................................................ 368 Фокус на поле ...................................................................................................................368 Выключение полей формы ..........................................................................................369 Сокрытие полей формы ................................................................................................374 Верификация формы ........................................................................................................... 377 Плагин jQuery Validation ..............................................................................................379 Простая верификация....................................................................................................381 Сложная верификация ..................................................................................................385 Настройка стилей для сообщений об ошибках ....................................................393 Урок по проведению верификации ................................................................................ 394 Базовая верификация ....................................................................................................394 Сложная верификация ..................................................................................................398 Верификация флажков и переключателей ............................................................403 Форматирование сообщений об ошибках ..............................................................407 Глава 10. Улучшение интерфейса ............................................................................................ 410 Организация информации с помощью панели вкладок ......................................... 410 HTML-код ..........................................................................................................................411 Код CSS ...............................................................................................................................414 Код JavaScript....................................................................................................................417 Урок по созданию панели вкладок ................................................................................. 418 Добавление слайдера на сайт............................................................................................ 425 Использование плагина AnythingSlider ..................................................................426 Урок по использованию плагина AnythingSlider ...................................................... 428 Настройка вида слайдера..............................................................................................431 Настройка поведения слайдера ..................................................................................433 Определение размера и положения элементов страницы ...................................... 435 Определение высоты и ширины элементов...........................................................435 Определение положения элемента на странице ..................................................439 Определение позиции прокрутки страницы .........................................................442 Добавление всплывающих подсказок ........................................................................... 443 HTML-код ..........................................................................................................................445 Код CSS ...............................................................................................................................446 Код JavaScript....................................................................................................................448 Урок по созданию всплывающих подсказок ............................................................... 449 ЧАСТЬ IV. AJAX: СВЯЗЬ С ВЕБ-СЕРВЕРОМ Глава 11. Введение в технологию Ajax................................................................................... 464 Что такое Ajax ........................................................................................................................ 465 Технология Ajax: основы .................................................................................................... 467 Части мозаики...................................................................................................................467 Общение с веб-сервером ...............................................................................................471
8
Оглавление
Работа с Ajax с помощью средств jQuery ..................................................................... 475 Использование функции load() .................................................................................475 Урок по работе с функцией load() .............................................................................479 Функции get() и post() ...................................................................................................484 Форматирование данных, посылаемых на сервер ...............................................485 Обработка данных с сервера........................................................................................490 Обработка ошибок ..........................................................................................................494 Урок по применению функции get() ........................................................ 495 Формат JSON ......................................................................................................................... 504 Доступ к данным JSON .................................................................................................507 Сложные объекты JSON ...............................................................................................508 Глава 12. Сервисы Flickr и Google Maps ............................................................................... 513 Введение в JSONP ................................................................................................................ 513 Добавление фида Flickr на сайт ....................................................................................... 514 Построение URL-адреса ...............................................................................................515 Использование функции $.getJSON()......................................................................518 JSON-фид сервиса Flickr ..............................................................................................519 Урок: добавление изображений сервиса Flickr на сайт ........................................... 522 Загрузка карт Google Maps на ваш сайт........................................................................ 527 Установка местоположения для карты ....................................................................531 Другие настройки плагина GoMap ...........................................................................533 Добавление отметок........................................................................................................536 Добавление отметкам окон с информацией ..........................................................541 Урок по использованию плагина GoMap ..................................................................... 543 ЧАСТЬ V. ДИАГНОСТИКА, СОВЕТЫ И НЮАНСЫ Глава 13. Как добиться большего с библиотекой jQuery ................................................ 548 Полезные советы и сведения о библиотеке jQuery................................................... 548 Конструкция $() равнозначна функции jQuery()...............................................548 Сохранение выборок в переменных .........................................................................549 Сокращение числа операций по добавлению содержимого ............................551 Оптимизация селекторов .............................................................................................553 Использование документации к библиотеке jQuery................................................ 555 Описание страницы сайта с документацией .........................................................559 Обход дерева DOM .............................................................................................................. 562 Дополнительные функции для работы с кодом HTML .......................................... 570 Расширенные возможности обработки событий ....................................................... 574 Глава 14. Совершенствуемся в программировании на языке JavaScript ................... 578 Работа со строками............................................................................................................... 578 Определение длины строки .........................................................................................578 Изменение регистра строки .........................................................................................579 Поиск в строке: техника indexOf() ............................................................................580 Извлечение части строки с помощью функции slice() ......................................583 Нахождение шаблонов в строках .................................................................................... 584 Создание и использование регулярного выражения .........................................585 Построение регулярного выражения .......................................................................586 Группировка частей шаблона ......................................................................................591 Полезные регулярные выражения ............................................................................592 Нахождение соответствия шаблону .........................................................................599 Замена текста ....................................................................................................................602 Тестирование регулярных выражений ....................................................................603 Работа с числами ................................................................................................................... 604 Преобразование строки в число .................................................................................605 Тест на числа ......................................................................................................................607 Округление чисел ............................................................................................................608 Форматирование значений в валюте .......................................................................609 Генерация случайных чисел .........................................................................................610 Дата и время ........................................................................................................................... 612 Получение информации о месяце .............................................................................613 Получение информации о дне недели .....................................................................614
9
Оглавление
Получение информации о времени ..........................................................................614 Создание даты, отличной от сегодняшней .............................................................619 Соединяя все вместе ............................................................................................................ 621 Использование внешних файлов JavaScript..........................................................621 Создание более эффективного скрипта JavaScript ................................................... 625 Сохранение настроек в переменных .........................................................................625 Тернарный оператор .......................................................................................................627 Выражения-переключатели.........................................................................................629 Ускорение загрузки файлов JavaScript ......................................................................... 632 Глава 15. Диагностика и отладка ............................................................................................. 635 Наиболее распространенные ошибки при программировании на языке JavaScript ................................................................................................................................. 635 Незакрытые пары ............................................................................................................635 Кавычки ..............................................................................................................................641 Использование зарезервированных слов ...............................................................642 Одинарные знаки равенства в условных выражениях ......................................643 Учет регистра.....................................................................................................................643 Некорректный путь к внешнему файлу JavaScript .............................................644 Некорректные пути внутри внешнего файла JavaScript...................................645 Исчезающие переменные и функции.......................................................................647 Отладка с помощью плагина Firebug............................................................................. 649 Установка и подключение плагина Firebug ...........................................................649 Просмотр ошибок с помощью плагина Firebug....................................................650 Использование функции console.log() для отслеживания выполнения сценария ..............................................................................................................................650 Урок по использованию консоли Firebug .................................................................... 653 Более мощные средства отладки................................................................................658 Урок по отладке ..................................................................................................................... 665 Приложение А. Источники знаний по JavaScript.............................................................. 673 Справочные материалы ...................................................................................................... 673 Веб-сайты............................................................................................................................673 Книги ....................................................................................................................................674 Основы языка JavaScript .................................................................................................... 674 Статьи и презентации ....................................................................................................674 Веб-сайты............................................................................................................................674 Книги ....................................................................................................................................674 Библиотека jQuery ............................................................................................................... 675 Статьи и презентации ....................................................................................................675 Веб-сайты............................................................................................................................675 Книги ....................................................................................................................................676 Технология Ajax .................................................................................................................... 676 Веб-сайты............................................................................................................................676 Книги ....................................................................................................................................677 Расширенные возможности языка JavaScript............................................................. 677 Статьи и презентации ....................................................................................................677 Веб-сайты............................................................................................................................677 Книги ....................................................................................................................................678 Язык CSS ................................................................................................................................. 678 Веб-сайты............................................................................................................................679 Книги ....................................................................................................................................679 Предметный указатель ................................................................................................................ 680
Глава 1 ВАША ПЕРВАЯ ПРОГРАММА НА ЯЗЫКЕ JAVASCRIPT
Язык HTML не имеет никаких продвинутых функций: он не умеет считать, не в состоянии проанализировать, правильно ли пользователь заполнил анкету, не способен принять решение на основе диалога с посетителем сайта. В основном HTML позволяет читать тексты, просматривать изображения и переходить по ссылкам на другие вебстраницы, содержащие текст и изображения. Чтобы веб-страницы реагировали на действия посетителей вашего сайта, необходимо «добавить им интеллекта». В этом случае вам не обойтись без помощи языка JavaScript.
Рис. 1.1. JavaScript позволяет веб-страницам реагировать на действия посетителей. Например, на сайте Ozon.ru при щелчке мышью по значку клавиатуры появляется виртуальная клавиатура
36
Глава 1. Ваша первая программа на языке JavaScript
JavaScript наделяет веб-страницы способностью осознанно реагировать на действия пользователя. С его помощью вы можете создать умные веб-формы, которые уведомят посетителя в случае, если он забудет ввести важную информацию; заставить элементы появляться, исчезать или перемещаться по экрану (рис. 1.1); вы даже можете обновить содержимое страницы на основе информации, полученной с сервера, не прибегая к ее перезагрузке. Одним словом, язык JavaScript позволит сделать ваши веб-сайты более привлекательными и эффективными.
ПРИМЕЧАНИЕ Действительно, HTML5 предусматривает некоторые дополнительные возможности, включая проверку форм. Но так как не все браузеры поддерживают эти нововведения (и так как вы можете сделать с формами гораздо больше с помощью JavaScript), вам не обойтись без языка JavaScript, если вы хотите создавать самые лучшие, интерактивные и дружественные пользователю формы. Вы можете узнать больше о HTML5 и веб-формах из книги «Самоучитель HTML5» Билла Сандерса (издательство «Эксмо»).
Введение в программирование У большинства людей словосочетание «компьютерное программирование» вызывает в воображении образ гениальных очкариков, согнувшихся над клавиатурой и с утра до ночи набирающих совершенно непонятную тарабарщину. И, по правде говоря, в некоторых случаях так и бывает. Программирование может показаться невероятным волшебством, недоступным простым смертным. Однако большинство концепций программирования несложно для понимания. Что касается языков программирования, то JavaScript достаточно дружелюбен по отношению к непрограммистам. Тем не менее JavaScript сложнее, чем языки HTML или CSS, а программирование для веб-дизайнера часто является terra incognita, поэтому одна из целей этой книги — помочь вам начать думать как программист. Вы изучите фундаментальные концепции программирования, которые сможете применять при написании скриптов JavaScript, ActionScript или при создании настольных приложений на языке C++. Еще более важно то, что вы научитесь подходить к задаче по программированию, точно зная, чего хотите.
37
Глава 3 ДОБАВЛЕНИЕ В ПРОГРАММУ ЛОГИКИ И КОНТРОЛЯ Итак, вы уже освоили некоторые основы языка JavaScript. Но просто создавая переменную и сохраняя в ней число или последовательность символов, вы не достигнете многого. А построение массива с длинным списком элементов будет не слишком полезным, если с ними сложно работать. В данной главе вы узнаете, как заставить вашу программу интеллектуально реагировать и работать более эффективно благодаря использованию условных выражений, циклов и функций.
Интеллектуальная реакция программы Жизнь постоянно ставит нас перед выбором: «Что мне сегодня надеть?», «Что съесть на завтрак?», «Что я делаю в пятницу вечером?» и т. д. Часто выбор зависит от сопутствующих обстоятельств. Например, вы решили сходить в пятницу вечером в кино. Вероятно, вы зададите себе ряд вопросов: «Будет ли в пятницу хороший фильм?», «Когда начинается сеанс?», «Хватит ли у меня денег на билет (и на воздушную кукурузу)?» Допустим, именно в то время, когда вы хотите отдохнуть, идет хороший фильм. Тогда вы задаете себе простой вопрос: «Достаточно ли у меня денег?» Если ответ утвердительный, то вы направляетесь в кино. Если ответ отрицательный, то вы никуда не пойдете. Но в следующую пятницу у вас будет достаточно денег, и вы пойдете в кино. Этот сценарий — всего лишь простой пример того, как обстоятельства влияют на принимаемые нами решения. Язык JavaScript располагает подобной возможностью принятия решений, называемой «условные выражения». Упрощенно, условное выражение — это обычный вопрос, который предполагает ответ «да» или «нет». Если ответ на вопрос — «да», то программа выполняет одно действие; если ответ — «нет», то программа делает что-то другое. Условные выражения — это одна из наиболее важных концепций в программировании: они позволяют вашим программам реагировать на различные ситуации и вести себя интеллектуально. Вы будете пользоваться такими выражениями бессчетное количество раз. Чтобы продемонстрировать их полезность, рассмотрим несколько примеров того, как их можно использовать.
108
Глава 3. Добавление в программу логики и контроля
• Проверка форм. Когда вам необходимо убедиться, что пользователь заполнил в веб-форме все необходимые поля («Имя», «Адрес», «Электронная почта» и т. д.), следует использовать условные выражения. Например, если поле «Имя» пусто, отослать форму невозможно. • Перетаскивание. Если вы добавляете возможность перетаскивания элементов в пределах вашей страницы, вы, возможно, захотите проверить, куда посетитель переместил элемент. Например, если он перетаскивает фотографию на изображение корзины, вы заставляете фотографию исчезнуть со страницы. • Оценка пользовательского ввода. Если вы создаете всплывающее окно, в котором посетителю задается вопрос: «Не хотите ли вы ответить на пару вопросов о том, как великолепен этот сайт?», то реакция вашего скрипта должна быть различной в зависимости от того, как ответит посетитель. На рис. 3.1 продемонстрировано приложение, использующее условные выражения.
Рис. 3.1. Чтобы хорошо развлекаться, нужно много работать. Игра на основе языка JavaScript, такая как «Клондайк» (examplecolumn.appspot.com/game), показывает, как программа может по-разному реагировать в зависимости от условий. Например, когда игрок перетаскивает карту, программа должна решить, кладет ли он ее в допустимое место, а затем в каждом случае она действует по-разному
109
Часть I. Введение в JavaScript
Основы условных выражений Условные выражения, также называемые выражениями если/то, выполняют задачу, только если ответ на вопрос — истина: «Если у меня достаточно денег, то я иду в кино». Структура условного выражения выглядит так: if ( условие ) { // Здесь совершается какое-то действие } Выражение состоит из трех частей: if (если) говорит о том, что программа, следующая далее, является условным выражением; в скобках находится вопрос, требующий ответа «да» или «нет», называемый условием (подробнее о нем ниже); фигурные скобки ({}) обозначают начало и конец JavaScript-кода, который должен выполняться, если выражение истинно.
ПРИМЕЧАНИЕ Строка «// здесь совершается какое-то действие» — это комментарий. Это не код, который выполняется, а просто заметка, указывающая читателю, что должно происходить в этой части программы. Подробнее о комментариях рассказывается в разделе «Комментарии» главы 2.
Во многих случаях условие — это сравнение двух величин. Например, вы написали игру, в которой игрок побеждает, если набирает более 100 очков. В данной программе вам нужна переменная, в которой сохраняются и обновляются очки игрока. В определенный момент вам придется проверить, превышает ли количество очков 100. Код JavaScript, позволяющий это сделать, выглядит так: if (очки > 100) { alert('Вы победили!'); } Важная часть — очки > 100. Это условие, которое проверяет, превышает ли значение переменной очки 100. Если да, то появляется окно «Вы победили!»; если же количество очков меньше или равно 100, то интерпретатор JavaScript пропускает команду оповещения и переходит
110
Глава 3. Добавление в программу логики и контроля
к выполнению следующей части программы. На рис. 3.2 наглядно представлен данный процесс. score очки >>100100
yes
no нет
alert('You won!'); alert('Вы победили!');
программа program продолжает continues выполняться
Рис. 3.2. При наличии условного выражения код в фигурных скобках выполняется, только если условие — истинно. Если условие ложно, то этот фрагмент кода пропускается, и программа продолжает выполняться
Кроме знака > (больше) существуют и другие операторы, используемые для сравнения чисел (табл. 3.1).
СОВЕТ Введите два пробела (или один раз нажмите клавишу табуляции) в начале каждой строки кода, находящегося в фигурных скобках. Пробелы (или табуляция) создают отступ для этих строк и помогают увидеть начальную и конечную фигурные скобки, а также определить, какой код относится к условному выражению. Два пробела — обычная практика. Но если ваш код становится более удобным для чтения при вставке четырех пробелов, то используйте четыре пробела. В примерах данной книги строки кода в скобках набраны с отступом.
Чаще всего вы будете проверять, равны два значения или нет. Например, вы создали викторину на языке JavaScript, и один из ее вопросов: «Сколько лун у планеты Сатурн?» Ответ посетителя сохраняется в переменной ответ. Вы можете написать такое условное выражение: if (ответ == 31) { alert('Верно. У Сатурна 31 луна.'); } Два знака равенства (==) — не опечатка. Это инструкция для интерпретатора JavaScript сравнить два значения и решить, равны ли они.
111
ПРЕДМЕТНЫЙ УКАЗАТЕЛЬ
A Ajax, 39, 465 компоненты, 467
D data-атрибуты, 446
F Flash, 39
H HTML-теги, 18, 20 a, 21 body, 20 br, 131 div, 215 form, 348 h1, 23 h2, 23 head, 20 html, 20 iframe, 332 input, 348 label, 351 p, 21 script, 41 select, 348, 353 strong, 21 textarea, 348 ul, 23 закрывающий, 20 открывающий, 20
I ID (идентификатор), 553
680
J JavaScript, 13 ECMAScript, 16 внешний файл, 44 ключевые слова, 69 математические операторы, 74 оператор, 73 пробелы, табуляция и возврат каретки в языке, 72 JavaScript Object Notation (JSON) доступ к данным, 507 сложные объекты, 508 формат, 504 jQuery, 17, 161 версии, 166 добавление на страницу, 167 документация, 555 загрузка файла, 164 преимущества, 161 способы добавления на вебстраницу, 163 JSON with padding (JSONP) формат, 513
R RSS-лента, 515
U URL-адрес абсолютный, 45 относительно документа, 45 относительно корневого каталога, 45 типы, 45
X XML корневой элемент, 496 формат, 496
Предметный указатель
А Абсолютное позиционирование, 258 Автоматические циклы, 186 Анонимная функция, 204 ключевое слово "this", 205 Атрибут тега, 21 alt, 282 height, 281 href, 21 src, 44, 280 target, 323 type, 42 width, 281
Б Бесплатные программы Aptana Studio, 27 CoffeeCup Free HTML Editor, 27 Eclipse, 27 HTML-Kit, 27 Notepad++, 26 TextWrangler, 27 Библиотека JavaScript, 161 Prototype, 549 Браузерный движок, 41 Броская цитата, 207 Булево значение истина, 66 ложь, 66
В Валидатор HTML-кода, 21 Веб-страницы заголовок, 20 проверка, 21 слои, 18 тело, 20 Верификация правила, 379 продвинутая, 385 простая, 381 формы, 377
Визуализированный HTML-код, 193 Всплывающая подсказка, 443 CSS, 446 HTML, 445 JavaScript, 448 триггер, 445 Выборки jQuery, 186 замена и перемещение, 192 Выражение-переключатель, 629
Г Гиперссылка, 21
З Знак переключения кода, 66
И Интерпретатор, 41 JavaScript, 41 Интерфейс программирования приложений (API), 514
К Кавычки в строке, 66 Каскадные таблицы стилей (CSS), 22, 23 блок объявления, 24 значение, 25 объявление, 24 селектор, 24 Классы, 195 Комбинации клавиш, 33 Комментарий, 103 Коммерческие программы BBEdit, 28 CoffeeCup, 28 Dreamweaver, 28 EditPlus, 27 Expression Web Designer, 28 textMate, 28 Компилирование, 40
681
Предметный указатель
Компьютерная программа, 40 Конкатенация автоматическое преобразование типов данных, 77 оператор, 76 Консоль ошибок, 55 в браузере Chrome, 59 в браузере Firefox, 56 в браузере IE9, 58 в браузере Safari, 59 Консорциум Всемирной паутины (W3C), 22 Косая черта (/), 20
Л Литерал объекта, 199 Логический оператор и, 119 или, 120 не, 121
М Массив, 87 добавление элементов в, 91 индекс, 89 литерал массива, 88 свойство length, 91 создание, 87 удаление элементов из, 95 Меню, 33 Метод easing linear, 266 swing, 266 Метод отправки данных GET, 472 POST, 472 Методы для объекта окна blur(), 330 close(), 330 focus(), 330 moveBy(), 330 moveTo(), 330
682
resizeBy(), 331 resizeTo(), 331 scrollBy(), 331 scrollTo(), 331
Н Настройки плагина FancyBox, 306 changeSpeed, 307 cyclic, 308 easingIn, 308 easingOut, 308 overlayColor, 307 overlayOpacity, 307 padding, 307 titlePosition, 308 transitionIn, 307 transitionOut, 307
О Объект Date, 612 Объект jQuery, 177 Объект XMLHttpRequest (XHR), 468, 471 метод open(), 472 метод send(), 473 свойство responseText, 474 Объектная модель документа (DOM), 174 обход, 562 проблема с, 175 Объекты методы, 101 оператор typeof, 103 свойства, 101 Оператор break, 630 Оператор выбора, 629 Оператор модуля, 617 Операторы сравнения, 111 оператор неравенства, 113 оператор равенства, 112 Отладка, 635, 659
Предметный указатель
Ошибки виды, 57 зарезервированные слова, 642 знаки равенства, 643 кавычки, 641 область видимости, 647 отслеживание, 55 пути во внешнем файле, 645 путь к внешнему файлу, 644 типы, 639 учет регистра, 643
П Панель вкладок, 410 CSS, 414 HTML, 411 JavaScript, 417 Параметр easing, 266 Переменная, 67 глобальная, 149 изменение значений, 79 использование, 70 комбинированные операторы, 79 локальная, 149 оператор присваивания, 71 правила присвоения имен, 69 создание, 68 Плагин Firebug, 649 обзор ошибок, 650 установка, 649 функция console.log(), 652 Плагин jQuery AnythingSlider, 426 Autocomplete, 529 Color, 263 DD Mega Menu, 346 Easing, 267 FancyBox, 300 Flickr Photo Gallery, 515 Form, 528 GoMap, 528 jqDock, 347 jQuery Tools Tooltip, 462
Navigation, 341, 344, 345 qTip2, 461 ScrollTo, 331 Taconite, 529 Tweet!, 529 UI Datepicker, 374 UI Tooltip, 462 Uploadify, 529 Validation, 379 Правила верификации equalTo, 390 max, 389 maxlength, 389 min, 389 minlength, 389 range, 389 rangelength, 389 Предварительная загрузка изображения, 283 Прогрессивное улучшение, 480 Продвинутые селекторы дочерние селекторы, 181 селекторы атрибута, 182 селекторы потомков, 181 соседние родственные селекторы, 182
Р Регулярное выражение, 290, 585 построение, 586 регекс, 585 свойство global, 601 создание, 585
С Свойства окна height, 328 left, 328 location, 329 menubar, 329 scrollbars, 328 status, 328
683
Предметный указатель
toolbar, 329 top, 328 width, 328 Свойство CSS cursor, 447 position, 258 Связывание функций, 187, 550 Селекторы CSS, 176 ID-селекторы, 178 селекторы классов, 179 селекторы элементов, 179 Сервер, 469 базы данных, 470 веб-сервер, 469 общение с, 471 приложения, 469 установка, 470 Сервисы Flickr, 514 Google Maps, 527 Сеть доставки (и дистрибуции) контента (CDN), 163 Символ границы слова, 588 Скорость эффекта, 253 fast, 254 normal, 254 slow, 254 Скрипт, 40 Слайдер, 425 настройка вида, 431 настройка поведения, 433 Сменяемое изображение, 284 Событийно управляемый язык, 215 События всплытие, 241 запуск, 216 объект , 237 определение, 215 отмена обычного поведения, 239 помощник , 222 удаление, 239
684
События jQuery hover(), 234 toggle(), 236 События документа/окна load, 218 resize, 219 scroll, 219 unload, 219 События клавиатуры keydown, 221 keypress, 221 keyup, 221 События мыши click, 217, 361 dblclick, 217 mousedown, 217 mousemove, 218 mouseout, 218 mouseover, 218 mouseup, 218 События форм blur, 221, 360 change, 220, 361 focus, 220, 358 reset, 220 submit, 220, 356 Строка запроса, 485 Строки извлечение части, 583 изменение регистра, 579 конкатенация, 76 нахождение шаблонов в, 584 определение длины, 578 поиск в, 580 пустая строка, 85
Т Тернарный оператор, 628 Техника CSS sprites, 309, 431 Тип данных логический (булев), 66 строка, 65 число, 64
Предметный указатель
Типы HTML, 19 Точечный синтаксис, 101 Точка останова, 659
У Угловые скобки (<>), 20 Узлы, 176 Унифицированный указатель ресурсов (URL), 19
Функция вызов, 141 область видимости, 148 обратного вызова, 473 оператор возврата, 146, 322 определение, 139 параметр, 143 передача аргумента, 143
Флаг, 115
Функция JavaScript, 63 $(document).ready(), 168 alert(), 48 charAt(), 106 document.getElementById(), 176 document.getElementsByTagName(), 176 document.write(), 51 encodeURIComponent(), 488 fadeOut(), 203 getJSON(), 505 indexOf(), 581 isNaN(), 608 lastIndexOf(), 582 match(), 599 Number(), 78, 605 open(), 326 parseFloat(), 607 parseInt(), 128, 606 pop(), 95 preventDefault(), 239 prompt(), 84 push(), 92 replace(), 320, 527, 602 search(), 585 shift(), 95 slice(), 583 toFixed(), 609 toLowerCase(), 580 unshift(), 92
Форма, 348 верификация, 377 выбор элементов, 351 события, 356 структура, 348
Функция jQuery $(), 549 $.getJSON(), 514 addClass(), 195 after(), 191
Уровень защищенных сокетов (SSL), 632 Условные выражения, 108 else, 114 else if, 116 if, 110 вложение, 122 оценка условия, 115 советы по написанию, 123 Утверждение, 62
Ф Фид, 515 Фигурные скобки ({}), 24 Фильтры jQuery, 184 checked, 353 contains(), 185 even, 184 first, 185 has(), 185 hidden, 185 last, 185 not(), 185 odd, 184 selected, 353 visible, 186
685
Предметный указатель
animate(), 263 append(), 190 attr(), 202, 281 before(), 191 bind(), 242 change(), 362 children(), 565 clone(), 193 closest(), 566 css(), 197 data(), 558 delay(), 271 delegate(), 245, 576 each(), 203 empty(), 574 end(), 570 fadeIn(), 256 fadeOut(), 256 fadeTo(), 256 fadeToggle(), 256 find(), 496, 554, 563, 564 focus(), 363 get(), 484 height(), 435 hide(), 255 html(), 189 innerHeight(), 437 innerWidth(), 437 jQuery(), 549 live(), 577 load(), 475 next(), 250, 568 noConflict(), 549 not(), 324 offset(), 439 outerHeight(), 438 outerWidth(), 438 parent(), 566 position(), 440 post(), 484 prepend(), 190
686
prev(), 568 preventDefault(), 322 ready(), 232 remove(), 192 , 572 removeAttr(), 203 removeClass(), 196, 420 replaceWith(), 572 scrollLeft(), 443 scrollTop(), 443 serialize(), 489 show(), 255 siblings(), 567 slideDown(), 257 slideToggle(), 257 slideUp(), 257 stop(), 278 stopPropagation(), 241 submit(), 357 text(), 189 toggle(), 255 toggleClass(), 196 unbind(), 239 unwrap(), 573 val(), 354 width(), 435 wrap(), 572 wrapInner(), 573 Функция обратного вызова, 253 Функция объекта Math ceil(), 609 random(), 610 round(), 608
Ц Цикл, 130 do/while, 137 for, 135 while, 130 бесконечный, 132
Предметный указатель
Ч Числа округление, 608 преобразование строки в, 605
Э Элемент, 172 действия над, 172
Я Язык программирования клиентский, 38 компилируемый, 40 серверный, 38 синтаксис, 38 скриптовый, 41 Язык разметки гипертекста (HTML), 18