КулЛиб - Классная библиотека! Скачать книги бесплатно
Всего книг - 706104 томов
Объем библиотеки - 1347 Гб.
Всего авторов - 272715
Пользователей - 124641

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

Новое на форуме

Новое в блогах

Впечатления

medicus про Федотов: Ну, привет, медведь! (Попаданцы)

По аннотации сложилось впечатление, что это очередная писанина про аристократа, написанная рукой дегенерата.

cit anno: "...офигевшая в край родня [...] не будь я барон Буровин!".

Барон. "Офигевшая" родня. Не охамевшая, не обнаглевшая, не осмелевшая, не распустившаяся... Они же там, поди, имения, фабрики и миллионы делят, а не полторашку "Жигулёвского" на кухне "хрущёвки". Но хочется, хочется глянуть внутрь, вдруг всё не так плохо.

Итак: главный

  подробнее ...

Рейтинг: 0 ( 0 за, 0 против).
Dima1988 про Турчинов: Казка про Добромола (Юмористическая проза)

А продовження буде ?

Рейтинг: -1 ( 0 за, 1 против).
Colourban про Невзоров: Искусство оскорблять (Публицистика)

Автор просто восхитительная гнида. Даже слушая перлы Валерии Ильиничны Новодворской я такой мерзости и представить не мог. И дело, естественно, не в том, как автор определяет Путина, это личное мнение автора, на которое он, безусловно, имеет право. Дело в том, какие миазмы автор выдаёт о своей родине, то есть стране, где он родился, вырос, получил образование и благополучно прожил всё своё сытое, но, как вдруг выясняется, абсолютно

  подробнее ...

Рейтинг: +2 ( 3 за, 1 против).
DXBCKT про Гончарова: Тень за троном (Альтернативная история)

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

По сути — что четвертая, что пятая часть, это некий «финал пьесы», в котором слелись как многочисленные дворцовые интриги (тайны, заговоры, перевороты и пр), так и вся «геополитика» в целом...

Сразу скажу — я

  подробнее ...

Рейтинг: +1 ( 1 за, 0 против).
DXBCKT про Гончарова: Азъ есмь Софья. Государыня (Героическая фантастика)

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

С одной стороны — о покупке данной части я все же не пожалел (ибо фактически) - это как раз была последняя часть, где «помимо всей пьесы А.И» раскрыта тема именно

  подробнее ...

Рейтинг: +1 ( 1 за, 0 против).

JavaScript на примерах Практика, практика и только практика [А. П. Никольский] (pdf) читать онлайн

Книга в формате pdf! Изображения и текст могут не отображаться!


 [Настройки текста]  [Cбросить фильтры]

"Наука и Техника"
Санкт-Петербург

Никольский А. П.

JavaScript
на примерах
Практика, практика и
только практика

J5

"Наука и Техника"

Санкт-Петербург

УДКОО4.738

ББК32.973

ISBN 978-5-94387-762-9

Никольский А. П.

JAVASCRIPT НА ПРИМЕРАХ.
ПРАКТИКА

-

ПРАКТИКА, ПРАКТИКА И ТОЛЬКО

СПб.: Наука и Техника,

2018. - 272 с., ил.

Серия «На примерах»
Эта книга является превосходным учебным пособием для изучения
языка программирования

J avaScript

на примерах.

Изложение

ведется последовательно: от написания первой программы, до
создания полноценных проектов: интерактивных элементов (типа
диалоговых

слайдера,

окон)

интернет-магазина,

лендинговой

страницы и проч. По ходу даются все необходимые пояснения и
комментарии.

Книга написана простым и доступным языком. Лучший выбор
для результативного изученияJаvаSсriрt!

Материалы к книге размещены на сайте издательства "Наука и Техника"
в разделе ''Материалы к книгам".

ISBN 978-5-94387-762-9

Контактные телефоны издательства:

(812) 412 70 26
Официальный сайт:

1

9 8-5-94

7-7629

www.nit.com.ru

© Никольский А.П., ПРОКДИ
©

Наука и техника (оригинал-макет)

Содержание
ВВЕДЕНИЕ ..........................................................

12

ГЛАВА 1. ПРОСТОЙ САЙТ БЕЗ JAVASCRIPT .•.••.....•...• 15
1.1.

ГЛАВНАЯ СТРАНИЦА •••.••..••.••..•..••..••.•••.••.••••••.••.••.....................

16

1.2. СТРАНИЦА С ИНФОРМАЦИЕЙ О ТОВАРЕ ............•••.•..•••••••.••.•..••..• 19

................................................................................... 22

1.3.

стили

1.4.

НЕДОСТАТКИ НАШЕГО РЕШЕНИЯ

ГЛАВА

2.

.••..••.••..••.••.••..•..•..............•...... 32

ОСНОВНЫЕ ПОНЯТИЯ

И ПЕРВАЯ ПРОГРАММА
2.1. JAVASCRIPT -

НЕ

.•..••.••...•.. " .•••..•••••• ". 35

JAVA .•........••..•...•....................•..•...••.••....•...•..• 36

2.2.

ОБЪЕКТНАЯ МОДЕЛЬ

JAVASCRIPT •••••..••.••..••.••.•.•....•.................. 37

2.3.

ПЕРВАЯ ПРОГРАММА

..••..••.•••..•...•.•...........•.....•..•....••••.••..••••..•. 38

2.4.

КОММЕНТАРИИ В

2.5.

ДИАЛОГОВЫЕ ОКНА •.....••......••..••..•..••.••..••.••.•••••..••...••.••.•••••....

JAVASCRIPT •..•..•..••........•.•••..••.••.••••.••.••..•.••.••. 41

2.5.1.

Метод

2.5.2.

Метод confirm()

2.5.3.

Метод

alert() -

простое окно с сообщением и кнопкой ОК

-

окно с кнопками ОК и

prompt() - диалоговое

Cancel . ".".""." ".43

окно для ввода данных"". ".44

2.6.

СПЕЦИАЛЬНЫЕ СИМВОЛЫ ..............•..•....•........••..••.•.•.••..•.•••.•..•

2. 7.

ЗАРЕЗЕРВИРОВАННЫЕ СЛОВА

ГЛАВА

3.1.

3.

45

••.•••••...•..•...••....••.•.•..•••.••..•.••..•..• 46

ОСНОВЫ СИНТАКСИСА ••••.•..•...............••••

ПЕРЕМЕННЫЕ В

42
.42

47

JAVASCRIPT .••..•...•..•...••.........•.••..••.•.••.••.••.••..•.• 48

3.1.1. Объявление переменной""".""""""""""""""."""""" ..48
3.1.2. Типы данных и преобразование типов "." "" """" ."" """ "49
3.1.3. Локальные и глобальные переменные """.""""""""""".52
3.2.



ВЫРАЖЕНИЯ И ОПЕРАТОРЫ

••.••.•...........•..................••..•.•..••..••.. 52

