Лабораторна робота № 5 Основи JavaScript
Мета роботи: набути навичок з написання JS скриптів.
Теоретичні відомості
JavaScript – нова мова програмування для створення скриптів, що розроблена фірмою Netscape. За допомогою JavaScript можна створювати інтерактивні Web-сторінки. Щоб запускати скрипти, що написані з використанням мови JavaScript необхідний браузер, що має змогу працювати з JavaScript – наприклад Netscape Navigator (починаючи з версії 3.0) або Microsoft Internet Explorer (MSIE – починаючи з версії 3.0). Код скрипта JavaScript розміщується безпосередньо на HTML-сторінці з використанням тегу <script>. Події та їх обробники є одними з важливих питань для програмування на мові JavaScript. Події, головним чином провокуються діями користувача. Наприклад, клік по кнопці або текстовому полю провокує виникнення події "Click". Якщо курсор миші перетинає будь-яке посилання гіпер-тексту – відбувається подія MouseOver та ін. Існує кілька різних типів подій, в даній лабораторній роботі ми розглянемо лише подію onClick. Наведений нижче код є прикладом простої програми обробки події onClick:
<form>
<input type="button" value="Click me" onClick="alert('Hello!!!')">
</form>
Однією з найвідоміших функцій є alert(), що дозволяє видати користувачеві інформацію або попередження у випадаючему вікні. При її виклику, у якості параметра передається деяка строка, у випадку представленому нижче це “Hello!!!”. Таким чином, коли користувач клікає на кнопці або іншому елементі форми скрипт створює вікно, що містить текст ”Hello!!!”.
Завдання: Розробити Інтернет сторінку де наряду із звичайним html текстом буде міститись прізвище, ім’я, по батькові студента, надрукованого засобами Java Script. Розмістити на сторінці кнопку, за натиском якої користувачеві на екран з’являтиметься повідомлення про дату та місце народження студента.
Приклад:
<html>
<body>
<br>
Это обычный HTML документ.
<br>
<script language="JavaScript">
document.write("А это JavaScript!")
</script>
<br>
Вновь документ HTML.
<br>
<form>
<input type="button" value="Click me" onClick="alert('Привіт')">
</form>
</body>
</html>
Результати виконання:
Лабораторна робота №6 Використання функцій в JavaScript
Мета роботи: Набути навичок з використання функцій на мові JavaScript.
Теоретичні відомості
У більшості програм на мові JavaScript як і у випадках інших мов програмування широко використовуються функції. У більшості випадках функції представляють собою лише поєднання кількох команд. Для прикладу розглянемо скрипт, що друкує деякий текст три рази поспіль:
<html>
<script language="JavaScript">
document.write("Ласкаво просимо на мою сторінку!<br>");
document.write("Це JavaScript!<br>");
document.write("Ласкаво просимо на мою сторінку!<br>");
document.write("Це JavaScript!<br>");
document.write("Ласкаво просимо на мою сторінку!<br>");
document.write("Це JavaScript!<br>");
</script>
</html>
Такий скрипт напише
Ласкаво просимо на мою сторінку!
Це JavaScript!
тричі. Як бачимо поставлена задача вирішена за допомогою того, що відповідна частина коду була дубльована три рази. Такий підхід не є ефективним. Наступний скрипт виконує ту ж саму задачу з використанням функції.
<html>
<script language="JavaScript">
function myFunction() {
document.write("Ласкаво просимо на мою сторінку!<br>");
document.write("Это JavaScript!<br>");}
myFunction();
myFunction();
myFunction();
</script>
</html>
І хоча кількість строк у даному випадку не змінилась структура програми стала більш зрозумілою, читабельною, та придатною до подальшої модифікації. У даному програмному коді ми використали функцію, що містить наступні строки:
function myFunction() {
document.write("Ласкаво просимо на мою сторінку!<br>");
document.write("Це JavaScript!<br>");}
Для визначення функції використовується ключове слово function. myFunction у даному випадку ім’я функції. У круглих дужках може бути вказаний ряд параметрів. Усі команди скрипта, що знаходяться між фігурними скобками – {} – належать функції myFunction() та виконуються при її виклику. Це означає, що обидві команди document.write() пов’язані між собою та можуть бути виконані при виклику даної функції.
Завдання: Розробити Інтернет сторінку на якій знаходиться лише одна кнопка. На подію натиснення призначити виконання функції розрахунку арифметичної операції вибраної за номером студента в списку:
|
№ п/п |
|
№ п/п |
|
|
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 language="JavaScript">
function calculation() {
var x= 12;
var y= 5;
var result= x + y;
alert(result);
}
</script>
</head>
<body>
<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>
</body>
</html>
Результати виконання:
