Клиентские сценарии в Web сети (стр. 1 )

Содержание

2. Клиентские сценарии в Web сети

2.1 Язык создания сценариев JavaScript

2.1.1 Основы JavaScript

2.1.2 Основные элементы языка

2.1.3 Размещение операторов на странице

2.1.4 Ввод и вывод информации

2.1.5 Основные операторы языка JavaScript

2.2 Стандартные объекты и функции JavaScript

2.2.1 Объект Array

2.2.2 Объект Date

2.2.3 Объект Math

2.2.4 Объект String

2.2.5 Стандартные функции верхнего уровня

2.3 Объекты клиента и обработка событий

2.3.1 Иерархия объектов

2.3.2 Свойства и методы ключевых объектов. Объекты window и frame

2.3.3 Объект history

2.3.4 Объект navigator

2.3.5 Объект location

2.3.6 Объект document

2.3.7 Коллекции объектов document и других объектов

2.3.8 Обработчики событий

2.4 Cookie

2.4.1 Создание Cookie

2.4.2 Получение значения Cookie

2.4.3 Изменение значения параметра Cookie и его удаление

2. Клиентские сценарии в Web-сети

Язык HTML представляет авторам Web-страниц и узлов широкие возможности для отображения текстовой и графической информации, включения в состав страниц различных объектов. Но, тем не менее, создаваемые с помощью языка HTML страницы остаются статическими - пользователи не могут изменять информацию, расположенную на странице, и даже использовать большинство интерфейсных элементов. Для того чтобы сделать страницу по-настоящему интерактивной, необходим еще один язык, выполняемый в контексте браузера, - скриптовый язык.

Скриптовый язык используется для создания интерактивных страниц. Этот язык программирования предоставляет средства для управления браузером. Обычно он не содержит всех возможностей настоящих языков программирования, таких, например, как работа с файлами или управление графикой. Созданные с помощью скриптовых языков программы не могут выполняться самостоятельно - они работают только в контексте браузера, поддерживающего выполнение скриптовых программ. К таким браузерам относятся Microsoft Internet Explorer и Netscape Communicator. Создаваемые на скриптовых языках программы, называемые сценариями или скриптами, включаются в состав Web-страниц и распознаются и обрабатываются браузером отдельно от остального HTML-кода.

Кроме того, скриптовые языки являются одним из тех трех китов, на которых покоится реализация динамического HTML (Dynamic HTML или DHTML). Это еще один мощный инструмент создания интерактивных документов в Сети, позволяющий посредством сценариев программно изменять тэги. Он, по-сути, состоит из трех компонентов – каскадных таблиц стилей (CSS, Cascading Style Sheets), скриптового языка и HTML, соединенных объектной моделью документа (DOM, Document Object Model).

2.1. Язык создания сценариев JavaScript

Язык программирования JavaScript разработан фирмой NetsCape для создания интерактивных HTML-документов. (Фирма Microsoft разработала свой интерпретатор языка JavaScript, который она называет JScript). Это объектно-ориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера. Клиентские приложения выполняются браузером просмотра Web-документов на машине пользователя, серверные приложения выполняются на сервере. При разработке обоих типов приложений используется общий компонент языка, называемый ядром и включающий определение стандартных объектов и конструкций, и соответствующие компоненты дополнений языка, содержащие специфические для каждого типа приложений определения объектов.

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

*  Динамическое создание документа с помощью сценария

*  Оперативная проверка достоверности заполняемых пользователем полей форм HTML до передачи их на сервер

*  Создание динамических HTML-страниц совместно с каскадными таблицами стилей и объектной моделью документа

*  Взаимодействие с пользователем при решении “локальных” задач, решаемых приложением JavaScript, встроенным в HTML-страницу.

2.1.1. Основы JavaScript

