Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Стрельников О.И. Основы web-технологий.doc
Скачиваний:
98
Добавлен:
02.05.2014
Размер:
648.7 Кб
Скачать

2. 2. Сценарии стороны клиента. Язык JavaScript

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

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

JavaScript, как и другие языки для встраивания сценариев в HTML-документы, имеет программный интерфейс для доступа навигатору. Навигатор, как правило, имеет панель инструментов, строку ввода адреса, рабочую область и строку состояния. Панель инструментов, как минимум, содержит кнопки "Back", "Forward", "Stop", "Reload" и "Home". Используя язык JavaScript, можно управлять содержимым рабочей области и строки состояния, а также открывать новые окна навигатора, возможно, без панели инструментов и строки ввода адреса. Кроме того, можно вызывать простейшие диалоговые панели с кнопками и полями ввода.

Для доступа к компонентам в языке JavaScript используются объекты. Под объектом понимается некоторая программная абстракция, в которой инкапсулированы свойства (данные) и методы (код) некоторого реального объекта. В языке JavaScript между объектами не устанавливается отношения наследования. Таким образом, JavaScript не является объектно-ориентированным языком.

С понятием объекта связано понятие класса. Каждый объект принадлежит определенному классу. Например, каждый объект "окно" принадлежит классу "окно" (window). Можно сказать, что каждое конкретное окно является переменной типа window или экземпляром класса window. С этой точки зрения, понятие класса близко к понятию типа.

В языке JavaScript имеется возможность создавать собственные новые классы, однако данная возможность используется редко из-за малой гибкости (по сравнению с объектно-ориентированными языками) при создании интерфейса нового класса. Можно определить JavaScript как язык для доступа к некоторой объектной библиотеке.

С точки зрения лексики и синтаксиса, язык JavaScript похож на языки C++ и Java.

Рассмотрим следующие элементы языка JavaScript:

типы;

операции;

операторы;

встроенные функции;

объекты и классы.

Типы языка JavaScript, не соответствующие никаким классам, – числовой и логический, будем условно называть number и bool. Значения типа number – целые и вещественные числа. Значения типа bool соответствуют числовым значениям 0 и 1. Константы языка JavaScript могут быть числовыми и строковыми. Последние имеют тип, соответствующий классу string. Значения остальных типов (bool и других классов) не представляются в виде констант, но могут возвращаться функциями и методами. Следует еще раз отметить, что слов number и bool в JavaScript не существует. Это условное обозначение для указания типов свойств, параметров и возвращаемых значений функций и методов.

В JavaScript имеется ряд операций аналогичных операциям языка C: '+', '–', '*', '/', '%', '<<', '>>', '+=', '–='. Операция '+' для строк перегружена и означает конкатенацию.

Основные операторы JavaScript перечислены в табл. 5.

Таблица 5

Операторы языка JavaScript

Оператор

Описание

var name = value

Объявление переменной name и присвоение ей значения value

if (cond) {...}

else {...}

Оператор условия

while (cond) {...}

Цикл с предусловием

for (init; cond; modif)

{...}

Цикл с параметром. Перед выполнением цикла осуществляется инициализация init. Перед каждой итерацией цикла проверяется условие cond. После каждой итерации производится модификация параметра цикла modif.

for (prop in obj) {...}

Цикл свойств объекта obj

break

Оператор прерывания цикла

continue

Оператор продолжения цикла

function name(par) {...}

Определение функции

Встроенные функции JavaScript перечислены в табл. 6.

Таблица 6

Встроенные функции JavaScript

Функция

Описание

string escape(string)

Перевод строки в escape-последовательность

string unescape(string)

Перевод escape-последовательности в строку

number

parseFloat(string value)

Перевод строки в вещественное число

number

parseInt(

string value,

[number radix]

)

Перевод строки в целое число в заданной системе счисления

Bool isNaN(number)

Проверка на "не число" (Not-a-Number). Не числом является, например, бесконечность, получающаяся при делении на 0.

string eval(string)

Выполнить строку

Здесь и далее для объявления функций, свойств и методов применен C-подобный стиль: тип возвращаемого значения, идентификатор (название), список параметров в круглых скобках. Необязательные параметры перечислены в квадратных скобках. В качестве типа указывается имя класса или одно из слов number или bool.

Объекты JavaScript описывают интерфейс доступа к документу в навигаторе и инкапсулируют его свойства и методы.

В табл. 7 приведены свойства и методы основных классов JavaScript.

Таблица 7

Классы JavaScript

Свойства и методы

Описание