3.2.1. Типы выражений""""""""""""""""."""."""""""" """.52

JavaScпpt на примерах

3.3.

................................................ 53

3.2.2.

Операторы присваивания

3.2.3.

Арифметические операторы ............................................. 53

3.2.4.

Логические операторы

..................................................... 54

3.2.5.

Операторы сравнения

...................................................... 54

3.2.6.

Двоичные операторы ........................................................ 55

3.2.7.

Слияние строк

3.2.8.

Приоритет

.................................................................. 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

Операторы

Вложенность циклов

ГЛАВА

4.

МАССИВЫ

.................................................................. 65

.•.•.•.••..••................•.•.•.......•••. 67
••••••••••••••••••••••••••••••••••••••••••••••.•.••••••••••• 68

4. 1.

ВВЕДЕНИЕ В МАССИВЫ

4.2.

ИНИЦИАЛИЗАЦИЯ МАССИВА •••••••••••••••••••••••••••••••••••••••••••••••••••••

69

4.3.

ИЗМЕНЕНИЕ И ДОБАВЛЕНИЕ ЭЛЕМЕНТОВ МАССИВА •••••••••••••••••••••

69

4.4.

МНОГОМЕРНЫЕ МАССИВЫ

4.5.

ПРИМЕР ОБРАБОТКИ МАССИВА

••••••••••••••••••••••••••••••••••••••••••••••••••••••• 70
••••••••••••••••••••••••••••••••••••••••••••.••.• 70

ГЛАВА 5. ДЕЛАЕМ СЛАЙДЕР ...•.•......•..•.....••....•..... 75
5.1. ДЕЛАЕМ СЛАЙДЕР ВРУЧНУЮ ••••••••••••••••••••••••••••••••••••••••••••••••••••• 76
5.2. ДЕЛАЕМ СЛАЙДЕР СРЕДСТВАМИ JQUERY Ul/SHOPPICA ••••••••••••••••• 79

ГЛАВА 6. КРАСИВЫЕ ПОДСКАЗКИ ДЛЯ САЙТА •..•....... 84
6.1.

САМОСТОЯТЕЛЬНОЕ РЕШЕНИЕ •••••••••••••••••••.•••••••••••••.••..••..•..••.•.

".
6.2.

СКРИПТТООLТIР ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••.•••••

84
89



·-- --- -- --- --- --- --- --- ---- -- -- --- -- --·- ----- --- -·-- -- ... -- -........ --- . -- -... --·

Содержание

ГЛАВА
7.1.

7.

ФУНКЦИИ

.............................................. 93

ОСНОВНЫЕ ПОНЯТИЯ .•...•.•..•...••.•••.••..••..••.•••.••.•••.•••...•..••.••.•••.•

94

7 .2. РАСПОЛОЖЕНИЕ ФУНКЦИЙ ВНУТРИ СЦЕНАРИЯ •• "." •• "". " .••...•• ". 96
7.3.

РЕКУРСИЯ

••.... " .......•..•...••.•••...••.••. " •..••. "." •.. " .•.. " •...... " ..•.. ". 98

7.4. ОБЛАСТЬ ВИДИМОСТИ ПЕРЕМЕННОЙ: ГЛОБАЛЬНЫЕ
И ЛОКАЛЬНЫЕ ПЕРЕМЕННЫЕ •..••. " •. " ..... " ..... " .. " ... " ..... " ..... 98
ГЛАВА

8.

ОСНОВЫ ОБЪЕКТНО-ОРИЕНТИРОВАННОГО

ПРОГРАММИРОВАНИЯ

••••.•.•........•••••••••••••.• 101

8. 1.

ОСНОВНЫЕ КОНЦЕПЦИИ

8.2.

СОЗДАНИЕ ПОЛЬЗОВАТЕЛЬСКИХ КЛАССОВ И ОБЪЕКТОВ

8.3.

ПРОТОТИПЫ

8.4.

ПРОСТРАНСТВА ИМЕН

ГЛАВА

9.

.. "." .. " .. " •..•• " .. " ....• " .•... " .....•••. " ....• 102
••••• " •.••. 105

". " ...••.•••.•••.•••.••..••• " •.••• " •••••.••••••.••..••..••. " ........ 108
••••..••...•.••.••...••.•••.••.••••••.•••.••.•.••.••.••.••.• 109

МЕНЮ И ПАНЕЛИ

..•.•••••••••••••.•••....••.•....• 111

9.1.

ДЕЛАЕМ МЕНЮ ВРУЧНУЮ"." •.•.. "

9.2.

ДИНАМИЧЕСКОЕ МЕНЮ СРЕДСТВАМИ

....• " ••• "." •.••••••.••• " •••.••.••.••.• 112
SUPERFISH •..••.•••• " ••.•• "". 116

9.2.1. Создание меню ."""""""".""."".""." .. " .. """"".""""" 116
9.2.2. Настройка меню""""."""""."."""""""."""""""".""" 120
9.3.

ЭФФЕКТНАЯ ПОЛОСКА ПРОКРУТКИ ••• "

9.4.

РАЗДВИГАЮЩЕЕСЯ МЕНЮ •....•.••.••••.•••.••••••.••.••••.•..•.••.••.••.••.••.

ГЛАВА

1 О.

ОБЪЕКТНАЯ МОДЕЛЬ

•..••.••••••..••.••.••••.••..•...•••• 122
123

..........••.•••..••••••.. 125

10.1. СТРУКТУРА ОБЪЕКТНОЙ МОДЕЛИ ••••••.••.•••.•••.••..••.••.•.••.•.•••..••. 126
10.2. ОСНОВНЫЕ ОБЪЕКТЫ ОБЪЕКТНОЙ МОДЕЛИ IE ...•...•. " .•..••.••. " .• 127
10.3.

ОБЪЕКТ

WINDOW ••..••..•••.•••..••.••..••.•••.••..••.•••.•••.••.••••.•••••••••.• 128

10.3.1. Метод open(): создаем новые окна .. """ """."" ." ."" .". 130
10.3.2. Метод showModalDialog().".""""."""""."""""."."".".132

JavaScript

на примерах

10.3.3.

10.4.

Метод setТimeout()

........................................ " ............. 138

ОБЪЕКТ NAVIGAТOR: ПОЛУЧЕНИЕ ИНФОРМАЦИИ О БРАУЗЕРЕ И СИСТЕМЕ ••••••••••••••••••••••••.••••••••••••••••••••••••••••••••••••..•••.•••••••••
ИНФОРМАЦИЯ О МОНИТОРЕ ПОЛЬЗОВАТЕЛЯ

140

•• 141

10.5.

ОБЪЕКТ

10.6.

OБЪEKTLOCATION: СТРОКААДРЕСАБРАУЗЕРА •••••••••••••••••••••••••

142

СПИСОК ИСТОРИИ ••••••.•••••••••••••••.••.•••••••••••••

142

1О.7. ОБЪЕКТ

SCREEN:

HISTORY:

10.8. ОБЪЕКТ DOCUMENT:

ОБРАЩЕНИЕ К ЭЛЕМЕНТАМ ДОКУМЕНТА

•.•. 143

10.9. ОБЪЕКТ SТYLE: ДОСТУП К ТАБЛИЦЕ СТИЛЕЙ ••••••••.•••••••.••••••••••. 147
10.1 О.

ОБЪЕКТ

SELECTION:

РАБОТА С ВЫДЕЛЕНИЕМ

••••••••••••.•••••••••••• 148

•••••••••••••.•••••.•••••.••.•••••••••••.••••••••••••••• 149
10.11.1. Добавление сайта в Избранное ................................... 149

1О.11. ПОЛЕЗНЫЕ ПРИМЕРЫ

10.11.2. Установка сайта

в качестве домашней страницы .........

150

10.11.3. Работа с Cookies .... "" ........ """."" ... "" ... "" "" ........ "" 150

ГЛАВА

11. 1.

11.

РАБОТА С ФОРМАМИ В

КОЛЛЕКЦИЯ

JAVASCRIPT ••••••.. 154

FORMS •••••••••••••••••••••••••••••••••••••••••••••••.•••.••••••••• 155

11.2. СВОЙСТВА, МЕТОДЫ И СОБЫТИЯ ОБЪЕКТА ФОРМЫ •••••••••••••••••• 156
11.З. ПОЛУЧЕНИЕ ДДННЫХ ИЗ ПОЛЯ ВВОДД. ПРОВЕРКА
ПРАВИЛЬНОСТИ ВВОДД

••••••••••••••••••••••••••••.••••••.••••••••••••••• 156

TEXTAREA •••••••••.•••••••••••••••••.•••••••••••••••••••••.••••••••••• 158

11.4.

РАБОТА С

11.5.

РАБОТАСФЛА>ККАМИ

11.6.

РАБОТА С КНОПКАМИ

11. 7.

ПРОВЕРКА ПРАВИЛЬНОСТИ

••••••••••••••••••.••••••••••••••••••••••••••••••••••••••• 160
••••••••••••••••••••••••.•••.•••••••••••••••..••••••••••••• 161
E-MAIL ••••••••••••••••.••••••••.•••••••••••.••• 162

11.8. ФОРМА ЗАКАЗА ДЛЯ НАШЕГО САЙТА ••••.•••.•••••••••••..••.•••.••••••••• 167
ГЛАВА

...
12.1.

12.

ВСТРОЕННЫЕ КЛАССЫ

И СОБЫТИЯ

JAVASCRIPT ................••.•......... 171

ВСТРОЕННЫЕ КЛАССЫ



••••••••...••.••••••••.•.••.....••.••••••..••.•••..•....• 172

_____________________ ---------- ---- --- ..------- --·'" ·-··- ·----·· .. " " ...... ---

---- --- --- -·

Содержание

