- •Пример практического задания
- •Теоретическая часть:
- •Тема1. Основні поняття
- •Условная операция и условный оператор
- •Цикл while, цикл for
- •Функции. Формальные, фактические параметры. Полезные функции
- •Приклад №2
- •Приклад №2
- •Розглянимо базові властивості, методи та події, що доступні для різних елементів форми
ЛАБОРАТОРНАЯ РАБОТА №5
Иерархия объектов браузера.
Пример практического задания:
Пример практического задания
На событие "Загрузка документа" вызвать появление диалогового окна с сообщением "Поздравляем!!!" На событие "Нажатие на кнопку формы" вызвать следующие действия: изменить отображаемую на экране картинку; изменить цвет текста на синий; изменить цвет фона на жёлтый. Создать выпадающее меню, с помощью которого можно выбрать цвет фона документа (создайте четыре варианта цветов). Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации некоторой формы данного документа.
HTML код решения задачи
<!doctype html>
<HTML>
<HEAD>
<TITLE>Пример 7</TITLE>
<script src="script.js">
</script>
</HEAD>
<BODY onload="alert('Поздравляем!!!')">
<p>
На событие "Загрузка документа" вызвать появление диалогового окна с сообщением "Поздравляем!!!"<br>
На событие "Нажатие на кнопку формы" вызвать следующие действия: изменить отображаемую на экране картинку; изменить цвет текста на синий; изменить цвет фона на жёлтый.<br>
Создать выпадающее меню, с помощью которого можно выбрать цвет фона документа (создайте четыре варианта цветов).<br>
Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации некоторой формы данного документа.
</p>
<IMG SRC="1.gif" ALT="Картинка" id="pic1" onmouseover="rr()">
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
<SELECT NAME="selection" id="sl1" size="3" onchange="g()">
<OPTION VALUE="option1" checked>зелёный</option>
<OPTION VALUE="option2">красный</option>
<OPTION VALUE="option3">розовый</option>
</SELECT>
<TEXTAREA NAME=address ROWS=5 COLS=50 id="area1">
А здесь - Ваш адрес...
</TEXTAREA>
<INPUT TYPE="button" VALUE="Запустить обработчик" onclick="f()">
</FORM>
</BODY>
</HTML>
JAVASCRIPT код решения задачи
function f()
{
document.getElementById("pic1").src="2.gif";
document.fgColor="blue";
document.bgColor="yellow";
}
function g()
{
if(document.getElementById("sl1").selectedIndex==0)
document.bgColor="green";
if(document.getElementById("sl1").selectedIndex==1)
document.bgColor="red";
if(document.getElementById("sl1").selectedIndex==2)
document.bgColor="pink";
}
function rr()
{
document.getElementById("area1").value="Привет, Мир!!!";
}
Индивидуальные задания
ЗАДАНИЯ
1. Создать группу радиокнопок, с помощью которой можно выбрать цвет текста документа (создайте четыре варианта цветов). Создайте обработку события формы onsubmit появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации данной формы.
2. Создать группу чекбоксов, с помощью которой можно выбрать цвет фона документа (создайте четыре варианта цветов). Создайте обработку события кнопки формы onclickt появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации данной формы.
3. Создать группу радиокнопок, с помощью которой можно сменить некоторую картинку на картину с мастью карты, которая указана в качестве подписи соответствующей радиокнопки (создайте четыре варианта выбора). Создайте обработку события формы onreset появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации данной формы.
4. Создать выпадающее меню, с помощью которого можно выбрать цвет фона документа (создайте четыре варианта цветов). Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации некоторой формы данного документа.
5. Создать выпадающее меню, с помощью которого можно выбрать масть карты, которая будет отображаться вместо присутствующей в гипертекстовом документе картины (создайте минимум четыре варианта выбора). Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации некоторой формы данного документа.
6. Создать список вариантов, с помощью которого можно выбрать либо цвет фона документа зеленый, либо увидеть диалоговое окно с приветствием, либо поменять цвет текста документа на синий, либо сменить , отображаемую на экране картинку. Создайте обработку любого события объекта document появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации некоторой формы данного документа.
7. Создать группу радиокнопок , смена значений в которой сопровождается изменениями цвета текста и фона текущего документа. Создайте обработку любого события объекта document появлением диалогового окна.
8. Создать группу чекбоксов , смена значений в которой сопровождается изменениями выводимой информации в одностроковое поле ввода формы. Создайте обработку любого события объекта links появлением диалогового окна
9. Создать список вариантов, с помощью которого можно выбрать выводимый в многостроковое поле ввода текст в форме. Создайте обработку любого события объекта images появлением диалогового окна с произвольным сообщением.
10. Создать группу радиокнопок, с помощью которой можно выбрать либо цвет фона документа желтый, либо увидеть диалоговое окно с приветствием, либо поменять цвет текста документа на синий, либо сменить , отображаемую на экране картинку. Создайте обработку любого события объекта links появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации некоторой формы данного документа.
11. Создать группу радиокнопок, с помощью которой можно выбрать цвет активной гиперссылки документа (создайте четыре варианта цветов). Создайте обработку события формы onsubmit появлением строки «ДОБРЫЙ ДЕНЬ» в одностроковом поле ввода информации данной формы.
12. Создать группу чекбоксов, с помощью которой можно выбрать цвет посещенной гиперсылки документа (создайте четыре варианта цветов). Создайте обработку события кнопки формы onclickt появлением строки «ДОБРЫЙ ДЕНЬ» в многостроковом поле ввода информации данной формы.
13. Создать группу радиокнопок, с помощью которой можно сменить некоторую картинку на картину с мастью карты, которая указана в качестве подписи соответствующей радиокнопки (создайте четыре варианта выбора). Создайте обработку события формы onreset появлением строки «ВСЕ ПРАВИЛЬНО» в одностроковом поле ввода информации данной формы.
14. Создать выпадающее меню, с помощью которого можно выбрать цвет гиперссылки документа (создайте четыре варианта цветов). Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации некоторой формы данного документа.
15. Создать выпадающее меню, с помощью которого можно выбрать масть карты, которая будет отображаться вместо присутствующей в гипертекстовом документе картины (создайте минимум четыре варианта выбора). Создайте обработку события наезда на картинку мышки появлением строки «ПРИВЕТ,МИР» в многостроковом поле ввода информации некоторой формы данного документа.
16. Создать список вариантов, с помощью которого можно выбрать либо цвет фона документа синий, либо увидеть диалоговое окно с приветствием, либо поменять цвет текста документа на синий, либо сменить , отображаемую на экране картинку. Создайте обработку любого события объекта document появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации некоторой формы данного документа.
17. Создать группу радиокнопок , смена значений в которой сопровождается изменениями цвета текста и фона текущего документа. Создайте обработку любого события объекта document появлением диалогового окна.
18. Создать группу чекбоксов, смена значений в которой сопровождается изменениями выводимой информации в многостроковое поле ввода формы. Создайте обработку любого события объекта links появлением диалогового окна
19. Создать список вариантов, с помощью которого можно выбрать выводимый в одностроковое поле ввода текст в форме. Создайте обработку любого события объекта images появлением диалогового окна с произвольным сообщением.
20. Создать группу радиокнопок, с помощью которой можно увидеть диалоговое окно с приветствием, либо поменять цвет текста документа на белый, либо сменить , отображаемую на экране картинку, либо изменить цвет фона документа на красный. Создайте обработку любого события объекта document появлением строки «ПРИВЕТ,МИР» в одностроковом поле ввода информации некоторой формы данного документа.