7.4. Язык JavaScript

JavaScript разработан фирмой Netscape и  ориентирован на создание и обработку скриптов Web – страниц, а также используется для написания сценариев интерактивного поведения Web – страниц Всемирной Паутины (WWW – World Wide Web). В этом плане он является вложенным в язык HTML, но не  дублирует его функциональные возможности. В результате все методы оформления Web - страниц осуществляются языком HTML, а JavaScript предоставляет возможность "динамизации" Web - публикаций и способствует снижению трафика в сети.

JavaScript напоминает язык Java. Различие заключается в том, что Java разрабатывался как универсальный объектно-ориентированный язык, а JavaScript рассматривается как быстрое и простое в использовании средство расширения возможностей Web - страниц и Web - серверов.

Особенностью обработки кода скриптов на JavaScript является то, что они обрабатываются интерпретатором браузера по мере загрузки документа. При этом формат кода преобразуется в более эффективный внутренний формат, который выполняется позднее. Скрипты можно располагать в любом месте HTML-страницы. При этом они обрамляются тегами <SCRIPT> </SCRIPT>.

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

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

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

Структурная схема исполнения скриптов JavaScript представлена на рисунке 3.

Рис. 3. Структурная схема исполнения скриптов JavaScript.

Подключение скриптов к HTML-документу. Известно четыре способа подключения JavaScript-программ к HTML-документу:

- использование тега <SCRIPT>;

- объявление JavaScript-файла, содержащего текст программы;

- определение JavaScript-выражения в качестве значения HTML-атрибутов;

- объявление JavaScript-программы в качестве обработчика событий.

Использование тега <SCRIPT>. Тег <SCRIPT> это элемент HTML, который может содержать любое число JavaScript-операторов:

<SCRIPT>

JavaScript-операторы…

</SCRIPT>

Web - страница может включать любое количество тегов <SCRIPT> в любом месте. В теге <SCRIPT> можно определить версию браузера, для которого предназначены операторы JavaScript:

<SCRIPT LANGUAGE = "JavaScript"> определяет JavaScript для Navigator 2.0

<SCRIPT LANGUAGE = "JavaScript1.1"> определяет JavaScript для Navigator 3.0, и т.д.

Операторы в пределах тега <SCRIPT> игнорируются, если браузер пользователя не имеет уровня поддержки JavaScript, указанного в признаке LANGUAGE.

Поскольку появился VBScript, то признак LANGUAGE становится обязательным.

Таким образом, можно использовать признак LANGUAGE для написания программ, которые содержат особенности более высоких версий браузера Navigator, без ошибок при использовании более низких версий Navigator.

Определение файла для JavaScript. Признак SRC тега <SCRIPT> позволяет определять файл как источник операторов JavaScript.

<SCRIPT SRC="MyProg.js">

JavaScript-операторы…

</SCRIPT>

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

Document.write("Ошибка выполнения файла MyProg.js")

Признак SRC может определить любой URL, относительный или абсолютный, например:

<SCRIPT SRC="http://www.usr.com/SomeProg.js">

Внешние файлы JavaScript должны содержать только JavaScript - определения функций и операторы, в них не может быть HTML - тегов. Внешние файлы JavaScript должны иметь расширение *.js, и Web сервер, на котором они располагаются, должен быть специальным образом настроен.

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

Для включения в текст HTML - тега JavaScript - объекта используют специальную конструкцию в виде последовательности из 3 элементов:

- Символ "&" (амперсанд)

- JavaScript-выражение, заключенное в фигурные скобки {}

- Символ ";" (точка с запятой)

Можно использовать JavaScript - объекты только там, где употребимо значение тега HTML. Например, положим, что в документе определена средствами JavaScript переменная barWidth, имеющая значение 50. Тогда горизонтальную линию на половину окна можно создать следующим образом:

<HR WIDTH="&{barWidth};%" ALIGN="LEFT">

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

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

Одним из применений обработки событий является проверка правильности заполнения формы. Такая проверка позволяет:

- снизить нагрузку на Web - сервер, поскольку некорректные данные будут уже отфильтрованы;

- сократить задержки в случае ошибки пользователя, поскольку при проверке отсутствуют сетевые обращения;

- упростить серверную программу.

Объекты в JavaScript. В языке JavaScript все элементы  Web-страницы выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет управлять объектами Web-страницы, хотя для этого важно понимать иерархию объектов, на которые опирается разметка HTML. Рассмотрим простую HTML - страницу:

<html>

<head>

<title>My homepage

</head>

<body bgcolor=#ffffff>

<center>

<img src="home.gif" name="pic1" width=200 height=100>

</center>

<p>

<form name="myForm">

Name:

<input type="text" name="name" value=""><br>

e-Mail:

<input type="text" name="email" value=""><br><br>

<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">

</form>

<p>

<center>

<img src="ruler.gif" name="pic4" width=300 height=15>

<p>

<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>

</center>

</body>

</html>

В приведенную выше Web – страницу входят два рисунка, одна ссылка и некая форма с двумя полями для ввода текста и одной кнопкой. С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна можно разместить документ HTML. Эта Web - страница является ни чем иным, как объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.

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

Каждый объект иерархической структуры имеет свое имя. Следовательно, если необходимо знать, как можно обратиться к первому рисунку на HTML-странице, необходимо сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на Web - странице представлен как объект images[0]. Это означает, что для получения доступа к этому объекту, необходимо записать его в JavaScript как document.images[0].

Если же, например, надо знать, какой текст ввел пользователь в первый элемент формы, то сперва следует выяснить, как получить доступ к этому объекту. И снова анализ структуры начинают с вершины иерархии объектов. Затем прослеживается путь к объекту с именем elements[0] и последовательно записываются названия всех объектов, которые вошли в состав этой ветви. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0].

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

name= document.forms[0].elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь можно работать с этой переменной. Например, можно создать выпадающее окно, воспользовавшись командой alert("Hi " + name). В результате, если пользователь введет в это поле слово 'Stefan', то по команде alert("Hi " + name) будет открыто выпадающее окно с приветствием 'Hi Stefan'.

При работе с большими Web - страницами процедура адресации к различным объектам по номеру может стать весьма запутанной. Во избежание подобной проблемы, можно самим присваивать различным объектам уникальные имена, например:

<form.name="myForm">

Name:

<input type="text" name="name" value=""><br>

Эта запись означает, что объект forms[0] получает еще и второе имя - myForm. Точно так же, вместо elements[0] можно записать name (последнее было указано в атрибуте name тэга <input>). Таким образом, вместо name = document.forms[0].elements[0].value; можно записать name= document.myForm.name.value;

Это упрощает программирование на JavaScript, особенно в случае с большими Web-страницами, содержащими множество объектов. При написании имен необходимо следить за положением регистра – т.е. нельзя написать myform вместо myForm.

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

<form name="myForm">

<input type="text" name="input" value="bla bla bla">

<input type="button" value="Write"

  onClick="document.myForm.input.value= 'Yo!'; ">

Кроме объектов window и document в JavaScript имеется еще один важный объект - location. В этом объекте представлен адрес загруженного HTML-документа. Например, если загружена страница с конкретным URL - адресом, то значение location.href будет соответствовать этому адресу.

В location.href можно записывать новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:

<form>

<input type=button value="Yahoo"

  onClick="location.href='http://www.yahoo.com'; ">

</form>

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

В JavaScript все изображения представляются в виде двухмерного массива. Массив этот называется images и выступает в виде свойства объекта document. Каждое изображение на Web - странице получает порядковый номер, начиная с 0: 0, 1, 2 и т.д. Таким образом, к первому изображению можно адресоваться записав document.images[0].

Объект Image имеет определенные свойства, к которым можно обращаться с помощью языка JavaScript. Например, можно определить размер изображения, обратившись к его свойствам width и height. То есть по записи document.images[0].width можно определить ширину первого изображения на Web - странице (в пикселах).

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

<img src="img.gif" name="myImage" width=100 height=100>,

К этому изображению можно обращаться, записав: document.myImage или document.images["myImage"].,

Как и в случае тэга <img>, атрибут src содержит адрес представленного изображения. В языке JavaScript имеется возможность назначать новый адрес изображению, уже загруженному в web-страницу. В результате, изображение будет загружено с этого нового адреса, заменив на Web - странице старый адрес. Например:

<img src="img1.gif" name="myImage" width=100 height=100>

В этом примере загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется на новое - img2.gif:

document.myImage.src= "img2.src";

При этом новое изображение всегда имеет тот же размер, что был у старого.

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

<a href="#"

  onMouseOver="document.myImage2.src='img2.gif'"

  onMouseOut="document.myImage2.src='img1.gif'">

<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>

Объект Image JavaScript дает возможность создавать достаточно сложные эффекты, способствующие улучшению дизайна Web – страницы.

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

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

<html>

<head>

<script language="JavaScript">

<!-- Скрыть

function test1(form) {

  if (form.text1.value == "")

    alert("Пожалуйста, введите строку!")

  else {

   alert("Привет "+form.text1.value+"! Форма заполнена корректно!");

  }

}

function test2(form) {

  if (form.text2.value == "" ||

      form.text2.value.indexOf('@', 0) == -1)

        alert("Неверно введен адрес e-mail!");

  else alert("OK!");

}

// -->

</script>

</head>

<body>

<form name="first">

Введите Ваше имя:<br>

<input type="text" name="text1">

<input type="button" name="button1" value="Проверка" onClick="test1(this.form)">

<P>

Введите Ваш адрес e-mail:<br>

<input type="text" name="text2">

<input type="button" name="button2" value="Проверка" onClick="test2(this.form)">

</body>

</html>

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

Второй элемент формы несколько сложнее. Признаком того, что пользователь правильно ввел адрес электронной почты служит наличие символа @. Поэтому ввести простую строку (например, имя), не удастся до тех пор, пока не будет указан символ ‘@’. В Internet каждый адрес электронной почты содержит символ @, так что проверка на этот символ здесь уместна.

Фреймы. В общем случае окно браузера может быть разбито на несколько отдельных фреймов. Это означает, что фрейм определяется как некое выделенное в окне браузера поле в форме прямоугольника. Каждый из фреймов выдает на экран содержимое собственного документа (в большинстве случаев это документы HTML). Любому фрейму можно присвоить уникальное имя, воспользовавшись в тэге <frame> атрибутом name. Такая возможность важна в языке JavaScript для доступа к фреймам.

При создании Web - страниц можно использовать несколько вложенных тэгов <frameset>. Например (из документации, предоставляемой фирмой Netscape):

<frameset cols="50%,50%">

  <frameset rows="50%,50%">

    <frame src="cell.htm">

    <frame src="cell.htm">

  </frameset>

  <frameset rows="33%,33%,33%">

    <frame src="cell.htm">

    <frame src="cell.htm">

    <frame src="cell.htm">

  </frameset>

</frameset>

Можно задать толщину границы между фреймами, воспользовавшись в тэге <frameset> параметром border. Запись border=0 означает отсутствие какой - либо границы.

JavaScript организует все элементы, представленные на Web - странице, в некоторую иерархическую структуру, включая фреймы. В вершине иерархии находится окно браузера (browser window). Положим, оно разбито на два фрейма. Таким образом, окно, как объект, является родоначальником, родителем данной иерархии (parent), а два фрейма — соответственно, его потомки (children). Этим двум фреймам можно присвоить уникальные имена - frame1 и frame2. С помощью этих имен можно обмениваться информацией с двумя указанными фреймами.

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

При решении этой задачи необходимо рассмотреть на три случая:

- главное окно/фрейм получает доступ к фрейму-потомку;

