HTML, XHTML Рё CSS РЅР° 100%

Квинт Игорь

Глава 11

Основы языка JavaScript

 

 

11.1. Работа с информацией

11.2. Переменные и типы данных

11.3. Выражения

11.4. Условия и циклы

11.5. Функции и события

11.6. Встроенные объекты JavaScript

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

 

11.1. Работа с информацией

 

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

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

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

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

• Информация может быть заложена в сценарий разработчиком. Обычно это некие начальные значения.

• Информация может передаваться от пользователя с помощью форм.

• Передача через URL.

• Получение информации обработкой событий, например после перемещения указателя мыши, щелчка кнопкой мыши, нажатия клавиш.

• Получение данных с других сайтов или передача серверной программой.

Для знакомства с вводом/выводом информации в JavaScript понадобятся три метода: alert(), prompt() и confirm().

Эти методы генерируют различные окна сообщений.

Примечание

В действительности методы alert(), prompt() и confirm() являются методами объекта Window в браузере.

 

Метод alert()

Метод alert() отображает окно предупреждения с соответствующим сообщением. После прочтения сообщения пользователю необходимо нажать кнопку OK, чтобы закрыть окно. Аргументом данного метода является строка.

Примечание

О типах данных в JavaScript, в том числе и о строках, будет рассказано далее в этой главе.

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

Листинг 11.1. Работа с предупреждением

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

Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в разных браузерах может различаться. На рис. 11.1, 11.2 и 11.3 представлен вид окна, сгенерированного в трех популярных браузерах с помощью описанного кода.

Рис. 11.1. Окно предупреждений в браузере Internet Explorer

Рис. 11.2. Окно предупреждений в браузере Mozilla Firefox

Рис. 11.3. Окно предупреждений в браузере Opera

 

Метод prompt()

Метод prompt() имеет противоположное предназначение. Он служит для получения данных от пользователя (листинг 11.2). При его вызове отображается окно приглашения с текстовым полем. Метод может содержать два аргумента. Оба этих аргумента должны быть строками. Первый аргумент – сообщение, которое отображается в окне. Второй аргумент – это текст по умолчанию, который должен появиться в соответствующем поле. Кроме того, этот метод, в свою очередь, возвращает значение, которое также является строкой, – это текст, который ввел пользователь.

Листинг 11.2. Работа с запросом

Работа с запросом

После запуска страницы с вышеприведенным кодом появится запрос (рис. 11.4), вслед за которым отобразится предупреждение.

Рис. 11.4. Работа с запросом

В этом примере для демонстрации работы метода prompt() использована переменная, а в методе alert() в качестве аргумента выступает выражение. Данные понятия будут введены далее в этой главе.

Примечание

В методе prompt() можно опустить второй аргумент, то есть указывать только одну строку. В этом случае различные браузеры по-разному реагируют: строка запроса может быть пустой, а может отображать ключевое слово undefined (не определено).

 

Метод confirm()

Метод confirm() отображает окно подтверждения, которое сходно с окном предупреждения, генерируемым методом alert(), но содержит две кнопки: OK и Cancel. В листинге 11.3 демонстрируется создание окна подтверждения, но в этом сценарии не делается разницы между кнопками OK и Cancel. Нажатие любой из кнопок просто закроет окно (рис. 11.5).

Рис. 11.5. Работа с подтверждением

Листинг 11.3. Работа с подтверждением

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

После прочтения данной главы вы научитесь использовать этот метод, чтобы сценарий по-разному реагировал на нажатие кнопок OK и Cancel.

 

11.2. Переменные и типы данных

 

Во время интерпретации сценария браузер разбивает код на отдельные слова, фразы или символы, которые умеет распознавать. Эти элементы называются лексемами. В языке JavaScript лексемы делятся на четыре типа: идентификаторы, ключевые слова, литералы и операции.

 

Идентификаторы

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

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

• Все идентификаторы должны начинаться с буквы.

• После первой буквы остальными символами могут быть буквы и цифры.

• Буквами считаются заглавные и строчные буквы латинского алфавита: от A до Z и от a до z.

