1744

Федеральное агентство по образованию ГОУ ВПО «Сибирская государственная автомобильно-дорожная

академия (СибАДИ)»

Л.А.Внукова, С.А.Зырянова

JAVASCRIPT: СОЗДАНИЕ

ДИНАМИЧЕСКИХ WEB-СТРАНИЦ

Учебное пособие

Омск

СибАДИ

2010

4

УДК 004.43 ББК 32.81 В 60

Рецензенты:

канд.пед.наук, доцент кафедры ИВС, Н.В.Манюкова (Омский экономический институт); канд.пед.наук, ст.преп. кафедры ИВТ, Н.А.Настащук (Омский государственный педагогический университет)

Работа одобрена редакционно-издательским советом академии в качестве учебного пособия для всех специальностей

Внукова Л.А., Зырянова С.А.

В 60 JavaScript: Создание динамических Web-страниц: учебное пособие /

Л.А.Внукова, С.А.Зырянова. Омск: СибАДИ, 2010 . 104 с.

Учебное пособие предназначено для студентов всех специальностей, изучающих дисциплины «Программные средства разработки Web-страниц и презентаций», «Вычислительные машины, системы и сети», «Мультимедиа», «Проектирование обучающих систем», а также для учащихся средних школ и колледжей, осваивающих основы языка сценариев JavaScript. Содержит теоретический материал по основным конструкциям JavaScript с примерами, а также задания для лабораторных занятий и самостоятельной работы студентов.

Табл. 9. Ил. 46. Библиогр.: 8 назв.

ГОУ «СибАДИ», 2010

5

ВВЕДЕНИЕ

World Wide Web (WWW) покорила планету. Количество Webстраниц, размещаемых в Интернете, постоянно растет. Современные Web-узлы содержат самые разные виды информации: графические объекты, звуковые клипы, анимационные изображения, видеофильмы, текстовые документы.

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

Можно, конечно, написать программы на обычных языках программирования (С, С++, Visual Basic и др.), компилировать их и поместить выполняемые файлы на сервере вместе с HTMLстраницами. Незначительные добавления к языку HTML позволят браузеру автоматически загрузить программу с сервера и выполнить ее на клиентском компьютере. И созданная таким образом программа сможет общаться с пользователем: открывать окна, вести диалог, реагировать на действия, петь…

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

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

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

3

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

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

Глава 1. СОЗДАНИЕ WEB-СТРАНИЦ

СИСПОЛЬЗОВАНИЕМ JAVASCRIPT

1.1.Об языке сценариев JavaScript

Язык сценариев JavaScript разработан фирмой Netscape для создания интерактивных HTML-документов. Это объектноориентированный язык разработки встраиваемых приложений, выполняющихся как на стороне клиента, так и на стороне сервера.

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

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

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

С помощью JavaScript можно решить следующие задачи при создании интерактивных HTML-страниц:

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

4

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

Навигация по другим страницам.

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

Определение используемого браузера и настройка в соответствии с ним Web-страницы.

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

Обнаружение используемых внедряемых модулей и уведомление пользователя об их статусе.

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

1.2. Добавление сценария JavaScript на Web-страницу

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

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

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

<SCRIPT>.

Использовать выражения JavaScript в качестве значений параметров тегов HTML.

Определить обработчик событий в теге HTML.

Рассмотрим способы создания Web-страниц с использованием

JavaScript подробнее.

1.2.1.Использование тега <SCRIPT>

Для внедрения в HTML-страницу сценария JavaScript в спецификацию языка HTML был введен тег-контейнер <SCRIPT>...</SCRIPT>, внутри которого могут располагаться операторы языка JavaScript:

<SCRIPT LANGUAGE="JavaScript"> операторы JavaScript

</SCRIPT>

5

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

Web-страница может содержать несколько тегов <SCRIPT>...</SCRIPT>, расположенных в любом месте документа.

1.2.2.Задание файла с кодом JavaScript

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