12.1.1. Класс Global" .... " ... "" ........... " ..... " ... " ..... " .. """ .. "".""172
12.1.2. Класс Number "".""""""."""."""" """."""."".".""""1 73
12.1.3. Класс String "" .. "."""".""".""""""" """"."."."."""".17 4
12.1.4. Класс Array"""."" .""""""""."""".""" ."""." """" "" .. 177
Свойства и методы класса """ "". "."" """" "." """ ". ".".""."" 177
Сортировка массива ............................... .. " ............ " ...... " ....... 179
Многомерные массивы"""""""".".""""""""""" .. """."""". 180
Ассоциативные массивы ............ "

............. " ... " ... " .. " ............... 180

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.

НЕОБХОДИМЫЕ СЦЕНАРИИ ......................... ......................... .

13.2.

НТМL-КОД

198

......................... ......................... ........................ 199

13.3. СЦЕНАРИЙ ПРОКРУТКИ ......................... ......................... ....... 201
ГЛАВА

14.

ВВЕДЕНИЕ В

AJAX ................... ............ 205
JAVASCRIPT ......................... .......... 206

14. 1.

РАЗЛИЧНЫЕ БИБЛИОТЕКИ

14.2.

ВВЕДЕНИЕ В

14.3.

СОЗДАНИЕАJАХ-ПРИЛОЖЕНИЯ

AJAX

ИЛИ ПЕРЕЗАГРУЗКА СТРАНИЦЫ НА ЛЕТУ

....... 207

......................... .................... 208

JavaScript

на примерах

ГЛАВА 15. ДОБАВЛЯЕМ JQUERY UI НА САЙТ • •. • •. . . . . . 214
15.1.

ЗАГРУЗКАJQUЕRУ

15.2.

ВЫБОР ДАТЫ

UI •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 215

•••••••••••••••••••••••••••••••••••••.•••••••••• " •••••••••••••••• " •• 216

15.3. ДИАЛОГОВОЕ ОКНО •••••••••••••••••••••••••••••••••• " ••••••••••••••••••••••••• 218
15.4.

РАСКРЫВАЮЩИЕСЯ СЕКЦИИ

15.5.

ИНДИКАТОР ПРОЦЕССА

15.6.

вклддки

15.7.

кнопки

ГЛАВА
16. 1.

16.

•••••••••••••••••••••••••••••••••••••••••••••••• 220

•••••••••••••••••••••••••••••••••••••••••••••.•••••••••• 223

........................................................................... 226

....... "."."." ......... " .. " .. " ..... " .............. " ........ " ..... "
НАВОРАЧИВАЕМ ИЗОБРАЖЕНИЯ

ИЗМЕНЕНИЕ ИЗОБРАЖЕНИЯ ПО СОБЫТИЮ МЫШИ

228

••••••••... 231

••••••••••••••••••• 232

16.2. СЛАЙДЕР В ВИДЕ ФОТОПЛЕНКИ •••••••••• " •••••••••••••• "." •••• " •••••• " 233
16.3. ЗАГРУЗКА ИЗОБРАЖЕНИЯ

В

DIV ••••• "." ••• " ••• " •• "" •••••• " •• " ••••••• 239

16.4. КАРУСЕЛЬ ФОТОГРАФИЙ ••••••••••••••••• " •••••••••••••• " •••••••••••• "." •• 241
16.5.

16.6.

ЗАТЕНЕНИЕ КАРТИНКИ ПРИ НАВЕДЕНИИ С ПОМОЩЬЮ
ФИЛЬТРА ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
ГАЛЕРЕЯ

246

FANCY ВОХ •••••••••••••••• " ••••••••••••••••••••••••••••••••••••••••••• 247

16.6.1. Самая простая галерея""""""""""""""""""""""""""". 247
16.6.2. Просмотр предыдущей и следующей фотографии.
Изменение внешнего вида окна галереи """ """"""""""""""""" 250
ГЛАВА

17.

ВСЯКИЕ ПОЛЕЗНОСТИ

.........•..•......•••••• 255

17. 1. СЧЕТЧИК ПОСЕЩЕНИЙ С ПОМОЩЬЮ COOKIES ••••••••.•••••••••••••••• 256
17.2. ЗАПРЕЩАЕМ

БРАУЗЕРУВЫДЕЛЯТЬТЕКСТ ••••••••• "

17.3. ДОБАВЛЯЕМ

ИНФОРМАЦИЮ ОБ АВТОРСКИХ ПРАВАХ ••••••••••••••••

•• " ••••• " •••••• ". 261
262

17.4. ЗАПРЕТ ПРОСМОТРА НТМL-КОДА •••••••••••••••••••.•••••••••.••••••••••••• 262

....

'

17.5. ОТЛОЖЕННАЯ ЗАГРУЗКА ФАЙЛА •••••••••••••••••••••••••••••••••••••••••••• 263

-.. -·- -·- ... -.. -...... -.... --- -..... -.. -- . -.. -. -... -- .. -- ---. ----.. ---... --· ...

Содержание

17 .6.

ВСПЛЫВАЮЩИЕ ОКНА

ЗАКЛЮЧЕНИЕ



••••••••••••••••••••••••••••••••••••••••••••••••••••••••• 264

••••.•.........•...••.••.........•...•.•.•......•.. 266

···-- ... " ............ ··--······· ................... -· -- ........ -..... "

. . ....

JavaScript

на примерах

Введение
Давно уже прошло время статических веб-страниц. Ведь на дворе век авто­
матизации и любые, даже самые простые, действия принято автоматизиро­

вать. В случае с веб-страницами автоматизация достигается или на сторо­
не сервера или на стороне клиента. Также возможна автоматизация, как на
стороне сервера, так и на стороне клиента.

Давайте разберемся, что к чему. Представим, у нас есть некоторая база дан­
ных, скажем список товаров интернет-магазина, и нам нужно ее вывести на

нашем сайте. Теоретически, список товаров можно оформить в виде ста­

тической НТМ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. Теоретические и практические главы в этой книге будут

перемешаны

- чтобы

читатель не уставал от теории и мог сразу опробовать

полученные знания на практике.

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

тратить недели времени на разработку галереи, биться над одинаковым ото­
бражением кода и стилей в разных браузерах, если можно использовать уже
готовое решение. Зачем изобретать велосипед заново?

Приятного чтения!



811-------···--·· .. ---------....... -- --- -- ·-----.. " ------- -- --- --.... -- -.. -". -----..

Глава

1.

Простой сайт без

JavaScript

- --+

JavaScript

на примерах

Цель первой главы - разработать простенький сайт, который мы сможем
потом усовершенствовать средствами JavaScript. Сайт будет написан на
HTML с применением каскадных таблиц стилей (CSS) для придания ему
относительно привлекательного вида. Наш сайт будет посвящен набираю­
щим в данное время популярность устройствам

1 . 1.

- гироскутерам.

Главная страница

На главной странице у нас будет размещена информационная область (ее
модно называть featured) и некоторые товары (например, самые популяр­
ные или те, которые нам нужно продать в первую очередь).

Как правило, в информационной области можно разместить объявления о
всевозможных акциях, добавить в нее слайдер с лучшими продуктами или
новинками и т.д. Мы просто дополним краткую информацию о преимуще­

ствах гироскутеров (лист.

Листинг

1. 1.

1.1).

Преимущества гироскутеров





Преимущества

Экологичность
Экономичность
Компактность
купить



Далее последует информация о товарах (лист.

1.2). На главной мало кто пу­

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



-----········-----------------------------------------------------------------------·

ГЛАВА

Листинг

1.2.

1. Простои саит без JavaScript

Некоторые товары





IO CHIC Smart-LS 9" Black







IO CHIC Cross 20" Black







IO CHIC Fairy 6.7" Red





Понятное дело, у нашего сайта будут меню и "подвал" - нижняя часть сайта.
Код меню и "подвала" приводится в листинге 1.3. Этот же листинг отображает весь код главной страницы
Листинг

1.3.

Код

- index.html.

index.html





Гиpocкyтepы





Гироскутеры на любой вкус



глaвнaя

JavaScript

на примерах

дocтaвкa и оплата



кaтaлoг



кoнтaкты








Преимущества
Экологичность
Экономичность
Компактность
купить






IO CHIC Smart-LS 9" Black






IO CHIC Cross 20" Black







IO CHIC Fairy 6.7" Red








&сору; 2016

------------·

Магазин

гироскутеров.



··---·-·····-·····------······ -·· .. --·· -- .... -- ... ·-· -- ··-. . --- .....
"

,,

ГЛАВА

1. Простои саит без JavaScпpt



twitter



facebook



googleplus



pinterest







Как видите, в меню есть ссылки на другие страницы

-

"Доставка и оплата",

