Язык программирования javascript

Глава 3. Язык программирования JAVASCRIPT

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

Начнем с простого примера сценария (программы), в котором в окно браузера будет выводиться строка – Институт дистанционного обучения (рис. 3.1). Операторы сценария, написанного на JavaScript, обрабатываются интерпретатором JavaScript, который встроен во все известные браузеры.

В этой главе для разработки сценариев и их просмотра мы будем использовать те же программные средства – Блокнот (в качестве редактора программного кода) и Internet Explorer (в качестве браузера). Цель использования сценариев на JavaScript заключается в придании нашим страницам динамичности и интерактивности.Однако,первые разработки, которые мы сейчас рассмотрим, будут достаточно простыми (на их примерах мы познакомимся с самой технологией и операторами языка).

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

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

ПРИМЕЧАНИЕ

Браузер может по умолчанию не выполнять сценарии, присутствующие в HTML-файлах. Это зависит от его настроек. Например, в Internet Explorer для автоматического выполнения сценариев следует в СервисСвойства обозревателяДополнительноБезопасность установить флажок в разделе Разрешить запуск активного содержимого файлов на моем компьютере. В противном случае необходимо каждый раз при запуске файла с включенным скриптом положительно отвечать на вопрос появляющийся во всплывающем окне.

Листинг 3.1. Сценарий JavaScript для реализации страницы на рис. 3.1





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

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

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

Из сказанного вытекает, что на странице могут располагаться сразу несколько сценариев.

ВНИМАНИЕ

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

Комментарии в JavaScript начинаются с символов//. Например,,

// Пример комментария в программе на JavaScript

Кроме такого однострочного комментария можно включить и многострочный. Он начинается с символов /* и заканчивается символами */:

/*

Здесь может располагаться комментарий в несколько строк

*/

Простые примеры сценариев

Рассматриваемую строку Программирование на JavaScript можно вывести разными способами. На листинге 3.2 приведен другой сценарий, который приводит к изменению цвета текстового фрагмента и добавлению в окне браузера перевода строки. Результат выполнения данного сценария в окне браузера продемонстрирован на рис. 3.2.

Листинг 3.2. Сценарий JavaScript для реализации страницы на рис. 3.2













Рис. 3.2

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

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

Листинг 3.3. Демонстрация окна диалога на Web-странице









Рис. 3.5.

Управляющие структуры

Обычно операторы программы выполняются один за другим в том порядке, в котором они написаны в сценарии. Это называется последовательным выполнением. Разумеется, часто требуется изменять направление вычислительного процесса в зависимости от выполнения определенного условия. Для этого в JavaScript имеются специальные управляющие структуры, используя которые, программист может изменить порядок выполнения операторов программы.

Структура выбора if

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

if ( условие ) { операторы }.

Например, использование данной конструкции позволяет выполнить несколько строк при определенном условии относительно a:

if( a > 5 )

{ st = 45; alfa = st / 15;

betta = alfa * a ; }.

Более полная конструкция if представляет комбинацию if/else. Поясним, как она используется на следующем примере:

if ( osenka > 10 )

{ document.writeln ( “ Экзамен сдан “); flag = 1; }

else

{ document.writeln ( “ Экзамен не сдан “); flag = 0; }

Здесь при выполнении условия, указанного в конструкции if ( ) выполняются операторы, перечисленные в первых фигурных скобках. В противном случае, если условие не выполняется, то выполняются действия, записанные во вторых фигурных скобках (после else). Далее на листинге 3.6 приводится полная программа с примером использования конструкции if/else.

Листинг 3.6. Пример скрипта, с использованием оператора условия

Структура повторения while

Часто требуется повторять выполнение фрагментов программого кода. Для этого в языке существует несколько конструкций. Используя структуру while, можно многократно повторять выполнение определенных действий, до тех пор, пока указанное условие остается истинным. Условие указывается в круглых скобках, а выполняемые операторы в фигурных:

while ( условие )

{ операторы }.

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

a=0;

while ( a < 10 )

{ b = 2 * 3.14 * a ;

document.writeln(“
” + b);

a = a + 1;

}

В этом примере легко выделяются основные технические моменты, которые часто являются характерным атрибутом использования ключевого слова while:

имя управляющей переменной для счетчика цикла;

начальное значение управляющей переменной;

значение приращения, на которое управляющая переменная изменяет свое значение;

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

На листинге 3.8 приводится текст программы, в которой производится подсчет средней успеваемости по группе. Здесь в качестве имени управляющей переменной выбрана count. При каждом проходе цикла открывается диалоговое окно, в котором пользователь вводит очередную оценку. При этом ввод в качестве оценки числа 9 является индикатором выхода из цикла (это является индикатором того, что все оценки введены). Для выхода из цикла используется оператор break.

Листинг 3.8. Пример использования оператора while



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

Для вычисления площади используется функция squ( x , y), в которой оператор return возвращает вычисленное значение.

ВНИМАНИЕ

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

ОБЪЕКТЫ И СОБЫТИЯ.

В использовании JavaScript элементы страниц (определяемые тегами) могут рассматриваться как объекты. Основной ресурс при программировании связан с обращением к элементам страниц по именам. В связи с способ организации ссылки на элемент заключается в задании его атрибуту id уникального имени. Фактически значение этого атрибута будет идентификатором данного элемента.

Рассмотрим пример показанный на рис. 3.10. Его особенность в том, что фамилия (с именем и отчеством) директора появляется только при наведении курсора мыши на слово Директор. Соответственно, когда курсор мыши уходит с указанного слова информация о директоре также пропадает с экрана. Файл со сценарием, который потребуется написать, представлен на листинге 3.15.



Рис. 3.10

Листинг 3.15. Пример отображения и скрытия объектов




Директор

Петров Петр Петрович

Здесь расположено два элемента параграф (
), один из которых при начальной загрузке страницы невидим. Это достигается за счет свойства стиля visibility:

Данному параграфу присваивается уникальный идентификатор (Pet) и указывается то, что на экране его не должно быть видно:
В первом параграфе нашей страницы (содержащем слово Директор) мы указали, что при наведении курсора мыши, а также при выходе курсора за пределы параграфа выполняются соответствующие функции
Событие onmouseover происходит при наведении курсора мыши на указанный элемент. В данном случае это приводит в установке видимости параграфа включающего информацию о директоре:

Pet.style.visibility="visible";

Соответственно onmouseout происходит при покидании курсора мыши указанного элемента. Это в рассматриваемом примере приводит к повторному пропаданию элемента с экрана:

Pet.style.visibility=" hidden";

Вообще получившийся эффект достаточно интересен – при движении мыши изменяется информация в окне браузера.

Рассмотрим еще один пример – на странице обеспечим периодическую смену одного информационного сообщения другим. На рис. 3.11 показано отражение в окне одного из сообщений, которое через три секунды заменяется другим. Текст, который для этого придется написать, представлен на листинге 3.16.

Листинг 3.16. Пример отображения и скрытия объектов






НГЛУ им. Н.А.Добролюбова в 2003 году открыл
факультет вечернего

обучения (ФВО)

Щелкните на тексте

ОТСЛЕЖИВАНИЕ ПЕРЕМЕЩЕНИЙ МЫШИ

Использование фильтров

Фильтры отражений

left:10;filter:shadow(direction=45,color=green)">

Нижний Новгород

top:50;left:50;padding:10;

filter:shadow(direction=0,color=green)">

Фильтр SHADOW