Создание динамического наполнения страницы. Основы JavaScript

Презентацию к данной лекции Вы можете скачать здесь.

12.1. Основы языка JavaScript.

12.1.1. Определение

JavaScript – объектно-ориентированный скриптовый язык программирования [1, 2]. JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Основные архитектурные черты [1, 2]:

• динамическая типизация – прием, широко используемый в языках программирования и языках спецификации, при котором переменная связывается с типом в момент присваивания значения, а не в момент объявления переменной, таким образом, в различных участках программы одна и та же переменная может принимать значения разных типов;
• слабая типизация – компилятор генерирует код, обеспечивающий преобразование типов, а логическая корректность такого преобразования контролируется программистом, т.е. фактически значение переменной одного типа можно присвоить значению переменной другого почти без ограничений;
• автоматическое управление памятью – специальный код, называемый сборщиком мусора (garbage collector), периодически освобождает память, удаляя объекты, которые уже не будут востребованы приложением – то есть производит сборку мусора;
• прототипное программирование – стиль объектно-ориентированного программирования, при котором отсутствует понятие класса, а повторное использование (наследование) производится путем клонирования существующего экземпляра объекта – прототипа;
• функции как объекты первого класса – функции в JavaScript могут использоваться без существенных ограничений, их можно передавать как параметры, использовать как переменные, у них могут быть свои функции (например, invoke(), delay() ).

На JavaScript оказали влияние многие языки программирования. При разработке была цель сделать язык похожим на Java, но при этом легким для использования непрограммистами.

12.1.2. История

12.1.2.1. Начало

В 1992 году компания Nombas начала разработку встраиваемого скриптового языка Cmm (Си-минус-минус), который, по замыслу разработчиков, должен был стать достаточно мощным, чтобы заменить макросы, сохраняя при этом схожесть с Си, чтобы разработчикам не составляло труда изучить его [2]. Главным отличием от Си была работа с памятью. В новом языке все управление памятью осуществлялось автоматически: не было необходимости создавать буферы, объявлять переменные, осуществлять преобразование типов. В остальном языки были сильно похожи друг на друга: в частности, Cmm поддерживал стандартные функции и операторы Си. Cmm был переименован в ScriptEase, поскольку исходное название звучало слишком негативно, а упоминание в нем Си "отпугивало" людей.

На основе этого языка был создан продукт CEnvi. В конце ноября 1995 года Nombas разработала версию CEnvi, внедряемую в веб-страницы. Страницы, которые можно было изменять с помощью скриптового языка, получили название Espresso Pages – они демонстрировали использование скриптового языка для создания игры, проверки пользовательского ввода в формы и создания анимации. Espresso Pages позиционировались как демоверсия, призванная помочь представить, что случится, если в браузер будет внедрен язык Cmm. Работали они только в 16-битовом Netscape Navigator под управлением Windows.

12.1.2.2. JavaScript

Перед Бренданом Айхом, нанятым в компанию Netscape 4 апреля 1995 года, была поставлена задача внедрить язык программирования Scheme или что-то похожее в браузер Netscape. Поскольку требования были размыты, Айха перевели в группу, ответственную за серверные продукты, где он проработал месяц, занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования. Менеджмент разработки браузера был убежден, что Netscape должен поддерживать язык программирования, встраиваемый в HTML-код страницы.

Помимо Брендона Айха в разработке участвовали один из основателей Netscape Communications Марк Андрисин и один из основателей Sun Microsystems Билл Джой: чтобы успеть закончить работы над языком к релизу браузера, компании заключили соглашение о сотрудничестве в разработке. Они ставили перед собой цель обеспечить "язык для склеивания" составляющих частей веб-ресурса: изображений, плагинов, Java-апплетов, который был бы удобен для веб-дизайнеров и программистов, не обладающих высокой квалификацией.

Первоначально язык назывался LiveScript и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера (там он должен был называться LiveWire). На синтаксис оказали влияние языки Си и Java, и, поскольку Java в то время было модным словом, 4 декабря 1995 года LiveScript переименовали в JavaScript, получив соответствующую лицензию у Sun. Анонс JavaScript со стороны представителей Netscape и Sun состоялся накануне выпуска второй бета-версии Netscape Navigator. В нем декларируется, что 28 лидирующих ИТ-компаний выразили намерение использовать в своих будущих продуктах JavaScript как объектный скриптовый язык с открытым стандартом.

В 1996 году компания Microsoft выпустила аналог языка JavaScript, названный JScript. Анонсирован этот язык был 18 июля 1996 года. Первым браузером, поддерживающим эту реализацию был Internet Explorer 3.0.

По инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название ECMAScript, описывается стандартом ECMA-262. Первой версии спецификации соответствовал JavaScript версии 1.1, а также языки JScript и ScriptEasy.

12.1.2.3. Популярность

