.................................................................. 55
выполнения операторов .................................. 56
ОСНОВНЫЕ КОНСТРУКЦИИ ЯЗЫКА •••••••••••••••••••••••••••••••••••••••••••••
3.3.1.
Условный оператор
57
if ........................................................ 57
Оператор выбора
switch ................................................... 59
3.3.3. Циклы ............................................................................... 61
Цикл for ...................................................................................... 62
3.3.2.
Цикл
while .................................................................................. 63
Цикл
do .. while ............................................................................. 63
break и coпtinue ........................................................ 64
10.1. СТРУКТУРА ОБЪЕКТНОЙ МОДЕЛИ ••••••.••.•••.•••.••..••.••.•.••.•.•••..••. 126
10.2. ОСНОВНЫЕ ОБЪЕКТЫ ОБЪЕКТНОЙ МОДЕЛИ IE ...•...•. " .•..••.••. " .• 127
10.3.
ОБЪЕКТ NAVIGAТOR: ПОЛУЧЕНИЕ ИНФОРМАЦИИ О БРАУЗЕРЕ И СИСТЕМЕ ••••••••••••••••••••••••.••••••••••••••••••••••••••••••••••••..•••.•••••••••
ИНФОРМАЦИЯ О МОНИТОРЕ ПОЛЬЗОВАТЕЛЯ
12.1.5. Класс Math""""""""".". """.".""""""""""." ".""."". 181
12.1.6. Классы Function и Arguments.""."""" """". """"""".". 182
12.1.7. Класс Date "".""""""."."""""" """"""."."""."""." ."183
12.1.8. Класс RegExp ""."""."."""."" ".""."."""." "".""." ".". 186
12.2. СОБЫТИЯ JAVASCRIPT ......................... ......................... ........ 188
12.2.1. Что такое событие?"".""".""."".""".""""""""."""". 188
12.2.2. События мыши"."""""".""".""""""."".""""."""."".188
12.2.3. События клавиатуры"."""."".""."".""."."""".""""". 189
12.2.4. События документа """."". """".""".".".""""" """"" 189
12.2.5. Событияформы.""."".".""""."".".""".""""""""".".190
12.2.6. Последовательность событий"""""""""""""""".""" 190
12.2.7. Всплывание событий """"".""".".""""."" """"."""".191
12.2.8. Действие по умолчанию""""."""."""""""".".""""""193
12.2.9. Обработчики событий"".""".""""""""""""""""""".194
12.2.1 О. Объект event "."""."".""."""."" """. """"""."".""". 195
ГЛАВА
13. ЭФФЕКТНАЯ ЛЕНДИНГ-СТРАНИЦА ......... 197
13. 1.
НЕОБХОДИМЫЕ СЦЕНАРИИ ......................... ......................... .
16.6.1. Самая простая галерея""""""""""""""""""""""""""". 247
16.6.2. Просмотр предыдущей и следующей фотографии.
Изменение внешнего вида окна галереи """ """"""""""""""""" 250
ГЛАВА
17.
ВСЯКИЕ ПОЛЕЗНОСТИ
.........•..•......•••••• 255
17. 1. СЧЕТЧИК ПОСЕЩЕНИЙ С ПОМОЩЬЮ COOKIES ••••••••.•••••••••••••••• 256
17.2. ЗАПРЕЩАЕМ
Введение
Давно уже прошло время статических веб-страниц. Ведь на дворе век авто
матизации и любые, даже самые простые, действия принято автоматизиро
вать. В случае с веб-страницами автоматизация достигается или на сторо
не сервера или на стороне клиента. Также возможна автоматизация, как на
стороне сервера, так и на стороне клиента.
Давайте разберемся, что к чему. Представим, у нас есть некоторая база дан
ных, скажем список товаров интернет-магазина, и нам нужно ее вывести на
нашем сайте. Теоретически, список товаров можно оформить в виде ста
тической НТМL-страницы. Но обновлять такой магазин будет очень не
удобно
- ведь со временем нужно будет добавить/удалить товары,
изменить
цены и т.д. Гораздо проще написать, скажем, на РНР сценарий, который
будет подключаться к БД, выбирать товары из нужной категории (скажем,
компьютеры, мобильные телефоны, бытовая техника и т.д.) и отображать
их посетителю. Также с помощью РНР-сценария можно легко изменить все
позиции сразу, например, в канун Нового года устроить небольшую акцию
и снизить цены на
10%.
Вручную отредактировать несколько тысяч запи
сей, согласитесь, не просто. А простейший сценарий сделает это за доли се
кунды.
Это и есть автоматизация на стороне сервера, поскольку РНР-сценарий вы
полняется интерпретатором на сервере, а пользователь лишь видит резуль
тат выполнения этого сценария. РНР в этой книге не рассматривается, а
если вы заинтересовались, на виртуальных полках книжных магазинах вы
найдете множество книг, посвященных этому языку программирования.
Теперь переходим к автоматизации на стороне клиента. И так, сер верный
сценарий сгенерировал список товаров. Пользователь хочет купить какой
то товар. Принцип работы большинства магазинов прост: посетитель добав
ляет все необходимые ему товары в корзину, а потом оформляет заказ или
вообще отказывается от покупки. Вопрос заключается в том, как будет ре
ализована корзина. Ее тоже можно реализовать как на стороне сервера, так
и на стороне клиента. Скажем, для кнопки "Купить" сделать ссылку вида
http://our_shop.com/buy.php?id=12345,
где
12345 - это
идентификатор (ар
тикул) товара, который будет помещен в корзину. Сама же корзина поль
зователя будет храниться или в БД (если нужно отслеживать все заказы
пользователя), или же во временном файле сессии в каталоге
/tmp
(этот
файл будет удален, как только пользователь закроет браузер ).
•
Введение
Но такой вариант работы с корзиной малоэффективен. Представим, что
в среднем покупатель может заказать
2-3
товара (один основной и
сессуара к нему, например ноутбук, а к нему
акустику). А что если пользователей
-
1-2
ак
мышку и дополнительную
1000 (для средних интернет-магазинов
это не показатель)? Выходит, к серверу будет почти одновременно отправ
лено
2-3
тысячи запросов. Сервер должен их обработать и вывести резуль
тат (по сути ту же страницу, что и была, но со строкой "Товаров в корзине:
число"). То есть ради изменения одного символа мы так нагружаем сервер
процессора. Да и посетитель не будет рад, так как на перезагрузку страницы
нужно время, а если сервер будет сильно загружен или у клиента низкоско
ростной доступ к Интернету, ждать придется несколько секунд.
Оказывается, можно все автоматизировать нашу задачу на стороне кли
ента. Вместе с НТМL-кодом списка товаров наш РНР-сценарий отправит
код JavaScript-cцeнapия, который будет выполнен на клиенте, а не на сер
вере. Когда пользователь нажмет кнопку "Купить", идентификатор товара
запишется в
Cookies
браузера (чтобы содержимое корзины не изменялось
при переходе от одной до другой страницы магазина). При этомjаvаSсriрt
сценарий будет выполнен на компьютере пользователя. Страница не будет
перезагружена, и все будут рады. И хостинг-провайдер
-
поскольку вы не
нагружаете сервер лишними запросами, и пользователь, которому не при
дется ждать несколько секунд, пока перезагрузится страница.
Когда же пользователь захочет оформить заказ и нажмет соответствующую
кнопку/ссылку, содержимое корзины будет отправлено на сервер для об
работки заказа. Получается, что вместо
2-3 запросов
среднестатистический
пользователь сделает всего один (если не считать запросов
GET,
когда он
будет просматривать содержимое интернет-магазина, но от этого никуда не
денешься)
- когда
будет оформлять заказ. И вместо
2-3
тысяч запросов мы
получим тысячу. Вот вам и оптимизация. Теоретически, можно уменьшить
и число СЕТ-запросов (когда пользователь просматривает категории мага
зина, а сценарий на сервере генерирует содержимое той или иной категории
в формате
HTML),
но не думаю, что об этом стоит говорить во введении.
Сценарий на стороне сервера, как уже отмечено, вместе с НТМL-страницей
может передать и JavaScript-кoд, который лежит в основе автоматизации
на стороне клиента. Справедливости ради нужно отметить, что кроме
JavaScript
например
JavaScript,
допускается использование и других скриптинговых языков,
VBScript.
Однако в этой главе мы будем рассматривать только
который наиболее популярен среди веб-мастеров.
KoдjavaScript находится в составе НТМL-документа (или выносится в от
дельный файл, если кол слишком большой). Сам жejavaScript также может
•
JavaScript
на примерах
генерировать НТМL-код (кроме выполнения вычислительных операций и
отображения всевозможных запросов и сообщений).
НТМL-код в этой книге мы не рассматриваем, считается, что читатель с
ним знаком. Данная книга
- самое что ни есть практическое руководство по
JavaScript, позволяющее выучить этот скриптовый язык с нуля.
Начнем мы
с создания обычного НТМL-сайта, а затем попытаемся улучшить его сред
ствами JavaScript. Теоретические и практические главы в этой книге будут
перемешаны
- чтобы
читатель не уставал от теории и мог сразу опробовать
полученные знания на практике.
Что же касается написания кода с О, то в книге мы будем как писать полно
стью собственный код, так и использовать уже готовые библиотеки (когда
это целесообразно). Например, вы хотите сделать обработку формы, чтобы
не подключать тяжеловесные библиотеки, можно написать код вручную тем более, что там ничего сложного нет. Совсем другое дело, когда вам нуж
но реализовать более объемную функцию, например галерею. Нет смысла
тратить недели времени на разработку галереи, биться над одинаковым ото
бражением кода и стилей в разных браузерах, если можно использовать уже
готовое решение. Зачем изобретать велосипед заново?
Цель первой главы - разработать простенький сайт, который мы сможем
потом усовершенствовать средствами JavaScript. Сайт будет написан на
HTML с применением каскадных таблиц стилей (CSS) для придания ему
относительно привлекательного вида. Наш сайт будет посвящен набираю
щим в данное время популярность устройствам
1 . 1.
- гироскутерам.
Главная страница
На главной странице у нас будет размещена информационная область (ее
модно называть featured) и некоторые товары (например, самые популяр
ные или те, которые нам нужно продать в первую очередь).
Как правило, в информационной области можно разместить объявления о
всевозможных акциях, добавить в нее слайдер с лучшими продуктами или
новинками и т.д. Мы просто дополним краткую информацию о преимуще
ствах гироскутеров (лист.
Листинг
1. 1.
1.1).
Преимущества гироскутеров
Преимущества
Экологичность
Экономичность
Компактность
купить
Далее последует информация о товарах (лист.
1.2). На главной мало кто пу
бликует весь товар (если самого товара предостаточно), поэтому мы огра
ничимся тремя единицами.
Понятное дело, у нашего сайта будут меню и "подвал" - нижняя часть сайта.
Код меню и "подвала" приводится в листинге 1.3. Этот же листинг отображает весь код главной страницы
Листинг
"Каталог и Контакты". А в "подвале" сайта есть ссылки на наши страницы в
социальных сетях.
1.2.
Страница с информацией о товаре
Мы не будем приводить код всех страниц сайта, он сходен. Например, на
страницах "Доставка и оплата" и "Контакты" выводится только текстовая
информация со способами оплаты и контактной информацией. В катало
ге отображаются изображения и названия продуктов, как мы это делали на
главной странице. Щелчок по тому или иному товару открывает страницу
с информацией о нем. Обычно такая страница содержит как минимум одно
изображение товара, описание и характеристики. Код страницы товара при
веден в листинге
Листинг
Если вы сейчас просмотрите обе созданные нами страницы, то выглядеть
они будут очень непривлекательно. Чтобы они хоть как-то смотрелись,
нужно задать оформление в СSS-файле
#header ul li {
display: inline;
list-style: none;
rnargin: О;
padding: О 19рх;
#header ul li а {
color: #252525;
display: inline-Ыock;
font-farnily: "Arial Black", Gadget, sans-serif;
font-size: 14рх;
font-weight: norrnal;
rnargin: О;
padding: О О Зрх;
#body > div .article h4
background: #252525;
color: #fff;
display: inline-Ыock;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 25рх;
font-weight: normal;
margin: О О ЗОрх;
padding: Врх 27рх lOpx;
#body > div .article
margin: О О ЗОрх;
#body div ul {
margin: О;
padding: 24рх lOpx
width: 940рх;
р
{
О;
#body div ul l i
border: 2рх solid #lalala;
display: Ыосk;
list-style: none;
margin: О О lЗрх;
overflow: hidden;
padding: О;
#body div ul li .figure {
border-right: 2рх solid #lalala;
float: left;
margin: О;
padding: О;
width: 376рх;
#body div ul li img
border: О;
display: Ыосk;
margin: О;
padding: О;
opacity: 0.8;
transition: 0.5s ease-in-out;
#body div ul li .figure:hover img
opacity: 1;
#body div ul li div {
float: left;
margin: О;
padding: бЗрх О 20рх;
width: 558рх;
#body div ul li div hЗ
color: #252525;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 25рх;
font-weight: normal;
margin: О;
padding: О;
text-transform: uppercase;
#body div ul li div р {
padding: ЗОрх ЗОрх 18рх;
#body div ul li div a.more
background: #000;
color: #fff;
display: inline-Ьlock;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 18рх;
font-weight: normal;
margin: О;
padding: 8рх 28рх;
text-decoration: none;
text-transform: uppercase;
#body div ul li div a.more:hover
color: #252525;
background: #fff;
border: 2рх solid #252525;
#body #featured {
margin: О О 1Зрх;
padding: О;
position: relative;
width: 100%;
#footer div р {
color: tfff;
float: left;
line-height: 44рх;
margin: О О О lOpx;
padding: О;
#footer div ul
display: Ыосk;
float: right;
margin: О;
overflow: hidden;
padding: О;
width: 256рх;
tfooter div ul li
display: Ыосk;
float: left;
list-style: none;
margin: О lOpx;
padding: О;
width: 44рх;
tfooter div ul li а {
background: url( .. /images/icons.jpg) no-repeat
display: Ыосk;
height: 44рх;
margin: О;
padding: О;
text-indent: -99999рх;
width: 44рх;
О
О;
#footer div ul li ttwitter {
background-position: О О;
#footer div ul li ttwitter:hover
background-position: -44рх О;
tfooter div ul li tfacebook {
background-position: О -44рх;
#footer div ul li #facebook:hover
background-position: -44рх -44рх;
#footer div ul li #googleplus {
*footer div ul li *googleplus:hover
background-positi on: -44рх -88рх;
*footer div ul li *pinterest
background-position: О -132рх;
*footer div ul li *pinterest:hover
background-position: -44рх -132рх;
Бот теперь, подключив стили, можно взглянуть, что у нас получилось. На
Данная страница отобразит кнопку Ool'JCPVl'• r.и-нyJD с'l'раницу (рис. 2.1 ),
при нажатии которой будет открыто новое окно с загруженной страницей
index.html.
'~"'
~_.... "
.
-
с~ •· =
Рис.
2. 1 . Hawa страница
Обратите внимание: мы указали атрибут
language тега ,
указы
вающий язык программирования, на котором написан сценарий (кpoмeJa
сценарии можно писать еще на VBS - Visual Basic Script). Кроме
vaScript
атрибута language у тега есть еще один очень полезный атрибут
- src, указывающий файл, в котором содержится JS-код. Если код JavaScript очень большой, и вы не хотите загромождать им НТМL-код страницы ,
можете вынести его в отдельный файл, а затем подключить его следующим
способом:
< / sc ri p t >
Четвертый (и последний) атрибут тега
-
называется defer.
Он от
кладывает выполнение сценария до полной загрузки страницы (по умолча-
нию сценарий начинает выполняться сразу при открытии страницы):
как уже было отмечено выше, задает язык программи
рования, на котором написан сценарий, и может принимать следующие зна
чения:
• JavaScript -
классический вариант языка программирования, который
рассматривается в этой книге (разработка Netscape и
Sun).
разновидность языка программирования JavaScript, разрабо
танная компанией Microsoft. Компании Microsoft обязательно нужно
построить дом заново и заново изобрести велосипед, поэтому разница
• JScript -
между JavaScript иJScipt заключается не только в названии, но и в под
ходах к программированию. Учтите, что поддержкаJSсriрt в некоторых
браузерах может быть ограниченной, поэтому язык
J avaScript более
предпочтителен.
• VBS, VBScript -
сценарий на языке программирования
VBScript,
в ос
нове которого лежит Visual Basic. Поддерживается браузером Internet
Explorer. Остальные браузеры или вовсе не поддерживают VBS или
поддержка весьма ограничена.
В данной книге мы будем рассматривать классическую версию языка про
граммирования, а именно - JavaScript. Значение атрибута language по умол
- JavaScript, поэтому если вы программируете именно нajavaScript,
то можете не указывать атрибут language. Если же вы программируете на
JScript, нужно обязательно указать атрибут language во избежание недопо
чанию
нимания со стороны браузера.
2.4.
Комментарии в
JavaScript
В этой главе вы уже успели познакомиться с комментариями, во всяком
случае неявно. Теперь настало время познакомиться с ними явно. Коммен
тарии в JS могут быть однострочными и многострочными. Однострочный
комментарий начинается с двух знаков
/ /,
с этим типом комментариев вы
уже знакомы:
//комментарий
i++;
//увеличиваем
i
Комментарием является все, что находится после / / и до конца строки .
Многострочный комментарий начинается символами
символами
/*
это
/*
и заканчивается
*/, например:
пример
многострочного
комментария
*/
Какие комментарии использовать - зависит от вас. Однострочные коммен
тарии удобно использовать для комментирования отдельных строчек кода.
Многострочные подойдут для объяснения того, что делает целый блок, на
пример, описать, что делает функция и какие параметры ей нужно передать.
2.5.
Диалоговые окна
Для взаимодействия с пользователем, то есть для ввода данных и вывода
результатов работы программы, как правило, используются НТМL-формы
и возможность вывода НТМL-кода прямо в документ (метод document.
write). Этот способ удобен тем, что вы, используя HTML и CSS, можете
оформить форму ввода данных так, как вам заблагорассудится. То же самое
можно сказать и о выводе данных. Из
J S-сценария вы можете выводить лю
бой НТМL-код, позволяющий как угодно оформить вывод.
Но в некоторых ситуациях этих возможностей оказывается очень много.
Иногда нужно просто вывести диалоговое сообщение, например сообщить
пользователю, о том, что введенный им пароль слишком простой или слиш
ком короткий. В этом разделе мы разберемся, как выводить диалоговые
окна, позволяющие выводить короткие сообщения (например, сообщения
об ошибках ввода) и обеспечивающие ввод данных.
2.5.1.
Метод alert()
- простое окно с сообщением и
кнопкой ОК
Метод alert() объекта window используется для отображения простого окна
с сообщением и одной кнопкой - ОК. Такое окно может использоваться, на
пример, для отображения сообщений об ошибках (короткий/простой/не
правильный пароль). Окно, кроме донесения до пользователя сообщения,
больше не предусматривает никакого взаимодействия с ним.
Методу
alert()
передается только одна строка
-
отображаемая. Чтобы ото
бразить многострочное сообщение, разделяйте строки символом
window.alert("Пpивeт,
\n:
мир!");
window.alert("Пpивeт,\nмиp!");
Первая наша программа была не"Hello, world'', но давайте не будем из
менять традиции и все-таки напишем эту программу, пусть она будет и не
первой - хоть тут мы будем отличаться от всех остальных программистов.
Сценарий, демонстрирующий использование метода alert(), приведен в листинге
2.2.
Листинг
2.2.
Использование метода
aler1()
Alert
window.alert("Пpивeт,
мир!");
Наш сценарий находится в теле документа (тег), поэтому будет за
пущен сразу при загрузке НТМL-файла. Изображаемое им окно приведено
на рис.
2.2.
х
Подтверди;е действие:
ок
Рис.
2.5.2.
2.2. Диапоrовое окно в брауэере Chrome
Метод confirm()
- окно с кнопками ОК и Cancel
- confirm(). Он выводит окно с сообще
Cancel, позволяя пользователю выбрать
возвращаемое методом значение (true, если
Другой часто используемый метод
нием и двумя кнопками
-
ОК и
одну из них. Проанализировав
нажата кнопка ОК и false - в противном случае), вы можете выполнить то
или иное действие. Для нашего примера мы будем просто выводить с по
мощью alert() название нажатой кнопки. Пример использования метода
отображает диалоговое окно с полем ввода, сообщением и
Cancel. Введенное пользователем значение можно потом
будет присвоить какой-то переменной. Диалог возвращает введенную поль
зователем строку. Если пользователь ничего не ввел, диалог возвращает
значение
Методу
null.
prompt() нужно передать два параметра - строку, которая будет ото
бражена в качестве приглашения ввода (над полем для ввода данных), и
значение по умолчанию, которое будет передано в сценарий, если пользова
тель поленится ввести строку и просто нажмет ОК. Пример использования
этого диалога приведен в листинге
Листинг
Наш сценарий прост. Если пользователь нажмет Отмена, то увидит диа
лог с текстом "пока!" (ну не хотим мы общаться с пользователем, который
не хочет представиться). Если пользователь нажмет ОК, то строка из поля
ввода будет отображена в НТМL-документе в виде "Привет, ".
)(
Подтвердите дейстsие:
K•k тt6• юеут?
---------01(
Рис.
2.6.
2.4.
Метод
prompt() •
деАстаии (брауаер
етщ..,.
Flrefox)
Специальные символы
В строках вы можете использовать специальные символы. Это комбинации
обычных символов, обозначающих служебные или непечатаемые символы,
которые нельзя ввести обычным способом. Например, с помощью специ
ального символа
\n
в строку можно вставить разрыв строки, что позволяет
разбить сообщение в диалоговом окне на строки, например:
window.alert("Owибкa!\nПapoль
неправильный");
В JS вы можете использовать следующие специальные символы (ради спра
ведливости, нужно отметить, что их можно также использовать в языках С,
РНР и некоторых других):
это поименованная область памяти, хранящая данные. В
других языках программирования (например, в С, РНР) переменные явля
ются типизированными, то есть при объявлении переменной определяется
тип данных (число, символ, строка, массив чисел или массив символов и
т.д.), которые будут храниться в этой переменной. В JavaScript, как и в РНР,
переменные не являются строго типизированными, а это означает, что тип
переменной зависит от данных, которые в данный момент хранятся в ней.
В отличие от того же РНР, где можно использовать переменную без ее пред
варительного объявления (хотя это и нежелательно, поскольку переменная
не инициализирована), в JavaScript переменную нужно объявить с помо
щью служебного слова var (сокращение от variaЬle ), как во многих других
языках программирования (например, предварительное объявление пере
менных требуется в С, Pascal и других языках программирования).
Имя переменной должно начинаться с символа буквы
(A-Z)
или символа
подчеркивания. Последующими символами могут быть цифры, буквы, а
также знак
$.
Имя переменной не может начинаться с цифры или с симво
ла$ (как в РНР)! Также нужно помнить, что JavaScript учитывает регистр
символов, то есть переменные variaЬle и VariaЬle
-
это две разные перемен
ные.
Имя переменной не может быть зарезервированным словом. Зарезервиро
ванные cлoвaJavaScript были приведены в таблице
2.1.
Правильные примеры имен переменных:
х,
yl, userName,
user
Неправильные имена:
lx,
puЫic
В первом случае имя переменной начинается с цифры, во втором
зарезервированным словом.
При объявлении переменной желательно указать ее первоначальное значе
ние (инициализировать ее):
var my
=
1;
Можно объявить переменную и без инициализации, однако это нежела
тельно, поскольку если забыть ее инициализировать перед первым исполь
зованием, результаты вычисления могут быть неопределенными.
При желании можно объявить сразу несколько переменных, разделив их
запятыми:
var
х,
yl, userNarne,
Сейчас переменная
first
user;
целого типа, поскольку содержит значение
1.
Но ее
очень легко превратить в строку, присвоив строковое значение:
my
=
"привет";
Все последующие обращения к переменной производятся без служебного
слова
var.
3. 1.2. Типы данных и преобразование типов
Данные, хранящиеся в переменной, могут быть разного типа. Как вы заме
тили, при объявлении переменной (как это делается в других языках про
граммирования) тип переменной (данных) не указывается.
В JavaScript переменные могут содержать следующие типы данных:
• number - числа,
как целые, так и с плавающей точкой.
• string - строки.
• Boolean - логический тип
(истина) и false (ложь).
данных, может содержать два значения
- true
функции. В JS мы можем присвоить ссылку на функцию лю
бой переменной, если указать имя функции без круглых скобок.
Numl = 5;
11 Переменной Numl присвоено целое значение 5, тип
- number
Num2 = 5.5;
//Переменное с плавающей точкой 5.5, тип number
Strl = "привет"; // Переменной Strl присвоено значение
"Hello", тип - string
//Также можно использовать одинарные кавычки
Str2 = 'мир';
StrЗ = null; //Переменная не содержит данных, ее тип - object
// Булевая (логическая) переменная со значением
Booll = true;
true
Оператор typeof возвращает строку, описывающую тип данных перемен
ной. Давайте продемонстрируем его работу (см. листинг 3.1 ). Сценарий из
листинга 3.1 объявляет переменные, выполняет их инициализацию (при
сваивает значения), а затем выводит тип каждой переменной. Результат ра
В процессе вычислений J avaScript производит преобразование типов. По
смотрим, как оно работает. Определим две переменные: одна будет содер
жать число
vat
var
1, а вторая -
символ
"1 ":
1;
"1";
А
В
Теперь определим еще две переменные:
var SR
var IR
В
=
А
+
+
А;
В;
11 string resul t
11 integer resul t
Тип переменной определяется по типу первого присваиваемого значения .
В нашем случае переменная
SR
первой была строковая переменная В. Переменная
чение
"11 '', поскольку
IR будет содержать зна
будет содержать значение
2 по вышеописанным причинам.
Переменные в
JavaScript
также могут быть булевого (логического) типа.
Такие переменные могут принимать одно из двух значений
или
false
var Boo l
- true
(истина)
(ложь):
=
true ;
Для принудительного преобразования типов вы можете использовать две
следующие функции :
преобразует строку в число с плавающей запятой, если это
возможно.
3. eval - вычисляет
JavaScript.
выражение в строке, как будто это обычное выражение
Рассмотрим несколько примеров:
var А
var В
1
var С
var D
5.1
var Е
var F
"1";
// строковое значение "1"
parseint(A);
//переменная В
теперь
"5. 1";
/ / строка "5. 1"
parseFloat(C);
//переменной D
будет
"2 + 2";
eval(E);
3.1.3.
11
строка
//
переменной
"2+2"
F
будет
содержит
число
присвоено
число
присвоено
число
4
Локальные и глобальные переменные
Как и в других языках программирования, в
JavaScript существуют локаль
ные и глобальные переменные. Локальной называется переменная, объяв
ленная в какой-нибудь функции. Она доступна только в этой функции и
недоступна во всем скрипте.
Глобальная переменная объявлена в теле скрипта и доступна во всех объ
явленных в скрипте функциях.
Глобальные переменные принято объявлять в самом начале скрипта, что
бы все функции наследовали эти переменные и их значения. Подробнее об
области видимости переменной мы поговорим в главе 11, когда будем рас
сматривать функции.
3.2.
Выражения и операторы
3.2.1.
Выражение
....
-
Типы выражений
это набор переменных, констант, операторов. У любого вы
ражения есть свое значение
-
результат вычисления выражения. Значение
может быть числом, строкой или логическим значением .
В J avaScript есть два типа выражений: которые присваивают значение пере
менной и те, что просто вычисляют выражение без присваивания его значе
ния переменной:
х
=
3 * 2
9 - 5
Существуют еще так называемые условные выражения. Они определяются
так:
(условие)?
значениеl:
значение2
Если условие истинно, то выражение имеет значение
ние
1,
а если нет
-
значе
2.
Например:
sedan
=
(doors >=4)
? true
3.2.2.
false
Операторы присваивания
Операторы присваивания, поддерживаемые в JavaScript, описаны в табли
це
3.1.
Таблица
3.1.
Операторы присваивания
Оператор
Пример
Описание
+=
х+=у
х=х+у
--
х-= у
х=х-у
х *=у
х=х*у
х/=у
х%=у
х=х%у
*=
/=
%=
(остаток от деления)
х=х/у
3.2.3. Арифметические операторы
Математические (арифметические) операторы вJS такие же, как и в боль
шинстве других языков программирования, а именно:
К основным конструкциям языка относят условный оператор
(if.. else),
а
также операторы циклов. В этом разделе будут рассмотрены данные кон
струкции.
3.3. 1. Условный оператор if
Прежде чем мы будем рассматривать условный оператор if, настоятельно
3.2.5 и еще раз просмотреть таблицу с опе
рекомендую вернуться к разделу
раторами сравнения
- так вам
Условный оператор
if
будет понятнее все происходящее здесь.
имеется в большинстве языков программирования.
Он позволяет выполнить определенное действие в зависимости от истин
ности условия. Общая форма оператора выглядит так:
условие)
if (
{операторы,
если
условие
истинно)
[else {
операторы,
если
условие
ложно)]
Обратите внимание, что вторая часть
( else) не обязательна.
Условие - это логическое выражение, построенное на базе операторов срав
нения, именно поэтому я просил вас вернуться к разделу 3.2.5, чтобы еще
раз просмотреть имеющиеся операторы сравнения. Каждый из операторов
сравнения возвращает
true
в случае истинности и
false,
если проверяемый
факт ложен.
Пусть у нас есть две переменные:
var
var
А
В
10;
= 5;
Оператор А
нет
true,
==
В вернет
false,
поскольку А не равно В. Оператор А
поскольку А больше, чем В.
> В вер
JavaScпpt на примерах
Для инверсии логического значения вы можете использовать оператор
!,
например:
!
(А==
В)
Конечно, можно также использовать оператор!=, но здесь уже поступайте,
как вам будет удобнее и понятнее.
В нашем случае переменные А и В не равны, поэтому оператор
значение
false,
==
вернет
но поскольку указан оператор!, то будет возвращено значе
== В)) {
document.write("
else {
document.write("
if
(!
(А
В главе
8
А!=
}
В");
А= В");
}
мы уже сталкивались с оператором
ный пример
-
if и
рассмотрели более слож
проверку нажатия одной из кнопок в диалоговом окне. Вы
можете вернуться к этому примеру, чтобы освежить его в памяти.
Операторы
if можно вкладывать друг в друга, что продемонстрировано в
3.2. Сценарий в этом листинге пытается разделить 1О на значе
ние одной из переменных - А или В, предварительно проверяя, не равно ли
листинге
значение этих переменной О. Сначала он выясняет, не равно ли О значение
переменной А. Поскольку А
рой оператор
= О, то выполнение сценария переходит на вто
который проверяет, не равно ли О значение переменной В.
С переменной В все хорошо, поэтому переменной С будет присвоено зна-
Сначала вычисляется значение переменной или выражения.
•
Затем полученное значение сравнивается с одним из значений, указан
ных в блоках
•
case.
Представим, что у нас
case.
10
блоков
Тогда, если в 5-м блоке
case
case,
и значение совпало с 5-м блоком
не указан оператор Ьгеаk, то будут вы
полнены действия, связанные с блоками 5-10, а также операторы из бло
ка default. Если же указан оператор break, тогда будет выполнено только
то действие, которое указано в 5-м блоке case. Для большей однозначно
сти (если не нужно иного) я всегда рекомендую использовать оператор
break для
•
преждевременного выхода из оператора
switch.
Если вычисленное значение не совпало ни с одним из значений, указан
ных в блоках case, тогда будет выполнены операторы из блока
если таковой указан. Блок default является необязательным.
Представим, что у нас есть переменная
command,
default,
в зависимости от значе
ния которой нужно выполнить определенные действия, например:
if
if
if
if
(comrnand
(comrnand
(comrnand
(command
1) alert
('Выбрано
действие:
1') ;
2) alert
3) alert
('Выбрано
действие:
('Выбрано
действие:
21) ;
3 1);
alert ( 'Выбрано
действие:
4 1) ;
4)
Код выглядит громоздко и логически воспринимается не как один блок, а
как четыре разных блока (если бы мы по этому коду построили блок-схему,
то у нас бы и получилось четыре разных блока).
Весь этот громоздкий код мы можем заменить на более компактный. Пусть
он занимает больше строк, зато выглядит не таким перегруженным и вос
принимается как единое целое:
switch (comrnand) {
case 1: alert('Chosen action: 1'); break;
case 2: alert('Chosen action: 2'); break;
case 3: alert('Chosen action: 3'); break;
case 4: alert('Chosen action: 4'); break;
default: alert('Unknown action!);
"
...... " " " " " " " " " " " " ···········--- " "
""""""" """""""" """"""""""" """ """"". ""
------"
""'
ГЛАВА
3.
Основы синтаксиса
Как видите, получившийся код воспринимается не таким перегруженным,
хотя занимает больше строк. К тому же оператор
switch позволяет задавать
действие по умолчанию. В конечном итоге, с его помощью можно понятнее
и прозрачнее реализовывать сложные разветвления, которые кажутся за
путанными, если их реализовать с помощью
switch - далеко не панацея
if.
Однако еще раз отмечу, что
во всех ситуациях выбора.
В листинге 3.3 приведен пример использования оператора switch. Сначала
мы отображаем диалог ввода действия, затем анализируем, какое действие
выбрал пользователь. Обратите внимание, что прежде чем передать полу
ченное действие оператору switch, мы сводим его к типу number с помощью
функции
Листинг
parselnt().
3.3.
Пример использования оператора
Confirm
var command = window. prompt
switch
("Введите
действие",
"") ;
if (command == null) {
document.write('Cancel pressed');
else
switch (parseint(command)) {
case 1: alert ('Выбрано действие 1 1 ) ; break;
case 2: alert ('Выбрано действие 2 1 ) ; break;
case 3: alert ('Выбрано действие 3 1) ; break;
case 4: аlеrt('Выбрано действие 4'); break;
default: аlеrt('Неизвестное действие');
3.3.З. Циклы
Если проанализировать все программы, то на втором месте после условного
оператора будут операторы цикла. Используя цикл, вы можете повторить
операторы, находящиеся в теле цикла. Количество повторов зависит от
JavaScript
на примерах
типа цикла
-
можно даже создать бесконечный цикл. В
JavaScript
есть три
типа цикла:
•
Цикл со счетчиком
•
Цикл с предусловием
(while).
•
Цикл с постусловием
(do"while).
(for).
Цикл
Начнем с цикла со счетчиком
- for.
for
Он используется для выполнения тела
цикла четко определенного количества раз. Цикл
while,
например, удобно
использовать для ожидания какого-то события (мы не знаем, сколько раз
будет выполнено тело цикла, пока условие станет истинным), а цикл for ис
пользуется тогда, когда вы точно знаете, сколько раз нужно повторить цикл.
Синтаксис цикла
for
for:
(команды_инициалиэации;
)
Оператор
for
начинает свою работу с выполнения команд инициализации.
Данные команды выполняются всего лишь один раз. После этого проверя
ется условие: если оно истинно, выполняется тело цикла. После того, как
будет выполнен последний оператор тела, выполняются команды "после
итерации". Затем снова проверяется условие, в случае, если оно истинно,
выполняются тело цикла и поститерационные команды и т.д.
Выведем строку
for
0123456789:
(i=O; i
>< / button>
Как выглядит наш слайдер, показано на рис.
Рис.
5.2. Делаем
Ul/Shoppica
5. 1. Созданный
5.1.
вручную слайдер
слайдер средствами
jQuery
Теперь посмотрим, как можно сделать слайдер средствами библиотеки
jQuery. Первым делом нужно подключить необходимые сценарии и стили :
Не волнуйтесь, все эти файлы можно будет скачать по предоставленному
архиву. Заголовок слайдера будет выглядеть так:
Гироскутеры на
любой
вкyc
Он будет постоянным в любом случае. Далее нужно описать сами продук
ты. Это делается так:
Гиpocкyтep IO CHIC SmartLS 9"
Модель IO CHIC Smart-LS весит всего лишь
21,5 кг, при этом она выдерживает максимальную нагрузку в 100
кг. Это удобный и компактный сигвей с двумя двигателями по 700
Вт и диаметром колес 9". Купить IO CHIC Smart-LS - это выгодно
и
удобно.
1499 $
Все, что вам остается,
-
это добавить описание своих продуктов в слайдер
(добавить соответствующие
div).
Удобнее всего это делать РНР-сценарием,
но поскольку книга не о нем, добавлять продукты будем вручную.
Далее нужно описать изображения для наших продуктов и кнопки назад/
вперед:
Некоторые начинающие программисты пренебрежительно относятся к
подсказкам. А зря. Подсказки удобно использовать как в панелях управ
ления (чтобы пользователь точно знал, для чего используется та или иная
кнопка), так и на основном сайте. Например, в нашем случае мы можем вы
водить подсказку с основными характеристиками гироскутеров в списке
товаров. Это очень удобно
- подвел мышку, увидел основные характеристи
ки и уже потом открыл страничку товара. Так пользователю не придется
открывать все товары подряд, чтобы ознакомиться с их характеристиками.
Всплывающие подсказки можно реализовать, как самостоятельно, так и ис
пользовать какую-нибудь библиотеку. Мы рассмотрим оба варианта
- сна
чала сделаем красивые всплывающие подсказки сами, а потом будем ис
пользовать ToolТip.
6. 1.
Самостоятельное решение
Поскольку глава практическая, то сразу приступим к практике. Отройте
При желании можете отредактировать цвет и параметры рамки. При на
ведении указателя мыши на объект сразу будет показана красивая всплы
вающая подсказка, использующая стили
HTMLS
для закругленных углов
и теней. Если пользователь использует старый браузер, то подсказка тоже
будет показана, только без всяких украшательств.
Теперь создайте файл
Листинг
6.2.
Файл
tips.js
(лист.
6.2)
и поместите в него следующий код.
tips.js
var tt=function() {
var id = 'tt,;
var top = 3;
var lef t = 3;
var maxw = 300;
var speed = 8;
var timer = 10;
var endalpha = 95;
var alpha = О;
var tt,t,/*c,b,*/h;
false;
var ie = document.all ? true
return{
show:function(e,v,w) {
var t=getEventTarget(e);addEvent(t,'mouseout' ,this.
hide); t.style.cursor='help';
if(tt==null) {
tt=document.createElement('div');
tt.setAttribute('id' ,id);
document.body.appendChild(tt);
tt.style.opacity=O;
if(ie)tt.style.filter = 'alpha(opacity=O)';
•
.-... --- ...
tt.style.display = 'Ыосk';
tt.innerHTML = v;
tt.style.width = w ? w + 'рх' : 'auto';
if(tt.offsetWidth > maxw) {tt.style.width=maxw+'px'}
h = parselnt(tt.offsetHeight) + top;
clearlnterval(tt.timer);
"
pos:function(e) (
var и = ie ? event.clientY + document.documentElement.
scrollTop : e.pageY;
var 1 = ie ? event.clientX + document.documentElement.
scrollLeft : e.pageX;
tt.style.top = (и - h) + 'рх';
tt.style.left = (1 + left) + 'рх';
)
'
fade:function(d) (
var а = alpha;
if( (а != endalpha && d == 1) 11 (а != О && d == -1)) {
var i = speed;
endalpha - а;
if(endalpha - а < speed && d == 1) (i
а;)
)else if(alpha < speed && d == -1) (i
alpha =а+ (i * d);
tt.style.opacity = alpha * .01;
if(ie)tt.style.filter='alpha(opacity=' + alpha + ')';
)else(
clearlnterval(tt.timer);
'none')
if(d == -1) {tt.style.display
)
function getOffset(elem) (
if(elem.getBoundingClientRect) (
var Ьох = elem.getBoundingClientRect();
var body = document.body;
var docElem = document.documentElement;
var scrollTop = window.pageYOffset 11 docElem.scrollTop 11
body.scrollTop;
var scrollLeft = window.pageXOffset 11 docElem.scrollLeft
11 body.scrollLeft;
var clientTop = docElem.clientTop 11 body.clientTop 11 О;
var clientLeft = docElem. clientLeft 1 1 body. clientLeft 1
1
О;
var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
return { top: Math.round(top), left: Math.round(left)
)else{
var top=O, left=O;
while (elem) {
top = top + parseint(elem.offsetTop);
left + parseint(elem.offsetLeft);
left
elem = elem.offsetParent;
return {top: top, left: left)
/*
вспомогательная
возникло
событие
функция получения объекта,
на
котором
*/
function getEventTarget(e)
var е = е 11 window.event;
var target=e.target 11 e.srcElement;
if(typeof target == "undefined")return е; // передали this, а
не event
if (target.nodeType==З) target=target.parentNode;// боремся
с Safari
return target;
/*
стандартная
событий
вспомогательная
функция
назначения
обработчика
*/
var addEvent = (function() {
if (document.addEventListener) {
return function(obj, type, fn, useCapture) {
obj.addEventListener(type, fn, useCapture);
else if (document.attachEvent) { //для Internet Explorer
return function(obj, type, fn, useCapture) {
obj.attachEvent("on"+type, fn);
else
return function(obj, type, fn,
obj ["on"+type] = fn;
Все сценарии подсказок работают одинаково - реагируют на событие
OnMouseOver. По этому событию они должны отобразить подсказку. Внеш
ний вид подсказки определяется только
CSS
и никак не зависит от самого
скрипта. Он может просто использовать те или иные стили.
Вот как можно подключить готовый сценарий
ToolTip:
Как видите, мы задаем не только событие
OnMouseOver,
но и
OnMouseOut
- это событие должно закрыть подсказку.
Стили могут выглядеть примерно так:
* {margin :O; padding :O}
b o dy {font:llpx /1 . 5 Verdana, Arial, Helveti ca , sans - se r if;
background:#FFF}
#text {margin:SOpx auto; width:S OOpx }
.hotspot {color:#900; padding-bottom:lpx; border-bottom:lpx
dotted #900; cursor:pointer)
#tt {position:absolute; display:Ыock; background:url(images/
tt left.gif) top left no-repeat)
#tttop {display:Ыock; height:Spx; margin-left:Spx;
background:url(images/tt_top.gif) top right no-repeat;
overflow:hidden}
#ttcont {display:Ыock; padding:2px 12рх 3рх 7рх; marginleft: Spx; background:#ббб; color:#FFF}
#ttbot {display:Ыock; height:Spx; margin-left:Spx;
background:url(images/tt_bottom.gif) top right no-repeat;
overflow:hidden}
Как видите, стили компактнее, но и подсказка тоже будет выглядеть попро
ще предыдущего варианта.
KoдjavaScript приведен в листинге
Листинг
6.3.
6.3. Файл tt.js
var tooltip=function() {
var id = 'tt';
var top = 3;
var left = 3;
var maxw = 300;
var speed = 10;
var timer = 20;
var endalpha = 95;
var alpha = О;
var tt,t,c,b,h;
false;
var ie = document.all ? true
return{
show:function(v,w) {
i f (tt -- null) {
tt = document.createElement('div');
tt.setAttribute('id' ,id);
t = document.createElement('div');
t.setAttribute('id' ,id + 'top');
с= document.createElement('div');
c.setAttribute('id' ,id + 'cont');
Ь = document.createElement('div');
b.setAttribute('id' ,id + 'bot');
tt.appendChild(t);
tt.appendChild(c);
tt.appendChild(b);
hide:funct io n() {
c learinte rva l(t t .timer );
tt.time r = s etint er v al (func tion () {tooltip . fa de(1)), timer);
)
);
) () ;
Чтобы его не перепечатывать, вы можете найти данный код в Интернете .
Кстати, если вы сравните оба сценария, то обнаружите, что наша самосто
- это не что иное, как надстройка над исходным Тоо!Тiр.
Если присмотритесь внимательнее , то обнаружите, что наш сценарий уста
ятельная версия
навливает другой тип курсора мыши при наведении на область с подсказ
кой, и много чего еще. Сравнение этих двух сценариев будет вашим домаш
ним заданием. Внешний вид подсказки приведен на рис.
6.2.
Приведенные варианты создания вспл ывающих подсказок
-
не единствен
ные. В Интернете вы найдете другие варианты. Но по мне смысл а в этом
нет, лучше поработать над оформлением подсказки (стилями).
10 CHIC CAOSS :ZO "
BLACK
Рис.
...
"
.. " .. .. ...... "
6.2.
Внешний вид подсказки (скрипт
. .. .. .. . . . .... .. . .... .....
"
"
.. .. ..... .
10 4
ToolTlp)
•
Глава
7.
Функции
-~
JavaScr1pt на примерах
понятия
7. 1 . Основные
- это фрагмент JavaScript-кoдa,
Функция
который можно вызвать из любо
- это подпрограмма. Функ
function, синтаксис описания
го места основного сценария. По сути, функция
ция описывается с помощью ключевого слова
функции следующий:
function
[return
]
}
Имя функции должно быть уникальным. Для него действуют те же прави
ла, что и для имени переменной. После имени функции в круглых скобках
указываются параметры функции. Если функции не передаются параме
тры, то указываются только круглые скобки. Если параметров несколько,
то они разделяются запятыми.
В фигурных скобках располагаются выражения
JavaScript.
Как правило,
они производят какие-то манипуляции над переданными параметрами.
Функция по определению должна возвращать результат. Результат возвра
щается с помощью ключевого слова return. Конечно, иногда нужно создать
просто подпрограмму, которая не возвращает никакого результата (напри
мер, форматирует сообщение в диалоговом окне и выводит это самое диа
логовое окно), в этом случае ключевое слово return не обязательно и можно
обойтись без него.
Рассмотрим несколько примеров функций:
//Имя функции указываем
denied;
/ / Вызываем функцию denied () по
var d
d () ;
без
скобок
ссьurке
]S допускаются также анонимные функции, то есть функции без назва
В
ния:
х =
var
function()
х
() ;
//
//
{
window.alert('Tecт');
ссьurка
на
анонимную функцию
//присваивается переменной х
вызываем функцию через переменную х
Ссылку на вложенную функцию можно возвратить в качестве значения
конструкции
return, для этого дважды
используются круглые скобки. При
мер:
var х = function() {
return function() {
11
//
Ссьurка на
анонимную функцию
Возвращаем ссьurкуна
вложенную
функцию
window.alert("Tecт");
};
};
х()
();
7.2.
//Вызываем вложенную функцию
Расположение функций внутри
сценария
Мы уже рассмотрели достаточно примеров функций, осталось только по
нять, где в НТМL-документе должны находиться функции. Теоретически,
функция может находиться в любом месте сценария, но до первого момента
ее использования. Чтобы не запутывать прежде всего самих себя, програм
мисты обычно помещают описание функций в секцию HEAD (заголовок)
НТМL-документа. Если же функций достаточно много или код функции
слишком объемный, можно вынести код в отдельный
.js
файл. Сейчас мы
рассмотрим оба варианта.
В листинге
7.1
я описал функцию в секции
водится из сценария секции
BODY.
HEAD, а вызов функции
произ
ГЛАВА
Листинг
7.
Функции
7.1. Функция помещена в HEAD
Фyнкции
function denied() {
window.alert('Access Denied!');
denied();
11
вызываем функцию
В листинге
7.2
мы подключаемJS-файл
любым). Код файла
Листинг
7 .2.
functions.js
functions.js
(имя файла может быть
приведен в листинге
7.3.
Вызов функции из внешнего JS-файла
Фyнкции
denied();
Листинг
7.3.
Внешний JS-файл
(functions.js)
function denied() {
window.alert('Access Denied!');
Понятно, не нужно создавать отдельный JS-файл для каждой функции. Вы
можете создать один-единственный файл, в который поместите все функ
ции, необходимые вашему основному сценарию.
7. З.
Рекурсия
Рекурсия
это явление, когда функция вызывает саму себя. Нужно отме
-
тить, что рекурсивные алгоритмы очень опасны и их рекомендуется по воз
можности избегать. Основная опасность в зацикливании, когда не предус
мотрено (или предусмотрено некорректно) условие выхода из рекурсии. Во
многих книгах по программированию рекурсия традиционно используется
для вычисления факториала. Далее приведена функция
Factorial(),
вычис
ляющая факториал числа х. Условием выхода из рекурсии является опера
тор:
if
(х
==
О
11
х
== 1)
return 1;
Если х равен О или 1, функция вернет 1, в противном случае она будет вы
числять факториал х - 1, для чего вызовет саму себя.
Код функции:
function f_Factorial(x)
if (х == О 1 1 х == 1) return 1;
else return (х * f_Factorial(x - 1));
7 .4.
Область видимости переменной:
глобальные и локальные переменные
Глобальными являются все переменные, объявленные за пределами функ
ции. Они доступны в любой части программы (сценария), в том числе и в
функции.
Локальными являются переменные, объявленные в самой функции. Такие
переменные доступны только функции, в которой они объявлены, и недо
ступны в других функциях или в основной программе.
Если имя локальной переменной совпадает с именем глобальной перемен
ной, то будет использоваться локальная переменная, а значение глобальной
переменной останется без изменения.