Приложение JavaScript представляет набор операторов языка, последовательно обрабатываемых встроенным в браузер интерпретатором. Каждый оператор можно располагать в отдельной строке. В последнем случае разделитель (;), отделяющий один оператор от другого, не обязателен. Его используют только в случае задания нескольких операторов на одной строке. Любой оператор можно расположить в нескольких строках без всякого символа продолжения. Например, следующие два вызова функции alert эквивалентны:

alert(“Тест”); или

alert(

“Тест”

);

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

Для удобства чтения кода приложения в нем можно располагать комментарии. Любая последовательность символов, следующая за двумя косыми чертами // до конца строки, рассматривается как комментарий. Для задания многострочных комментариев используется синтаксис, заимствованный из языков Java и С. Любая последовательность символов, заключенная между символами /* и */, интерпретируется как комментарий.

Язык JavaScript чувствителен к регистру.

2.1.2. Основные элементы языка

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

function someFunction()

{

//код функции

}

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

someFunction()

Указание скобок () обязательно даже при вызове функций, которые не имеют параметров. Функции могут иметь любое число параметров, которые перечисляются в скобках. Параметры отделяются друг от друга запятой и пробелом, например: someFunction(2, 4, 1).

Следует также помнить, что в JavaScript различаются символы верхнего и нижнего регистров: someFunction, Somefunction, somefunction - это три различные функции.

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

Определение необходимых функций следует осуществлять в тэге <HEAD>, так как все определенные в нем операторы сценария интерпретируются до отображения страницы, и, таким образом, будут известны в процессе отображения всей страницы.

Функции могут возвращать определенные значения. Для этого используется ключевое слово return. Например:

function someFunction()

{

//код функции

return someValue

//возвращаемое значение

}

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

var x=4 //x присвоено значение 4.

Различают глобальные и локальные переменные. Переменная, объявленная вне функции – глобальная, и ее можно использовать везде в текущем документе. Использование «var»необязательно. Это ключевое слово применяют, когда необходимо иметь локальную переменную с тем же именем, что и у глобальной.

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

Для присваивания переменным значений основных типов применяются литералы – буквальные значения данных соответствующих типов (константы).

В JavaScript имеется три типа целочисленных значений. Если перед значением литерала не указан ноль (0), то это десятичное значение. Также можно использовать шестнадцатеричные и восьмеричные значения. В JavaScript считается, что все числа, имеющие префикс 0x, являются шестнадцатеричными, числа, начинающиеся с 0 и содержащие только цифры 0..7, - восьмеричные. Вот несколько примеров задания целочисленных значений:

532 // десятичное значение

13 // десятичное значение

0x75 // шестнадцатеричное значение

0xFF // шестнадцатеричное значение

042 // восьмеричное значение

Помимо целочисленных литералов, в JavaScript можно использовать вещественные литералы. Для их задания используется синтаксис чисел с десятичной точкой: 72.0391, 2.1Е3, 4Е-6.

Строковый литерал – последовательность алфавитно-цифровых символов, заключенная в одинарные или двойные кавычки:

str="Строковая переменная".

Для задания ряда специальных символов используются комбинации, называемые escape-последовательностями. Такие комбинации содержат символ "\" и дополнительный символ. Так, для задания кавычек внутри строковых переменных следует использовать комбинацию "\'":

str1="That\'s OK".

С помощью этого же символа "\" в строковую переменную можно включать управляющие символы:

\r - возврат каретки,

\n - переход на новую строку,

\t - табуляция.

Булевы литералы имеют два значения: true и false, и используются для обработки ситуаций да/нет в операторах сравнения. Помимо цифровых, строковых и булевых значений переменные могут содержать специальное значение null, указывающее на то, что значение данной переменной не определено.

Язык JavaScript не имеет строгой типизации - тип переменной определяется по ее значению, и все необходимые преобразования выполняются автоматически. Например, если переменная a содержит строковое значение "Переменная а=", а переменная b - числовое значение 342, мы можем присвоить переменной c результат сложения этих двух переменных:

a="Переменная а"; // строка

b=342; // число

c=a+b; // результат - преобразование к типу "строка" выполняется // автоматически.

