Создание и применение сценариев на JavaScript

Цель: научиться использовать при JavaScript создании web-страниц.

JavaScript — это язык программирования, используемый в составе страниц HTML для увеличения функциональности и возможностей взаимодействия с пользователями.

Он был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun’s Java. С помощью JavaScript на Web-странице можно сделать то, что невозможно сделать стандартными тегами HTML. Скрипты выполняются в результате наступления каких-либо событий, инициированных действиями пользователя.

Создание Web-документов, включающих программы на JavaScript, требует наличия текстового редактора и подходящего браузера. Некоторые браузеры включают в себе встроенные редакторы, поэтому необходимость во внешнем редакторе отпадает.

Сценарии в HTML-документе Сценарии, написанные на языке JavaScript, могут располагаться непосредственно в HTML-документе между тегами и .

Одним из параметров тега является language, который определяет используемый язык сценариев. Для языка JavaScript значение параметра равно «JavaScript». Если применяется язык сценариев VBScript, то значение параметра должно быть равным «VBScript». В случае использования языка JavaScript параметр language можно опускать, т. к. этот язык выбирается браузером по умолчанию.

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

Для правильной работы интерпретатора перед закрывающим тегом комментария —> следует поставить символы //.

Итак, для размещения сценария в HTML-документе следует написать следующее:

< !-;

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

//—>

Документ может содержать несколько тегов. Все они последовательно обрабатываются интерпретатором JavaScript. В следующем примере в раздел (в тело) HTML-документа вставлены операторы языка JavaScript.

Необходимо написать сценарий, определяющий площадь прямоугольного треугольника по заданным катетам. Сценарий разместим в разделе HTML-документа (листинг 1.1).

Листинг 1.1 Первый сценарий в документе:

Первый сценарий в документе.

Страница, содержащая сценарий.

var a=8; h=10.

document.write («Площадь прямоугольного треугольника равна», a*h/2," .").

//—>

Конец формирования страницы, содержащей сценарий.

В сценарии описываются и инициализируются две переменные, затем значение выражения записывается в документ. Для формирования вывода в HTML-страницу используется метод write объекта document. Строки, записываемые в документ, могут включать в себя теги HTML и выражения JavaScript.

Тег определяет HTML-код, отображаемый на экране в случае, если JavaScript не поддерживается браузером или поддержка отключена. Этот тег следует после кода, заключенного в теги и. Если поддержка включена, то тег игнорируется.

Рендеринг страницы и.

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

Таким образом, элемент блокирует рендеринг (отображение) документа, пока не выполнится определённый в нём сценарий.

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

Counting rabbits

for (var i=1; i<=3; i++) {.

alert («Rabbit „+i+“ out of the hat!»).

}.

…Finished counting

Порядок исполнения:

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

Только после того, как браузер выполнил скрипт, он возвращается к HTML и отображает остальную часть страницы Внешние скрипты Если JavaScript-кода много — его выносят в отдельный файл, который подключается в HTML:

Здесь /path/to/script.js — это абсолютный путь к файлу, содержащему скрипт (из корня сайта). Можно указать и полный URL. Вы также можете использовать путь относительно текущей страницы, т. е. src="script.js" если скрипт находится в том же каталоге, что и страница.

Например:

count_rabbits ();

Содержимое файла /files/tutorial/browser/script/rabbits.js:

function count_rabbits () {.

for (var i=1; i<=3; i++) {.

alert («Кролик номер «+i).

}.

}.

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

Чтобы подключить несколько скриптов, используйте несколько тегов:

Внешний скрипт блокирует отображение страницы до того, как он загрузится и выполнится.

Атрибуты async и defer.

Если у тега есть атрибут async или defer, то браузер ставит его в очередь на загрузку и, не задерживаясь, продолжает отображать страницу.

Когда скрипт загрузится — он выполнится.

Разница между этими двумя атрибутами заключается в том, что defer сохраняет порядок выполнения скриптов, а async — нет.

Например, рассмотрим три варианта кода с большим скриптом large. js и маленьким small. js:

Второй скрипт загрузится быстрее и выполнится раньше, чем первый. А если поставить «defer» вместо «async», то браузер придержит запуск второго скрипта, чтобы сохранить относительный порядок выполнения.

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

Поддержка:

defer.

Везде, кроме Opera.

async.

Везде, кроме IE<10, Opera.

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

Глобальная структура На рисунке схематически отображена структура основных браузерных объектов.

На вершине стоит window, который еще называют глобальным объектом. Все остальные объекты делятся на 3 группы.

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

Доступна через переменную document. Дает доступ к содержимому страницы.

На странице W3C DOM вы можете найти стандарты DOM, разработанные самим W3C. На данный момент существует 3 уровня DOM. Современные браузеры также поддерживают некоторые возможности, которые называются DOM 0 и которые остались еще с той эпохи, когда не было W3C.

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

BOM — это объекты для работы с чем угодно, кроме документа.

Доступ к фреймам, запросы к серверу, функции alert/confirm/prompt — все это BOM.

Большинство возможностей BOM стандартизированы в HTML5, но браузеры любят изобрести что-нибудь своё, особенное.

Объекты и функции JavaScript.

Javascript — связующий все это язык. Встроенные в него объекты и сам язык в идеале должны соответствовать стандарту ECMA-262, но пока что браузеры к этому не пришли. Хотя положительная тенденция есть.

Глобальный объект window имеет две роли:

Это окно браузера. У него есть методы window. focus (), window. open () и другие.

Это глобальный объект JavaScript.

Вот почему он на рисунке представлен зеленым и красным цветом.

navigator.

Объект navigator содержит общую информацию о браузере. У него есть масса свойств, но в 90% случаях применяется только одно из них: navigator.userAgent.

По свойству navigator. userAgent JavaScript может определить текущий браузер.

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

Тогда в будущем, когда браузер добавит новую возможность, ваш скрипт тут же подхватит её и продолжит работать.

screen.

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

Текущее разрешение экрана посетителя по горизонтали/вертикали находится в screen. width/screen.height.

Это свойство можно использовать для сбора статистической информации о посетителях.

JavaScript-код счетчиков считывает эту информацию и отправляет на сервер. Именно поэтому можно просматривать в статистике, сколько посетителей приходило с каким экраном.

location.

Объект location предоставляет информацию о текущем URL и позволяет JavaScript перенаправить посетителя на другой URL. Значением этого свойства является объект типа Location.

Методы и свойства Location.

Самый главный метод — это, конечно же, toString. Он возвращает полный URL.

alert ((window.location + ' ').indexOf ('://'));

Все следующие свойства являются строками.

Колонка «Пример» содержит их значения для тестового URL:

http://www.google.com:80/search?q=javascript#test.

Методы:

assign (url).

загрузить документ по данному url. Можно и просто приравнять window.location.href = url.

reload ([forceget]).

перезагрузить документ по текущему URL. Аргумент forceget — булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.

replace (url).

заменить текущий документ на документ по указанному url. Разница, по сравнению с assign () заключается в том, что после использования replace () страница не записывается в истории посещений. В частности, это значит, что посетитель не сможет использовать для возврата кнопку браузера «Назад».

toString ().

Как обсуждалось выше, возвращает строковое представление URL.

При изменении любых свойств window. location, кроме hash, документ будет перезагружен, как если бы для модифицированного url был вызван метод window.location.assign ().

Функции: описание и использование При создании программы разумно выделить в ней логически независимые части (так называемые подпрограммы). Каждую часть при необходимости можно разбить на отдельные подпрограммы и т. д. Разбиение программы на подпрограммы облегчает процесс отладки, т. к. позволяет отлаживать каждую подпрограмму отдельно. Имеет смысл распределить работу по созданию сложной программы между отдельными программистами. Некоторые подпрограммы можно использовать для решения разных задач.

Один раз созданную и отлаженную программу можно использовать произвольное число раз.

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

Основным элементом языка JavaScript является функция. Описание функции имеет вид.

function F (V) {S}.

где F — идентификатор функции, задающий имя, по которому можно обращаться к функции; v — список параметров функции, разделяемых запятыми; s — тело функции, в нем задаются действия, которые нужно выполнить, чтобы получить результат. Необязательный оператор return определяет возвращаемое функцией значение.

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

