2.3 Язык программирования JavaScript

Рассматривая программный инструментарий для динамического контента был использован язык JavaScript.

JavaScript - это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Если быть более точным, то JavaScript - это не только язык программирования на стороне клиента. Liveware, прародитель JavaScript, является средством подстановок на стороне сервера Netscape. Однако наибольшую популярность JavaScriptобеспечило программирование на стороне клиента.

JavaScriptстандартизованECMA(EuropeanComputerManufacturersAssociation- Ассоциация европейских производителей компьютеров). Соответствующие стандарты носят названия ECMA-262 и ISO-16262. Этими стандартами определяется язык ECMAScript, который примерно эквивалентен JavaScript 1.1. Отметим, что не все реализации JavaScript на сегодня полностью соответствуют стандарту ECMA. В рамках данного курса мы во всех случаях будем использовать название JavaScript.

Название "JavaScript" является собственностью Netscape. Реализация языка, осуществленная разработчиками Microsoft, официально называется Javascript. Версии JavaScript совместимы (если быть совсем точным, то не до конца) с соответствующими версиями JavaScript, т.е. JavaScript является подмножеством языка JavaScript.

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

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

Язык программирования JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющих как на стороне клиента, так и на стороне сервера. Многие люди считают, что JavaScript - это то же самое, что и Java, лишь потому, что эти языки имеют схожие названия. На самом деле это не так. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере.

При разработке обоих типов приложений используется общий компонент языка, называемый ядром и включающий определения стандартных объектов и конструкций (переменные, функции, основные объекты и средство LiveConnect взаимодействия с Java-апплетами), и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов.

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

Основные области использования языка JavaScript при создании интерактивных HTML-страниц:

• динамическое создание документа с помощью сценария;

• оперативная проверка достоверности заполняемых пользователем полей форм HTMLдо передачи их на сервер;

• создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа;

• взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенном вHTML-страницу.

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

JavaScript поддерживает четыре простых типа данных:

• целый;

• вещественный;

• строковый;

• булевой, или логический.

Для присваивания переменным значений основных типов применяются литералы – буквенные значения данных соответствующих типов.

Целые литералы являются последовательностью цифр и представляют обычные целые числа со знаком или без знака:

• 123 // целое положительное число;

• -123 // целое отрицательное число;

• +123 // целое положительное число.

Для задания вещественных литералов используется синтаксис чисел с десятичной точкой, отделяющей дробную часть числа от целой или запись вещественных чисел в научной нотации с указанием после символа “e” или “E” порядка числа. Пример правильных вещественных чисел:

1.25 0.125e01 12.5E-1 0.0125E+2

Строковый литерал – последовательность алфавитно-цифровых символов, заключенная в одинарные (‘) или двойные кавычки (“), например: “Ира”, ‘ИРА’. При задании строковых переменных нельзя смешивать одинарные и двойные кавычки. Недопустимо задавать строку, например, в виде “Ира’. Двойные кавычки – это один самостоятельный символ, а не последовательность двух символов одинарных кавычек. Если в строке нужно использовать символ кавычек, то строковый литерал необходимо заключать в кавычки противоположного вида:

“It’s a string” // Значение строки равно It’s a string

Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения.

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

• Temp1;

• MyFunction;

• _my_Method.

Язык JavaScript чувствителен к регистру. Это означает, что строчные и прописные буквы алфавита считаются разными символами.

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

Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. Как известно, всего два языка претендуют на лавры победителя в браузере. Это VBScript – подмножество Visual Basic-а и JavaScript.

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

Что такое объектная модель? Давным-давно, когда броузеры еще имели номер версии равный единице, информация просто выводилась на дисплей по мере поступления, не подвергаясь никаким изменениям. Все было просто. Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим ее путь:

• страничка скачивается с сайта и размещается в памяти компьютера;

• производится анализ странички, в результате которого она препарируется на составляющие;

• блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.) размещаются во временной базе данных соответственно структуре объектной модели;

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

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остается работать даже после того, как страничка показана на экране дисплея. Это дает нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.

Рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше:

• window - объект, дающий доступ к окну броузера;

• frames - объект, дающий доступ к фреймам;

• window...;

• window...;

• ...;

• document - объект, содержащий в себе всю страничку;

• all - полная коллекция всех тегов документа;

• forms - коллекция форм;

• anchors - коллекция якорей;

• appleеs - коллекция апплетов;

• embeds - коллекция внедренных объектов;

• filters - коллекция фильтров;

• images - коллекция изображений;

• links - коллекция ссылок;

• plugins - коллекция подключаемых модулей;

• scripts - коллекция блоков <script></script>;

• selection - коллекция выделений;

• stylesheets - коллекция объектов с индивидуально заданными стилями;

• history - объект, дающий доступ к истории посещенных ссылок;

• navigator - объект, дающий доступ к характеристикам броузера;

• location - объект, содержащий текущий URL;

• event - объект, дающий доступ к событиям;

• screen - объект, дающий доступ к характеристикам экрана.

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

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

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

Код на JavaScript обычно состоит из двух частей:

1. функции, которые вызываются из кода странички в ответ на какое-то событие;

2. код событий, которые вызывают функции.

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

<script language="JavaScript">

<!--

function somefunction()

{

// здесь располагается код функции

}

//-->

</script>

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

Заметьте также, что закрывающий тег комментария несколько необычен и предваряется двумя косыми чертами. Две косые черты - это комментарий языка JavaScript, т.е. скрипт игнорирует все, что идет после него. А сделана такая сложная конструкция ради совместимости с Netscape, который закрывающий HTML-комментарий воспринимает как непонятную ему команду и, соответственно, вызывает ошибку.

Браузеры, не имеющие поддержки JavaScript, "не знают" и тэга <script>. Они игнорируют его и печатают все стоящие вслед за ним коды как обычный текст. Иными словами, читатель увидит, как код JavaScript, приведенный в нашей программе, окажется вписан открытым текстом прямо посреди HTML-документа.

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событие MouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код представляет простой пример программы обработки события onClick:

<form>

<input type="button" value="Click me" onClick="alert('Yo)">

</form>

Данный пример имеет несколько новых особенностей - рассмотрим их по порядку. Вы можете здесь видеть, что мы создаем некую форму с кнопкой (как это делать - проблема языка HTML, так что рассматривать это здесь я не буду). Первая новая особенность - onClick="alert('Yo')" в тэге <input>. Как мы уже говорили, этот атрибут определяет, что происходит, когда нажимают на кнопку. Таким образом, если имеет место событие Click, компьютере должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript (Обратите внимание, что в этом случае мы даже не пользуемся тэгом <script>). Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo' [16].