If (условие) действие

Function имя_функции1() //заголовок описания функции

{//секция объявления локальных переменных

. . .

//операторы тела функции

. . . }

Function имя_функции2() //заголовок описания функции

{//секция объявления локальных переменных

. . .

//операторы тела функции

. . . }

. . .

</script>

Рис. 3.12. Структура скрипта

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

3.2.2. Типы данных и их организация в JavaScript

Язык JavaScript является языком высокого уровня, для которого справед­ливы такие понятия как типы данных и организация данных.

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

· численные (целочисленные Int и вещественные Flt);

· строковые;

· логические.

В языке JavaScript применена слабая типизация данных, что означает возможность вводить данные, не указывая их тип. Интерпретатор языка сам разберётся по контексту программы к какому типу отнести те или иные данные. Тем не менее, в ряде случаев лучше использовать типы и указывать тип данных посредством применения операторов преобразования типов, например parseInt() и parseFlt().

Организация данных – способ хранения данных и организации доступа к ним. Различают три основных способа организации данных: неименованные константы, переменные и массивы (рис. 3.13).

Неименованные константы – числовые, строковые и иного типа постоянные данные, которые хранятся непосредственно в тексте программы. Переменные – это данные, которые в ходе выполнения программы могут изменять свои значения и имеют символьные имена (идентификаторы) для организации доступа к ним. Они объявляются словом var. Особенностями переменных в JavaScript являются объявление их без указания типа и возможность многократного изменения типа в процессе выполнения скрипта.

Рис. 3.13. Примеры описания данных

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

3.2.3. Иерархия объектов в JavaScript

Как известно, в современных языках высокого уровня введены понятия классов и объектов. Под классами понимаются особые типы данных, которые в отличие от примитивных типов объединяют в себе наборы данных (свойств) и наборы программных кодов (функций) для работы со свойствами класса. Для использования класса необходимо создать данные, имеющие тип с именем класса и называющиеся экземплярами класса или объектами. Экземпляры объектов создаются оператором new (рис. 3.13).

Язык JavaScript работает со множеством объектов, образующих иерархическую систему (рис. 3.14).

Рис. 3.14. Иерархия объектов языка JavaScript

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

3.2.4. Встроенные объекты языка JavaScript

В языке JavaScript имеются встроенные объекты:

· массивы Array;

· строки String;

· математические функции для работы с числовыми данными Math;

· дата и время Date.

Свойства и методы встроенных объектов приведены в табл. 3.3 – 3.7.

Таблица 3.3. Важнейшие методы объекта Array

Таблица 3.4. Важнейшие методы объекта Date

Таблица 3.5. Важнейшие свойства и методы объекта Math

Таблица 3.6. Важнейшие свойства и методы объекта String

3.2.5. Объекты модели BOM и DOM web-стандартов

Web-стандарты определили два множества элементов, описывающих броузер и документ. Эти два множества называются объектными моделями броузера (BOM) и документа (DOM). В модели BOM описываются и объекты, имеющие отношение к броузеру, и объекты, относящиеся по смыслу к документу[1]. Иерархия часто использующихся объектов модели BOM показана на рис. 3.15 [2]. Важнейшие свойства и методы объектов (рис. 3.14) приведены в табл. 3.7.

Объект Window представляет собой окно броузера и содержит в себе множество вложенных объектов, составляющих это окно, в т.ч. полосы прокрутки, значки навигационной панели, рамку окна и т.д. Объекты, находящиеся на втором уровне можно рассматривать как свойства объекта Window, а объекты, находящиеся на третьем – как свойства объекта Document. Объект Window является глобальным, поэтому конструкции "window.объект_2_уровня" и "объект 2_уровня" являются эквивалентными.

Рис. 3.15. Часто использующиеся объекты модели BOM

В окне броузера существует web-страница, определяющаяся объектом Document, который имеет множество свойств (атрибутов) и методов (програм­мных кодов). В него вложены множества объектов:

· Forms – объекты, созданные тегом <form>;

· Images – изображения, созданные тегом <img>;

· Links – ссылки, созданные тегом <a>.

Эти множества объектов называются коллекциями объектов.

Местонахождение страницы в Internet-пространстве определяется объектом Location:

· URL-адрес страницы;

· сервер, хранящий страницу, его номер порта соединения и протокол.

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

Объект History хранит список страниц, посещённых пользователем. Этот список называется стеком истории броузера и позволяет переходить от одной страницы к другой, не выходя в поисковые службы Internet.

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

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

Таблица 3.7. Важнейшие свойства и методы объектов модели BOM

