Основы программирования на JavaScript. Учебное пособие

Введение

В учебном пособии рассматриваются происхождение [1] и основные особенности синтаксиса современного языка программирования JavaScript® [2]. В первом разделе содержатся теоретические сведения об этом языке программирования. Второй раздел содержит курс лабораторных работ для получения практических навыков разработки на рассматриваемом языке программирования. Учебное пособие может использоваться для обучения как начинающих программистов, так и уже владеющих каким-либо другим языком программирования.

Практический курс включает последовательность из восьми лабораторных работ для обучения основам программирования на JavaScript. Каждая лабораторная работа посвящена определенной теме и включает в себя теоретическую часть с основными сведениями по этой теме и практические задания для выполнения на компьютере. Большинство практических заданий предусматривает разделение по вариантам от 1 до 20. Для успешного освоения курса лабораторных работ необходимо выполнить все задания согласно заданному варианту.

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

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

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

4

1. Основы языка программирования JavaScript

1.1. Происхождение языка программирования JavaScript

Создателем языка программирования JavaScript является Брендан Эйх [1]. Корпорация Netscape Communication и компания Sun Microsystems анонсировали выпуск JavaScript 4 декабря 1995 года. JavaScript был описан как «объектный скриптовый язык», который можно использовать для написания скриптов, динамичеcки «изменяющих свойства и поведение объектов Java». Компании пытались придумать сильную брендовую связь между языками Java и JavaScript, несмотря на то, что технически эти языки имели только поверхностное сходство. Похожие имена языков повлекли за собой предполагаемое близкое родство языков, что стало постоянным источником недоразумений. Изначально JavaScript был представлен под именем «LiveScript» в сентябре 1995 года в составе Netscape Navigator 2.0. Так появилась версия JavaScript 1.0. После этого Брендан Эйх выразил надежду, что JavaScript будет внедрен также другими производителями. JavaScript 1.0 был простым динамически типизированным языком, поддерживающим числовые, строковые и булевы значения, функции первого класса и объектный тип данных. Синтаксически JavaScript, как и Java, происходил из семьи Си-подобных языков с управляющими конструкциями, заимствованными из Си, и синтаксисом выражений, включающим большинство числовых операторов языка Си. JavaScript 1.0 имел небольшую библиотеку встроенных функций. Его исходный код обычно непосредственно встраивался в файлы HTML, но встроенная библиотека включала функцию eval, которая могла анализировать и исполнять исходный код JavaScript, закодированный в значении строки JavaScript. Возможности языка JavaScript 1.0 были очень скромными. Многие функции, привычные для современных программистов, в нем были недоступны. В дальнейших версиях язык получил существенное развитие.

1.2. Синтаксис языка программирования JavaScript

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

5

тор if, операторы итераций for и while, операторы break, continue и return для непоследовательной передачи управления, блочный оператор, позволяющий использовать последовательность операторов в {}, как если бы это был единый оператор. Операторы if, for и while являются составными. Версия JavaScript 1.0 не включала оператор Си do-while, оператор switch, метки выражений и оператор goto.

Дополнительно к операторам язык Си JavaScript включал два составных оператора для доступа к свойствам своего объектного типа данных. Кроме этого, оператор for-in производил итерации по свой- ствам-ключам объекта. Внутри тела оператора with к свойствам разрабатываемого объекта можно получить доступ, как будто их имена – объявленные переменные. Из-за того, что свойства могли добавляться динамически (что было убрано в более поздних версиях), видимая переменная bindings могла менять свое значение во время процесса исполнения внутри тела оператора with.

Объявления JavaScript не следуют стилю объявлений языка Си или Java. JavaScript – динамически типизированный язык, более того, у него нет имен типов на уровне языка, которые могли бы служить синтаксическими префиксами для распознающих объявлений. Вместо этого объявления JavaScript используют в качестве префиксов ключевые слова. Объявление function определяет имя, формальные параметры и тело вызываемой функции. Объявление var может описывать одну или несколько переменных, кроме того, его можно использовать для присваивания значений переменным. Все объявления var рассматриваются как операторы и могут встречаться, в том числе, внутри блочных операторов.