В статье "Самый непонимаемый язык программирования в мире стал самым популярным в мире языком программирования" [3] Дуглас Крокфорд утверждает, что лидирующую позицию JavaScript занял в связи с развитием AJAX, поскольку браузер стал превалирующей системой доставки приложений. Он также констатирует растущую популярность JavaScript, то, что этот язык встраивается в приложения, отмечает значимость языка.

По данным Black Duck Software в разработке открытого программного обеспечения доля использования JavaScript выросла. 36 % проектов, релизы которых состоялись с августа 2008 по август 2009 гг., включают JavaScript, наиболее часто используемый язык программирования с быстрорастущей популярностью. 80 % открытого программного обеспечения использует Си, C++, Java, Shell и JavaScript. При этом JavaScript – единственный из этих языков, чья доля использования увеличилась (более чем на 2 процента, если считать в строках кода).

12.1.3. Возможности языка

JavaScript обладает рядом свойств объектно-ориентированного языка, но реализованное в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными объектно-ориентированными языками [2]. Кроме того, JavaScript имеет ряд свойств, присущих функциональным языкам – функции как объекты первого класса, объекты как списки, анонимные функции – что придает языку дополнительную гибкость.

Несмотря на схожий с Си синтаксис, JavaScript по сравнению с языком Си имеет коренные отличия:

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

Однако в JavaScript отсутствуют и некоторые "полезные вещи":

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

12.1.4. Семантика и синтаксис

Синтаксис языка JavaScript во многом напоминает синтаксис Си и Java, семантически же язык гораздо ближе к Self или Smalltalk.

В JavaScript:

• все идентификаторы зависят от регистра;
• в названиях переменных можно использовать буквы, подчеркивание, символ доллара, арабские цифры;
• названия переменных не могут начинаться с цифры;
• для оформления однострочных комментариев используются //, многострочные и внутристрочные комментарии начинаются с /* и заканчиваются */.

12.1.4.1. Структура языка

Структурно JavaScript можно представить в виде объединения трех четко различимых друг от друга частей [1, 2]:

• ядро ( ECMAScript );
• объектная модель браузера ( BOM );
• объектная модель документа ( DOM ).

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

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

12.1.4.1.1. Ядро

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

12.1.4.1.2. Объектная модель браузера

Объектная модель браузера – "браузероспецифичная" часть языка, являющаяся прослойкой между ядром и объектной моделью документа. Основное предназначение объектной модели браузера – управление окнами браузера и обеспечение их взаимодействия. Каждое из окон браузера представляется объектом window, центральным объектом BOM.

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

• управление фреймами;
• поддержка задержки в исполнении кода и зацикливания с задержкой;
• системные диалоги;
• управление адресом открытой страницы;
• управление информацией о браузере;
• управление информацией о параметрах монитора;
• ограниченное управление историей просмотра страниц;
• поддержка работы с HTTP cookie.

12.1.4.1.3. Объектная модель документа

Объектная модель документа – интерфейс программирования приложений для HTML и XML-документов. Согласно DOM документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

• получение узлов;
• изменение узлов;
• изменение связей между узлами;
• удаление узлов.

12.1.5. Основной синтаксис

12.1.5.1. Обзор

В JavaScript определены следующие типы [4]:

• Number ;
• String ;
• Boolean ;
• Object:
  • Function ;
  • Array ;
  • Date ;
  • RegExp ;
• Null ;
• Undefined ;
• Error.

12.1.5.2. Числа

Все числа в JavaScript согласно спецификации "64-битные двойной точности – формат IEEE 754". В JavaScript нет типа Integer, что может привести к неожиданным последствиям, например:

0.1 + 0.2 = 0.30000000000000004

Поддержаны стандартные арифметические операторы, такие как сложение, деление, остаток от деления и так далее. Здесь стоит вспомнить встроенный объект Math содержащий математические методы:

Math.sin(3.5);
d = Math.PI * r * r;

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

parseInt("123", 10) //результат – "123"
parseInt("010", 10) //результат – "10"

а если не указать базу то получим:

parseInt("010") //результат – "8"

Это произошло, потому что parseInt посчитало число восьмеричным из-за предшествующего 0.

Если функция не может преобразовать строку в число, она возвращает специальное значение NaN (сокращение от "Не Число"):

parseInt("Привет", 10) //результат – "NaN"

Результатом математической операции с NaN всегда будет NaN:

NaN + 5 //результат – "NaN"

Можно проверить значение на равенство NaN переменной с помощью встроенной функции isNaN():

isNaN(NaN) //результат – "true"

В JavaScript есть также значения Infinity и -Infinity:

1 / 0 //результат – "Infinity"
-1 / 0 //результат – "-Infinity"

12.1.5.3. Строки

Strings в JavaScript это последовательность символов. Для представления одного символа можно использовать строку единичной длины. Для получения длины строки и объектов есть свойство length:

"Привет".length //результат – "5"

Также строка имеет набор полезных методов:

"Привет".charAt(0) //результат – "П"
"Привет, мир!".replace("Привет", "Прощай") //результат – "Прощай, мир!"
"Привет".toUpperCase() //результат – "ПРИВЕТ"