Имена переменных и функций в должны начинаться с буквы ("A" - "Z", "a" -"z") или символа подчеркивания. Последующие символы могут быть буквами, цифрами и рядом других символов.

JavaScript чувствителен к регистру!

2.1.3. Размещение операторов на странице

Встроить сценарий JavaScript в HTML-страницу можно несколькими способами:

*  Задать операторы языка внутри тэга <SCRIPT> языка HTML

*  Указать файл с кодом JavaScript в параметре SRC тэга <SCRIPT>

*  Определить обработчик события в тэге HTML

*  «Адреса» javascript

Использование тэга <SCRIPT>. Для внедрения в HTML-страницу сценария JavaScript в спецификацию языка HTML был введен тэг-контейнер <SCRIPT>...</SCRIPT>, внутри которого могут располагаться операторы языка JavaScript. Обычно браузеры, не поддерживающие какие-нибудь тэги HTML, просто их игнорируют, анализируя, однако, содержимое пропускаемых тэгов с точки зрения синтаксиса языка HTML, что может приводить к ошибкам при отображении страницы. Во избежание подобной ситуации следует помещать операторы языка JavaScript в контейнер комментария <!--...-->:

<SCRIPT [LANGUAGE=”JavaScript”]>

<!--

операторы JavaScript

//-->

</SCRIPT>

Параметр LANGUAGE задает используемый язык сценариев. В случае языка JavaScript его значение задавать не обязательно, так как этот язык используется браузерами по умолчанию. Для языка сценариев VBScript необходимо явно задать значение этого параметра в виде строки “VBScript”.

Документ может содержать несколько тэгов <SCRIPT>, расположенных в любом месте документа. Все они последовательно обрабатываются интерпретатором JavaScript по мере отображения документа в окне браузера. В связи с этим ссылка на переменную, определенную в сценарии, размещенном в конце документа, может привести к генерации ошибки интерпретатора при обращении к такой переменной из сценария в начале документа. Поэтому рекомендуется размещать сценарии с глобальными функциями и переменными в разделе <HEAD> документа. В этом случае все определения обрабатываются интерпретатором в начале загрузки документа и хранятся в памяти с первых моментов отображения документа в окне браузера.

Задание файла с кодом JavaScript. Тэг <SCRIPT> имеет параметр SRC, позволяющий связать встраиваемый сценарий с внешним файлом, содержащим программный код на языке JavaScript. В качестве значения параметра задается полный или относительный URL-адрес ресурса. Задание закрывающего тэга </SCRIPT> обязательно, независимо от того, заданы или нет операторы внутри тэга. Следующий фрагмент кода связывает документ HTML с файлом-источником, содержащим некоторый набор функций:

<SCRIPT SRC=”http://www. *****/jscript/jsfuncs. js”>

[операторы JavaScript]

</SCRIPT>

Обработчики событий. Для совместимости с языками сценариев в некоторые тэги HTML были введены специальные параметры обработки возникающих событий. Значениями этих параметров могут быть операторы языка JavaScript. Обычно в качестве значения задается имя функции, которая вызывается, когда происходит соответствующее событие, определяемое параметром обработки события. Имя параметра начинается с приставки on, за которой следует имя самого события. Например, параметр обработки события Click (щелчок кнопкой мыши) будет иметь имя onClick.

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

Следующий пример демонстрирует задание функции и ее вызов через параметры обработки события элементов формы:

< HEAD >
< SCRIPT LANGUAGE="JavaScript" >
< !--
function Test()
{
alert("Вы нажали кнопку!")
}
//-->
< /SCRIPT >
< / HEAD >
< BODY >
< FORM >
< INPUT TYPE=button onClick=Test() >
< /FORM >
< /BODY >

Адреса javascript. Есть еще один способ встроить JavaScript-код в HTML-файл - использовать гиперссылку, имеющую адрес специального вида:

<A HREF="javascript:операторы">...</A>

Например, следующая конструкция

<A HREF="javascript:alert('Привет!')">Жми сюда</A>

задает гиперссылку, которая при щелчке мыши вызывает функцию alert('Привет!').

2.1.4. Ввод и вывод информации

Вывод информации. Язык JavaScript предоставляет два способа вывода информации: метод alert, с помощью которого можно отображать на экране клиентского браузера небольшие по размеру сообщения - эти сообщения будут появляться в диалоговой панели, содержащей кнопку Ok (панель сообщений). Нажатие этой кнопки приводит к закрытию диалоговой панели. Вот пример вывода простого сообщения:

<script language="JavaScript">

alert('Пример вывода сообщения в панели сообщений')

</script>

Вторым способом является использование метода write, который предоставляется объектом document. Вызов метода document.write с указанием в качестве параметра строки, которую следует вывести, приводит к отображению текста в окне браузера, например:

<script language="JavaScript">

document. write('Пример вывода сообщения в окно браузера')

</script>

Следует отметить, что выводимая строка может содержать и тэги языка HTML. В этом случае браузер выведет данную строку так же, как если бы она была размещена непосредственно в HTML-документе. Например:

<script language="JavaScript">

document. write('<B><I>Пример вывода сообщения в окно браузера</I></B>')

</script>

В результате строка будет отображаться жирным курсивом. Если строка имеет большую длину, то ее можно разделить на несколько подстрок, объединив их символом "+":

<script language="JavaScript">

document. write('Пример вывода длинной строки'+

'в окно браузера')

</script>

Вывод информации с помощью метода document.write завершается после последнего символа строки. Последующий вывод данного метода начинает отображение со следующей позиции. В заключение отметим, что для сохранения содержимого страницы вызов метода document.write должен располагаться между остальными тэгами, описывающими содержимое страницы секции <BODY>.

Ввод информации. Для ввода информации можно воспользоваться двумя стандартными методами - confirm и prompt. Как и метод alert, рассмотренный выше, эти методы обеспечиваются объектом window, входящим, как и упоминавшийся объект document, в состав объектной модели браузера.

Метод confirm отображает диалоговую панель, содержащую сообщение и две кнопки - Ok и Cancel. Нажатие кнопки Ok возвращает значение true, Cancel - false. Данный метод может использоваться для получения подтверждений от пользователей либо другой информации, которая может быть представлена булевым значением true/false. Например:

<script language="JavaScript">