• Символ подчеркивания (_) выступает в качестве буквы и часто используется вместо пробела, который нельзя применять в идентификаторах.

• Символ доллара ($) выступает в качестве буквы и обычно используется при автоматической генерации кода.

• Можно использовать в качестве букв символы Unicode, однако старые версии браузеров не умеют работать с Unicode.

• Цифрами считаются символы от 0 до 9.

Совет

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

В табл. 11.1 приведены примеры допустимых и недопустимых идентификаторов.

Таблица 11.1. Примеры идентификаторов JavaScript

Обратите внимание, что идентификатор new хотя и содержит разрешенные символы, но относится к числу ключевых слов, поэтому не может выступать в качестве пользовательского идентификатора.

 

Ключевые и зарезервированные слова

К ключевым словам относятся предопределенные идентификаторы, которые образуют ядро языка JavaScript. Эти слова имеют особый смысл и выполняют определенные функции. Ключевые слова не могут использоваться для пользовательских идентификаторов. В табл. 11.2 представлен список ключевых слов JavaScript.

Таблица 11.2. Ключевые слова JavaScript

Зарезервированные слова не рекомендуется использовать в качестве пользовательских идентификаторов, так как в последующем планируется использовать их в качестве ключевых слов. Список зарезервированных слов приведен в табл. 11.3.

Таблица 11.3. Зарезервированные слова JavaScript

Совет

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

 

Литералы

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

Числа

В языке JavaScript различают два типа чисел: целые числа и числа с плавающей точкой.

Целочисленные величины могут быть положительными, например 1, 2, 3, и отрицательными, например -1, -2, -3. К целочисленным величинам также относится нуль – 0. Кроме того, целочисленные величины могут быть выражены в десятичной, восьмеричной или шестнадцатеричной системах счисления.

Числа в десятичном формате могут включать любую последовательность цифр от 0 до 9, которая не начинается с нуля.

Числа в восьмеричном формате могут включать любую последовательность цифр от 0 до 7, которая обязательно начинается с нуля.

Числа в шестнадцатеричном формате могут включать любую последовательность цифр от 0 до 9 и буквы от a до f, которая обязательно начинается с 0x.

В табл. 11.4 рассмотрены примеры представления целых чисел в различных форматах.

Таблица 11.4. Примеры целых чисел

Совет

Будьте внимательны с использованием восьмеричного формата, так как обычно браузеры интерпретируют числа как десятичные, даже если они начинаются с нуля, если в их составе есть цифры 8 или 9. Например, число 076 – это 62, а 078 – это 78.

Числа с плавающей точкой определяют десятичные числа с дробной частью. Эти числа могут быть выражены в обычном или экспоненциальном виде. В последнем случае для представления порядка используется символ e или E. И десятичная мантисса, и порядок могут быть положительными или отрицательными. Ниже показаны примеры чисел с плавающей точкой:

1,4142135623730950488016887242097

–35.0

4567.0002

3.4e100

–5.456e–3

0.007

Внимание!

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

Примечание

Числа с плавающей точкой могут быть очень большими и очень маленькими: от 10 -323 до 10 308 .

Логические величины

В языке JavaScript есть поддержка логических типов данных, которые могут принимать лишь два значения: true (истина) и false (ложь). Логические (булевые) величины необходимы для работы с условиями, с которыми вы познакомитесь дальше в этой главе.

Внимание!

Ключевые слова true и false обязательно должны вводиться буквами нижнего регистра.

Строки

Наверное, наиболее часто используемым типом данных в JavaScript является строка. Строка – это набор символов, возможно пустой, заключенный в одинарные или двойные кавычки. Использование двух типов кавычек введено потому, что строка может содержать и кавычки какого-либо вида. Далее представлены примеры строковых литералов:

«Строка текста»

"Р РѕСЃСЃРёСЏ!"

"4567"

""

'Операционные системы'

'Льюис Кэрролл "Алиса в стране чудес"'

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

Иногда может возникнуть необходимость дать компьютеру команду на использование специальных символов, например табуляции или перевода строки. Чтобы ввести в строку любой Unicode-символ, нужно указать его код после \u в виде \uXXXX. В табл. 11.5 представлены наиболее часто используемые управляющие символы.

Таблица 11.5. Управляющие символы

Часто управляющие символы используются для выравнивания данных (листинг 11.4).

Листинг 11.4. Выравнивание с помощью управляющих символов

Выравнивание с помощью управляющих символов

Поскольку окно, создаваемое методом alert(), зависит от браузера, то и выравнивание в различных браузерах происходит по-разному. На рис. 11.6 показан результат выполнения вышеприведенного кода, адаптированного к браузеру Internet Explorer.

Рис. 11.6. Выравнивание с помощью управляющих символов

Специальные типы данных

Помимо чисел, строк и логических величин, существует еще два типа данных: функции и объекты. Функции могут быть встроенными, например alert(), а могут быть созданы разработчиком. Кроме того, функции могут принадлежать объекту, тогда они называются методами. Объекты также могут быть встроенными, например document, а могут быть созданы программистом. Считается, что значение null является объектом.

Если браузер не может определить тип данных, то он присваивает им значение undefined (неопределяемый).

 

Переменные

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

Имя переменной является идентификатором, поэтому подчиняется тем же правилам.

Объявление переменных

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

Рассмотрим примеры объявлений переменных:

var myData1;

var x,y,z;

var k, msg1, msg2, IM;

В процессе объявления переменную можно проинициализировать, то есть установить для нее начальное значение:

var myStr="Здравствуйте, ";

var k=1000, x=12, y=-5;

var s=1.34e–5, msg11="Error", Flag=false;

Пока переменная не получит значение, она не определена – undefined. Чтобы определить тип переменной, можно использовать операцию typeof, которая возвращает строку с типом переменной (листинг 11.5).

Листинг 11.5. Типы данных

Типы данных

Типы данных

                             

В вышеприведенном коде для вывода информации используется метод document. write(), который позволяет дописывать строку текста прямо в страницу (рис. 11.7).

Рис. 11.7. Типы данных

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

Совет

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

Область действия переменных

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

 

Массивы

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

Рассмотрим пример объявления и задания значений элементов массива (листинг 11.6).

Листинг 11.6. Работа с массивом

Работа с массивом

Обратите внимание, что при объявлении массива количество элементов указывается в круглых скобках, а при обращении к элементу его индекс указывается в квадратных скобках. Кроме того, в языке JavaScript нумерация элементов массива начинается с нуля, поэтому первый элемент массива – stars[0].

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

Рис. 11.8. Вывод всех элементов массива

Значения элементов массива можно задать при его объявлении, тогда не нужно указывать количество элементов в массиве (листинг 11.7).

Листинг 11.7. Инициализация массива

Инициализация массива

Размерность массива можно не указывать, так как язык JavaScript этого не требует. Таким образом, можно постепенно расширять массив по мере добавления данных. Более того, можно объявить элемент с индексом n, что увеличит длину массива до n+1. Узнать длину массива можно с помощью свойства length (листинг 11.8).

Листинг 11.8. Размер массива

Размер массива

Несмотря на то что фактически элементов в массиве шесть, длина массива равна 100 (рис. 11.9).

Рис. 11.9. Размер массива

 

11.3. Выражения

 

Выражения являются комбинациями операндов с помощью операций. Обычно в качестве операндов выступают значения и переменные, но могут выступать и другие выражения. Например, выражение 4 + 6 складывает два значения, в результате чего получается значение 10. А выражение q=5 присваивает переменной q значение 5. Если манипуляции производятся с одной величиной, то операция называется унарной, а если с двумя, то бинарной. Рассмотрим операции в JavaScript.

 

Операции присвоения

Одной из часто используемых операций является операция присвоения. В простейшем случае эта операция присваивает значение переменной:

a=7

Она может одновременно использоваться для нескольких переменных:

msg1=msg2="Привет"

Остальные операции присваивания являются комбинацией операции присваивания и арифметической или поразрядной операции (табл. 11.6 и 11.7).

Таблица 11.6. Комбинация с арифметическими операциями

Таблица 11.7. Комбинация с поразрядными операциями

 

Арифметические операции

Для работы с числами используют арифметические операции.

• Сложение – знак плюс (+). Например, 5 + 7 = 12.

• Вычитание – знак минус (-). Например, 67 – 43 = 24.

• Умножение – звездочка (*). Например, 2 * 2 = 4.

• Деление – косая черта (/). Например, 45 / 5 = 9.

• Остаток от деления – процент (%). Например, 7 % 5 = 2.

В программировании очень часто встречаются операции увеличения или уменьшения переменной на единицу, которые называются операциями инкремента и декремента. Для обозначения инкремента используется последовательность ++, а для обозначения декремента – последовательность —. Например, i++ является альтернативой выражению i=i + 1. Различают префиксную и постфиксную форму этих операций. В случае префиксной операции сначала выполняется инкремент или декремент, а затем вычисляется выражение:

i = 4

++i * 2 = 10

Если же используется постфиксная операция, то сначала вычисляется выражение, а затем производится увеличение или уменьшение переменной:

i = 4

i++ * 2 = 8

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

В листинге 11.9 демонстрируется работа с арифметическими операциями.

Листинг 11.9. Арифметические операции

Арифметические операции

Арифметические операции

                             

В этом примере можно заметить, что арифметические операции подчиняются математическим правилам. Например, умножение совершается до сложения (рис. 11.10). Это выполняется за счет приоритета операций, который можно изменить, используя скобки.

Рис. 11.10. Арифметические операции

 

Операции сравнения

Операции сравнения используются для сопоставления операндов. В этих операциях операндами могут быть не только числа, но и строки, логические величины и объекты. В табл. 11.8 приведены все операции сравнения.

Таблица 11.8. Операции сравнения

В листинге 11.10 показана работа с операциями сравнения.

Листинг 11.10. Операции сравнения

Операции сравнения

Операции сравнения

                             

В приведенном коде сравниваются переменные i = 5 и m2 = "5". Они считаются равными, но не идентичными (рис. 11.11).

Рис. 11.11. Операции сравнения

 

Операции над строками

Как уже говорилось, строки можно сравнивать. Кроме того, строки можно объединять с помощью операции конкатенации (+), что мы уже не раз делали. Например:

S1="Здравствуй";

S2=",";

S3="РњРёСЂ!";

S=S1+S2+" "+S3;

В итоге переменная S будет содержать строку «Здравствуй, Мир!».

Благодаря автоматическому приведению типов можно объединять числа и строки:

«год „+1984=“год 1984»

 

Логические операции

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

Операция логического И (&&) возвращает true, если только оба операнда истинны. Например, (1<7)&&(3>2). При этом сначала вычисляется левый операнд. Если он ложен, то второй операнд не вычисляется, что надо учитывать. Так, в строке (3<1)&&(i++<7) операция инкремента переменной i не произойдет.

Операция логического ИЛИ (||) возвращает true, если хотя бы один операнд истинен. Например, (2<3) || (1>2). При этом сначала вычисляется левый операнд. Если он истинен, то второй операнд не вычисляется.

Операция логического НЕ (!) является унарной и изменяет значение логической величины на обратное.

 

Условные операции

В JavaScript есть одна тернарная операция?:, которая позволяет присвоить значение переменной в зависимости от выполнения условия. Рассмотрим следующий пример:

var sign = (a>=0) ? «Положительное»: «Отрицательное»;

В зависимости от результата выражения до вопросительного знака переменная принимает одно из значений: если значение истинно, то вычисляется выражение до двоеточия, если ложно, то выражение, стоящее после двоеточия. В данном случае, если переменная a больше или равна 0, переменная sign принимает значение «Положительное», иначе переменная sign принимает значение «Отрицательное».

 

Поразрядные операции