string: Строка (с информацией о выводе на экран)

number length

Длина строки

string big()

Большой шрифт

string small()

Маленький шрифт

string bold()

Полужирный шрифт

string italics()

Наклонный шрифт

string strike()

Перечеркнутый

string fixed()

Моноширинный шрифт

string sub()

Нижний индекс

string sup()

Верхний индекс

string blink()

Мигающая строка

string toLowerCase()

Строчные буквы

string toUpperCase()

Заглавные буквы

string fontsize(number size)

Установить размер символов

string fontcolor(string color)

Установить цвет символов

string anchor(string name)

Превращает строку в "якорь" name

string link(string href)

Превращает строку в гиперссылку href

string charAt(number i)

i-й символ строки

number indexOf(string what, [number from])

Позиция подстроки what, начиная с позиции from

number lastIndexOf(string what, [number from])

Позиция подстроки what при просмотре в обратном порядке, начиная с from

string substring(number begin, number end)

Подстрока

window: Окно

string name

Название окна

string defaultStatus

Содержимое строки состояния по умолчанию

string status

Строка состояния

number length

Число фреймов в окне

frame[] frames

Массив фреймов

Продолжение табл. 7

Свойства и методы

Описание

window self

Ссылка на себя

window window

Ссылка на себя

window parent

Родительское окно

window top

Ссылка на верхнее окно в иерархии

document document

Документ

frame frame

Фрейм

location location

Местоположение отображаемого содержимого

window open(string URL, string Name, string features)

Открыть новое окно. Параметр features представляет собой список параметров и значений, перечисленных через запятую. Название параметра и значение разделяются символом "=". Возможны следующие параметры: toolbar, location, directories, status, menubar, scrollbars, resizeable, width, height. Все параметры, кроме width и height принимают логические значения (yes, no, 1 или 0). Параметры width и height принимают целочисленные значения.

close()

Закрыть окно

timeout setTimeout(string expr, number msec)

Установить таймаут

clearTimeout(timeout t)

Удалить таймаут

alert(string message)

Диалоговая панель с сообщением message и кнопкой Ok

bool confirm(string message)

Диалоговая панель с сообщением message и кнопками Ok и Cancel

string prompt(string message, string default)

Диалоговая панель с сообщением и полем ввода

frame: Фрейм

string name

Название

number length

Число внутренних фреймов

frame[] frames

Набор фреймов внутри данного

frame self

Ссылка на себя

frame window

Ссылка на себя

frame parent

Ссылка на родительский фрейм

window parent

Ссылка на родительское окно

timeout setTimeout(string expr, number msec)

Установить таймаут

clearTimeout

(timeout t)

Удалить таймаут

Продолжение табл. 7

Свойства и методы

Описание

location: Идентификатор ресурса

string hash

Поле fragment в URI

string host

Поля host и port в URI

string hostname

Поле host в URI

string href

URI

string pathname

Поле path в URI

number port

Поле port в URI

string protocol

Поле protocol в URI

string search

Параметры в URI для программы CGI

document: Документ (содержимое окна)

string title

Заголовок

string URL

URI

Date lastModified

Дата и время последней модификации документа

string fgColor

Цвет переднего плана

string bgColor

Цвет фона

string linkColor

Цвет ссылки

string alinkColor

Цвет ссылки во время перехода

string vlinkColor

Цвет посещенной ранее ссылки

anchor anchor

Якорь

link link

Ссылка

history history

Набор ссылок

form form

Форма

anchor[] anchors

Массив "якорей"

link[] links

Массив ссылок

form[] forms

Массив форм

string referrer

URI документа, из которого вызван текущий

open([string mime])

Начать вывод содержимого документа

close()

Завершить вывод содержимого документа

write(...)

Вывести в качестве содержимого документа

writeln(...)

Вывести в качестве содержимого документа и перевести строку

history: Набор ссылок

number length

Число ссылок в памяти

back()

Вернуться на предыдущую страницу

forward()

Загрузить следующую страницу

go(number delta)

Перейти

go(string location)

Перейти

static Math: Математические константы и функции

number E

E

Продолжение табл. 7

Свойства и методы

Описание

number LN2

ln(2)

number LN10

ln(10)

number LOG2E

log2(e)

number LOG10E

log10(e)

number PI

number SQRT1_2

1/sqrt(2)

number SQRT2

sqrt(2)

number abs(number a)

Абсолютное значение

number acos(number a)

Арккосинус

number asin(number a)

Арксинус

number atan(number a)

Арктангенс

number ceil(number a)

Наименьшее целое, не меньшее a

