Лабораторная работа №13. Языки создания сценариев Цель работы Основные понятия
advertisement
Лабораторная работа №13. Языки создания сценариев
Цель работы: Познакомиться с возможностями языков сценариев на
примере языка JavaScript.
Основные понятия.
Язык JavaScript используется при создании интерактивных HTMLстраниц для:
динамического создания документа с помощью сценария;
оперативной проверки достоверности заполняемых пользователем
полей форм HTML до передачи их на сервер;
создания динамических HTML-страниц совместно с каскадными
таблицами стилей и объектной моделью документа
взаимодействия с пользователем при решении "локальных" задач,
решаемых приложением JavaScript, встроенном в HTML-страницу.
Встроить сценарий JavaScript в HTML-страницу можно несколькими
способами:
задать операторы языка внутри тэга SCRIPT языка HTML;
указать файл с кодом JavaScript в параметре SRC тэга SCRIPT;
использовать выражения JavaScript в качестве значений параметров
тэгов HTML;
определить обработчик событий в тэге HTML.
Использование тэга SCRIPT. Для внедрения в HTML-страницу
сценария JavaScript в спецификацию языка HTML был введен тэг-контейнер
SCRIPT, внутри которого могут располагаться операторы языка JavaScript.
<SCRIPT LANGUAGE="JavaScript">
<!операторы JavaScript
//-->
</SCRIPT>
Параметр LANGUAGE задаёт используемый язык сценариев.
Документ может содержать несколько тэгов SCRIPT, расположенных в
любом месте документа.
Задание файла с кодом JavaScript. Тэг SCRIPT имеет параметр SRC,
позволяющий связать встраиваемый сценарий с внешним файлом,
содержащим программный код на языке JavaScript. В качестве значения
параметра задаётся URL-адрес ресурса.
<SCRIPT SRC="http://home.bhv.com/functions/jsfuncs.js">
</SCRIPT>
Элементы JavaScript в параметрах тэгов HTML. Переменные и
выражения JavaScript можно использовать в качестве значений параметров
Создание веб-страниц
тэгов HTML. Для этого элементы JavaScript располагаются между
амперсандом (&) и точкой с запятой (;) и заключаются в фигурные скобки {}.
<HR WIDTH="&{barWidth};%" ALIGN="LEFT">
Обработчики событий. Для совместимости с языками сценариев в
некоторые тэги HTML были введены специальные параметры обработки
возникающих событий. Значениями этих параметров могут быть операторы
языка JavaScript. Обычно в качестве значения задаётся имя функции, которая
вызывается, когда происходит соответствующее событие, определяемое
параметром обработки события. Имя параметра начинается с приставки on,
за которым следует имя самого события. Например, параметр обработки
события click (щелчок кнопкой мыши) будет иметь имя onClick.
function имя ([параметры])
{
[операторы JavaScript]
[return значение]
}
Параметры,
передаваемые
функции,
разделяются
запятыми.
Необязательный оператор return в теле функции, определяет возвращаемое
функцией значение.
Следующий пример демонстрирует задание функции и её вызов в
процессе формирования страницы документа.
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-function square (number)
{return number * number}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<!-document.write("Результат выполнения функции:", square(5));
//-->
</SCRIPT>
</BODY>
2
Создание веб-страниц
Порядок выполнения работы
1. Откройте Paint.
2. В Paint создайте второй рисунок размером 200х400 точек и сохраните его
в папку D:\Users\...\Web\ Lab13\ в формате JPG под именем risunok.
3. Откройте Блокнот.
4. Создайте HTML-документ, сохраните его в папку D:\Users\...\Web\ Lab13\
с именем index13.html.
5. Создадим в разделе <HEAD> создадим функцию:
<SCRIPT LANGUAGE="JavaScript">
<!-function validate (dat1, dat2)
{
if (dat2.value >=30)
{alert (dat1.value + " Да Вы уже взрослый человек!");}
else
{if (dat2.value >=18)
{alert (dat1.value + " Да Вы уже совершеннолетние!");}
else
{alert(dat1.value + " Вы еще повзрослеете!"); }}
}
//-->
</SCRIPT>
6. Введите в документ следующий код:
<FORM name="form1">
<H3>Введите данные</H3>
Ваше имя: <INPUT type="text" size=20 name="myname">
Ваш возраст: <INPUT type="text" size=5 name="myage">
<INPUT type="button" value="Подтвердите"
onClick="validate(this.form.myname, this.form.myage)">
</FORM>
тэг <FORM> устанавливает форму на веб-странице. С помощью
клиентских скриптов можно получить доступ к любому элементу
формы, изменять его и применять по своему усмотрению;
тэг <INPUT> является одним из разносторонних элементов формы и
позволяет создавать разные элементы интерфейса и обеспечить
взаимодействие с пользователем. Главным образом <INPUT>
предназначен для создания текстовых полей, различных кнопок,
переключателей и флажков. Хотя элемент <INPUT> не требуется
помещать внутрь контейнера <FORM>, определяющего форму, но
если введенные пользователем данные должны быть отправлены на
сервер, где их обрабатывает серверная программа, то указывать
<FORM> обязательно. То же самое обстоит и в случае обработки
3
Создание веб-страниц
данных с помощью клиентских приложений, например, скриптов на
языке JavaScript.
7. Запустите веб-страницу. Попробуйте ввести в поле ввода разные значения
и нажать на кнопку.
8. В HTML-документе:
создайте горизонтальную линию;
создайте заголовок второго уровня "Рисунок";
вставьте рисунок risunok, сделайте, чтобы он выравнивался по
правому краю;
напишите свою Ф.И.О., текущую дату;
создайте горизонтальную линию.
9. Добавьте в документ следующий код:
Толщина рамки: <INPUT type="text" size=10 name="ramka">
<INPUT type="button" value="Рамка"
onClick="document.images[0].border=this.form.ramka.value">
10. Создайте текстовые поля и кнопки для изменения у рисунка высоты
(HEIGHT), ширины (WIDTH), отступы от изображения по горизонтали
(HSPACE) и вертикали (VSPACE).
4