- фрейм-потомок получает доступ к родительскому окну/фрейму;

- фрейм-потомок получает доступ к другому фрейму-потомку.

С точки зрения объекта "окно" (window) два указанных фрейма называются frame1 и frame2. Существует прямая взаимосвязь между родительским окном и каждым фреймом. Так образом, если писать скрипт для родительского окна, то можно обращаться к этим фреймам, называя их по имени. Например:

frame2.document.write("Это сообщение передано от родительского окна.")

Окна. Еще одной функциональной возможностью языка JavaScript является открытие новых окон в браузере. Можно либо загружать в новое окно новые документы (HTML), либо (динамически) создавать новые материалы. Рассмотрим, как можно открыть новое окно, загрузить в это окно HTML-страницу и, как его закрыть.

Приводимый ниже скрипт, открывает новое окно браузера и загружает в него определенную Web - страницу:

<html>

<head>

<script language="JavaScript">

<!-- hide

function openWin() {

  myWin= open("*.htm");

}

// -->

</script>

</head>

<body>

<form>

<input type="button" value="Открыть новое окно" onClick="openWin()">

</form>

</body>

</html>

В этом примере в новое окно с помощью метода open() записывается страница *.htm. Процессом создания окна можно управлять. Например, можно указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того, можно задать размер окна. Например, в следующем скрипте открывается новое окно размером 400x300 пикселов.

<html>

<head>

<script language="JavaScript">

<!-- hide

function openWin2() {

  myWin= open("bla.htm", "displayWindow",

    "width=400,height=300,status=no,toolbar=no,menubar=no");

}

// -->

</script>

</head>

<body>

<form>

<input type="button" value="Открыть новое окно" onClick="openWin2()">

</form>

</body>

</html>

Это окно не имеет ни строки статуса, ни панели инструментов, ни меню. Свойства окна формулируются в строке  "width=400, height=300, status=no, toolbar=no, menubar=no". Отметим, что в этой строке не следует помещать символы пробела.

Для закрытия окна с помощью языка JavaScript используют метод close().

Слои. Слои - это одна из новых функциональных возможностей браузера Netscape Navigator 4.0. Она позволяет выполнять точное позиционирование таких объектов Web - страницы, как изображения; осуществлять перемещение объектов по Web – странице; или делать объекты невидимыми.

Управление слоями осуществляется с помощью языка JavaScript. На момент написания этой работы пользоваться слоями можно только в Netscape Navigator 4.0.

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

Чтобы создать слой, необходимо использовать либо тэг <layer>, либо <ilayer>. Можно воспользоваться параметрами, приведенными в Табл.7:

Таблица 7

Тэг <layer> используется для тех слоев, которые можно точно позиционировать. Если же не указать положение слоя (с помощью параметров left и top), то по умолчанию он помещается в верхний левый угол окна. Тэг <ilayer> создает слой, положение которого определяется при формировании документа.

Например, создадим два слоя. В первом разместим изображение, а во втором - текст. При этом текст должен визуализироваться на фоне изображения:

<html>

<layer name=pic z-index=0 left=200 top=100>

<img src="img.gif" width=160 height=120>

</layer>

<layer name=txt z-index=1 left=200 top=100>

<font size=+4> <i> Layers-Demo </i> </font>

</layer>

</html>

JavaScript позволяет обращаться к слоям с помощью конструкции document.layers["myLayer"], где myLayer это имя слоя.

Программы на JavaScript могут выполнять запись информации в строку состояния; с помощью функции Timeout (или таймера) можно запрограммировать компьютер на выполнение некоторых команд по истечении определенного времени; JavaScript предоставляет возможностьис пользовать предопределенные объекты (Date, Array или Math) и т.д.

Таким образом, использование языка JavaScript позволяет:

- Создавать или добавлять к HTML–документу скрипты JavaScript.

- Производить отладку Web–страницы.

- Осуществлять добавление Web–страницы к создаваемым Web – серверам.