Основные положения синтаксиса

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

Каждый оператор с необязательным в конце разделителем (символ ;) обычно располагается в отдельной строке кода программы:

var m=5

alert('Подсказка'+m)

m = "five"; // но можно и так

Разделитель обязателен только в случае задания нескольких операторов на одной строке:

var m=5; alert('Подсказка',m)

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

alert("Подсказка");

alert(

"Подсказка"

);

Нельзя продолжать на другую строку строковый литерал — он должен располагаться полностью на одной строке текста программы или разбит на два строковых литерала, соединенных операцией конкатенации +:

alert("Подсказка") // Правильно

alert("Под // Не правильно

сказка")

alert("Под" + // Правильно

"сказка")

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

Комментарии в программе JavaScript двух видов — однострочные и многострочные:

// комментарий, расположенный на одной строке.

/*

комментарий, расположенный

на нескольких строках.

*/

Язык JavaScript чувствителен к регистру.

Размещение операторов языка на странице

Способы встраивания сценария JavaScript в страницу HTML:

• заданием операторов языка JavaScript внутри элемента SCRIPT документа HTML;

• указанием файла с кодом JavaScript в атрибуте SRC открывающего тега элемента SCRIPT;

• определением обработчика событий в открывающем теге любого элемента HTML.

Использование элемента SCRIPT

Элемент SCRIPT состоит из открывающего тега <SCRIPT> и закрывающего тега </SCRIPT>. Между ними записывается код JavaScript. Для совместимости с обозревателями, не поддерживающими язык сценариев JavaScript, рекомендуется код JavaScript заключать в теги комментария HTML. Необязательный атрибут LANGUAGE элемента SCRIPT задает используемый в сценарии язык (по умолчанию JavaScript).

<SCRIPT LANGUAGE="JavaScript">

<!--

операторы JavaScript

//-->

</SCRIPT>

Иногда перед закрывающим тегом комментария HTML ставят символы однострочного комментария JavaScript (как в приведенном примере). Это исторический казус, относящийся к версии 3.0 MS Internet Explorer, в котором этот тег рассматривался как оператор языка JavaScript и приводил к ошибке интерпретации.

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

Следует помнить, что сценарий JavaScript, как и весь документ HTML, обрабатывается постепенно, начиная с первой строки. Поэтому если в сценарии используется, например, переменная, определяемая в элементе SCRIPT, расположенном ниже, или ссылка на объект, соответствующий элементу HTML документа, расположенному после элемента SCRIPT, то значение переменной или ссылка на объект для выполняемого в данный момент оператора будут не доступны. После завершения загрузки документа в обозреватель все глобальные переменные и ссылки на объекты HTML, естественно, становятся доступными.

Задание файла с кодом JavaScript

В атрибуте SRC открывающего тега <SCRIPT> можно указать файл с кодом сценария, который будет загружен на машину клиента, вставлен в документ и интерпретирован:

<SCRIPT SRC="./functionsJS/myFuncs.js" LANGUAGE="JavaScript">

</SCRIPT>

Такой подход удобен, если на многих страницах сайта используются, например, одни и те же функции.

Подгружаемый указанным способом файл сценария не должен содержать никакой разметки HTML.

Содержимое элемента SCRIPT в последних версиях обозревателя Internet Explorer (версии 5.0 и выше) не выполняется никогда. Тогда как в предыдущих версиях оно выполнялось в случае, если по какой-то причине файл сценария, указанный в атрибуте SRC не был загружен.

Обработчики событий

С помощью обработчиков событий, представляющих собой введенные в стандарт HTML дополнительные атрибуты для всех элементов HTML, реализуется реакция отображаемого в обозревателе Интернета документа на действия пользователя или системы. По-существу с их помощью документ становится "живым", реализуя событийно-управляемое приложение.

Имя обработчика начинается с приставки on, за которым следует имя самого события (о возможных событиях и их названиях см. в уроке 11):

onclick обработчик события click (щелчок мышью)

onmouseover обработчик события mouseover (наведение указателя мыши на элемент HTML)

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

<p onmouseover="color(this)"

onmouseout="color(this)"

onclick="click++; myFunc();">. . . </p>

Функция или процедура – это именованная последовательность операторов, которая выполняет определенную задачу и может возвращать некоторое значение, определяемое операцией return (если такой операции в теле функции нет, то ее возвращаемым значением будет специальное значение undefined):

function имя_функции([параметры]) {

[операторы JavaScript]

[return значение]

}

Определение необходимых функций следует осуществлять в элементах SCRIPT, расположенных в элементе HEAD документа, так как они становятся доступными уже в начале обработки документа (содержимое элемента HEAD обрабатывается первым).

Пример 3. Сценарий, вычисляющий время обработки документа

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

Для вычисления общего времени обработки документа в сценарии, расположенном в элементе HEAD, задается переменная tBegin, в которой хранится время начала обработки документа (не считая времени, ушедшего на обработку тега <HEAD> и самого тега <SCRIPT>).

Второй элемент SCRIPT подключает файл 3.js, в котором находится определение функции time(), возвращающей текущую дату. Эта функция вызывается в сценарии третьего элемента SCRIPT, расположенного в теле документа HTML (элемент BODY). В нем для отображения на странице полученной функцией time() даты используется метод write() объекта document обозревателя. Этот объект представляет всю загруженную в обозреватель страницу, и в момент ее формирования указанным методом можно "писать" на страницу все, что требуется. Однако после завершения обработки документа (при этом генерируется событие load объекта document) запись этим методом в документ приведет к тому, что в нем будет содержаться только то, что записано этим методом.

Для определения времени завершения обработки документа обозревателем используется упоминавшееся событие load и в обработчике события onload элемента BODY создается переменная tEnd, в которой и хранится время завершения обработки документа.

Для получения общего времени обработки документа по щелчку на кнопке выполняется код, определенный в ее обработчике события onclick, который вычисляет разность между временем, хранящемся в переменных tBegin и tEnd и отображает результат функцией alert().

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

// Объявление переменной tBegin и инициализация ее

// объектом Date, содержащим текущие дату и время

var tBegin = new Date();

//-->

</SCRIPT>

<SCRIPT SRC=3.js LANGUAGE="JavaScript"></SCRIPT>

</HEAD>

<BODY onload="tEnd = new Date();">

<P>Начинается отображение страницы, в которую внедрен сценарий JavaScript.</P>

<p>Следующая строка сгенерирована внедренным сценарием:</p>

<hr>

<SCRIPT>

<!--

document.write("<p>Сегодня <b>", time(),

"</b></p>");

//-->

</SCRIPT>

<hr>

<input type=button

onclick="delta = tEnd.getTime()-tBegin.getTime();

s = 'Время обработки документа:\n'+delta+

' миллисекунд';

alert(s)"

value="Время обработки документа">

</BODY>

Файл 3.js располагается в том же каталоге, что и файл документа HTML, и содержит следующий код JavaScript, определяющий функцию получения текущей даты в форме число.месяц.год.

// Определяем функцию, возвращающую текущую дату

function time() {

d = new Date();

return d.getDate()+"."+d.getMonth()+"."+d.getYear();

}

