Лабораторная работа №5
«Создание скриптов с использованием Java-script»
Цель: Изучить Java-script, научиться работать с данными и основными функциями.
JavaScript - интерпретируемый язык программирования, стандартизированный международной организацией ECMA в спецификацииECMA-262. Языки JavaScript, JScript и ActionScript являются расширением стандарта ECMA-262.
Название "ECMAScript" явилось фактически компромиссом между организациями, вовлеченными в процесс стандартизации, в частности Netscape и Microsoft. Хотя JavaScript и JScript стремились к совместимости с ECMAScript, они имеют ряд дополнительных возможностей не предусмотренных спецификацией ECMA.
Синтаксис JScript во многом аналогичен языку JavaScript, однако, помимо добавления клиентских скриптов на веб-страницы и некоторых других функций, JScript может использоваться и для других целей, например:
автоматизация администрирования систем Microsoft Windows;
создание страниц ASP.
Язык JScript получил дальнейшее развитие в виде языка JScript.NET, который ориентирован на работу в рамках платформы Microsoft.NET
JavaScript - интерпретируемый, объектно-ориентированный язык. Хотя он имеет существенно меньшее количество возможностей, чем такие объектно-ориентированные языки как C++ и Java.
Распространенным заблуждением является то, что JavaScript аналогичен или тесно связан с Java. Оба языка имеют C-подобныйсинтаксис, являются объектно-ориентированными и как правило широко используются в клиентских веб-приложениях, однако:
Java |
JavaScript |
использует парадигму ООП из C++ |
использует прототипный подход |
имеет статическую типизацию |
имеет динамическую типизацию (значение переменной может содержать объекты любого типа и даже функции) |
загружается из скомпилированного байт-кода |
интерпретируется напрямую из файла. |
Структура языка
Структурно JavaScript можно представить в виде объединения трех четко различимых друг от друга частей:
ядро (ECMAScript),
объектная модель браузера (Browser Object Model),
объектная модель документа (Document Object Model или DOM).
Ядро
Спецификация ECMAScript описывает типы данных, инструкции, ключевые и зарезервированные слова, операторы, объекты, регулярные выражения, не ограничивая разработчиков производных языков от расширения их новыми составляющими.
Объектная модель браузера
Объектная модель браузера - специфичная для каждого браузер часть языка, опосредующая взаимодействие между ядром и объектной моделью документа. Основное предназначение объектной модели браузера - управление окнами веб-браузера и обеспечение их взаимодействия. Каждое из окон браузера представляется объектом window.
Помимо управления окнами, в рамках объектной модели браузера, браузерами обычно обеспечивается поддержка следующих возможностей:
управление фреймами;
исполнении кода и зацикливания с задержкой;
системные диалоги;
управление адресом открытой страницы;
управление информацией о браузере;
управление информацией о параметрах монитора;
ограниченное управление историей просмотра страниц;
поддержка работы с HTTP cookie.
Объектная модель документа
Объектная модель документа - интерфейс программирования приложений для HTML и XML-документов. Согласно DOM документу можно поставить в соответствие дерево объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
получение узлов,
изменение узлов,
изменение связей между узлами,
удаление узлов.
Основы JavaScript (ECMAScript)
Если сравнить JavaScript с традиционными языками разработки десктопных приложений, то возможности JavaScript существенно ограничены:
язык не позволяет разрабатывать самостоятельные приложения;
сценарии на JavaScript могут выполняться только при помощи интерпретатора, в частности веб-браузером.
JavaScript - язык без строгого контроля типов. Поэтому не требуется объявлять тип переменных явно. Кроме того, во многих случаях JavaScript исполняет преобразования автоматически, когда они необходимы. Например, при сложении строки и числа, число будет преобразовано в строку.
Код на JavaScript пишется в текстовом формате, и организован в инструкции, блоки, состоящие из связанных наборов инструкций, икомментариев. В пределах инструкции можно использовать переменные и данные, такие как строки, числа и выражения. Для объявления конца инструкции используется точка с запятой ;. Группа JScript-инструкций, заключенная в фигурные скобки {}, называется блоком.
Комментарием в JavaScript является текст, расположенный после // до конца строки. Многострочный комментарий начинается с/*, и заканчивается */.
Знак равенства (=) используется в JavaScript как присваивание. Следующий код
Pi = 3.14;
подразумевает "Присвоить значение 3.14 переменной Pi".
При сравнении двух значений на равенство применяется двойной знак равенства (==).
JavaScript выражения можно разделить на логические или числовые. Выражения содержат некоторые особенности, к примеру, символ "+" означает "добавить к...". Любая допустимая комбинация значений, переменных, операторов, и других выражений является выражением.
Объявление переменной перед использованием является необязательным. Для этого используется инструкция var. Инструкцияvar является обязательной при объявлении локальной переменной внутри функции. Разрешается объявление переменной неявно - без инструкции var. Однако, в выражениях применять необъявленные переменные не допускается. JavaScript различает регистр в имени переменной. Name и name рассматриваются как различные переменные.
Типы данных
JavaScript - язык с нестрогим контролем типов, переменные в JavaScript не имеют строго фиксированного типа. Переменные имеюттип, эквивалентный типу значения, которое они содержат. Однако, в некоторых случаях, необходимо принудительное преобразование переменной в определенный тип. Числа могут быть объявлены как строки, а строки необходимо преобразовать вчисловой тип. Для этого применяют функции parseInt() и parseFloat().
В JavaScript используется шесть типов данных. Основные из них - числа, строки, объекты, логический. Остальные два - null иundefined (т.е. неопределенный).
Строки объявляются при помощи двойных кавычек или апострофов. Строка может состоять из нуля или более символов unicode. Когда количество символов равно нулю, это называется пустой строкой ("").
JavaScript поддерживает числа как целые, так и с плавающей запятой. Также существуют специальные представления чисел, например NaN (не число).
Примеры чисел:
3.14 // Вещественное число
15 // Целое число
0177 // Восьмеричное число 177
0XA8 // Шестнадцатиричное число A8
Логический тип допускает значения - true и false. Любое выражение, равное 0, считается эквивалентным false, а любоевыражение, равное числу, отличному от 0 будет эквивалентным true.
Undefined - означает, что тип не определен. Значение undefined имеет переменная после ее объявления и до присвоения ей какого-либо определенного значения.
Переменная типа null - не имеет никакого определенного значения.
Операторы
Язык поддерживает условные выражения if и if...else. При использовании нескольких условий одновременно можно использовать операторы ||(ИЛИ ) или && (И).
В JavaScript существует несколько типов циклов: for, for...in, while, do...while и switch. Также существуетинструкция остановки выполнения цикла. Оператор завершения break может применяться для того, чтобы остановить цикл, при выполнении какого-либо условия. Инструкция continue используется, чтобы немедленно перейти к выполнению следующей итерации, пропуская остальную часть выполнения кода текущей итерации, но обновляя переменную-счетчик.
Функции
В JavaScript имеется два вида функций: встроенные и определяемые. Программист имеет возможность создавать собственные функции. Определение функции состоит из объявления параметров и блока инструкций JavaScript.
Перед тем как воспользоваться функцией, ее необходимо предвариетльно определить. Декларация функции имеет вид:
function имя (аргументы)
{
операторы
}
Здесь имя - идентификатор, задающий имя функции, аргументы - необязательный список идентификаторов, разделенных запятыми, который содержит имена формальных аргументов функции, а операторы - любой набор операторов, который называется теломфункции и исполняется при ее вызове.
Пример:
function area(radius)
{
return pi* radius * radius;
}
Эта функция называется area и имеет один формальный аргумент radius. При вызове этой функции вместо формального аргумента подставляется его фактическое значение, функция вычисляет площадь круга на основе этого значения и возвращает полученное число через оператор return.
Переменные, декларированные в теле функции, являются локальными, т. е. недоступны вне ее тела.
При вызове функции в JavaScript действуют следующие правила передачи аргументов функции:
Аргументы примитивных типов передаются функции по значению.
Объекты (и встроенные, и определенные пользователем) передаются по ссылке. Это означает, что все изменения свойств объекта в теле функции производятся непосредственно в самом объекте, а не в его локальной копии и, следовательно, сохраняются после возврата из функции.
В JavaScript функция выступает в качестве одного из основных типов данных. Одновременно с этим в JavaScript определен классобъектов Function.
В общем случае любой объект JavaScript определяется через функцию. Для создания объекта используется конструктор, который в свою очередь вводится через Function. Таким образом, с функциями в JavaScript связаны следующие ключевые вопросы:
функция как тип данных;
функция как объект;
функция как конструктор объектов.
Объекты
Объект - это главный тип данных JavaScript. Объекты в JavaScript, по-сути, являются совокупностями методов и свойств.
Переменная любого (отличного от объекта) типа данных, прежде чем к ней можно будет получить доступ, конвертируется вобъект, и только после этого выполняются действия над ее значением. Тип данных Object сам определяет объекты.
Сценарии JavaScript могут использовать объекты следующих видов:
клиентские объекты, входящие в модель DOM, т.е. отвечающие тому, что содержится или происходит на Web-странице в окне браузера. Они создаются браузером при разборе (парсинге) HTML-страницы. Примеры: window, document, location,navigator и т.п.
серверные объекты, отвечающие за взаимодействие клиент-сервер.
встроенные объекты, представляющие различные типы данных, свойства, методы, присущие самому языку JavaScript, независимо от содержимого HTML-страницы. Примеры: Array, String, Date, Number, Function, Boolean, Math.
пользовательские объекты, которые создаются программистом в процессе создания сценария с использованием конструкторов типа объектов (класса).
Операторы работы с объектами
Оператор for (переменная in объект) позволяет перебрать все свойства объекта. Например:
for (d in document)
document.write("document."+d+" = <b>"+
document[d]+"</b><br>");
Обработка объектов и массивов идентична. Можно обратиться к любой части объекта (его свойствам и методам) либо по имени, либо по индексу.
Клиентские объекты
Для создания механизма управления страницами на клиентской стороне используется объектная модель документа (DOM - DocumentObject Model). Суть модели в том, что каждому HTML-контейнеру соответствует объект, который характеризуется:
свойствами;
методами;
событиями.
Объектную модель можно представить как способ связи между страницами и браузером. Объектная модель документа - этопредставление объектов, их методов, свойств и событий, которые присутствуют и происходят в программном обеспечении браузера, в виде, удобном для работы с ними из кода HTML и исходного текста сценария на странице.
Связи между объектами различных уровней, представленные на рис. 6.1, означают, что объект верхнего уровня содержит ссылку наобъект нижнего уровня. Так, например, между объектами Window и Document есть связь. Это означает, что объект Windowимеет свойство с именем document, содержащее ссылку на объект типа Document.
Рис. 6.1. Иерархия объектов в окне браузера.
Исключением является объект Location. Из рис. 6.1 видно, что на этот объект ссылается как объект Window, так и объектDocument. В объекте Document ссылка на объект Location также содержится в свойстве с именем location.
Некоторые интерпретаторы JavaScript считают, что свойство location объекта Document должно быть защищено от записи. Поэтому обращение к объекту Location через свойство location объекта Window и через одноименное свойство объектаDocument могут дать различные результаты.
Чтобы обратиться к свойству или методу объекта, надо использовать выражение
объект.свойство
или
объект.метод()
Первый объект, с которым необходимо познакомиться, чтобы написать простейший сценарий, - это объект document, который описывает HTML документ, отображаемый в окне браузера. Ниже приведен исходный текст веб-страницы, содержащей сценарий, действия которого сводятся к выводу строки текста в окне браузера.
Имена чувствительны к регистрам символов, и если вы попытаетесь обратиться к текущему документу по имени Document,интерпретатор JavaScript отобразит сообщение об ошибке.
Для того чтобы хранить произвольное количество ссылок на объекты, расположенные на веб-странице, используются массивы. Поэтому свойства объекта Document, предназначенные для связи с компонентами веб-страницы, выглядят следующим образом.
links[ ] - массив ссылок на гипертекстовые связи, сформированные в HTML-документе с помощью дескрипторов <А>.
images[ ] - массив ссылок на изображения, включенные в состав Web-страницы с помощью дескрипторов <IMG>.
forms[ ] - массив ссылок на формы, созданные посредством дескрипторов <FORM>.
Объекты Link, Image и Form помещаются в массивы links[], images[] и forms[] в том же порядке, в котором они встречаются в исходном тексте HTML-документа. Так, images[0] ссылается на первое изображение в составе веб-страницы,images[1] - на второе изображение и т.д.
Объект Form, в свою очередь, ссылается на интерактивные элементы, принадлежащие форме. Несмотря на то, что каждый из элементов является объектом определенного типа (например, Text, Password, Radio, Checkbox и т.д.), для их описания существует также обобщенный тип Element. Соответственно ссылки на интерактивные элементы, принадлежащие форме, содержатся в свойстве elements объекта Form. Так, чтобы получить строку текста, которую пользователь ввел в поле формы, расположенной на веб-странице, можно использовать следующее выражение:
line = document.forms[0].elements[2].value;
В результате выполнения данной команды значение третьего интерактивного элемента, принадлежащего первой форме, входящей в состав текущего документа, будет скопировано в переменную line. Понятно, что команда выполнится корректно лишь в том случае, если мы правильно укажем индекс массива elements[]. Он должен соответствовать порядковому номеру элемента в составе формы.
Объекты с одинаковым набором свойств, методов и событий объединяются в классы однотипных объектов. Классы - это описания возможных объектов. Сами объекты появляются только после загрузки документа браузером или как результат работы программы. Об этом нужно всегда помнить, чтобы не обратиться к объекту, которого нет.