function F (vl, v2, …, vn) {S}.

то вызов функции должен иметь вид.

F (el, e2,.. ., en).

где el, e2, …, en — выражения, задающие фактические значения параметров. Параметры vl, v2, …, vn, указанные в описании функции, называются формальными параметрами, чтобы подчеркнуть тот факт, что они получают смысл только после задания в вызове функции фактических параметров el, е2, …, en, с которыми функция затем и работает. Если в функции параметры отсутствуют, то описание функции имеет вид.

function F () {S}.

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

Обычно все определения и функции задаются в разделе документа. Это обеспечивает интерпретацию и сохранение в памяти всех функций при загрузке документа в браузер.

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

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

Листинг 1.2 Использование сценария с функцией.

Использование сценария с функцией.

function care (a, h) { return a*h/2 };

—>

Начало отображения страницы со сценарием и функцией.

var al=4; hl=16; var s=care (al, hl);

document.write («При вызове функции получено значение „, s,“ .»);

—>

Конец формирования страницы.

Тело функции состоит лишь из оператора return, который определяет возвращаемое функцией значение. Вызов функции осуществляется в теле документа при выполнении оператора присваивания: s=care (al, hl). Формальным параметрам, а и h присваивается значение фактических параметров al и hl, и выполняется тело функции. Полученное значение помещается в документ с помощью метода write.

Обработчики событий Практически все JavaScript-приложения выполняют те или иные действия, откликаясь на различные события.

Событие — это сигнал от браузера о том, что что-то произошло.

Есть множество самых различных событий.

DOM-события, которые инициируются элементами DOM. Например, событиеclick происходит при клике на элементе, а событие mouseover — когда указатель мыши появляется над элементом.

События окна. Например событие resize — при изменении размера окна браузера.

Другие события, например load, readystatechange. Они используются, скажем, в технологии AJAX.

Именно DOM-события связывают действия, происходящие в документе, с кодом JavaScript, тем самым обеспечивая динамический веб-интерфейс.

Назначение обработчиков Для того, чтобы скрипт реагировал на событие — нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют «on+имя события», например: onclick.

Нужно сразу отметить, что JavaScript — однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, напримерmouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.

Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.

Через атрибут HTML-тега Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие.

Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:

Можно назначить и функцию.

Например, пусть при клике на кнопку input запускается функция count_rabbits (). Для этого запишем вызов функции в атрибут onclick:

function count_rabbits () {.

for (var i=1; i<=3; i++) {.

// оператор + соединяет строки.

alert («Из шляпы достали „+i+“ кролика!»).

}.

}.

Напомним, что имена атрибутов HTML-тегов нечувствительны к регистру, поэтому атрибут oNcLiCk сработает также, как onClick или onclick.

Но если вы хотите придерживаться хорошего стиля (или спецификации XHTML), то имена тегов и их атрибуты должны быть указаны в нижнем регистре.

Такой способ установки обработчиков очень удобен — он нагляден и прост, поэтому часто используется в решении простых задач.

У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки — читабельность резко падает.

Впрочем, сколько-нибудь сложные обработчики в HTML никто не пишет. Вместо этого лучше устанавливать обработчики из JavaScript способами, которые будут представлены ниже.

Через свойство объекта Самый близкий родственник описанного выше способа — установка функции-обработчика через свойство onсобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Для этого нужно:

получить элемент назначить обработчик свойству on+имя Вот пример установки обработчика события click на элемент с id="myElement" :

document.getElementById ('myElement').onclick = function () {.

alert ('Спасибо').

}.

Стоит сразу обратить внимание на две детали:

Это именно свойство, а не атрибут. Поэтому, хотя технически и есть кроссбраузерные способы назначать обработчики через setAttribute, но лучше их даже не знать, а пользоваться прямым присвоением.

Кроме того, как и все свойства объектов JavaScript, имя свойства onсобытие чувствительно к регистру символов и должно быть в нижнем регистре.

Обработчик — не текст, а именно функция javascript.

Когда браузер видит свойство on… в HTML-разметке — он создает функцию из содержимого кавычек.