number cos(number a)

Косинус

number exp(number a)

Экспонента

number floor(number a)

Наибольшее целое, не большее a

number log(number a)

Натуральный логарифм

number max(number a, number b)

Максимум

number min(number a, number b)

Минимум

number pow(number a, number b)

ab

number random()

Случайное число от 0 до 1

number sin(number a)

Синус

number sqrt(number a)

Квадратный корень

number tan(number a)

Тангенс

Date: Дата и время

Date()

Инициализация объекта текущей датой и временем

static number UTC(number year, number month, number day [[[, number hrs], number min], number sec])

Возвращает число миллисекунд, прошедших от Epoche (01.01.1970 00:00:00 GMT) до даты, указанной в качестве параметра

static number parse(string time)

Возвращает число миллисекунд, прошедших от 01.01.1970 00:00:00 по местному времени до даты, указанной в качестве параметра

number getDate()

Число

number getDay()

День недели

number getHours()

Часы

number getMinutes()

Минуты

number getMonth()

Месяц

number getSeconds()

Секунды

number getTime()

Число миллисекунд с Epoche

number getTimeZoneOffset()

Смещение временной зоны

Окончание табл. 7

Свойства и методы

Описание

number getYear()

Год, начиная с 1900

setDate(number Date)

Установка даты

setHours(number Hours)

Установка часов

setMinutes(number Minutes)

Установка минут

setMonth(number Month)

Установка месяца

setSeconds(number Seconds)

Установка секунд

setTime(number Time)

Установка времени в миллисекундах, прошедших с Epoche

setYear(number Year)

Установка года

string toGMTString()

Преобразование к строке с датой и временем по Гринвичу

string toLocaleString()

Преобразование к строке с местными датой и временем

Array: Массив

Array()

Пустой массив

Array(number size)

Массив с size элементами

Array(a0, a1, ...)

Массив с элементами,

инициализированными a0, a1, ...

number length

Число элементов массива

string join()

Объединение элементов массива в строку

reverse()

Изменение порядка элементов массива на обратный

sort()

Сортировка элементов в массиве

Image: Изображение

Image()

Пустое изображение

Image(number w, number h)

Пустое изображение с заданными размерами

string src

URI ресурса, содержащего изображение

В объектно-ориентированном анализе при проектировании и описании объектных библиотек чаще всего рассматриваются иерархии двух видов: иерархия классов (иерархия "is-a") и иерархия объектов (иерархия "part-of"). В иерархии классов отображаются отношения наследования между классами. Поскольку в JavaScript не существует наследования, то нет и иерархии данного типа. В иерархии объектов отображаются отношения агрегации (то есть отношения целого и части) между классами и объектами. На рис. 1 приведена иерархия объектов JavaScript.

Для доступа к свойствам и методам объекта применяется операция ".":

<объект>.<свойство>

<объект>.<метод>(<параметры>)

Некоторые свойства и методы класса могут быть статическими. Такие свойства относятся не к конкретному объекту, а к классу в целом. Можно получить доступ к этим свойствам и методам, даже не имея доступа ни к одному из объектов класса. В этом случае операция "." применяется не к объекту, а к классу:

<класс>.<свойство>

<класс>.<метод>(<параметры>)

Класс, в котором все свойства и методы являются статическими, называется статическим. Статические свойства, методы и классы в табл. 7 приведены со словом "static" перед идентификатором.

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

Массивы в языке JavaScript являются объектами некоторого предопределенного класса Array. В отличие от C и C++ массивы в JavaScript являются динамическими, то есть размер массива автоматически увеличивается при присваивании значения не существующему элементу массива. Индексы массива нумеруются с нуля. Для доступа к элементам массива используются квадратные скобки. Так же как и обычные переменные, элементы массива не имеют типа. Тип имеют значения элементов. В различных элементах массива могут храниться значения различных типов.

В языке JavaScript имеется возможность определять собственные функции. Определение функции в JavaScript имеет следующий вид:

function <идентификатор>(<параметры>) { ... }

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

Для размещения сценариев JavaScript внутри документов HTML используется элемент SCRIPT:

<SCRIPT language=l src=s defer></SCRIPT>

Начальный и конечный тэги обязательны. Атрибут language указывает язык, на котором написан сценарий. Для сценариев на языке JavaScript этот атрибут должен принимать значение "JavaScript". В атрибуте src указывается URI файла со сценарием. Атрибут defer указывается, если сценарий не осуществляет вывод на экран при помощи методов write и writeln объекта document для ускорения формирования содержимого страницы.