Лабораторные работы / HTML_Лаб_4_Сценарии
.doc
Лабораторная работа № 4
Разработка и использование сценариев в языке HTML
Цель работы: познакомиться с построением динамических Web-страниц.
Для того чтобы после загрузки в браузер содержимое Web-страницы динамически изменялось, необходимо воспользоваться специализированными Web-приложениями (сценариями). В результате применения этих программных средств можно запрограммировать «поведение» тех или иных элементов Web-страницы, в зависимости от действий пользователя (например, щелчок мышью или перемещение указателя мыши).
Программные средства для создания динамических страниц: ActiveX, DHTML, Java, JavaScript, VBScript.
1. Язык сценариев VBScript.
Для того чтобы добавить код сценария в Html-документ, необходимо воспользоваться дескриптором <Script>, который должен находиться в пределах дескриптора <Head> или <Body>. В дескрипторе <Script> указывается язык программирования, на котором записываются действия. Например, если используется язык программирования VBScript, то открывающий дескриптор выглядит
<Script language="VBscript">
Сценарии используют для «обслуживания» событий, которые возникают на Web-странице после ее загрузки в Web-браузер. Существует несколько видов событий. Из самых распространенных можно отметить: window_onload - запускается при полной загрузке документа. Создайте Web-страницу с обработчиком этого события. В этом примере код Script записан в теле страницы. Процедура Alert выводит сообщение, которое записывается в кавычках.
Пример №1
<Html>
<Head>
<Title> Задача 1-Загрузка</Title>
</Head>
<Body>
<Script language="VBscript">
Sub window_onload
Alert "Добро пожаловать на мою домашнюю страницу!"
end sub
</Script>
</Body>
</Html>
При загрузке документа появится окошко с данной надписью и кнопкой ОК
Пример №2
Событие onmouseover - возникает при наведении указателя мыши на гиперссылку. В этом примере код Script расположен в теле программы.
<Html>
<Head> <Title> Задача 2- ссылка</Title> </Head>
<Body>
<a href="http://wanderfly.da.ru/" name="link">
Наведите на эту ссылку указатель мыши</a>
<script language="vbscript">
sub link_onmouseover
status ="Home page!!!"
end sub
</script>
</Body>
</Html>
1.1 Процедуры
Чаще код обработчика события записывается в теле процедуры.
Процедура это общее название функций или подпрограмм. Имеет синтаксис:
sub name_событие ....... end sub.
name - это имя процедуры.
событие - то, что может "случиться" в окне броузера.
"onclick" означает, что процедура выполнится, при нажатии на кнопку, предварительно заданную на форме.
Событие onclick возникает при щелчке по компоненту.
Пример № 3
Создадим форму, на которой расположены два текстовых окна и кнопка. При нажатии на кнопку содержимое первого окна копируется во второе окно.
<Html>
<Head> <Title> Задача 3 Копирование</Title> </Head>
<Body>
<FORM NAME=forma>
<INPUT TYPE="text" NAME="text1"><BR>
<INPUT TYPE="text" NAME="text2"><BR>
<INPUT TYPE="button" NAME="knopka"
VALUE="Скопировать" OnClick=copyfun()>
</FORM>
<SCRIPT LANGUAGE="VBScript">
sub copyfun
dim copytext
copytext=document.forma.text1.value
document.forma.text2.value=copytext
end sub
</SCRIPT>
</Body>
</Html>
1.2. Обращение к содержимому компонентов
Синтаксис операторов указывающих как "добраться" до данных в поле ввода:
x = top.имя_фрейма.document.имя_формы.имя_объекта_text_box.value
1.3. Вызов сценариев VBscript.
Веб-страница с активным содержимым, всегда делится как бы на две части: Первая, это html код самой страницы содержащий необходимые элементы управления (ссылки, кнопки, формы для ввода информации и т.д.), и Вторая, сценарии на скрипте, которые начинают работать при различных событиях происходящих с элементами управления. Это можно назвать главной отличительной особенностью программ для Web-страниц, от обычных исполняемых приложений.
Основные приемы вызова сценариев, или процедур.
Сценарий вызываемый неявно:
Пример № 4.
<html>
<head>
<Title> Задача 4 Привет</Title>
<script language="VBScript">
Sub but_onclick
Alert "Привет пиплы:)"
End sub
</script>
</head>
<body>
<form>
<input type="button" name="but">
</form>
</body>
</html>
Это самый простой метод. Указываем имя оператором name="имя" в теге характеризующим элемент управления (but), это же "имя" пишем в вызываемой процедуре и через знак подчеркивания пишем событие, которое должно произойти для исполнения сценария (but_onclick).
Выполните этот пример.
Вызов сценария, определяемый в элементе управления:
Пример №5
<html>
<head>
<Title> Задача 5 Привет</Title>
<script language="VBScript">
Sub scenariy
Alert "Привет пиплы:)"
End sub
</script>
</head>
<body>
<form>
<input type="button" name="but" onclick="scenariy" language="VBScript">
</form>
</body>
</html>
Обработчик события определяется в дескрипторе компонента.
Вызов из другой процедуры:
Пример № 6
<html>
<head><Title> Задача 6 Привет</Title>
<script language="VBScript">
Sub but_onclick
Call butalert("Привет пиплы")
End Sub
Sub butalert(a)
Alert a
End Sub
</script>
</head>
<body>
<form>
<input type="button" name="but" >
</form>
</body>
</html>
Выполните этот пример.
Все способы, кроме автоматического вызова сценария, чисто визуально будут выглядеть так:
<script language="VBScript">
Sub but2_onclick
Alert "Привет пиплы:)"
End sub
</script>
<form>
<input type="button" name="but2" value="пример">
</form>
В каком месте документа лучше размешать код сценария? В любом месте документа и в неограниченном количестве. Определения процедур рекомендуется размещать в разделе <HEAD>, хотя это и не обязательно. Подобная практика улучшает чтение кода сценария, позволяя избегать поиска процедуры по всему документу. Более того, при интерпретации браузером документа раздел <HEAD> интерпретируется до начала обработки тела документа, следовательно, все процедуры будут размещены в памяти до того, как в документе встретится их вызов.
1.4. Выполнение общих примеров
Пример №7
Разработаем Web-страницу, которая реализует игру «Угадай число». Поставим задачу, написать программу, которая бы случайным образом загадывала число от 1 до 100, и предлагала Вам его угадать. При неправильном предположении, программа должна выводить сообщение о том, больше загаданное число или меньше. Ведется подсчет попыток. В случае победы выводится поздравление.
<html>
<Head>
<title> Угадай число</title>
<script language="vbscript">
dim a, p, v ' определяем переменные
sub begin_onclick ' процедура срабатывающая при нажатии (событие onclick)
document.ugadai.chislo.value ="qqqqqqqq" ' кнопки с именем begin
randomize ' включение генератора случайных чисел
a=int(rnd(1)*100+1) ' присваивание переменной (a) случайного значения
p = 1 ' обнуление счетчика
alert "число загадано" ' вывод сообщения в отдельном окне
end sub ' конец процедуры
sub but_onclick ' процедура срабатывающая при нажатии
‘ (событие onclick) кнопки с именем but
v = document.ugadai.chislo.value ' переменной (v) присваивается значение
' содержащееся в поле ввода формы
' путь: документ (просто эта html страница).
' форма с именем ugadai.
' объект- поле для ввода с именем chislo.
' свойство value
v=cint(v) ' поскольку поле для ввода содержит текстовую
' информацию, то переменную (v) надо преобра-
' зовать в целочисленный тип (функция cint)
if a > v then
alert "загаданное число больше, попробуйте еще"
p = p + 1
end if
if a < v then
alert "загаданное число меньше, попробуйте еще"
p = p + 1
end if
if a = v then
document.write"<center>Победа за "&p&" ходов.</center>"
end if
' оператор document.write выводит содержащуюся
' в кавычках информацию в новое окно броузера
' как html код.
end sub
</script>
</head>
<body>
<FORM NAME=ugadai>
<INPUT TYPE="button" NAME="begin" VALUE="Загадать число" ><BR><BR>
Ваш вариант:<BR>
<INPUT TYPE="text" NAME="chislo"> <BR>
<INPUT TYPE="button" NAME="but" VALUE="Enter">
</FORM>
</body>
</html>
Пример №8
Разработайте форму для расчета площади фигур, определяющихся с помощью компонента «выпадающий список».
<html>
<head>
<title>Контроль и обработка формы на клиенте</title>
<script language = "VBScript">
function calc()
alert "!!!"
dim f, L, h
f = document.frm.f.selectedIndex
L = document.frm.L.value
h = document.frm.h.value
if is Numeric(L) AND is Numeric(h) Then
L = ABS(L)
h = ABS(h)
If f = 0 Then
calc = L*h
Else
If f =1 then calc = L*h/2
EndIf
Else
MsgBox "НЕДОПУСТИМЫЕ ПАРАМЕТРЫ"
EndIf
EndFunction
</SCRIPT>
</HEAD>
<BODY BGCOLOR=#FFFFFF>
<H3>Вычисление площади фигуры</H3><HR>
<FORM NAME=frm>
<P>Фигура
<SELECT NAME=f>
<OPTION VALUE=0>прямоугольник
<OPTION VALUE=1>треугольник
</SELECT>
<P>Ширина <INPUT TYPE=TEXT NAME="L" VALUE=10>
<P>Высота <INPUT TYPE=TEXT NAME="h" VALUE=20>
<P>Площадь <INPUT TYPE=TEXT NAME="S" VALUE=0>
<P><INPUT TYPE=BUTTON NAME="b" VALUE="Расчет" OnClick=Calc()>
</FORM>
</BODY>
</HTML>
1.5. Самостоятельная работа
Разработайте Web-страницу, которая будет представлять собой калькулятор.
На форме должны быть расположены текстовые окна для ввода исходной информации и окно результата. Четыре кнопки (+, -, *, /) должны осуществлять арифметические действия.