Очень редко в сценариях JavaScript используются поразрядные операции, позволяющие манипулировать числами на уровне битов. Различают поразрядные логические операции и поразрядные операции сдвига. Для хранения целочисленных значений в JavaScript выделяется 32 бита. Для демонстрации работы поразрядных операций лучше использовать двоичную систему (табл. 11.9 и 11.10).

Таблица 11.9. Поразрядные логические операции

Таблица 11.10. Поразрядные операции сдвига

 

Другие операции

Вы уже встречались с операцией typeof, которая возвращает строку с именем типа данных. В табл. 11.11 приведены результаты, возвращаемые этой операцией.

Таблица 11.11. Результаты работы операции typeof

Кроме того, существуют операции, позволяющие обратиться к элементу какой-то структуры данных. При работе с элементами массива используется операция индексирования массива [], позволяющая обратиться к элементу массива:

myArray[5]=56

Для доступа к элементу объекта используется точка (.):

ИмяОбъекта.имяСвойства

 

11.4. Условия и циклы

 

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

 

Условные операторы

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

Оператор if

Оператор if управляет последовательностью выполнения команд. Синтаксис этого оператора:

if (логическое выражение)

{

операторы

}

Сначала вычисляется логическое выражение, затем, если оно равно true, выполняются операторы, если же оно равно false, то операторы пропускаются и продолжается выполнение сценария.

Рассмотрим пример. Допустим, функция f(x) определяется следующим образом:

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

Листинг 11.11. Пример работы оператора if

Пример работы оператора if

С помощью этого кода можно легко найти значение данной функции в любой точке (рис. 11.12).

Рис. 11.12. Определение значения функции с помощью оператора if

Оператор if..else

Часто удобно использовать полную форму условного оператора if..else. С его помощью можно задать действия, которые необходимо выполнить, если логическое выражение равно false:

if (логическое выражение)

{

операторы1

}

else

{

операторы2

}

Более того, можно совместить else с другим оператором if. В этом случае можно рассмотреть несколько альтернативных вариантов и выполнить соответствующие операторы:

if (логическое выражение1)

{

операторы1

}

else if (логическое выражение2)

{

операторы2

}

else

{

операторы3

}

Теперь перепишем предыдущий сценарий для определения функции с помощью оператора if..else (листинг 11.12).

Листинг 11.12. Пример работы оператора if..else

Пример работы оператора if..else

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

Оператор switch

Оператор switch позволяет сравнить значение с множеством других. Этого же эффекта можно достичь с помощью нескольких операторов if, но оператор switch позволяет создавать наглядный и краткий код. Этот оператор дает возможность предусмотреть операторы по умолчанию, которые выполняются, если не найдено ни одно соответствие:

switch (выражение)

{

case значение1:

операторы

case значение2:

операторы

..

default:

операторы

}

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

Листинг 11.13. Пример работы оператора switch

Пример работы оператора switch

Этот код позволяет получить перевод названия одного из трех животных (рис. 11.13).

Рис. 11.13. Пример работы оператора switch

Обратите внимание на оператор break, который позволяет закончить работу оператора switch, так как иначе будет выполняться оставшийся код в операторе switch.

 

Операторы цикла

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

Цикл for

Оператор for служит для создания цикла. Он имеет следующий синтаксис:

for (выражение инициализации; выражение условия; выражение цикла)

{

операторы

}

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

В листинге 11.14 представлен код, позволяющий найти факториал числа – n!=1*2*3*..*n.

Листинг 11.14. Факториал с помощью оператора for

Факториал с помощью оператора for

В этом коде организуется цикл от 1 до x, при этом для простоты введенное значение не проверяется на допустимость, поэтому можно, например, получить значение Infinity (бесконечность) при большом значении x.

Цикл while

Оператор while сходен с оператором for, но он не производит инициализацию и инкремент счетчика в своем объявлении. Синтаксис этого оператора следующий:

while (выражение условия)

{

операторы

}

Если выражение условия в цикле while сразу ложно, то операторы не выполнятся ни разу.

В листинге 11.15 представлен код, позволяющий найти факториал с помощью цикла while.

Листинг 11.15. Факториал с помощью оператора while