"Каталог и Контакты". А в "подвале" сайта есть ссылки на наши страницы в
социальных сетях.

1.2.

Страница с информацией о товаре

Мы не будем приводить код всех страниц сайта, он сходен. Например, на
страницах "Доставка и оплата" и "Контакты" выводится только текстовая

информация со способами оплаты и контактной информацией. В катало­
ге отображаются изображения и названия продуктов, как мы это делали на
главной странице. Щелчок по тому или иному товару открывает страницу

с информацией о нем. Обычно такая страница содержит как минимум одно
изображение товара, описание и характеристики. Код страницы товара при­
веден в листинге
Листинг

1.4.

1.4.





Гиpocкyтepы





·---------····-····-···························-·········--··············--·~-----~

J;ivaScr1pt

н;~ nример,1х




Гироскутеры на любой

вкус



глaвнaя



дocтaвкa и оплата



кaтaлoг



кoнтaкты





IO CHIC Smart-LS 9" Black

Oпиcaниe

Гиpocкyтep

используется

в

международных

больших

прокате

на

патрулирования
развлекательных

Гиpocкyтep

скорости:

20

развлечения,

конференц-центрах,

тематических

экотуризме,

для

-

максимум

ключ,

имеет

8

км/ч,

два режима

и обычный

который дает доступ

брелок для

оперативного

к

- 15-

кнопке

управления

CHIC Cross.
Характеристики

Максимальная рекомендуемая

Мощность:

2000

Максимальная

Вт

(2

х

скорость:

нагрузка:

125

кг

1000 Вт)
20 км/ч



~----------------------------------------------------------·----·-----------------·

ГЛАВА
Цeнa

4999$




IO CHIC Smart-LS 9" Black






IO CHIC Cross 20" Black







IO CHIC Fairy 6.7" Red








&сору; 2016 Магазин гироскутеров.


twitter


facebook


googleplus


pinterest







JavaScript

1.3.

на примерах

Стили

Если вы сейчас просмотрите обе созданные нами страницы, то выглядеть
они будут очень непривлекательно. Чтобы они хоть как-то смотрелись,
нужно задать оформление в СSS-файле

им страницам (лист.
Листинг

1.5.

Файл

style.css, который

подключен к обе-

1.5).

style.css

@font-face {
font-farnily: 'poller oneregular';
src: url(' .. /fonts/pollerone/pollerone-webfont.eot');
src: url (' .. /fonts/pollerone/pollerone-weЬfont. eot ?#iefix')
format('emЬedded-opentype'),

url(' .. /fonts/pollerone/pollerone-weЬfont.woff') format('woff'),
url(' .. /fonts/pollerone/pollerone-weЬfont.ttf')
format('truetype'),
url(' .. /fonts/pollerone/pollerone-weЬfont.svg#poller_oneregular')
format ( 'svg' ) ;
}

@font-face {
font-farnily: 'leckerli oneregular';
src: url(' .. /fonts/leckerlione/leckerlione-regular-weЬfont.eot');
src: url(' .. /fonts/leckerlione/leckerlione-regular-weЬfont.
eot?#iefix') format ( 'emЬedded-opentype'),
url(' .. /fonts/leckerlione/leckerlione-regular-weЬfont.woff')
format ( 'woff'),
url(' .. /fonts/leckerlione/leckerlione-regular-weЬfont.ttf')
format ( 'truetype') ,
url(' .. /fonts/leckerlione/leckerlione-regular-weЬfont.
svg#leckerli_oneregular') format('svg');
}

body
background: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14рх;
font-weight: normal;
line-height: 1;
margin: О;
min-width: 960рх;
padding: О;
р

color: #252525;
line-height: 24рх;

"

.. -- ---... -... -------- -.. --- -.... --.. --- ... ---.. --- .... --... -.. --. -.. -.... ....
"

'

ГЛАВА

1.

Простои сайт без

JavaScript

rnargin: О;
padding: О;
{
color: #252525;
text-decoration: underline;

р

а

р

a:hover {
color: #898989;

#header {
rnargin: О auto;
padding: 44рх О 50рх;
text-align: center;
width: 960рх;
#header a.logo {
display: Ыосk;
rnargin: О auto;
padding: О;
width: 340рх;
#header a.logo irng
border: О;
display: Ыосk;
rnargin: О;
padding: О;
#header ul
rnargin: О;
padding: 56рх

О

О;

#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: О О Зрх;


'

-. -.. -................ ----........... -............ -.. -........ -... -......... -- . -.

-

JavaScript

на примср;~х

text-decoration: none;
text-transform: uppercase;
#header ul li a:hover, #header ul li.selected
color: #ОЬа39с;

а

{

}

#body {
margin: О;
padding: О О ЗОрх;
text-align: center;
}

#body hl {
color: #fff;
display: inline;
font-family: poller_oneregular;
font-size: 35рх;
font-weight: normal;
margin: О;
padding: О;
text-transform: uppercase;
#body hl span {
background: #252525;
display: inline-Ыock;
padding: 15рх 28рх 12рх;
#body > div {
margin: О auto;
padding: О;
width: 960рх;
#body > div img
border: 2рх solid #292929;
margin: 24рх О О;
padding: О;
#body > div .article
margin: О auto;
padding: ЗОрх ЗОрх
width: 560рх;

О;

#body > div .article h2 {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 25рх;
font-weight: normal;
margin: О О ЗОрх;



~----------------·-·········---------·-------------------·----···-----------------·

ГЛАВА

#body > div .article
color: #252525;
line-height: 24рх;
margin: О;
padding: О;



1

Прос1ои СJИТ без

JavJScr1pl

{

#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;



·---------------------------------------------------------------------------------~

JavaScr1pt

на примерах

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%;

)



---- -·- ---.. --- -. ··- -- ··- -- .. ··- -. ----- ... -.......... --... -- -... --- .. ----·. ---... .

ГЛАВА

#body #featured img
border: О;
display: Ыосk;
margin: О;
padding: О;
width: 100%;
#body #featured div {
left: 50%;
margin-left: -420рх;
margin-top: -171рх;
padding: О О О 470рх;
position: absolute;
top: 50%;
text-align: left;
width: 490рх;
#body #featured div h2 {
background: #abf;
color: #000;
display: inline-Ьlock;
font-family: poller oneregular;
font-size: 20рх;
font-weight: normal;
margin: О О 18рх;
padding: 2Зрх 27рх 20рх;
text-transform: uppercase;
#body #featured div span
background: #252525;
color: #fff;
display: inline-Ьlock;
font-size: 20рх;
margin: 7рх О;
padding: 12рх 27рх;
#body #featured div а
background: #ОЬа39с;
color: #fff;
display: inline-Ьlock;
font-size: lбрх;
margin: 15рх О О;
padding: 26рх 27рх 22рх;
text-align: center;
text-decoration: none;
text-transform: uppercase;



1.

Простой сайт без

JavaScript

JavaScript на

примерах

#body #featured div a:hover
background: #lfcЗbc;
#body > ul (
margin: О auto;
overflow: hidden;
padding: 24рх О
width: 960рх;
#body > ul li (
display: Ыосk;
float: left;
margin: О lOpx
padding: О;
width: ЗООрх;

О;

20рх;

#body > ul li а
color: #000;
display: Ыосk;
font-family: poller oneregular;
font-size: 20рх;
font-weight: normal;
margin: О;
padding: О;
text-align: left;
text-decoration: none;
text-transform: uppercase;
#body > ul li а img
border: 2рх solid #lalala;
display: Ыосk;
margin: 20;
padding: О;
opacity: .8;
transition: O.Ss ease-in-out;
#body > ul li a:hover img (
opacity: l;
#body > ul li а span
display: Ыосk;
margin: О;
padding: ЗЗрх О О;
#body f orm

"

..



ГЛАВА

margin: О auto;
padding: 24рх О
width: 620рх;

1

Просrои ( ,1и1 (JPJ J.1vэSc11pt

О;

#body form input, #body form textarea {
border: 2рх solid #252525;
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-size: 15рх;
font-weight: normal;
margin: О О 37рх;
padding: 20рх lOpx;
text-align: center;
text-transform: uppercase;
width: 59брх;
#body f orm textarea
height: 175рх;
overflow: auto;
resize: none;
#body form #send
background: #252525;
color: #fff;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 15рх;
font-weight: normal;
display: inline-Ьlock;
padding: 20рх 28рх;
width: auto;
#body form #send:hover
background: #fff;
color: #252525;
cursor: pointer;
#footer {
background: #252525;
margin: О;
padding: Збрх О 42рх;
#footer div {
margin: О auto;
overflow: hidden;
padding: О;
width: 960рх;



-

.. . . . -................................................................. ...........

JavaScr1pt на примерах

#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 {



~--···········································································-····

ГЛАВА

О

background-position:

1.

Простой саит без

JavaScr1pt

-88рх;

*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рх;

Бот теперь, подключив стили, можно взглянуть, что у нас получилось. На

рис.

1.1

показано, как выглядит главная страница, на рис.

няя часть главной страницы

1.2 показана ниж­

- некоторые товары, а также "подвал" с кнопка-

ми социальных сетей .

Гироскутеры на любой вкус

ГЛА8НА.М

ДОСТА8к.А И

Рис.



1. 1.

or1nATA

OTAllOf

KOHTAJn'W

Гnаанан страница

·--- ----- ----- -- ------- -------- -------- ------- -- ----- -- ----- --- -- -------------------

JavaScript на

примерах

10 СНIС SMART·LS 9 "
BLACK

Рис.

На рис.

1.3

10 CHIC CROSS 10"
BLACK

1.2.

10 CHIC FAIRV 6.1" RED

Нижняя часть главной страницы

показана страниuа товара· есть изображения товара, его аписа·

ние, характеристики и uена. Внизу страниuы приводятся ссылки на другие
товары.

1 *4.

Недостатки нашего ре ше~1ия

У нашего решения очень много недостатков. Во-первых , посмотрите на

меню. Нет, его основной недостаток даже не в том, что оно не динамиче­
ское, как мы привыкли видеть на современных сайтах. Его нужно включать

в каждую страницу нашего сайта (как и подвал), поскольку

держит средств включения

HTML не со­
(include) других НТМL-файлов . Когда страниu

немного, это, в общем, не проблема. А представьте, что у вашего сайта есть
уже несколько сотен страниu и вам нужно изменить меню или "подвал"?

Тогда вам придется изменять все эти нескол ько сотен страниц. Это ужасно!

...

Во-вторых, нет никакой возможности придать "жизни" нашему сайту. На­

пример, на главной страниuе не выводить постоянно одни и те же три то•

. . . . -.. "

------. . -- . -- - -- --- --- -- -

"

... " - -- . · - - - - " . .. - .. • - . . .

..

. .

---

".

- -- -- "

ГЛАВА

1. Простой саит без JavaScr1pt

·-.

~t- "

.
Cl'I

!!!

oUIO

ГНАМНАН

10 CHIC Smart·LS 9" Black

nмс.11о1"•

ирос.q ~~ сн с
•tцati.4чet~.-

Cro:si

Wlo'poliO ~ri~rt• а rрсж3'1'! АМ1 P4tJll'lt~н"'J1, а :ii~nop1'11'r м~~LIJ: .:oнФtpe:+-u.·цr:НJP~t ewcr~~ньw J4Лах C"tlt.QИФ!n бо.n~

l'l

Функцию

(HTML

и

меня"

openWindow() нужно определить в теге . Полный код
JavaScript) нашего первого "проекта" (да, первая программа в

этой книге не будет выводить фразу "Привет, мир!") приведен в листинге

2.1.
Листинг

2. 1.

Наш первый JavaScript-npoeкт




function openWindow() {
msgWindow= open("index.html")



)

··············-······--------------····--···------··········· ·-----·--·-···----··--

JavaScr1pt на примерах










vаluе="Открыть

главную стран ицу "

Данная страница отобразит кнопку 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.

Он от­

кладывает выполнение сценария до полной загрузки страницы (по умолча-

нию сценарий начинает выполняться сразу при открытии страницы):

-- -------------. ----. ---- ... ---.. ----. ----. ------------------.. ---.. ----.. --... .

'

ГЛАВА

2

ОrновныР понятия и перн.1я прогр;~мма


11 code

Аргумент

language,

как уже было отмечено выше, задает язык программи­

рования, на котором написан сценарий, и может принимать следующие зна­
чения:

• 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

Комментарием является все, что находится после / / и до конца строки .



·---------------------------------------------------------------------------------~

JavaScпpt на примерах

Многострочный комментарий начинается символами
символами

/*

это

/*

и заканчивается

*/, например:

пример

многострочного

комментария

*/

Какие комментарии использовать - зависит от вас. Однострочные коммен­
тарии удобно использовать для комментирования отдельных строчек кода.

Многострочные подойдут для объяснения того, что делает целый блок, на­
пример, описать, что делает функция и какие параметры ей нужно передать.

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'', но давайте не будем из­
менять традиции и все-таки напишем эту программу, пусть она будет и не

......



---- -- ---. -- -- --- ------ ----- ----- ---- . -- ---- ------ ----- ----- ------- ·- --- . -- -.
"

ГЛАВА

2.

Основные понятия и первая программа

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

confirm() приведен в листинге 2.3.
Листинг

2.3.

Использование метода coпfirm()





.-- ----- --- ---------- ---- -- ---- -- -- ---- ---- --- ---. ------ ---- ------ ---- --- --------

."

на nримерах

JavaScript


Confirm



if (window. confirm ("Нажмите
window.alert("OK");

ОК или

Отмена"))

{

else {
window.alert("Oтмeнa");

< /script>


Результат работы этого метода приведен на рис.

2.3.

Под еердите действие:

Рис.

2.3. Диалоговое окно,

2.5.З. Метод
Метод

prompt()

кнопками ОК и

отображаемое методом

prompt()

confirm

(браузер

Flrefox)

·диалоговое окно для ввода данных

отображает диалоговое окно с полем ввода, сообщением и
Cancel. Введенное пользователем значение можно потом

будет присвоить какой-то переменной. Диалог возвращает введенную поль­
зователем строку. Если пользователь ничего не ввел, диалог возвращает

значение
Методу

null.

prompt() нужно передать два параметра - строку, которая будет ото­

бражена в качестве приглашения ввода (над полем для ввода данных), и
значение по умолчанию, которое будет передано в сценарий, если пользова­
тель поленится ввести строку и просто нажмет ОК. Пример использования
этого диалога приведен в листинге
Листинг

2.4.

2.4.

Пример использования метода



Confirm

prompt()



EI-- ------------- ----- -------- -- -------- -- ------------------------------------------·

ГЛАВА




var UName = window.prompt("Kaк
if (UName ==null) {
alert ("Пока!");

7

0 1 11011111.11• 111111111 юt и 111 • рв.111 111ю1 р.1мм.1

тебя

зовут?",

''Никак");

else {
document.write("Пpивeт,

"+ UName);




Наш сценарий прост. Если пользователь нажмет Отмена, то увидит диа­
лог с текстом "пока!" (ну не хотим мы общаться с пользователем, который
не хочет представиться). Если пользователь нажмет ОК, то строка из поля

ввода будет отображена в НТМL-документе в виде "Привет, ".
)(

Подтвердите дейстsие:

K•k тt6• юеут?

---------01(

Рис.

2.6.

2.4.

Метод

prompt() •

деАстаии (брауаер

етщ..,.

Flrefox)

Специальные символы

В строках вы можете использовать специальные символы. Это комбинации
обычных символов, обозначающих служебные или непечатаемые символы,
которые нельзя ввести обычным способом. Например, с помощью специ­
ального символа

\n

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

разбить сообщение в диалоговом окне на строки, например:
window.alert("Owибкa!\nПapoль

неправильный");

В JS вы можете использовать следующие специальные символы (ради спра­
ведливости, нужно отметить, что их можно также использовать в языках С,
РНР и некоторых других):



• \ n - перевод строки;

.--. - ---.. ------.. --. . - --. --.. --... -.. ------. ---.. --·- -. ----.. --.... --. ... -.... --.

"

JavaScript

• \r -

на примерах

возврат каретки (в современном программировании используется

очень редко);

• \t - табуляция;
• \f - перевод страницы;
• \' - апостроф;
• \" - двойная кавычка;
• \ \ - обратный слеш

2.7.

(косая черта).

Зарезервированные слова

Зарезервированные слова (ключевые слова) нельзя использовать в каче­

стве идентификаторов, то есть имен переменных, функций и объектов. За­
резервированные слова J avaScript приведены в таблице 2.1.

Таблица

2.1. Зарезервированные cлoвajavaScript

aьstract

boolean
break
byte
case
catch
char
class
const
continue
default
do
douЫe

else

extends
false
final
finally
float
for
function
goto
if
implements
import
in
instanceof
int

intertace
long
native
new
null
package
private
protected
puЫic

return
short
static
super
switch

synchronized
this
throw
throws
transient
true
try
var
void
while
with

На этом наша вводная в
рассмотрим синтаксис

JavaScript глава заканчивается. В следующей мы
JavaScript. Большая часть материала в этой главе

воспринималась интуитивно. Вы всё понимали, но все равно у вас есть во­
просы относительно синтаксиса языка программирования. Конкретизиро­

вать, казалось бы, явные вещи и предназначена глава

3.

В ней мы рассмо­

трим переменные, операторы и многое другое.

....



--· -- --· --- -.. ----· -----· ----. --- --- ----- -- --- -- . ---- ------- ----- --- ---··- --- --- -.

Глава

3.

Основы синтаксиса

JavaScript

3.1.

на примерах

Переменные в

3.1.1.
Переменная

-

JavaScript

Объявпение переменной

это поименованная область памяти, хранящая данные. В

других языках программирования (например, в С, РНР) переменные явля­

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

т.д.), которые будут храниться в этой переменной. В JavaScript, как и в РНР,
переменные не являются строго типизированными, а это означает, что тип

переменной зависит от данных, которые в данный момент хранятся в ней.

В отличие от того же РНР, где можно использовать переменную без ее пред­
варительного объявления (хотя это и нежелательно, поскольку переменная

не инициализирована), в JavaScript переменную нужно объявить с помо­
щью служебного слова var (сокращение от variaЬle ), как во многих других
языках программирования (например, предварительное объявление пере­
менных требуется в С, Pascal и других языках программирования).
Имя переменной должно начинаться с символа буквы

(A-Z)

или символа

подчеркивания. Последующими символами могут быть цифры, буквы, а
также знак

$.

Имя переменной не может начинаться с цифры или с симво­

ла$ (как в РНР)! Также нужно помнить, что JavaScript учитывает регистр
символов, то есть переменные variaЬle и VariaЬle

-

это две разные перемен­

ные.

Имя переменной не может быть зарезервированным словом. Зарезервиро­
ванные cлoвaJavaScript были приведены в таблице

2.1.

Правильные примеры имен переменных:
х,

yl, userName,

user

Неправильные имена:

lx,

puЫic

В первом случае имя переменной начинается с цифры, во втором
зарезервированным словом.

са-

- является



--------------------------------------------------------------------------------.

ГЛАВА

3.

Основы синтаксиса

При объявлении переменной желательно указать ее первоначальное значе­
ние (инициализировать ее):

var my

=

1;

Можно объявить переменную и без инициализации, однако это нежела­
тельно, поскольку если забыть ее инициализировать перед первым исполь­
зованием, результаты вычисления могут быть неопределенными.
При желании можно объявить сразу несколько переменных, разделив их
запятыми:

var

х,

yl, userNarne,

Сейчас переменная

first

user;

целого типа, поскольку содержит значение

1.

Но ее

очень легко превратить в строку, присвоив строковое значение:

my

=

"привет";

Все последующие обращения к переменной производятся без служебного
слова

var.

3. 1.2. Типы данных и преобразование типов
Данные, хранящиеся в переменной, могут быть разного типа. Как вы заме­
тили, при объявлении переменной (как это делается в других языках про­
граммирования) тип переменной (данных) не указывается.
В JavaScript переменные могут содержать следующие типы данных:

• number - числа,

как целые, так и с плавающей точкой.

• string - строки.
• Boolean - логический тип
(истина) и false (ложь).

данных, может содержать два значения

- true

функции. В JS мы можем присвоить ссылку на функцию лю­
бой переменной, если указать имя функции без круглых скобок.

• function -

• object - массивы,
Тип переменной

объекты, а также переменные со значением

JavaScript

null.

определяет при ее инициализации, то есть при

первом присваивании значения, например:

'---

----- --- ------ --- --- -- --- -- •. ------ -- --- --- ------ --- --- --- . --- -- ---- --."

--------

JavaScript

на примерах

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

боты этого сценария изображен на рис.
Листинг З.

1. Оператор typeof



typeof



var Numl, Num2, Strl, Str2,
Numl
Num2
Strl
Str2

3.1.

StrЗ,

Booll;

5;
5.5;
"привет";
'мир';

StrЗ

null;
Booll = true;

"+ typeof(Numl));
"+ typeof(Num2));
"+ typeof(Strl));
"+ typeof(Str2));
"+ typeof(Str3));
document.write("StrЗ
document.write("Booll - "+ typeof(Booll));

document.write("Numl
document.write("Num2
document.write("Strl
document.write("Str2





-



~-----···········-·-····-·········-····-···········-···········-····-····--···----·

ГЛАВА

3. Основы синтаксиса
~

"

Рис.

.

3.1.

- -

Пример испоn"эо•ения операторе

-

о

х



==

-

typeof

В процессе вычислений 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 ;

Для принудительного преобразования типов вы можете использовать две
следующие функции :



· - - -- - --- --------- - --- ---- - - - - -- ----- - --- -- -------- - - --- -- -- - - - --- - - - - - - - -- - - - -- -- С8

JavaScr1pt

на nримерах

1. parselnt - преобразует строку в целое число,
2. parseF!oat -

если это возможно.

преобразует строку в число с плавающей запятой, если это

возможно.

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.
Выражение

....

-

Типы выражений

это набор переменных, констант, операторов. У любого вы­

ражения есть свое значение

-

результат вычисления выражения. Значение

может быть числом, строкой или логическим значением .

--- -------- - -------- ------ -- --------- ---------- --- --- --- ---- ------- ---- ---- -- -

_,

ГЛАВА

3. Основы синтаксиса

В 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 такие же, как и в боль­
шинстве других языков программирования, а именно:



• + - сложение

(например, А= В+ С) .

···········------------······--·-···-···--·········-· ·······-------------------------·-·-Ell

JavaScript

на примерах

• - - вычитание (например,


А= В

- С).

*-умножение (например, А= В* С).

• / - деление

(например, А= В/ С).

• % - деление по модулю

(например, А= В% С).

• ++ - инкремент, увеличивает значение переменной

на

• -- - декремент,

1 (например, j--).

уменьшает значение переменной на

1 (например, i++ ).

Как используются эти операторы, думаю, вы и так знаете. Нужно отметить

только особенность операторов инкремента и декремента. Рассмотрим не­
большой пример:
х

= 7

у

=

х++

Переменной у будет присвоено значение 7, а после этого переменная х будет
увеличена на

1 (значение 8).

Если же++ указать дох (а не после него), то

сначала переменная х будет увеличена на

1,

а потом уже будет присвоено

новое значение переменной у:
у

=

++х

3.2.4. Логические операторы
К логическим операторам относятся следующие операции:

• !•

унарная операция отрицания

(NOT).

&& - бинарная операция И (AND), истинна, когда оба операнда истинны.

• 11- бинарная операция ИЛИ (OR), истинна, когда один из операндов ра­
вен true.
Пример:

bool

=

true && false

3.2.5.
В таблице

"

Операторы сравнения

3.2 описаны операторы сравнения,

которые вы можете использо­

вать вjavaScript при написании своих сценариев.



...... -- ·- ··-···-····· -- .............................. ·-- -· --· ... -.............. ·'

ГЛАВА

Таблица

3. Основы синтаксиса

3.2. Операторы сравнения вjavaScript
Оператор

Описание

>
>=
<
> Z).
• >>> -

сдвиг вправо без учета знака, старшие разряды будут заполнены

нулями (А= В>>> С).

Двоичные операторы выполняют поразрядные операции с двоичным пред­
ставлением целых чисел.

3.2.7.

Слияние строк

Для слияния (конкатенации) строк используется оператор+:



... -- .. -....... -- .................... ······ ........... ····-···· .......... ·····-- ...

"

JavaScript

на примерах

var str = "stringl" + "string2"
В результате переменная

3.2.8.

str будет содержать значение "string1 string2".

Приоритет выполнения операторов

Сейчас мы поговорим о приоритете выполнения операторов. Пусть у нас
есть выражение:

А

= 2 + 3 * 4 / 5;

В какой последовательности будет производиться его вычисление? Еще из
школьного курса математики мы знаем, что приоритет операции умноже­

ния выше, чем сложения, поэтому сначала
тате мы получим значение

Затем полученное значение

2.4 ),

3 будет умножено на 4 (в резуль­

12).
12

будет разделено на

5

(мы получим значение

поскольку приоритет операции деления выше, чем сложения.

К полученному значению

2.4

будет добавлено значение

ременной А будет присвоено значение



в результате пе­

4.4.

Приоритет операций можно изменить с помощью скобок, например:

А =

+

(2

3)

*

4 /

5;

В этом случае сначала будет вычислено выражение

ное значение будет умножено на

4

и разделено на

2 + 3, а затем получен­
5. Приоритет операций

умножения и деления одинаковый, поэтому они выполняются слева напра­

во, то есть в порядке следования. В результате будет получено значение

4 (5

* 4 и разделить на 5).
Далее перечислены операторы в порядке убывания приоритета:

• !, -, ++, -- -

• *, /, % • +, - -

отрицание, двоичная инверсия, инкремент, декремент.

умножение, деление, остаток от деления.

сложение и вычитание.

• , >>> •

& -

двоичные сдвиги.

двоичное И.



ГЛАВА



л -

3.

Основы синтаксиса

двоичное исключающее ИЛИ.

• 1- двоичное ИЛИ.
• =, +=, -=, *=, /=, %= -

3.3.

присваивание.

Основные конструкции

К основным конструкциям языка относят условный оператор

(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,

==

вернет

но поскольку указан оператор!, то будет возвращено значе­

true.

ние

Рассмотрим несколько примеров:

var
var
11
if

= 10;
5;

А
В

=

Будет


>

выведено А>
В)

document.write

11
if

Будет


>

В

{
('А

>

В');

выведено В< А
В)

{

document.write('A >В');
else {
document.write ('В < А');

11

Будет

выведено А= В

== В)) {
document.write("
else {
document.write("
if

(!



В главе

8

А!=

}

В");

А= В");

}

мы уже сталкивались с оператором

ный пример

-

if и

рассмотрели более слож­

проверку нажатия одной из кнопок в диалоговом окне. Вы

можете вернуться к этому примеру, чтобы освежить его в памяти.
Операторы

if можно вкладывать друг в друга, что продемонстрировано в
3.2. Сценарий в этом листинге пытается разделить 1О на значе­
ние одной из переменных - А или В, предварительно проверяя, не равно ли

листинге

значение этих переменной О. Сначала он выясняет, не равно ли О значение
переменной А. Поскольку А

рой оператор

= О, то выполнение сценария переходит на вто­

который проверяет, не равно ли О значение переменной В.
С переменной В все хорошо, поэтому переменной С будет присвоено зна-

...

if,



. . . . . . ......... -............ ·-·. --- ... ·- -..... -... --- . -.... -- --. --. -... --.. ---. '
"

ГЛАВА

чение

10 / 1 (10).

В противном случае, если обе переменные равны О, будет

выведено сообщение
Листинг

3.2.

3. Основы синтаксиса

Division Ьу zero.

Вложенность операторов

1f



if



var
var
var
if

А =

О;

В

1;

=

С;



!=О)

С =

10 / А;
document.write('C
' + С); }
else i f (В != 0) {
С = 10 / В;
document.write('C = ' +С); }
else document.write("Дeлeниe на 0");




3.3.2. Оператор выбора switch
Иногда (конечно не во всех ситуациях) вместо множества вложенных опе­

раторов

if можно использовать оператор switch.

Оператор

switch позволяет

сравнить переменное или выражение с множеством значений, что позволя­

ет избавиться от серии операторов

if и сделать код более компактным.

Общая форма оператора switch выглядит так:

switch ()

{

.default:

·------------------------------------------------------····-·-····-··-----·-······~

JavaScript

на примерах

;

]

)

Работает оператор

switch следующим

образом:



Сначала вычисляется значение переменной или выражения.



Затем полученное значение сравнивается с одним из значений, указан­

ных в блоках



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. Первым делом нужно подключить необходимые сценарии и стили :

< / s c rip t>
< / script >
< / script>



·······--··-··- -------------------------------···--····------ ---- --- ---- -------- --- -

JavaScпpt на nримерах




Не волнуйтесь, все эти файлы можно будет скачать по предоставленному
архиву. Заголовок слайдера будет выглядеть так:


Гироскутеры на

любой

вкyc




Он будет постоянным в любом случае. Далее нужно описать сами продук­
ты. Это делается так:


Гиpocкyтep IO CHIC SmartLS 9"
Модель IO CHIC Smart-LS весит всего лишь
21,5 кг, при этом она выдерживает максимальную нагрузку в 100
кг. Это удобный и компактный сигвей с двумя двигателями по 700
Вт и диаметром колес 9". Купить IO CHIC Smart-LS - это выгодно
и

удобно.




1499 $


Все, что вам остается,

-

это добавить описание своих продуктов в слайдер

(добавить соответствующие

div).

Удобнее всего это делать РНР-сценарием,

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

Далее нужно описать изображения для наших продуктов и кнопки назад/
вперед:





------------------------------------------------------------------------------------·

ГЛАВА

5. Делаем слаидер

&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp
&nbsp&nbsp&nbsp


class="s_button_prev" href="javascript:;">


ФУW.U."К loUI

lotttDГOtooUtHllW:X ~Ylllli

N1'py.-l)o.,_I

.............
flllfDW'l•llOll.

.i

'llК'IМlllll.

lllN'ix, o\ID

IQТIUJlllllll l'ID(tJl№a,. мршt,.

p..l)Ui':LllftllllilW.~



pцhtltrlol'I:

Рис.

5.2.

Слайдер

<
jQuery/Shoppica



----- ----------------- --------- -- ---- -- -- ----- ---· ··· -- -··------- --- --- ----- -- ------ -·

Глава

6.

Красивые подсказки
"'
для саита

t
1

- ---+

JavaScпpt на nримерах

Некоторые начинающие программисты пренебрежительно относятся к
подсказкам. А зря. Подсказки удобно использовать как в панелях управ­

ления (чтобы пользователь точно знал, для чего используется та или иная
кнопка), так и на основном сайте. Например, в нашем случае мы можем вы­
водить подсказку с основными характеристиками гироскутеров в списке

товаров. Это очень удобно

- подвел мышку, увидел основные характеристи­

ки и уже потом открыл страничку товара. Так пользователю не придется

открывать все товары подряд, чтобы ознакомиться с их характеристиками.
Всплывающие подсказки можно реализовать, как самостоятельно, так и ис­

пользовать какую-нибудь библиотеку. Мы рассмотрим оба варианта

- сна­

чала сделаем красивые всплывающие подсказки сами, а потом будем ис­
пользовать ToolТip.

6. 1.

Самостоятельное решение

Поскольку глава практическая, то сразу приступим к практике. Отройте

ваш

style.css и добавьте в

Листинг

6. 1.

него следующие строки (лист.

6.1 ).

Стили для подсказки

/*всплывающие

подсказки*/

#tt {position:absolute; display:Ьlock;
padding:lOpx;
border:solid #089dcb;
border-width:lpx;
border-radius:lOpx lOpx lOpx Орх;
-webkit-border-radius:lOpx lOpx lOpx Орх;
-moz-border-radius:lOpx lOpx lOpx Орх;
-webkit-box-shadow:lpx lpx 2рх #888888;
-moz-box-shadow:lpx lpx 2рх #888888;
box-shadow:lpx lpx 2рх #888888;
background-color:#ffD;
.hlpl { color:#OOO;border:#9fbddd lpx solid;backgroundcolor:#E7FSFE;
cursor:help;margin-left:Spx;line-height:14px;



ГЛАВА

6.

Красивые подсказки для саита

width:12px;display:inline-Ьlock;text-align:center;

border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
font-weight:lOO;
text-indent:O;

При желании можете отредактировать цвет и параметры рамки. При на­

ведении указателя мыши на объект сразу будет показана красивая всплы­
вающая подсказка, использующая стили

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);
"

... -·-." --. ". -- - -- . " ... -..... -- ····- .. ".

-- .. -·-- -- --- -. --- .... ·-

....

JavaScript

на примерах

tt.timer=setlnterval(function() ( tt.fade(l) ),timer);
dd=getOffset(t);
tt.style.top = (dd.top-h+4) + "рх";
tt.style.left = (dd.left+13) + "рх";
)

'

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
)

'

hide:function(e) {
clearlnterval(tt.timer);
tt.timer = setlnterval(function() (_tt.fade(-1) ),timer);
);
) () ;

/*

вспомогательная функция получения

координат элемента

*/

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;



18----........ ···-· ..... -----.-.......... -... -.... ----.-... --.-.... -.... ---...... -..

ГЛАВА

6.

Красивые подсказки для сайта

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;



useCapture) {

....

.. .. . .. ·- --· -....... -·- .. --- .. -····· -·--·. -- -------- ... --- -.. --· -·. ---· -. --. -. -- -

JavaScпpt на примерах

}
} ) () ;

Кода очень много, поэтому мы вынесли его в отдельный файл. Однако нуж­

но не забыть этот файл подключить, поэтому на каждой странице, где будут
использоваться подсказки, нужно в секцию

добавить вот такой

код:


Осталось разобраться только, как использовать подсказки. Есть два вари­
анта. Первый заключается в привязке подсказки к изображению товара, а
именно:


км/ч&lt;Ьr&gt;Максимальный

Здесь мы устанавливаем событие

onmouseover для

внимание, как осуществляется перенос строки:

изображения. Обратите

&l t; br&gt;

Второй вариант заключается в том, что мы выводим какой-то текст, напри­
мер, Инфо или просто

?

и привязываем к нему подсказку:

?
Именно для этого и предназначен второй класс
что вышло на практи15е (рис.

6.1 ).

hlp1.

Давайте посмотрим,

Слева на нем показано, что мы привязали

подсказку к изображению. Она появится, как только пользователь подведет
курсор мыши к картинке товара. Справа

?.

- что

подсказка привязана к знаку

При подведении курсора мыши к этому знаку появится подсказка. Какой

вариант использовать, решать только вам.

ГЛАВА

r.1аксимальная скорое
1.1аксимальный вес - 90

- 10

6.

Красивые подсказки для сайта

м

>:r

10 CHIC SMAI 1.1а1>.е11ма ьна,;сКQрооъ -1ощ" 't:
"
r.1аr.с11мальn lisec-90111"
BLACK

10 CHIC SMART-LS 9 "
BLACK

?

?

Рис.

6.2 .

Скрипт

6.1.

ToolTip

Все сценарии подсказок работают одинаково - реагируют на событие
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 }



."

.--. ----·-- .. -- ----. -- ---- -- ----- --------- ----- ------- -- - -- -- --- - -- -- ----- ----"

JavaScript

на примерах

.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);

--



-.. ·- ... -----·. -- -·· ---···-----· ---- --- ------ .... -. ···--··· ·- ------ -. ----- -- . -- -'

ГЛАВА

6.

Красивые подсказки для сайта

document.body.appendChild(tt);
tt.style.opacity = О;
tt.style.filter = 'alpha(opacity=O)';
document.onmousemove = this.pos;
tt.style.display
'Ыосk';
c.innerHTML = v;
tt.style.width = w ? w + 'рх'
'auto';
if(!w && ie){
t.style.display = 'none';
b.style.display = 'none';
tt.style.width = tt.offsetWidth;
t.style.display
'Ыосk';
b.style.display = 'Ыосk';
if(tt.offsetWidth > maxw) {tt.style.width

maxw +

'рх'}

fade

(1)},

h = parseint(tt.offsetHeight) + top;
clearinterval(tt.timer);
tt.timer = setinterval(function() {tooltip.
timer);

},

pos:function(e) {
var u = ie ? event.clientY + document.
documentElement.scrollTop : e.pageY;
var l = ie ? event.clientX + document.
documentElement.scrollLeft : e.pageX;
tt.style.top = (u - h) + 'рх';
tt.style.left = (1 + left) + 'рх';
}

,

fade:function(d) {
var а = alpha;
if((a != endalpha && d

l)

11



!=

О

&& d

-1)) {

var i = speed;
if(endalpha - а< speed && d == l) {
i = endalpha - а;
}else if(alpha < speed && d == -1) {
i
а;
alpha
а + (i * d) ;
tt.style.opacity = alpha * .01;
'alpha(opacity=' + alpha +
tt. style .filter
1 )

,

;

}else{
clearinterval(tt.timer);

•·-------------------------------- ------------------ -- --- --------------------------818

JavaScript

на примерах

if(d
)

-1) {t t . s tyle.dis p lay

'non e ' )

,

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 не обязательно и можно
обойтись без него.
Рассмотрим несколько примеров функций:

11

Функция просто

выводит диалоговое окно с текстом

'Access

denied'

11

Использование

этой функции просто

короче,

чем вызов

windows.alert

11

К тому же,

когда понадобится изменить

текст

сообщения,

тогда

11

текст можно будет изменить

в одном месте,

а не

по всему

сценарию

"
11

Функция ничего

не

возвращает

--


.

....... -. ------. -.. ------ ---.. - . --- -.... --- .. ---.. ·- .. -. ---... -. --.. ---... -----

ГЛАВА

7. Функции

function denied()
window.alert('Access Denied!');

//

Функция

возвращает

сумму двух чисел.

Никакой проверки,

являются

11

ли аргументы числами,

не производится

function Sum(x, у) {
var result = х + у;
return result;

Использовать эти функции можно так:
//будет выведено наше
denied();
//в переменную х
var х = Sum(2, 2);
функции Sum

сообщение

будет

записан результат

return происходит выход из функции. Все операторы по­
return не будут выполнены, например:

После инструкции

сле оператора

function Sum(x, у) {
var result = х + у;
return result;
window.alert('Cyммa');

В конструкции
функцию

return

//никогда не

будет

выполнен

можно указать сразу выражение, перепишем нашу

Surn:

function Sum(x,
return (х + у) ;

у)

{

Функции можно передавать не только значения, но и значения перемен­
ных, например:

10;

а

var
var

Ь

var

аЬ

=

12;

=

Sum(a,

Ь);

....

Ссылку на функцию вы можете сохранить в любой переменной, например:



.--.. ---... ---.. ----. -----------------------------------.. --· ------.. --------- -·-

на примерах

JavaScript

//Имя функции указываем
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!');



·- -- -------- --- . ----------- -------- --- -- --- ------------ --- ----- ---· --- ------ ----

----

JavaScript

на примерах

Понятно, не нужно создавать отдельный 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.

Область видимости переменной:

глобальные и локальные переменные
Глобальными являются все переменные, объявленные за пределами функ­
ции. Они доступны в любой части программы (сценария), в том числе и в
функции.

Локальными являются переменные, объявленные в самой функции. Такие
переменные доступны только функции, в которой они объявлены, и недо­
ступны в других функциях или в основной программе.

Если имя локальной переменной совпадает с именем глобальной перемен­
ной, то будет использоваться локальная переменная, а значение глобальной
переменной останется без изменения.

.......



--... -. --.. -.. -.. -.. -.... --. -.. -. --· ... ---- -. ---- .. -- --. --- ... ---- . --.. -.. -. -.

ГЛАВА

Рассмотрим листинг

-

7.4.

В секции

HEAD

7.

Функции

мы объявляем две переменные

А и В. Они будут глобальными переменными, доступными как в функ­

ции

F1(),

так и в коде из секции

BODY,

то есть везде по сценарию. В теле

функции мы объявляем две локальные переменные



и В. Затем функция

выводит значение переменных А, В, Х. Посмотрите на рис.
вывела значения

10, 5

и

10.

7.1.

Функция

Как видите, используется локальная перемен­

ная В вместо глобальной переменной В, если имена переменных совпадают.
Основная программа выводит значения переменных А и В, будут выведе­
ны значения



и

20.

Выводить значение переменной Х в основной про­

грамме нет смысла, так как вы получите сообщение об ошибке

ReferenceError:

Х

Uncaught

is not defined.

Листинг 7.4. Глобальные и локальные nеременные



Глобальные


// глобальные
var А
10;
var В = 20;

и локальные

переменные

переменные

function Fl()

11
var
var

локальные переменные
Х
В

10;

= 5;

document.write("A
document.write("B
document.write("X

" +

А);

" +

В);

" +

Х);





Fl () ;
document.write("");
document.write("A =" +А);
document.write("B = " +В);



.-- -- -------- - ---------- ------ ---. -------- ----- ----- -- -- --- ------------------ ----

....

JavaScript на

nримерах


< / body >


-

nm..
-

-

-

-

-

-

-

а

х

--------- ~

А • 10
В= 5
Х=

10

А= 10
В= ~О

Рис.

7. 1 . Область

видимости локальных и глобальных переменных



I D - - ------- - - - - ----- - ----- - - ·· · --- · - -····--·- ····· ··-······- ·· · --···-··· · ··- · --·--· ·· · ·

.
( "..... _______ / == ..

-----

..

..

--

~

-