Главная страница
qrcode

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


НазваниеЯзык программирования javascript
АнкорWeb 2part.doc
Дата11.10.2017
Размер0.88 Mb.
Формат файлаdoc
Имя файлаWeb_2part.doc
ТипДокументы
#28143
Каталог

Глава 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 году открыл
факультет вечернего

обучения (ФВО)
, на котором желающие могут получить первое и

второе (в том числе параллельно) высшее образование по различным

специальностям.

На нашем факультете желающие могут получить высшее образование по различным

специальностям:

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


Менеджмент организации


Иностранный язык


Финансовый менеджмент


Журналистика


Искусствоведение

onload="start()">,

в которой указывается, что при выполнении события onload (оно происходит при окончании загрузки документа) выполняется функция start(). Текст данной функции располагается в нашем скрипте:

function start()

{ window.setInterval("inform()",3000); }

Здесь используется стандартная функция setInterval, которая позволяет установить периодический вызов (выполнение) определенной пользовательской функции. В данном случае мы установили вызов функции inform() через 3 секунды. В ней используется глобальная переменная a, которая периодически меняет значения с 1 на 0. Когда переменная a равняется 1, то одно из информационных сообщений пропадает с экрана:

info.style.visibility="visible";

recl.style.visibility="hidden";

Наоборот, когда переменная меняет значение на 0, отображается другое сообщение.

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

Одно из самых часто встречающихся событий – onclick. Это событие происходит, когда пользователь щелкает кнопкой мыши. Из сценария на JavaScript можно ответить на событие onclick (как и на другие события). На листинге 3.17 приводится пример сценария, в котором по щелчку по тексту изменяется его цвет.

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



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



С начала загрузки страницы прошло

0

секунд

говорится, что при загрузке раздела документа BODY будет вызвана функция startTimer(). В свою очередь в этой функции вызывается метод window.setInterval. Этот метод устанавливает режим автоматического вызова функции T() через каждые 1000 секунд.



Рис. 3.12

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


Событие onmousemove происходит постоянно, всякий раз, когда мышь приходит в движение. Мы будем использовать это событие для отслеживания положения курсора мыши в пределах объекта. На странице (рис. 3.13) разместим изображение и при перемещении мыши в пределах изображения в левом верхнем углу будут отражаться координаты курсора мыши. Нам понадобится написать сценарий представленный на листинге 3.19.

Листинг 3.19. Отслеживание перемещения мыши





0



>

color=yellow ; visibility:hidden;

background-color:gray">  НГЛУ им. Н.А. Добролюбова




onmouseout="func2()" src="2.jpg" >

left:100; visibility:hidden">


onmouseout="func2()" src="ris/2.jpg" >

left:100"src="2.jpg"

onmouseover="t1()" onmouseout="t2()">





width:500">




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


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

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

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


Данные фильтры (flipv и fliph) позволяют обеспечить зеркальное отражение текста или изображения по вертикали и горизонтали соответственно.

В сценарии, приведенном на листинге 3.24 (и соответственно на рис. 3.17) мы показываем эти эффекты, используя оба фильтра и по отдельности и вместе применительно к изображению. В строке



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



мы одновременно указали несколько фильтров. Если фильтров несколько, то их нужно задать как значения свойства filter, отделяя друг от друга пробелами. В данном случае добавляется фильтр flipv, который отражает объект по вертикали.



Рис.3.17

Листинг 3.24. Использование фильтров отражений










style = "position: absolute; left:0; top: 0;

filter: alpha( style = 2, opacity = 100,

finishopacity = 0 )">


style = "position: absolute; left:0; top: 0;

filter: alpha( style = 2, opacity = 100,

finishopacity = 0 )">



onmouseout="func2()" en-US" > left:30;filter:mask(color=#adadad)">

НГЛУ





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

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



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

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

Фильтр SHADOW





Институт дистанционного обучения



left:10; padding:1;

filter:wave(add=0, freq=2,

phase=10,strength=3)">

Вечерний факультет НГЛУ




STYLE = "align: center; position: absolute;

left: 30; padding: 15;

filter: wave(add = 0, freq = 1, phase = 0, strength = 10)">

Плавающий текст




onmouseover="func1()" align="center">

Факультет очно-заочного (вечернего) обучения.

onmouseover="func2()" align="center">

Кафедры факультета и ведущие преподаватели.

перейти в каталог файлов


связь с админом