Лабораторна робота №14
Хід роботи:
- В папці JavaScript створіть папку LR2, в створеній папці створіть документ prizvyshe.html.
- В створений документ додайте наступне:
<![CDATA[
<html>
<head>
<script language="JavaScript">
<!--
function Age(form){
if (document.form1.a.value <= 18){
alert ("Ваш вік має бути більше 18");
}
}
// -->
</script>
</head>
<body>
<form name="form1">
Вік: <input type="text" name="a" size=5 onBlur="Age()">
</form>
</body>
</html>
]]>
Перевірте працездатність скрипта. Поясніть як працює подія onBlur
Змініть даний скрипт таким чином, щоб крім віку необхідно було вводити Ваші ПІБ, а далі по події onBlur виконувалася перевірка вашого віку. І якщо ви вводите менше 18 повинно з’явитися сповіщення про помилку: «Вам не виповнилось 18 років», а якщо Ви вводите 18 або більше, то повинна відкритися сторінка з даними, введеними в поле ПІБ.
- В папці LR2 створіть документ prizvyshe2.html та додайте в нього наступне:
<![CDATA[
<html>
<head>
<script language="JavaScript">
<!--
function fct(obj) {
var a=obj.a1.value;
var result=a*a;
obj.a2.value=result;
}
//-->
</script>
</head>
<body>
<form name="Form1">
<font size=3>
Сторона квадрата: <input type="text" size=6 name="a1"><br>
S: <input type="text" size=6 name="a2" onFocus="fct(Form1)">
</form>
</body>
</html>
]]>
Перевірте як працює скрипт, та змініть його так, щоб він обчислював в ще одному полі довжину діагоналі, по будь-якій події відмінній від onFocus.
- В папці LR2 створіть документ prizvyshe3.html та додайте в нього наступне:
<![CDATA[
<html>
<head>
<script language="JavaScript">
<!--
function exit(){
var a=window.confirm("Бажаєте закрити вікно?")
if (a==true)
window.close()
}
//-->
</script>
</head>
<body>
<form name="Form1">
<font size=3>
<input type="button" value="Close" onClick="exit()">
</form>
</body>
</html>
]]>
Перевірте як працює скрипт. Змініть скрипт таким чином, щоб було два поля для вводу цифр, третє поле для виводу результату, а при натисканні кнопки, щоб числа двох перших полей перемножились з виводом результату у третє поле. Оформіть скрипт таким чином, щоб було інтуїтивно зрозуміло для чого він використовується.
- В папці LR2 створіть документ prizvyshe4.html та додайте в нього наступне:
<![CDATA[
<html>
<head>
<script language="JavaScript">
<!--
function registration(obj){
var a=window.prompt("Введіть Ваше ім'я"," ")
obj.regname.value=a;
}
//-->
</script>
</head>
<body>
<form name="form1">
<input type="button" value="Натисніть для реєстрації"
onClick="registration(form1)"><br>
<input type=text name=regname size=50>
</form>
</body>
</html>
]]>
Перевірте як працює скрипт. Змініть скрипт таким чином, щоб було три поля для вводу Ваших ПІБ, та одна кнопка, після натискання якої відкривалась сторінка з Вашими ПІБ, розділеними точками та записаними в один рядочок.
-
Створіть сценарій, в якому текст в поле додається натисканням кнопки, та введенням тексту в діалоговому вікні, а далі, якщо змінити текст в текстовому полі без натискання кнопки, то з’явиться сповіщення про те, що текст було змінено.
-
Створіть сценарій для знаходження коренів квадратного рівняння.
-
Створіть сценарій «обмін валют».
-
Створіть сценарій в якому в текстовому полі буде реалізований рухомий рядок з Вашими ПІБ. Тобто такий, в якому через певний проміжок часу з’являється літера, потім ще одна і т.д, до того моменту, доки не з’явиться весь напис. А далі з початку.
-
Створіть сценарій, який буде змінювати фоновий колір документу, в залежності від натиснутої кнопки (кнопок створити не менше 5). Тобто у Вас є, наприклад, 5 кнопок: «Зелений», «Синій» і т.д. При натисканні на кнопку «Зелений» фон стає зеленим, на «синій» – синім і т.д.
Контрольні запитання:
- Для чого використовують подію onBlur?
- Назвіть які Ви ще знаєте події.
- Що таке форми та для чого вони використовуються?