В отличие от языка Си блоки операторов JavaScript 1.0 не создают областей видимости объявления. Объявления var внутри блока видимы локально внутри тела всей функции и имеет глобальную об-

ласть видимости снаружи функции.

Также одним из основных отличий от традиционного синтаксиса языка Си является обращение со знаком «точка с запятой» в конце оператора. В то время как для языка Си «точка с запятой» – это обязательное окончание оператора, JavaScript позволяет опускать этот знак, когда он является последним значимым символом строки. Возможность писать код JavaScript без использования «точек с запятой» известна как «автоматическая вставка точек с запятой». Таким образом, выбор использовать или нет эти знаки остается за программистом.

6

1.3. Типы данных и выражения JavaScript

Версия JavaScript 1.0/1.1 являлась динамически типизированным языком с пятью фундаментальными типами данных: число, строка, булево значение, объект и функция. Под термином «динамически типизированный» понимается то, что информация о типе во время исполнения ассоциируется с каждым элементом данных, а не с контейнерами значений, такими как переменные. Проверки типов во время исполнения подтверждают, что операции применяются только к значениям данных, которые поддерживаются каждой операцией.

Булев тип имеет два значения, названные true и false. Строки содержат последовательности 8-битных кодов символов. Числовой тип содержит все возможные по стандарту IEEE 754 числа с плавающей запятой двойной точности, за исключением единственного канонического значения NaN (не число).

JavaScript 1.0 имеет два особых значения, которые представляют собой отсутствие полезного значения данных. Неинициализированные переменные получают специальное значение undefined. Также это значение возвращается, когда программа пытается получить доступ к несуществующему свойству объекта. В JavaScript 1.0 получить доступ к значению undefined можно путем его объявления или обращения к неинициализированной переменной. Значение null предназначено для представления значения «не объект» в контексте, когда ожидается значение типа «объект». Оно было смоделировано по аналогии со значением null языка Java и облегчало интеграцию JavaScript с объектами, реализованными с использованием Java. На протяжении всей истории существования эти два похожие, но различные по существу значения являются причиной введения в заблуждение многих программистов JavaScript, не уверенных, какое из этих двух значений необходимо использовать в каждом конкретном случае.

Синтаксис выражений JavaScript 1.0 скопирован с языка Си с почти таким же набором операций и правил приоритета. Основное отличие – отсутствие указателей языка Си, операций, связанных с типами, и унарного оператора «плюс». Бинарный оператор «плюс» отличается тем, что может использоваться как для числовых значений, так

идля конкатенации строк. Оператор «>>» производит арифметический сдвиг вправо с расширением знака. В JavaScript также присутствует оператор «>>>», заимствованный из языка Java, который производит беззнаковый сдвиг вправо.

Вверсии JavaScript 1.1 были добавлены операторы delete, typeof

иvoid. В JavaScript 1.1 оператор delete просто устанавливает значение переменной или свойства объекта в null. Оператор typeof возвращает

7

строку, идентифицирующую первичный тип своего операнда, напри-

мер «undefined», «object», «function», «boolean», «string» или «number».

Удивительно, но typeof null возвращает строковое значение «object», а не «null». Это, вероятно, объясняется совместимостью в Java, где все значения являются объектами, а null – это по существу объект «не объект». Однако в Java отсутствует эквивалент оператору typeof, а null используется как значение по умолчанию для неинициализированных переменных. Значение null во время выполнения было закодировано с тем же внутренним значение тега, которое используется для значений типа «объект», поэтому реализация оператора typeof возвращает «object» без необходимости в какой-либо специальной логике. Этот выбор часто вызывает недовольство программистов JavaScript, которые обычно хотят проверить, действительно ли значение относится к типу «объект», перед тем как получить доступ к его свойствам. Но проверка того, что typeof возвращает «object», в этом случае недостаточна, поскольку попытка доступа к свойству null даст ошибку во время исполнения.

Оператор void просто вычисляет значение своего операнда и затем возвращает undefined. Таким образом, получить доступ к значению undefined можно также через void 0. Оператор void был добавлен для помощи в определении гиперссылок HTML, которые исполняют при наборе кода JavaScript, например:

<a href="javascript:void usefulFunction()"> Click to do something useful</a>

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

1.4. Объекты JavaScript

Объекты JavaScript 1.1 – это ассоциативные массивы, элементы которых называются «свойствами». Каждое свойство имеет строковый ключ и значение, которое может быть любого типа данных JavaScript. Свойства можно добавлять динамически. В JavaScript 1.0/1.1 не было возможности удалить свойство из объекта.

Свойства, чьи ключевые строки соответствуют синтаксическим правилам для идентификаторов, доступны с использованием нотации с «точкой», например obj.prop0. Все свойства, включая те, чьи ключи не являются идентификаторами, доступны с помощью нотации со «скобками». В этом случае скобки окружают выражение, значение которого вычисляется, а затем преобразуется в строку, которая используется в

8

качестве свойства-ключа. Например, obj["prop"+n] эквивалентно obj.prop0, когда значение n равно 0. Присваивание к несуществующему свойству создает новое свойство. Доступ к значению несуществующего свойства обычно возвращает значение undefined. Однако в JavaScript 1.0/1.1 значение null возвращается при получении доступа с помощью нотации со «скобками» к несуществующему значению свойства, если свойство-ключ является строковым представлением неотрицательного целого числа.

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

Объекты можно создавать, применяя оператор new к встроенным или определенным пользователем функциям. Функция, которую предполагается использовать подобным образом, называется «конструктором». Конструкторы обычно добавляют свойства к новому объекту. Свойства используются или для хранения данных, или в качестве методов. Встроенный оператор Object можно использовать для создания нового объекта, у которого изначально нет свойств.

JavaScript 1.0 также имеет встроенный конструктор Array, но единственным заметным различием между созданием объекта с помощью конструктора Object и конструктора Array является строка отладки, отображаемая для объекта. Объекты, создаваемые конструктором Array JavaScript 1.0, не имеют свойства length.

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

var a = new Object; // or new Array a[0] = " zero ";

a[1] = " one "; a[2] = " two "; a.length = 3;

ВJavaScript 1.0 отсутствовала концепция наследования. Нужно было индивидуально добавлять все свойства к каждому новому объекту. Это обычно выполнялось путем определения функции конструктора для каждого «класса» объекта, используемого в программе.

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

9

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

Можно наблюдать следующие характеристики объектовпрототипов:

–доступ к свойству объекта, чье имя свойства определено в прототипе, ассоциированном с конструктором объекта, возвращает значение свойства объекта-прототипа;

–добавление или изменение свойства объекта-прототипа немедленно становится видимым в уже существующих объектах, созданных конструктором, ассоциированным с прототипом;

–присваивание значения свойства к объекту затеняет (создает новое свойство, которое отменяет доступ к свойству прототипа) значение свойства с идентичным именем, определенного в прототипе, ассоциированном с функцией конструктора объекта.

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

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

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

Название свойства конструктора prototype – это ясный намек на то, что Брендан Эйх имел в виду другую объектную модель. Эта модель была создана на основе языка программировани Self. В Self новый объект создается частичным клонированием объекта-прототипа некоторой категории объектов. Каждый клон имеет ссылку parent обратно на прототип, так что прототип может обеспечивать его теми свойствами, которые должны быть общими для всех клонов этого прототипа. Таким образом, объектную модель JavaScript 1.1 можно рассматривать как вариант модели Self, где объекты-прототипы доступны косвенно через функции конструкторов и оператор new клонирует новые экземпляры из прототипа. Клонированные экземпляры наследуют свойства объектов-прототипов как общие разделяемые свойства. Неко-

10