Факториал с помощью оператора while

Цикл do..while

Оператор do..while практически идентичен оператору while, но, поскольку в нем проверка условия осуществляется в конце, он гарантирует выполнение операторов по крайней мере один раз:

do

{

операторы

} while (выражение условия)

В листинге 11.16 представлен код, позволяющий найти факториал с помощью цикла do..while.

Листинг 11.16. Факториал с помощью оператора do..while

Факториал с помощью оператора do..while

Цикл for..in

С помощью конструкции for..in можно выполнить операторы почти для каждого свойства объекта. Синтаксис этого оператора:

for (свойство in объект)

{

операторы

}

Например, с помощью данного оператора можно произвести инкремент всех элементов массива (листинг 11.17).

Листинг 11.17. Пример использования оператора for..in

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

В ходе выполнения этого кода все элементы массива a увеличат свое значение на единицу (рис. 11.14).

Рис. 11.14. Инкремент элементов массива

Обратите внимание, что в цикле for..in не определяется свойство массива length.

Операторы break и continue

Иногда в ходе выполнения цикла возникает необходимость прервать весь цикл или одну его итерацию. Для этой цели служат операторы break и continue. Оператор break полностью прекращает выполнение цикла и передает управление операторам, следующим за циклом. Оператор continue прерывает текущее выполнение цикла и переходит к выполнению следующего шага цикла. Различие в работе этих операторов продемонстрировано в листинге 11.18.

Листинг 11.18. Пример использования операторов выхода из цикла

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

Данный код позволяет определить частное от введенного пользователем числа и элементов массива a. При этом в числе элементов этого массива могут быть нули, тогда необходимо в элемент массива с результатом b ввести прочерк (—) (рис. 11.15).

Рис. 11.15. Пример использования операторов выхода из цикла

В вышеприведенном коде также демонстрируется возможность вложения одного цикла в другой. Из цикла while возможен выход, только если ввести нуль (значение по умолчанию). Цикл for во время исполнения иногда прерывается, если элемент массива a равен нулю, чтобы избежать деления на ноль.

 

11.5. Функции и события

 

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

 

Функции

Функция – это набор команд, объединенных под общим именем для выполнения некоторой задачи. Синтаксис функции имеет следующий вид:

function ИмяФункции([аргумент1][,..аргументN])

{

операторы

}

Ключевое слово function объявляет функцию с именем ИмяФункции. Функции могут передаваться (но могут и не передаваться) аргументы, которые перечисляются через запятую в скобках рядом с именем функции. В качестве аргументов могут выступать переменные, значения и выражения.

Использование функций

Функции можно объявлять в любом месте внутри элемента SCRIPT. Можно даже объявить функцию внутри другой функции, однако в этом случае она будет локальной, то есть будет действовать только внутри родительской функции. Тем не менее рекомендуется объявлять функцию в блоке HEAD до начала выполнения основного кода, иначе она может быть недоступной в момент вызова. В листинге 11.19 представлен пример работы с функциями.

Листинг 11.19. Пример использования функций

Пример использования функций

При запуске этого кода отображается запрос, на который необходимо ввести 0 или 1. В зависимости от ответа запускается одна из функций: sum() или product(), которые находят сумму или произведение элементов глобального массива a соответственно.

Функции могут возвращать значение. Для этого необходимо использовать оператор возврата return. Вообще этот оператор может встречаться несколько раз в теле функции. Таким образом, функции можно использовать в выражениях (листинг 11.20).

Листинг 11.20. Использование значения функции

Использование значения функции

Функция может объявляться в выражении. Обычно в этом случае функция присваивается переменной, которая затем может использоваться в выражении:

var cube=function(x){return x*x*x}

alert(cube(2)+cube(3));

В данном случае объявляется переменная-функция, вычисляющая куб числа.

Переменное количество аргументов

Иногда в процессе создания функции неизвестно, сколько ей передадут аргументов. В этом случае необходимо воспользоваться объектом arguments. Все аргументы, переданные функции, сохраняются в этом объекте и могут быть извлечены. Например, для доступа к первому аргументу можно использовать следующий код:

var arg1=arguments[0];

Таким образом, аргументы индексируются, начиная с нуля. Для определения общего количества аргументов, переданных функции, можно использовать свойство length объекта arguments.

Листинг 11.21 демонстрирует возможность обработки переменного количества аргументов.

Листинг 11.21. Пример переменного количества аргументов в функции

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

Дополнительная информация о функциях

Аргументами функции могут выступать не только данные простого типа, но и объекты. Однако при передаче функции строки, числа или логической величины в функции создается копия переданного значения и оригинал не изменяется, то есть что бы ни делали с аргументом внутри функции, после завершения функции эта переменная уничтожается, а оригинальная переменная остается прежней. Иначе происходит при передаче объекта. В этом случае копия объекта не создается, а передается ссылка на данный объект. Если бы происходило иначе, то терялось бы много времени и памяти на создание дубликатов. Представьте, сколько потребовалось бы времени на передачу массива из 10 000 элементов, когда фактически можно обойтись передачей одного значения – ссылки на этот массив. Однако программист должен помнить, что работает в функции с оригинальным объектом.

Функции могут быть рекурсивными, то есть прямо или косвенно вызывать сами себя. Если в теле функции явно используется вызов этой же функции, то имеет место прямая рекурсия. Если же функция содержит обращение к другой функции, содержащей прямой или косвенный вызов первой функции, то данная функция является косвенно рекурсивной. Классический пример – функция для вычисления факториала неотрицательного целого числа (листинг 11.22).

Листинг 11.22. Пример рекурсивной функции

Пример рекурсивной функции

Для отрицательного числа факториала не существует. В этом случае возвращается null. Для нулевого значения функция возвращает 1, так как 0!=1. В противном случае вызывается та же функция с декрементом параметра и результат умножается на текущее значение параметра. Вызов функции прерывается при вызове fact (0) (рис. 11.16).

Рис. 11.16. Пример рекурсивной функции

 

Знакомство с событиями

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

Так, событие onLoad происходит после загрузки какого-либо элемента, например веб-страницы. Использование обработчика этого события позволяет выполнять JavaScript-код сразу после полной загрузки документа.

Одним из часто используемых событий является щелчок кнопкой мыши на объекте. При его возникновении обработчик события onClick объекта выполняет код JavaScript (листинг 11.23).

Листинг 11.23. Пример обработчиков событий

Пример обработчиков событий

Пример обработчиков событий

Ссылка 1


onClick="alert('Еще одна ссылка')">Ссылка 1

Из данного кода видно, что обработчик события может быть вызовом функции. Однако может и непосредственно указываться JavaScript-код. В данном случае оба обработчика вызывают метод alert() (рис. 11.17).

Рис. 11.17. Пример обработчиков событий

 

11.6. Встроенные объекты JavaScript

 

Объекты JavaScript объединяют в себе переменные, именуемые свойствами, и функции, управляющие этими свойствами, именуемые методами. Кроме того, они могут реагировать на события. Пользователь может создавать свои объекты, но JavaScript содержит ряд базовых объектов.

• Global – набор высокоуровневых свойств и методов, у которых нет родительского объекта.

• String – позволяет форматировать и изменять текстовые строки.

• Number – дает возможность обрабатывать числа.

• Boolean – позволяет создавать логические величины.

• Array – дает возможность создавать и управлять массивами.

• Function – позволяет создать функцию.

• Date – дает возможность работать с временем и датой.

• Math – предоставляет некоторые математические функции и константы.

• RegExp – позволяет выполнять функции регулярных выражений для заданных строк.

• Object – является прототипом для всех объектов.

 

Объект Global

Этот объект содержит несколько методов и свойств, которые не принадлежат ни одному объекту (табл. 11.12 и 11.13). Для удобства их объединили в объект Global.

Таблица 11.12. Свойства объекта Global

Таблица 11.13. Методы объекта Global

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

flag=isFinite(x/y)

 

Объект String