В этом смысле эти два кода работают одинаково:

Только HTML:

HTML + JS:

document.getElementById ('button').onclick = function () {.

alert ('Клик').

}.

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

Классический пример — установка обработчика на событие «содержимое окна загрузилось» :

// разные элементы интерфейса могут иметь интерес.

// в том, чтобы их вызвали при загрузке документа.

window.onload = function () {.

alert ('Документ загружен!').

}.

Существует два основных интерфейса для установки событий.

Решение Microsoft.

Методы, предложенные Microsoft, работают только в браузерах Internet Explorer и Opera (она поддерживает метод Microsoft для лучшей совместимости).

Установка обработчика:

element.attachEvent («on» +имя события, обработчик) Удаление обработчика:

element.detachEvent («on» +имя события, обработчик).

var input = document. getElementById ('b1').

var handler = function () {.

alert ('Спасибо!').

}.

input.attachEvent («onclick», handler) // поставить обработчик.

// …

input.detachEvent («onclick», handler) // убрать обработчик Установка по стандарту W3C.

Решение W3C работает во всех современных браузерах, кроме Internet Explorer.

Установка обработчика:

element.addEventListener (имя_события, обработчик, фаза) Удаление обработчика:

element.removeEventListener (имя_события, обработчик, фаза) Обратите внимание, что имя события указывается без префикса «on» .

Еще одно отличие от решения Microsoft это третий параметр — фаза. Если он установлен в true, то при срабатывании события во вложенном элементе, обработчик будет вызван на фазе «перехвата», а если значение будет false, то — на фазе «всплывания» .

Использование — аналогично решению от Microsoft:

// … объявить функцию-обработчик handler …

input.addEventListener («click», handler, false) // поставить обработчик.

// …

input.removeEventListener («click», handler, false) // убрать обработчик Навигация по формам Для форм есть дополнительные свойства DOM, которые упрощают навигацию и поиск элементов.

Элементы FORM можно получить по имени или номеру, используя свойство document. forms[name/index].

Например:

document.forms.my — форма с именем 'my'.

document.forms[0] — первая форма в документе Любой элемент формы form можно получить аналогичным образом, используя свойство form.elements.

Например:

var form = document.forms.my; // можно document. forms[0].

var elem = form.elements.one; // можно form. elements[0].

alert (elem.value); // «один» .

Может быть несколько элементов с одинаковым именем. В таком случае form. elements[name] вернет коллекцию элементов, например:

http://learn.javascript.ru/forms-navigation.

var form = document. forms[0];

var elems = form.elements.age;

alert (elems[0]. value); // 10, первый input.

Эти ссылки не зависят от окружающих тегов. Элемент может быть зарыт где-то глубоко в форме, но он всё равно доступен через form.elements.

По элементу можно получить его форму, используя свойство element.form.

Пример:

var form = document. forms[0];

var elem = form.elements.surname;

alert (elem.form == form); // true.

Посмотрите также спецификацию о HTMLInputElement и других типах элементов.

Элемент SELECT дает доступ к своим опциям через elem. options:

Soft blues.

Hard rock.

var form = document.body.children[0];

alert (form.elements['genre']. options[0].value); // blues.

Как и с elements, мы можем использовать оба доступа: по имени options. blues и по номеру: option[0].

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

Листинг 1.3 Обработка значений из формы.

Обработка значений из формы.

Пример сценария со значениями из формы.

Основание:

Высота:

onClick="care (document.form1.st1.value, document. form1.st2.value)" >

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

При интерпретации HTML-страницы браузером создаются объекты JavaScript. Взаимосвязь объектов между собой представляет иерархическую структуру. На самом верхнем уровне иерархии находится объект windows, представляющий окно браузера. Объект windows является предком или родителем" всех остальных объектов. Каждая страница кроме объекта windows имеет объект document. Свойства объекта document определяются содержимым самого документа: цвет фона, цвет шрифта и т. д. В последнем примере на странице расположена форма. Форма (form) является потомком объекта document, а все элементы формы выступают потомками объекта form. Ссылка на объект может быть осуществлена по имени, заданному параметром name тега. Для получения значения основания треугольника, введенного в первом поле формы, должна быть выполнена конструкция document.forml.stl.value.

При ссылке на формы и их элементы можно не указывать объект document. В рассмотренном примере получить значение первого поля ввода можно и следующим образом forml.stl.value.

Итак, когда в функцию передаются данные простых типов, например, чисел, как в рассмотренном случае, передача параметров осуществляется по значению. Формальному параметру, а присваивается значение фактического параметра forml.stl.value, а формальному параметру b значение form1. st2.value. После этого выполняется тело функции.

Ситуация изменится, когда фактическим параметром функции станет объект. В этом случае говорят, что передача параметра осуществляется по ссылке или по наименованию. Пусть тело документа описано следующим образом:

Вычисление площади прямоугольного треугольника.

Основание:

Высота:

onClick="carel (forml.stl, forml. st2)" >

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

function carel (a, h).

{var s=(a.value * h. value)/2;

document.write («Площадь равна «, s);

return s}.

Значение основания треугольника получается с помощью конструкции a. value, а высоты h.value.

Обработка события Blur.

Событие «потеря фокуса» (Blur) происходит в тот момент, когда элемент формы теряет фокус. В следующем варианте решения задачи вычисления происходят в тот момент, когда поле формы, содержащее данные, потеряло фокус.

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

Листинг 1.4 Обработка события: — потеря объектом фокуса.

Обработка события Blur — потеря объектом фокуса.

function srec ().

{form1.res.value=form1.num1.value* form1. num1.value}.

Вычисление площади квадрата.

Сторона:

onBlur="srec ()" >

Площадь:

В результате потери фокуса полем numl происходит вычисление значения площади и помещение вычисленного значения в поле res. Первоначально будет вычислен результат, равный 64. Можно ввести нужное значение и при переходе к любому другому элементу, в поле res отобразится вычисленное значение.

Обработка события Select.

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

Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда выбирается часть или весь текст в текстовом поле. HTML-код представлен в листинге 1.5.

Листинг 1.5 Обработка события Select — выбор поля ввода элемента формы.

Обработка события Select.- выбор поля ввода элемента формы.

function srec ().

{form1.res.value=form1.num1.value* form1. num1.value}.

Вычисление площади квадрата.

Сторона:

onSelect="srec ()" >

Площадь:

Пример: Перестановка двух изображений В документе заданы два изображения. Требуется написать сценарий, который осуществляет перестановку заданных изображений. Вид документа приведен на рис. 1. При нажатии на кнопку Обменять изображения меняются местами. Функция chpict вызывается как реакция на событие «щелчок по кнопке» Обменять. Изображения задаются в документе с помощью тегов. Значение параметра src определяет имя файла, в котором хранится изображение. Переменная 1 служит для того, чтобы запомнить имя файла, который связан с первым изображением. Оператор присваивания d.pmi.src=d.pm2.src обеспечит загрузку второго изображения вместо первого. И, наконец, со вторым тегом изображения будет связан тот файл, который первоначально относился к первому изображению. В результате описанных действий изображения в документе будут переставлены. HTML-код документа, осуществляющего обмен изображений, имеет вид, приведенный в листинге 1.6.

Рис 1. Обмен двух изображений

Листинг 1.6 Обмен двух изображений.

Обмен двух изображений.

Обмен двух изображений

Итак, для любого события важно знать, когда оно наступает, и к каким объектам применяется. В предыдущих примерах мы привели варианты обработки событий, применяемых к текстовому полю (text).

Пример: Расписание занятий Напишем сценарий, в результате работы которого при попадании курсора мыши на элемент списка, в текстовом поле появляется соответствующее сообщение. При перемещении курсора над пунктом меню возникает событие onmouseover. Если курсор мыши выходит за пределы области связи, то возникает событие onmouseout, в результате обработки которого пункт меню должен принять первоначальный вид.

Рис. 2. Расписание занятий

Пусть список представляет собой расписание занятий в определенный день, а текст сообщения содержит комментарий к каждому занятию. Вид документа приведен на рис. 2.

Расписание занятий задается списком. В теге.