if (confirm('Хотите перейти по гиперссылке?')

document. write('Переход по гиперссылке')

else

document. write('Отмена перехода по гиперссылке')

</script>

Вторым методом, обеспечивающим ввод информации, является prompt. Он выводит диалоговую панель, содержащую текст, строку для ввода текста и кнопки Ok и Cancel. При нажатии кнопки Ok метод prompt возвращает содержимое строки ввода, при нажатии кнопки Cancel - значение null. Метод prompt имеет два параметра. Первый задает текст, поясняющий тип информации, которую необходимо ввести, второй - значение по умолчанию. Второй параметр может быть и пустой строкой. Например:

<script language="JavaScript">

var s

s=prompt('Введите Ваше имя','Иван Петров')

document. write(s)

</script>

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

2.1.5.Основные операторы языка JavaScript

Операторы присваивания.

Оператор	Действие	Пример
=	Присваивает значение переменной	MyVar=5
+=	Увеличивает значение переменной на указанную величину	MyVar+=2
-=	Уменьшает значение переменной на указанную величину	MyVar-=2
*=	Умножает значение переменной на указанную величину	MyVar*=3
/=	Делит значение переменной на указанную величину	MyVar/=2
%=	Делит значение переменной на указанную величину и возвращает остаток	MyVar%=4

Отметим, что оператор += может использоваться не только с численными, но и со строчными операндами. При этом происходит объединение двух сток в одну:

MyStrVar = "Java"

MyStrVar += "Script" //Значение MyStrVar равно "JavaScript"

Математические операторы.

Оператор	Описание	Пример
-MyVar1	Значение переменной MyVar1 рассматривается как отрицательное число	MyVar2=- MyVar1
MyVar1+ MyVar2	Выполняется сложение двух значений. Возможно использование для объединения строк.	MyVar2= MyVar1+2
MyVar1- MyVar2	Выполняется вычитание MyVar2 из MyVar1	MyVar=2 - MyVar1
MyVar1* MyVar2	Выполняется перемножение MyVar1 на MyVar2	MyVar=3*4.5
MyVar1/ MyVar2	Выполняется деление с плавающей точкой MyVar1 на MyVar2	MyVar= MyVar1/6
MyVar1% MyVar2	Выполняется деление по модулю MyVar1 на MyVar2	MyVar= 34%MyVar1
MyVar1++	MyVar1 увеличивается на единицу	MyVar++
MyVar1--	MyVar1 уменьшается на единицу	MyVar--

Операторы сравнения

Оператор	Операция
Значение1 = = Значение2	Проверяет равенство Значения1 и Значения2.
Значение1 ! = Значение2	Проверяет неравенство Значения1 и Значения2.
Значение1 > Значение2	Проверяет, больше ли Значение1, чем Значение2.
Значение1 >= Значение2	Проверяет, больше или равно Значение1 Значению2.
Значение1 < Значение2	Проверяет, меньше ли Значение1, чем Значение2.
Значение1 <= Значение2	Проверяет, меньше или равно Значение1 Значению2.
Значение1 && Значение2	Выполняет логическую операцию И над Значением1 и Значением 2.
Значение1 || Значение2	Выполняет логическую операцию ИЛИ над Значением1 и Значением 2.
! Значение	Выполняет логическую операцию НЕ - инверсию значения.

Результатом использования операторов сравнения всегда является булева величина (имеющая значение true/false).

Тернарный оператор (выражения с оператором "?")

В языке JavaScript поддерживается довольно удобный метод создания выражений с проверкой, позаимствованный из языка С:

(условие) ? istrue : isfalse

где: условие – выражение, значение которого тестируется, istrue - действия, выполняемое при значении выражения, равном true, isfalse - действия, выполняемое при значении выражения, равном false.

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

Весь набор операторов управления языка можно разбить на три группы:

·  Операторы выбора, или условные

·  Операторы цикла

Операторы выбора. К этой группе операторов относятся операторы, которые выполняют определенные блоки операторов в зависимости от истинности некоторого булевского выражения. Оператор условия if … else:

If (условие)

{

операторы

}

[else

{

операторы2

}]

В операторе переключателе switch вычисляется одно выражение и сравнивается со значением, заданным в блоках case:

switch (выражение)

{ case значение1 :

операторы1

[break];

case значение2 :

операторы2

[break];

…

default :

[операторы]

}

Если значение выражения в блоке switch не равняется ни одному из значений в блоках case, то вычисляется группа операторов блока default, если этот блок задан, иначе происходит выход из оператора switch. Необязательный оператор break, задаваемый в каждом из блоков case, выполняет безусловный выход из оператора switch. Если он не задан, то продолжается выполнение операторов в следующих блоках case до первого оператора break или до конца тела оператора switch.

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

В языке существует два оператора цикла: for и while. Оператор цикла for позволяет организовать выполнение блока операторов заданное число раз:

for ([инициал_выражение]; [условие]; [изменяющее_выражение])

{ [операторы]}

Цикл while выполняется пока истинно выражение, задающее условие выполнения цикла:

while (условие) { [операторы] }

Иногда необходимо завершить цикл не по условию, задаваемому в заголовке цикла, а в результате вычисления некоторого условия в теле цикла. Для этой цели в JavaScript существуют операторы break и continue. Оператор break прекращает выполнение цикла и передает управление оператору, непосредственно следующему за оператором цикла.

Оператор continue прекращает выполнение текущей итерации и начинает выполнение следующей.

2.2. Стандартные объекты и функции JavaScript

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