Задание №3. Цель работы

Ознакомление с принципами, лежащими в основе языка JavaScript. Формирование навыков использования сценариев на примерах замены изображений, изменения свойств текста, вывода на экран текущих даты и времени, управления формами.

Задание

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

Изучите Методические указания или соответствующие разделы пособий [1,2].

Изучите структуру Web-страницы (Файл Листинг 5_1.htm), содержащей сценарий, выполняющийся в момент загрузки страницы, то есть когда на экране еще не видно ее содержания. При нажатии на эту ссылку вы увидите шаблон Web-страницы, содержащей простейший сценарий. Проделайте следующие действия.

3.1. На вкладке Вид браузера Microsoft Internet Explorer укажите режим В виде HTML. Вы увидите страничку Блокнота, содержащую HTML-код рассматриваемой Web-страницы.

3.2. Изучите HTML-код и сравните его с видом страницы, которую вы наблюдаете в окне браузера

3.3. Используя Блокнот в качестве Редактора, внесите изменения в HTML-код страницы, изменив ее заголовок (Элемент <TITLE>), назвав ее Мой первый сценарий.

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

"Студент гр.______ Фамилия Имя отчество приветствует вас на этой странице!",

а сама страница вместо текстов З а г о л о в о к и Пустая страница сдержала текст:

Домашняя страница Фамилия Имя отчество.

Измените фон страницы. Цвет шрифта текста, выводимого скриптом, должен соответствовать цвету ваших волос, а цвет шрифта текста страницы - цвету ваших глаз. Сохраните файл Листинг 5_1.htm, нажмите кнопку Обновить браузера и убедитесь, что внесенные изменения работают.

Аналогичные изменения внесите в Web-страницу (Файл Листинг 5_2.htm) и убедитесь, что внесенные изменения работают. Здесь тот же самый сценарий выполняется другим способом: создана функция, которая и связана с событием. Загрузка страницы соответствует событию onload элемента BODY

Изучите структуру Web-страницы (Файл Листинг 5_3.htm), содержащей один из самых модных сценариев, обеспечивающий замену одного рисунка другим в тот момент, когда над рисунком появляется указатель мыши. Таким способом можно изменять вид надписи (текст или фон), вводить изображения нажатой и отпущенной кнопки, создавать всевозможные визуальные эффекты, “оживляющие” страницу. Проделайте следующие действия.

5.1. Внесите такие изменения, чтобы вместо рисунка:

был бы рисунок с вашей фамилией, а вместо рисунка:

был бы рисунок с вашим именем.

Вместо рисунка:

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

был бы рисунок с текстом Шифр группы.

5.2. При нажатии на первую клавишу должны выводиться ваши краткие

автобиографические данные, а при нажатии на вторую - краткие сведения о вашей

студенческой группе

5.3. В файле Листинг 5_3.htm тексты: Заголовок, Тема 1, Тема 2 и т. д. необходимо заменить на:

Домашняя страница Фамилия Имя отчество.

Измените фон страницы и цвет шрифта текста.

5.4. Используя данный сценарий, внесите соответствующие изменения в файлы:

main.htm, frame1.htm;

right1.htm ,right2.htm;

right3.htm,

описывающие вашу домашнюю Web-страницу и включающие ваши реквизиты, внесенные изменения и формы (См. л. р. №2).

Изучите структуру Web- станицы (Файл Листинг 5_4.htm), содержащей элементы абзаца и заголовка. Для заголовка запрограммированы события мыши так, чтобы цвет и содержание текста изменялись в зависимости от положения указателя.

6.1. Внесите такие изменения, чтобы вместо текста Заголовок был текст:

Домашняя страница Фамилия Имя отчество.

Измените фон страницы и цвет шрифта текста.

6.2. . Используя данный сценарий, внесите соответствующие изменения в файлы:

main.htm, frame1.htm;

right1.htm ,right2.htm;

right3.htm,

описывающие вашу домашнюю Web-страницу и включающие ваши реквизиты, внесенные изменения и формы (См. л. р. №2).

7. Изучите структуру Web-страницы (Файл Листинг 5_5.htm), иллюстрирующей использование реально действующих часов и метода setTimeout, без которого реализация многих динамических эффектов оказывается невозможной.

7.1. Используя данный сценарий, внесите соответствующие изменения в файлы:

main.htm, frame1.htm;

right1.htm ,right2.htm;

right3.htm,

описывающие вашу домашнюю Web-страницу и включающие ваши реквизиты, внесенные изменения и формы (См. л. р. №2).

8. Изучите структуру Web-страницы (Файл Листинг 5_6.htm), иллюстрирующей управление формами. В листинге 5_6 приведен пример страницы с двумя кнопками, которые управляют содержимым элемента TEXTAREA.

8.1. Используя данный сценарий, внесите соответствующие изменения в файлы:

main.htm, frame1.htm;

right1.htm ,right2.htm;

right3.htm,

описывающие вашу домашнюю Web-страницу и включающие ваши реквизиты, внесенные изменения и формы (См. л. р. №2).