<SCRIPT SRC="http:// home.bhv.com/functions/jsfuncs.js"> операторы JavaScript

</SCRIPT>

Связываемый внешний файл не должен содержать тегов HTML

идолжен иметь расширение JS.

1.2.3.Элементы JavaScript в параметрах тегов HTML

Переменные и выражения JavaScript можно использовать в качестве значений параметров тегов HTML. Эта процедура аналогична процедуре встраивания числовых или символьных примитивов HTML. Элементы JavaScript также располагаются между амперсандом (&) и точкой с запятой (;), но должны заключаться в фигурные скобки {} и использоваться только в качестве значений параметров тегов HTML.

Пример

Пусть определена переменная Line50, и ей присвоено значение 50. Следующий тег нарисует горизонтальную линию длиной в 50% от горизонтального размера окна браузера:

<HR WIDTH="&{Line50};%" ALIGN="LEFT">

Нельзя использовать элементы JavaScript в тексте HTML. Они интерпретируются только тогда, когда расположены справа от параметра и задают его значение.

6

1.2.4.Сценарии JavaScript в качестве обработчиков событий

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

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

1.3. Создание, просмотр и тестирование сценария JavaScript

Создать сценарий JavaScript можно в стандартном текстовом редакторе Windows Блокнот, сохранив файл с расширением htm.

Для просмотра сценария просто загрузите полученную Webстраницу в браузер.

Способ просмотра ошибок в сценарии зависит от используемого вами браузера. В Netscape Navigator при загрузке появится сообщение об ошибках. В Internet Explorer в меню Сервис/Свойства обозревателя/Дополнительно включите флажок «Показывать уведомление о каждой ошибке сценария». При загрузке Webстраницы с ошибками на экране появляется окно с сообщением о наличии ошибок в сценарии и для просмотра ошибок необходимо нажать кнопку «Показать подробности>>».

Глава 2. ОПЕРАТОРЫ ЯЗЫКА JAVASCRIPT

2.1. Синтаксис языка

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

7

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

alert("Сообщение"); alert( "Сообщение"

);

Строковый литерал должен располагаться на одной строке. Чтобы многострочные операторы работали как надо, перенос строки можно указывать обратным слешем (\):

var str="Длинная \

строка"

Строковый литерал может включать в свой состав управляющие символы с помощью символа (\):

\r – возврат каретки;

\n – переход на новую строку; \t – табуляция.

Пример

var str1="Первая строка. \n Вторая строка."

При выводе этой переменной строка будет отображаться с переходом на новую строку подстроки «Вторая строка.».

2.2.Комментарии

Вязыке JavaScript существует два типа комментариев. К первому относятся однострочные комментарии, следующие в тексте за символами (//).

Пример

// Это строка – комментарий Ко второму типу относятся многострочные комментарии,

заключенные между символами (/*) и (*/):

Пример

/*

Это многострочный комментарий, который полностью игнорируется интерпретатором JavaScript

*/

8

2.3. Переменные

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

JavaScript поддерживает четыре простых типа данных:

Целый.

Вещественный.

Строковый.

Булевый (логический).

Строковый литерал последовательность символов, заключенная в одинарные (') или двойные кавычки ("), например: "Строка", 'СТРОКА'.

Определить переменную можно двумя способами:

С помощью оператора описания переменных var.

С помощью оператора присваивания (=). Рассмотрим способы задания переменных подробнее.

2.3.1. Оператор var

Оператор var используется как для задания, так и для инициализации переменной и имеет синтаксис:

var имя_переменной [= значение];

Пример

var x=4 // x присвоено значение 4 var str="Строка"

var y //инициализация переменной y

2.3.2. Оператор присваивания для задания переменной

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

Если при определении переменной ей не присвоено никакого значения, то ее тип не определен. Ее тип будет определен только после того, как ей будет присвоено некоторое значение оператором присваивания (=).

Пример

var h // Определена переменная неизвестного типа

9