Объект String предоставляет средства для форматирования и выделения части строк. Для этой цели он содержит обширный перечень методов (табл. 11.14 и 11.15).

Таблица 11.14. Свойства объекта String

Таблица 11.15. Методы объекта String

Рассмотрим использование методов объекта String:

MyText="Я люблю HTML";

MyText=MyText.substring(0,8)+"JavaScript";

В результате строка MyText примет значение «Я люблю JavaScript».

 

Объект Number

Объект Number обычно применяется для доступа к некоторым постоянным значениям, например к отрицательной бесконечности. Свойства и методы этого объекта указаны в табл. 11.16 и 11.17.

Таблица 11.16. Свойства объекта Number

Таблица 11.17. Методы объекта Number

 

Объект Boolean

Объект Boolean обычно используется для преобразования объекта в логическое значение. Этот объект имеет ограниченное количество методов и свойств (табл. 11.18).

Таблица 11.18. Методы и свойства объекта Boolean

 

Объект Array

С массивами вы уже познакомились в данной главе, однако массивы – это объекты, которые имеют свои свойства и методы, облегчающие работу программисту (табл. 11.19 и 11.20).

Таблица 11.19. Свойства объекта Array

Таблица 11.20. Методы объекта Array

 

Объект Function

С помощью объекта Function можно манипулировать функцией как объектом. Этот объект содержит ряд специфичных методов и свойств (табл. 11.21 и 11.22).

Таблица 11.21. Свойства объекта Function

Таблица 11.22. Методы объекта Function

Синтаксис определения объекта Function выглядит следующим образом:

ИмяОбъектаФункции = new Function ([аргумент1, аргумент2,.. аргументN],

телоФункции);

Например,

sumFunc = new Function ("a","b","return(a+b)");

alert(sumFunc(5,4));

 

Объект Date

Объект Date предоставляет значительное количество свойств и методов, связанных с датами и временем (табл. 11.23 и 11.24). В качестве базовой даты в JavaScript принято 1 января 1970 года. Язык JavaScript имеет доступ только к времени и дате на клиентской машине.

Таблица 11.23. Свойства объекта Date

Таблица 11.24. Методы объекта Date

Конструктор этого объекта принимает значение даты в числовом или строковом формате:

ИмяОбъектаДаты = new Date();

ИмяОбъектаДаты = new Date(миллисекунды);

ИмяОбъектаДаты = new Date("месяц дд, гггг чч:мм:сс");

ИмяОбъектаДаты = new Date(год, месяц, день [, час, минуты, секунды, миллисекунды]);

где значение определяется следующим образом:

• миллисекунды – целое число, определяющее количество миллисекунд, прошедших с 0 часов 0 минут 0 секунд 1 января 1970 года по Гринвичу;

• месяц, дд, гггг, чч, мм, сс – месяц, день, год, час, минуты и секунды соответственно;

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

Если параметры не указаны, то объект инициализируется текущей датой и временем.

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

MyDate=new Date();

alert(MyDate.getDay());

Этот код отобразит число от 0 до 6, соответствующее дню недели. Например, 0 соответствует воскресенью.

 

Объект Math

Для математических вычислений JavaScript поддерживает объект Math, который содержит ряд математических констант и функций (табл. 11.25 и 11.26).

Таблица 11.25. Свойства объекта Math

Таблица 11.26. Методы объекта Math

 

Объект RegExp

Регулярные выражения – это шаблоны для поиска определенных комбинаций символов в строках. В данной книге мы не будем рассматривать регулярные выражения, но список методов и свойств объекта RegExp, позволяющего создавать регулярные выражения, можно найти в табл. 11.27 и 11.28.

Таблица 11.27. Свойства объекта RegExp

Таблица 11.28. Методы объекта RegExp

 

Объект Object

Все объекты в JavaScript – и встроенные, и пользовательские – наследуются от объекта Object, то есть его методы и свойства (табл. 11.29 и 11.30) присутствуют в каждом объекте, но, как правило, их переопределяют.

Таблица 11.29. Свойства объекта Object

Таблица 11.30. Методы объекта Object

 

Резюме

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