3.2.5. Объекты модели DOM web-стандартов

Web-страница состоит из стандартных элементов, доступ к которым обеспечивает модель DOM. Она Рассчитана на использование как языком JavaScript, так и языком XML. Модель основана на древовидном способе изображения структуры страницы (рис. 3.16). На рис. 3.16,а показан код простой страницы, содержащей заголовок, абзац и таблицу. Жирным шрифтом выделены открывающие теги стандартных элементов, образующих структуру таблицы. Наклонным шрифтом показано содержимое этих тегов. Тег <b>, не образующий стандартного элемента, показан нормальным шрифтом.

<!DOCTYPE html Public "-//W3C// DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml/DTD/ xhtml1-transitional.dtd" <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>Это страница</title> </head> <body> <p><b>Это абзац</b></p> <table ...> <tr><td>1.1</td><td>1.2</td></tr> <tr><td>2.1</td><td><2.2></td></tr> </table> </body </html> а)

б)

Рис. 3.16. Пример древовидного изображения структуры web-страницы

На рис. 3.16,б показана древовидная структура web_страницы. Прямоугольниками показаны теги стандартных элементов. Из рисунка видно, что страница имеет иерархическую структуру. На самом верху иерархии находится тег <html>, на самом нижнем – содержимое тегов стандартных элементов, вложенных в элемент html. Теги стандартных элементов образуют узлы дерева Вышестоящие узлы называются родительскими, нижестоящие – дочерними. Узел html является корневым узлом документа.

Иерархия объектов модели DOM показана на рис. 3.19. На верхнем уровне иерархии находятся объекты:

· Node – абстрактный объект, предназначенный для описания каждого узла документа;

· NodeList – список всех объектов семейства Node, обеспечивающий дос­туп к объектам по номеру (индексу);

· NamedNodeMap – объект, обеспечивающий доступ к объектам по имени.

В зависимости от типа узла на основе объекта Node создаётся конкретный объект, расположенный на более низком уровне иерархии. Язык XML использует все объекты. Жирным шрифтом выделены объекты, используемые в языке JavaScript. Свойства и методы объектов модели DOM приведены в табл. 3.8

Рис. 3.19. Иерархия объектов модели DOM

Таблица 3.8. Важнейшие свойства и методы объектов модели DOM

3.2.6. Приёмы программирования на JavaScript

3.2.5.1. Операции и операторы языка JavaScript

В языке JavaScript определено множество операций и операторов. Операции языка приведены в табл. 3.9, операторы языка приведены в табл. 3.10, встроенные функции – в табл. 3.11 [4].

Таблица 3.9. Операции языка JavaScript

Таблица 3.10. Операторы языка JavaScript

Таблица 3.11. Встроенные функции языка JavaScript

3.2.5.2. Конструирование выражений

Выражения в языке JavaScript можно разделить на арифметические, логические и символьные. Правила конструирования выражение в целом аналогичны правилам других языков программирования:

· выражения записываются в одну строку, верхние и нижние индексы запрещаются;

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

Конструирование символьных выражений имеет ряд особенностей, рассмотренных ниже.

Арифметические выражения в целом строятся так же как и в большинстве языков программирования. Несколько непривычным является обилие сложных операторов группы присваивания, например:

· а=5

· a+=b то же, что a=a+b

· a-=b то же, что a=a-b

· a*=b то же, что a=a*b

· a/=b то же, что a=a/b

· a%=b то же, что a=a mod b.

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

Особенностью построения логических выражений является применение оператора "= =" вместо "=". Конструкция а=b означает присвоение переменной а значения переменной b. Конструкция а==b означает сравнение переменных на предмет их равенства.

Для преобразования типов можно использовать функции parseFloat, parseInt, Number и String. Язык JavaScript предоставляет также возможность различных проверок, например, функция isFinite организует проверку является ли переменная или выражение числом, а функция isNan или, наоборот, не числом.

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

· замена привычных имён встроенных строковых функций специфичес­кими именами языка JavaScript;

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

Регулярным выражением называется шаблон текста, состоящий из обычных символов и специальных управляющих символов. Регулярные выражения выделяются символами "/". Например, комбинация символов " /о{2}/ "означает комбинацию символов " оо ", в частности в слове food. Список управляющих символов приведен в табл. 3.16 раздела 3.2.5.6.

3.2.5.3. Организация ветвления программы

Ветвление программы осуществляется условным оператором if … else и переключателем switch – case – default.

Оператор if … else имеет форматы:

if (условие) действие