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

Тема: Основи роботи з JavaScript.
Мета: Практично закріпити знання та вміння створення простих скриптів на web-сторінці.
Обладнання: ПК, програма Блокнот.

Хід роботи

Завдання 1 (2 бали). Розміщення Javascript на HTML-сторінці.
1. Використовуючи текст програмного коду виконайте наступні завдання:

<html>
<body>
<br>
Це звичайний HTML документ.
<br>
<script language="JavaScript">
document.write ("A це JavaScript!")
</script>
<br>
Знову документ HTML.
</body>
</html>

2. Записати в звіт призначення тегів: <Html>, <Body>, <Br>.

Завдання 2 (+1 бал) Події Javascript
Теорія: Програма – оброблювач подій, котра використана в даному випадку, називається onClick.
Нові керуючі теги, які використані для створення наступного сценарію Web-сторінки:

  1. Атрибут onClick = "alert ('Привіт!')" у тэгу <input> обумовлює подію, що відбувається, при натисканні на кнопку «миші» ("button"). Оператор value визначає зміст події (значення даних, які передаються). Якщо має місце подія Click, повинен виконатися виклик аlеrt('Привіт!'). У цьому випадку не використовується тэг <script>.

  2. У команді document.write() використані подвійні лапки, а в конструкції alert() – одинарні.

У більшості випадків можливо використати обидва типи лапок. Але якщо написати onClick = "alert ('Привіт!')", то код скрипта не буде виконаний, оскільки стає неясно, до якої із частин конструкції має відношення функція обробки подій onClick, а до якій не має. У наведеному програмному коді необхідно перемежовувати обидва типи лапок. При цьому не має значення, у якому порядку вони використані – спершу подвійні, а потім одинарні, або навпаки. Можна точно так само написати й onClick = 'alert ("Привіт!")'.

Практика: 1. Запишіть у програмі «Блокнот» програмний код обробки події onClick.

<form>
<input type = "button" value = "Click me" onClick = "alert ('Привіт!')">
</form>

2. У програмному коді створіть кнопку, на котрій виводиться наступний надпис «Це подія JavaScript».
3. Поясніть значення тегів: <Form>, <Input>, <Type>.
4. Запишіть атрибути, котрі надають можливість оброблювати події.
5. З якою метою у команді document.write() використані подвійні лапки, а в конструкції alert() – одинарні.

Завдання 3 (+2 бали).
Створити веб-сторінку index.html за зразком та описати призначення та роботу пронумерованих блоків.

<html>
<head>
// БЛОК №1
<script type="text/javascript">
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
var t = new Date();
document.write(checkTime(t.getHours()));
document.write(".");
document.write(checkTime(t.getMinutes()));
document.write(".");
document.write(checkTime(t.getSeconds()));
</script>
</head>
// БЛОК №2
<BODY onLoad="checkTime()">
<br><br>
// БЛОК №3
<script type="text/javascript">
var flag = 1;
function t()
{
if (flag == 1) N.style.left = "250px";
if (flag == 2) N.style.left = "100px";
if (flag == 3) N.style.left = "200px";
flag = flag + 1;
if (flag == 4) flag = 1;
}
function al()
{
alert(" Иначе и быть не могло! ")
}
</script>
// БЛОК №4
<A HREF="JavaScript:alert('Внимание!!!');"> Кликни здесь</A><br><\<br>
<FORM METHOD=post NAME="form"
ACTION="JavaScript:form.e.value='Нажали кнопку: Заполнить';void(0);">
<INPUT TYPE=text NAME=e SIZE=30 VALUE=""<BR>
<INPUT TYPE=submit VALUE="Заполнить">
<INPUT TYPE=reset VALUE="Очистить">
</FORM>
<br>
// БЛОК №5
<FORM><INPUT TYPE=button VALUE="Кнопка"
onClick="alert('Вы нажали кнопку');">
</FORM>
<br>
Вам понравился наш сайт?<br />
<a href="#null" onclick="al()" style="position: relative; left: 30px;">да</a>
<a href="#null" onmouseover="t()" id="N" style="position: relative; left: 40px;">нет</a>
// БЛОК №6
<SCRIPT>
var access;
var age = prompt('Сколько вам лет?', '');
if (age > 14) {
access = 'Вам больше 14';
} else {
access = 'Вам меньше 14';
}
alert(access);
</SCRIPT>
</body>
</html>

Зробити висновок по роботі.