Сценарий тілі html ??жатына сценарий енгізу

Лабораторная
работа № 4

Разработка
и использование сценариев в языке HTML

Цель работы:
познакомиться с построением динамических
Web-страниц.

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

Программные
средства для создания динамических
страниц: ActiveX,
DHTML,
Java,
JavaScript,
VBScript.

1. Язык сценариев
VBScript.

Для того чтобы
добавить код сценария в Html-документ,
необходимо воспользоваться дескриптором
<Script>,
который должен находиться в пределах
дескриптора <Head>
или <Body>.
В дескрипторе <Script>
указывается язык программирования, на
котором записываются действия. Например,
если используется язык программирования
VBScript,
то открывающий дескриптор выглядит

Сценарии используют
для «обслуживания» событий, которые
возникают на Web-странице
после ее загрузки в Web-браузер.
Существует несколько видов событий. Из
самых распространенных можно отметить:
window_onload — запускается при полной загрузке
документа. Создайте Web-страницу
с обработчиком этого события. В этом
примере код Script
записан в теле страницы. Процедура Alert
выводит сообщение, которое записывается
в кавычках.

Пример №1

<Html>

<Head>

<Title>
Задача
1-Загрузка</Title>

</Head>

<Body>

Sub
window_onload

Alert
«Добро пожаловать на мою домашнюю
страницу!»

end
sub

</Script>

</Body>

</Html>

При загрузке
документа появится окошко с данной
надписью и кнопкой ОК

Пример №2

Событие onmouseover —
возникает при наведении указателя мыши
на гиперссылку. В этом примере код Script
расположен в теле программы.

<Html>

<Head>
<Title> Задача
2- ссылка</Title> </Head>

<Body>

Наведите
на эту ссылку указатель мыши</a>

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=»button»
NAME=»knopka»

VALUE=»Скопировать»
OnClick=copyfun()>

</FORM>

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>

Sub
but_onclick

Alert «Привет
пиплы:)»

End
sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Это самый простой
метод. Указываем имя оператором name=»имя»
в теге характеризующим элемент управления
(but),
это же «имя» пишем в вызываемой
процедуре и через знак подчеркивания
пишем событие, которое должно произойти
для исполнения сценария (but_onclick).

Выполните этот
пример.

Вызов
сценария, определяемый в элементе
управления:

Пример
№5

<html>

<head>

<Title>
Задача
5 Привет</Title>

Sub
scenariy

Alert «Привет
пиплы:)»

End
sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Обработчик
события определяется в дескрипторе
компонента.

Вызов
из другой процедуры:

Пример
№ 6

<html>

<head><Title>
Задача
6 Привет</Title>

Sub
but_onclick

Call butalert(«Привет
пиплы«)

End
Sub

Sub
butalert(a)

Alert a

End
Sub

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Выполните
этот пример.

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

Sub
but2_onclick

Alert
«Привет
пиплы:)»

End
sub

</script>

<form>

</form>

В каком месте
документа лучше размешать код сценария?
В любом месте документа и в неограниченном
количестве. Определения процедур
рекомендуется размещать в разделе
<HEAD>, хотя это и не обязательно.
Подобная практика улучшает чтение кода
сценария, позволяя избегать поиска
процедуры по всему документу. Более
того, при интерпретации браузером
документа раздел <HEAD> интерпретируется
до начала обработки тела документа,
следовательно, все процедуры будут
размещены в памяти до того, как в документе
встретится их вызов.

1.4. Выполнение
общих примеров

Пример №7

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

<html>

<Head>

<title>
Угадай
число</title>

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>

Ваш
вариант:<BR>

</FORM>

</body>

</html>

Пример №8

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

<html>

<head>

<title>Контроль
и обработка формы на клиенте</title>

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>

<H3>Вычисление
площади фигуры</H3><HR>

<P>Фигура

<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>

</FORM>

</BODY>

</HTML>

1.5. Самостоятельная
работа

Разработайте
Web-страницу,
которая будет представлять собой
калькулятор.

На форме должны
быть расположены текстовые окна для
ввода исходной информации и окно
результата. Четыре кнопки (+, -, *, /) должны
осуществлять арифметические действия.

Соседние файлы в папке Лабораторные работы

Источник

Скачать материал
- 09.01.2020
  
  5590
- RAR
  9.6 мбайт
- 534
  скачивания
- Рейтинг:
  4 из 5
- Оцените материал:
Настоящий материал опубликован пользователем Сарсенова Дилара Айсаевна. Инфоурок является
информационным посредником и предоставляет пользователям возможность размещать на сайте
методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них
сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

Удалить материал
- На сайте: 5 лет и 2 месяца
- Подписчики: 0
- Всего просмотров: 22372
- Всего материалов:
  
  3

Файлы

Рабочий лист подходит для учеников 7 класса, работающих по учебнику «Информатика. ФГОС», автор Л….

Источник

ВикиЧтение

HTML, XHTML и CSS на 100%
Квинт Игорь

12.3. Вводим первый сценарий

Классическим примером в начале изучения любого языка программирования является программа, выводящая сообщение Привет, мир!!!. Вот и мы создадим на JavaScript сценарий, который будет выводить такое сообщение. Чтобы проиллюстрировать возможности отладчика Microsoft Script Debugger, немного усложним пример и выведем не одно сообщение Привет, мир!!! а несколько. Кроме того, в процессе разбора сценария вы увидите, что очень просто изменить количество сообщений, выводимых в документе. Для примера работы в отладчике вмешаемся в ход выполнения сценария, изменив значение переменной-счетчика.

Теперь пора перейти к практике и создать, наконец, первый сценарий. Прежде стоит повторить, что язык JavaScript чувствителен к регистру символов. Это означает, что вам следует внимательно следить за тем, какими буквами вы набираете код сценария. Ведь, например, слова if и If в языке JavaScript – это абсолютно разные слова. Более подробно об этом вы узнаете в следующих главах, а пока достаточно правильно переписать сценарий из листинга 12.2.

1. Запустите текстовый редактор, в котором вы собираетесь создавать свои вебстраницы.

2. Создайте новый текстовый файл.

3. Введите текст вашего первого сценария из листинга 12.2.

Листинг 12.2. Первый сценарий

<html>

<head>

<title>Наш первый сценарий</title>

</head>

<body>

<!–

for (var i = 0; i < 10; i++)

{

document.write(«Привет, мир!!!»);

}

//–>

</script>

</body>

</html>

4. Сохраните файл, например, с именем script1.html.

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

Итак, если вы ввели все строки без ошибок, как в листинге 12.2, то на экране вашего браузера появится десять сообщений Привет, мир!!! (рис. 12.3).

Рис. 12.3. Первый сценарий, открытый в браузере

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

Однако удобнее разрабатывать веб-страницы и сценарии в специально созданных для этого редакторах. Поэтому в качестве примера разберем работу первого сценария в среде редактора Microsoft FrontPage.

Данный текст является ознакомительным фрагментом.

Сценарий тілі html ??жатына сценарий енгізу

Лабораторная
работа № 4

Разработка
и использование сценариев в языке HTML

1. Язык сценариев
VBScript.

1.1 Процедуры

1.3.
Вызов сценариев VBscript.

Сценарий
вызываемый неявно:

Пример
№ 4.

Вызов
сценария, определяемый в элементе
управления:

Пример
№5

Вызов
из другой процедуры:

Пример
№ 6

Читайте также

Глава 12 Первый сценарий на JavaScript

Простейший Web-сценарий

Простейший Web-сценарий

10.4.1 Сценарий соединения

14.9.4 Сценарий TFTP

17.5 Сценарий NNTP

24.4.1 Сценарий 1

24.4.5 Сценарий 2

24.4.6 Сценарий 3

Линейный сценарий

Нелинейный сценарий

Вводим и редактируем данные в ячейках

Режим Сценарий

29.4.1. Базовый сценарий cgi

13.3.1. Вводим текст

Лабораторная работа № 4

Разработка и использование сценариев в языке HTML

1. Язык сценариев VBScript.

1.1 Процедуры

1.3. Вызов сценариев VBscript.

Сценарий вызываемый неявно:

Пример № 4.

Вызов сценария, определяемый в элементе управления:

Пример №5

Вызов из другой процедуры:

Пример № 6

Читайте также

Глава 12 Первый сценарий на JavaScript

Простейший Web-сценарий

Простейший Web-сценарий

10.4.1 Сценарий соединения

14.9.4 Сценарий TFTP

17.5 Сценарий NNTP

24.4.1 Сценарий 1

24.4.5 Сценарий 2

24.4.6 Сценарий 3

Линейный сценарий

Нелинейный сценарий

Вводим и редактируем данные в ячейках

Режим Сценарий

29.4.1. Базовый сценарий cgi

13.3.1. Вводим текст

Лабораторная
работа № 4

Разработка
и использование сценариев в языке HTML

1. Язык сценариев
VBScript.

1.3.
Вызов сценариев VBscript.

Сценарий
вызываемый неявно:

Пример
№ 4.

Вызов
сценария, определяемый в элементе
управления:

Пример
№5

Вызов
из другой процедуры:

Пример
№ 6