создание динамических страниц, т. е. страниц, содержимое которых может меняться после загрузки документа;
проверка правильности заполнения пользователем форм до пересылки их на сервер;
решение "локальных" задач с помощью сценариев и некоторые другие сферы.
JavaScript позволяет создавать приложения, выполняемые как на стороне клиента, так и на стороне сервера. При разработке приложений обоих типов используется так называемое ядро, в котором содержатся определения стандартных объектов. Клиентские приложения выполняются браузером на машине пользователя.
Программа (сценарий) на языке JavaScript обрабатывается встроенным в браузер интерпретатором. Надо стремиться к тому, чтобы написанные сценарии корректно выполнялись в любом браузере. На первоначальном этапе обучения добиться удовлетворения этого требования сложно. Предлагаемые в книге сценарии отлаживались в Internet Explorer версии 4.01 и выше.
Программа (сценарий) на языке JavaScript представляет собой последовательность операторов. Если несколько операторов располагаются на одной строке, то между ними следует поставить знак "точка с запятой" ( ; ). Если каждый оператор размещается на одной строке, то разделитель можно не писать. Один оператор может располагаться на нескольких строках.
Согласно принципам структурного программирования, программу рекомендуется записывать таким образом, чтобы в ней была отражена блочная структура. Это облегчает исследование программы и поиск ошибок.
В программах на JavaScript можно использовать комментарии. Для того чтобы задать комментарий, располагающийся на одной строке, достаточно перед его текстом поставить две косые черты (//). Если же поясняющий текст занимает несколько строк, то его следует заключать между символами /* и */. В JavaScript строчные и прописные буквы алфавита считаются разными символами.
Литералы
Простейшие данные, с которыми может оперировать программа, называются литералами. Литералы не могут изменяться. Литералы целого типа могут быть заданы в десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении. Литерал целого типа в десятичном представлении записывается как последовательность десятичных цифр со знаком или без него, например, 15, 123, -156, +3567.
Шестнадцатеричные числа включают цифры 0-9 и буквы а, b, с, d, e, f. Шестнадцатеричные числа записываются с символами Ох перед числом, например, 0x25, 0xa1,0xff.
Восьмеричное число включает только цифры 0-7 и записывается, начиная с нуля, например, 03, 0543, 011.
Запись вещественного литерала отличается от записи вещественного числа в математике тем, что вместо запятой, отделяющей целую часть от дробной, указывается точка, например, 123.34, -22.56. Кроме того, для записи вещественных чисел можно использовать так называемую экспоненциальную форму, например, число 0,000000273, которое можно представить в виде 2.73x10 ~7, в языке JavaScript записывается так: 2.73е~7. В такой записи знак умножения и число 10 заменяются символом е. В записи вещественного литерала должна присутствовать, по крайней мере, одна цифра и десятичная точка или символ экспоненты (е или Е).
Кроме целых и вещественных значений в языке JavaScript могут встречаться так называемые логические значения. Существуют только два логических значения: истина и ложь. Первое представляется литералом true, второе - false. В некоторых реализациях JavaScript может быть использована единица в качестве true, и ноль в качестве false.
Строковый литерал представляется последовательностью символов, заключенной в одинарные или двойные кавычки. Примером строкового литерала может быть строка "результат" или 'результат'. Строковый литерал, представляющий пустую строку, обозначается как "" или ' '. НАВЕРХ
Переменные
Переменные используются для хранения данных. Переменные в сценарии представляются с помощью идентификаторов. Идентификатор должен начинаться с буквы латинского алфавита, либо с символа подчеркивания. Далее может указываться последовательность, содержащая буквы латинского алфавита, цифры или знак подчеркивания, например, testi, _my_test, test_l. Тип переменной зависит от хранимых в ней данных, при изменении типа данных меняется тип переменной. Определить переменную можно с помощью оператора var, например:
var test1
В данном случае тип переменной test1 не определен и станет известен только после присвоения переменной некоторого значения.
Оператор var можно использовать и для инициализации переменной, например, конструкцией
var test2=276
определяется переменная test2 и ей присваивается значение 276.
Значение переменной изменяется в результате выполнения оператора присваивания. Оператор присваивания может быть использован в любом месте программы и способен изменить не только значение, но и тип переменной. Оператор присваивания выглядит так
а=b
где а - переменная, которой мы хотим задать некоторое значение; ь - выражение, определяющее новое значение переменной. Пусть в сценарии описаны следующие переменные
var n=3725
var x=2.75
var p=true
var s="Выполйение завершено"
Переменные п и х имеют тип number, тип переменной р - логический, переменная s имеет тип string. В JavaScript определен тип function для всех стандартных функций и функций, определяемых пользователем. Объекты JavaScript имеют тип данных object. Переменные типа object часто называют просто объектами, они могут хранить объекты.
Переменные, описанные в сценарии как в части <HEAD>, так и в части <BODY>, имеют одну и ту же область действия, доступны любому сценарию текущего документа. Такие переменные называются глобальными в отличие от локальных переменных, определенных в теле функции.
Выражения
Выражения строятся из литералов, переменных, знаков операций, скобок. В результате вычисления выражения получается единственное значение, которое может быть либо числом (целым или вещественным), либо строкой, либо логическим значением. Используемые в выражении переменные должны быть инициализированы. Если при вычислении выражения встречается неопределенная или неинициализированная переменная, то фиксируется ошибка. В JavaScript существует литерал null для обозначения неопределенного значения. Если переменной присвоено значение null, то она считается инициализированной.
Выражения формируются из операндов и обозначений операций. Например, в формуле а*b операндами являются а и b, обозначением операции - знак *.
Операции делятся на унарные (одноместные) или бинарные (двуместные). Выражение записывается либо в виде +А, если + - обозначение унарной операции, либо А + В, если + - обозначение бинарной операции. Вычисление выражения ФА сводится к вычислению операнда А и применению операции + к значению операнда. Вычисление выражения вида АФВ состоит из следующих шагов:
1. Вычисляются А и В.
2. Операция применяется к значению операндов, полученных на шаге 1.
В зависимости от типа вычисленного значения выражения можно разделить на арифметические, логические и строковые. Арифметические выражения получаются при выполнении операций, перечисленных в табл. 1.1.
Таблица 1.1. Арифметические операции
| Операция | Название |
+ | Прибавить |
| - | Вычесть |
| * | Умножить |
| / | Разделить |
| % | Остаток от деления целых чисел |
| ++ | Увеличение значения операнда на единицу |
| -- | Уменьшение значения операнда на единицу |
| Оператор | Эквивалентный оператор присваивания |
| X += Y | X = -X+Y |
| X %= Y | X = X%Y |
| X -= Y | X = X-Y |
| X *= Y | X = X*Y |
| X /= Y | X = X/Y |
< (меньше);
<= (меньше или равно);
== (равно);
!= (не равно);
>= (больше или равно);
> (больше).
Операция ! (логическое НЕ) применяется к операндам логического типа, если значение операнда а равно true, то значение выражения !а - false, если значение операнда а равно false, то значение выражения !а - true. Результат применения логических операций && (логическое И) и и (логическое ИЛИ) приведен в табл. 1.3.
Таблица 1.3. Логические операции:
| А | В | A&&B | A||B |
| true | true | true | true |
| true | false | false | true |
| false | true | false | true |
| false | false | false | false |
Значение выражения А&&В истинно, если истинны оба операнда, и ложно в противном случае. Значение выражения А | |в истинно, если значение хотя бы одного из операндов истинно, и ложно в противном случае.
Над строковыми значениями определена операция конкатенация (соединение) строк. Обозначается операция знаком плюс. Результатом выполнения этой операции является строка, состоящая из строковых значений операндов, например, в результате выполнения оператора присваивания
st = "текущее "+"состояние"
переменная st получит значение "текущее состояние". Рассмотрим еще один пример. Пусть выполнено
stl = "текущий " st2 = "момент"
В результате выполнения
stl += st2
переменная st1 получит значение "текущий момент".
Приоритет операций определяет порядок, в котором выполняются операции в выражении. В табл. 1.4 перечислены рассмотренные операции в порядке убывания приоритетов.
Таблица 1.4. Таблица приоритетов операций:
| Название | Обозначение |
| Инкремент | ++ |
| Декремент | -- |
| Отрицание | ! |
| Унарный минус | - |
| Умножение | * |
| Деление, остаток от деления | /, % |
| Сложение | + |
| Вычитание | - |
| Сравнение | <, >, <=, >= |
| Равенство | == |
| Неравенство | != |
| Логическое И | && |
| Логическое ИЛИ | || |
| Присваивание | =, +=, -=, *=, /=, %=, ! = |
Сценарии в HTML-документе
Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами <script> и </script>.
Одним из параметров тега <script> является language, который определяет используемый язык сценариев. Для языка JavaScript значение параметра равно "JavaScript". Если применяется язык сценариев VBScript, то значение параметра должно быть равным "VBScript". В случае использования языка JavaScript параметр language можно опускать, т. к. этот язык выбирается браузером по умолчанию.
Обычно браузеры, не поддерживающие какие-либо теги HTML, эти теги просто игнорируют. Попытка браузера проанализировать содержимое не поддерживаемых тегов может привести к неверному отображению страницы. Чтобы избежать такой ситуации, рекомендуется помещать операторы языка JavaScript в теги комментария <! - ... ->. Для правильной работы интерпретатора перед закрывающим тегом комментария --> следует поставить символы //.
Итак, для размещения сценария в HTML-документе следует написать следующее:
<script language="JavaScript">
< !--
Операторы языка JavaScript
//-->
</script>
Документ может содержать несколько тегов <script>. Все они последовательно обрабатываются интерпретатором JavaScript. В следующем примере в раздел <BODY> (в тело) HTML-документа вставлены операторы языка JavaScript.
Вычисление площади треугольника
Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в разделе <BODY> HTML-документа (листинг 1.1).
Листинг 1.1. Первый сценарий в документе :
<HTML>
<HEAD>
<title>Первый сценарий в документе</title>
</HEAD>
<BODY>
<Р>Страница, содержащая сценарий.</Р>
<script>
<!--
var a=8; h=10
document.write ("Площадь прямоугольного треугольника равна ", a*h/2,".")
//-->
</script>
<Р>Жонец формирования страницы, содержащей сценарий</Р>
</BODY>
</HTML>
В сценарии описываются и инициализируются две переменные, затем значение выражения записывается в документ. Для формирования вывода в HTML-страницу используется метод write объекта document. Строки, записываемые в документ, могут включать в себя теги HTML и выражения JavaScript.
Тег <noscript> определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена. Этот тег следует после кода, заключенного в теги <script> и </script>. Если поддержка включена, то тег <noscript> игнорируется.
В дальнейших примерах будем считать, что поддержка JavaScript включена.
Функции: описание и использование
При создании программы разумно выделить в ней логически независимые части (так называемые подпрограммы). Каждую часть при необходимости можно разбить на отдельные подпрограммы и т. д. Разбиение программы на подпрограммы облегчает процесс отладки, т. к. позволяет отлаживать каждую подпрограмму отдельно. Имеет смысл распределить работу по созданию сложной программы между отдельными программистами. Некоторые подпрограммы можно использовать для решения разных задач.
Один раз созданную и отлаженную программу можно использовать произвольное число раз.
Во многих языках программирования понятие подпрограммы реализуется с помощью конструкций процедур, функций, модулей и т. п.
Основным элементом языка JavaScript является функция. Описание функции имеет вид
function F (V) {S}
где F - идентификатор функции, задающий имя, по которому можно обращаться к функции; v - список параметров функции, разделяемых запятыми; s - тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение.
Описание функции не может быть вложено в описание другой функции. Параметры функции внутри ее тела играют ту же роль, что и обычные переменные, но начальные значения этим параметрам присваиваются при обращении к функции. Если описание функции имеет вид
function F (vl, v2, ..., vn) {5}
то вызов функции должен иметь вид
F (el, e2, . . ., en)
где el, e2, ..., en - выражения, задающие фактические значения параметров. Параметры vl, v2, ..., vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров el, е2, ..., en, с которыми функция затем и работает. Если в функции параметры отсутствуют, то описание функции имеет вид
function F () {S}
Наличие скобок в операторе вызова функции обязательно, т. е. вызов функции в этом случае должен иметь вид:
F()
Обычно все определения и функции задаются в разделе <HEAD> документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.
В следующем примере в разделе заголовка описана функция саге, вычисляющая площадь прямоугольного треугольника по заданным катетам.
Сценарий с функцией
Необходимо написать сценарий, определяющий площадь треугольника по заданному основанию и высоте. Для вычисления площади воспользуемся функцией, описанной в разделе <HEAD> HTML-документа (листинг 1.2).
Листинг 1.2. Использование сценария с функцией
<HTML>
<HEAD>
<title>Использование сценария с функцией</title>
<script language="JavaScript">
<!-- //
function care (a, h) { return a*h/2 }
//-->
</script>
</HEAD>
<BODY>
<Р>Начало отображения страницы со сценарием и функцией.</Р>
<script>
<!--
var al=4; hl=16 var s=care (al,hl)
document.write("При вызове функции получено значение ", s,".");
//-->
</script>
<Р>Конец формирования страницы.</P>
</BODY>
</HTML>