Лабораторна робота № 8 Події в Java Script
Приклад: використовуючи данні наведені в таблиці створити Інтернет сторінку з двома текстовим елементами форми. Призначити на події згідно варіанту завдань першого елемента видачу в другий текстовий елемент відповідних повідомлень.
|
Атрибут HTML |
Умова виникнення події |
|
onBlur |
Втрата фокуса елементом форми |
|
onChange |
Зміна зміта поля вводу або області тексту, або вибір нового елементу списку |
|
onClick |
Клік миші на елементі форми або гіперпосилання’ |
|
onFocus |
Отримання фокуса вводу елементом форми |
|
onLoad |
Завершення завантаження документа |
|
onMouseOver |
Зміщення вказівника миші на гіперпосилання |
|
onMouseOut |
Зміщення вказівника миші не на гіперпосилання’ |
|
onSelect |
Виділення тексту в полі вводу або області тексту |
|
onSubmit |
Передача даних форми |
|
onUnload |
Вивантаження поточного документу та початок завантаження нового |
Завдання: створити html документ, в якому обробити події згідно номеру варіанта.
|
№ п/п |
Події |
№ п/п |
Події |
|
1 |
onChange, onClick |
15 |
onFocus, onMouseOut |
|
2 |
onClick, onLoad |
16 |
onBlur, onClick |
|
3 |
onBlur, onMouseOver |
17 |
onClick, onMouseOver |
|
4 |
onFocus, onClick |
18 |
onChange, onSelect |
|
5 |
onLoad, onMouseOut |
19 |
onFocus, onChange |
|
6 |
onBlur, onChange |
20 |
onLoad, onMouseOut |
|
7 |
onChange, onMouseOver |
21 |
onClick, onFocus |
|
8 |
onFocus, onSelect |
22 |
onChange, onLoad |
|
9 |
onClick, onChange |
23 |
onBlur, onSelect |
|
10 |
onFocus, onSelect |
24 |
onFocus, onMouseOver |
|
11 |
onClick, onMouseOut |
25 |
onChange, onFocus |
|
12 |
onLoad, onMouseOver |
26 |
onLoad, onMouseOut |
|
13 |
onBlur, onSelect |
27 |
onClick, onSelect |
|
14 |
onChange, onMouseOut |
28 |
onBlur, onMouseOver |
Приклад:
<html>
<head>
<script>
function fun(a)
{
main_form.t_res.value = a;
}
</script>
</head>
<body onLoad = "fun('Відбулось завантаження сторінки');">
<form id = "main_form">
<input type="text" size = "100" value="Calculate" onClick="fun('Відбувся клік на текстовому елементі форми');" onBlur = "fun('Текстовий елемент форми втратив фокус');" onChange = "fun('Зміст текстового поля форми змінений');" onFocus = "fun('Текстовий елемент форми отримав фокус');" onSelect = "fun('В текстовому полі форми виділений текст);" ><br>
<input type = "text" size = "100" id = "t_res" onMouseOver = "fun('Курсор потрапив на гіперпосилання');" onMouseOut = "fun('Курсор потрапив не на гіперпосилання');"><br>
<a href = "d:\\" >Посилання</a>
</form>
</body>
</html>
Результати виконання:
Лабораторна робота № 9 Умовні вирази, оператори присвоювання та порівняння, логічні операції, коментар у Java Script
Приклад: засобами мови Java Script реалізувати розгалужувальний процес розрахунків за наведеною нижче формулою:
Теоретичні відомості: при розробці функціональної бази Інтернет сторінок з використанням мови JavaScript одним з необхідних елементів є умовні оператори. Виконання складних математичних операцій вимагає паралельної перевірки деяких умов. Структура умовного оператора в JavaScript має наступний вигляд:
if(<логічний_вираз>) <оператор_1> else <оператор_2>
У даному випадку <логічний_вираз> представляє собою повний або скорочений варіант певного виразу. При умові коли <логічний_вираз> приймає значення true виконується <оператор_1>, у іншому разі, тобто коли його значення дорівнює false <оператор_2>. При побудові логічних виразів здебільшого застосовуються наступні операції порівняння:
|
№ п/п |
Позначення |
Зміст |
|
1 |
|
дорівнює |
|
2 |
|
не дорівнює |
|
3 |
|
більше |
|
4 |
|
більше або дорівнює |
|
5 |
|
менше |
|
6 |
|
менше або дорівнює |
Слід зазначити, що у більшості випадках для скорочення програмного коду та підвищення рівня його читабельності використовуються наступні спрощення при записі логічних виразів:
|
|
|
|
|
|
|
|
|
|
|
|
Можливі випадки коли при побудові логічних виразів необхідно врахувати не одну а кілька умов. Мова Java Script передбачає використання спеціальних символів побудови складних умовних операторів:
|
Позначення |
Оператор |
|
|
і |
|
|
або |
Структурний елемент else умовного оператору if у більшості випадках використовується для оптимізації програмного коду та удосконалення його читабельності. Слід зазначити, що у випадках коли варіанти перебору умовного оператору if є взаємно виключаючими, використання оператору else дозволяє скоротити об'єм перевірок і як результат пришвидшити роботу програми. У випадку коли варіанти перебору не доповнюють один одного використання структурного елементу else може спровокувати виникнення помилки. Нижче наведені два фрагменти коду, що демонструють не тільки оптимізаційні властивості умовних операторів, але й варіанти їх використання:
|
Взаємовиключаючі умови |
Взаємодоповнюючі умови |
|
if(a==1) b=a; else if(a==2) b=a*a; else if(a==3) b=a*a*a; else if(a==4) b=1/a; else if(a==5) b=1/a*a; else |
if(str.length) flag=1; if(((str[2]==”a”)||(str[2]==”k”))&&(str[0]=” ”)) flag=0; if(str.length>=5) flag=str.length if(str==”twenty”) {number= 20; flag=0;} |
Завдання: створити html документ для реалізації розгалуженого обчислювального процесу згідно варіанту завдання:
|
№ п/п |
Варіант завдання |
№ п/п |
Варіант завдання |
|
1 |
|
15 |
|
|
2 |
|
16 |
|
|
3 |
|
17 |
|
|
4 |
|
18 |
|
|
5 |
|
19 |
|
|
6 |
|
20 |
|
|
7 |
|
21 |
|
|
8 |
|
22 |
|
|
9 |
|
23 |
|
|
10 |
|
24 |
|
|
11 |
|
25 |
|
|
12 |
|
26 |
|
|
13 |
|
27 |
|
|
14 |
|
28 |
|
Приклад:
<html>
<head>
<script>
function fun()
{
var a, b, c, d;
a = parseInt(main_form.t_a.value);
b = parseInt(main_form.t_b.value);
c = parseInt(main_form.t_c.value);
if(a*b*c>0) d=a*b-c; else
if(a*b*c<0) d=a-b*c; else
d=a*c-Math.sqrt(b);
main_form.t_d.value = "" + d;
}
</script>
</head>
<body>
<form id = "main_form">
a<input type="text" id = "t_a" value="10"><br>
b<input type="text" id = "t_b" value="-2"><br>
c<input type="text" id = "t_c" value="3"><br>
d<input type="text" id = "t_d" value=""><br>
<input type = "button" onClick = "fun();" value = "Розрахувати">
</form>
</body>
</html>
Результати виконання:
