Лабораторна робота №4 Основи javaScript
Мета роботи: Вивчити основи javaScript на прикладі розробки сайту.
Теоретичні відомості:
Мова JavaScript відрізняється від інших мов високого рівня, перш за все тим, що програми, написані на ньому, не можуть виконуватися самостійно. Вони або вбудовані в HTML-документ, або розташовані в окремих файлах і приєднуються до HTML-документу при його завантаженні в браузер. Вихідні дані беруться з HTML-документа, а результати виконання програми повертаються в нього. Програми на JavaScript називають сценаріями або скриптами.
Так як сценарії передаються на комп'ютер користувача по мережі, то від їх розміру залежить час завантаження сайту. Часто сценарій служить для внесення дуже простих змін в HTML-документ, наприклад, потрібно змінити колір або розмір якого-небудь об'єкта на екрані. Тому сценарії, як правило, невеликі, часто складаються з декількох рядків. Формально на їх розмір ніяких обмежень не накладається.
Найбільші труднощі у розробника сценаріїв викликають необхідність постійно використовувати об'єктну модель HTML-документа і несумісність браузерів. Модель складається з безлічі об'єктів, кожен з яких має велику кількість властивостей і методів. Багато властивостей мають великий набір спеціальних значень. Об'єкти реагують на велику кількість подій. Наприклад, об'єкт DIV в об'єктної моделі, яка застосовується в одному з найбільш поширених браузерів, має 51, 38 властивість і 35 методів подій. Запам'ятати всі необхідні для розробки сценаріїв відомості про об'єктної моделі дуже важко, тому необхідно використовувати спеціалізований редактор з хорошою довідковою системою. Деякі фірми створюють редактори для розробки сценаріїв, призначених тільки для одного типу браузера, причому в довідковій системі про це не повідомляється. Такий підхід є проявом війни браузерів.
За допомогою програмованої об'єктної моделі JavaScript стає повноцінним інструментом зі створення динамічного HTML (DHTML):
JavaScript може змінити все HTML елементи на сторінці
JavaScript може змінити все атрибути HTML на сторінці
JavaScript може змінити все стилі CSS на сторінці
JavaScript може реагувати на всі події на сторінці
Скрипти можуть розташовуватися як в області заголовка HTML, так і в області тіла HTML.
Приклад структури HTML і місця скрипта в тілі документа:
<! DOCTYPE html> <html>
<Head>
<! - область заголовка HTML - це коментар в стандарті HTML ->
</ Head>
<Body>
<! - Область тіла документа HTML ->
<Script>
// Приклад вбудовування javascript в тіло документа
/ * Використаний метод Writeдля виведення на сторінку результату виконання функції Date () - повернення поточного дати / часу
* /
document.write (Date ());
</ Script>
</ Body>
</ Html>
Написання коментарів
Коментарі можуть перебувати в будь-якому місці програми і ніяк не впливають на її виконання. Інтерпретатор JavaScript просто ігнорує їх.
однорядкові коментарі починаються з подвійного слеша //
<Script>
alert ( 'Hello'); // Друге повідомлення виводимо окремо
</ Script>
багаторядкові коментарі починаються слешем-зірочкою "/ *" і закінчуються зірочкою-слешем "* /".
Вкладені коментарі не підтримуються! У цьому коді буде помилка:
<Script>
/ *
alert ( 'Привіт'); / * Вкладений коментар?!? * / * /
alert ( 'world');
</ Script>
Структура DOM (Document Object Model) документа HTML і місце Javascript в тілі документа
Рисунок - Структура DOM (Document Object Model) документа HTML
Приклад коду в складі сторінки HTML:
<! DOCTYPE html> <html>
<Body>
<P>
JavaScript може написати прямо в HTML вихідний потік - в тілі документа
</ P>
<Script>
document.write ( "<h1> Це тег для заголовка </ h1>");
document.write ( "<p> Це тег для позначення параграфа </ p>");
</ Script>
<P>
Ви можете використовувати метод <strong> document.write </ strong> в тілі вихідному
HTML.
</ p>
</ Body>
</ Html>
Використання змінних
Залежно від того, для чого ви робите скрипт, знадобиться працювати з інформацією.
Змінна складається з імені та виділеної області пам'яті, яка йому відповідає.
На ім'я змінної накладено два обмеження:
Ім'я може складатися з: букв, цифр, символів $ і _
Перший символ не повинен бути цифрою.
Регістр букв має значення змінні apple і AppLE - Дві різні змінні.
Існує список зарезервованих слів, які не можна використовувати при іменуванні змінних, так як вони використовуються самим мовою, наприклад: var, class, return, implements та ін.
Деякі слова, наприклад, class, Не використовуються в сучасному JavaScript, але вони зайняті на майбутнє. Деякі браузери дозволяють їх використовувати, але це може призвести до помилок.
Для оголошення або, іншими словами, створення змінної використовується ключове слово var:
var message;
Після оголошення, можна записати в змінну дані:
var message;
message = 'Привіт'; // Збережемо в змінної рядок
Ці дані будуть збережені у відповідній області пам'яті і надалі доступні при зверненні на ім’я:
var message;
message = 'Привіт';
alert (message); // Виведе вміст змінної
Для стислості можна поєднати оголошення змінної і запис даних:
var message = 'Привіт';
При зміні значення старе значення змінної видаляється.Змінні в JavaScript можуть зберігати не тільки рядки, а й інші дані, наприклад, числа.
Оголосимо дві змінні, покладемо в одну - рядок, а в іншу - число. Як ви можете бачити, змінної без різниці, що зберігати:
var num = 100500;
var message = 'Привіт';
Значення можна копіювати з однієї змінної в іншу.
var num = 100500;
var message = 'Привіт';
message = num;
значення з num перезаписує поточний в message.
В JavaScript ви можете створити змінну і без var, досить просто присвоїти їй значення:
x = "value"; // Змінна створена, якщо її не було
Технічно, це не викличе помилки, але робити так все-таки не варто.
Завжди визначайте змінні через var. Це хороший тон в програмуванні та допомагає уникнути помилок.
Приклад документа з оголошенням змінних:
<Html>
<Body>
<Div id = "test"> </ div>
<Script>
var test= 5;
alert (test);
</ Script>
</ Body>
</ Html>
Оголошення констант
Константа - Це змінна, яка ніколи не змінюється. Як правило, їх називають великими буквами, через підкреслення. наприклад:
var COLOR_BLUE = "# 00F";
var COLOR_RED = "# 0F0";
var COLOR_GREEN = "# F00";
var COLOR_ORANGE = "# FF7F00";
alert (COLOR_RED); // # 0F0
Технічно, константа є звичайною змінною, тобто її можна змінити. Але ми домовляємося цього не робити.
Константи потрібні для:
По-перше, константа - це зрозуміле ім'я, на відміну від рядка "# FF7F00".
По-друге, помилка в рядку може бути не помічена, а в імені константи її упустити неможливо - буде помилка при виконанні.
Константи використовують замість рядків і чисел, щоб зробити програму більш зрозумілою і уникнути помилок.
Типи даних в JavaScript
число number:
var n = 123;
n = 12.345;
рядок string:
var str = "Мама мила раму";
str = 'Одинарні лапки теж підійдуть';
В JavaScript одинарні та подвійні лапки рівноправні. Можна використовувати або ті чи інші.
Тип символ не існує, є тільки рядок
У деяких мовах програмування є спеціальний тип даних для одного символу. Наприклад, в мові С це char. В JavaScript є тільки тип «рядок» string. що, треба сказати, цілком зручно.
Булевий (логічний) тип boolean. У нього всього два значення -true (Істина) і false (Брехня).
Як правило, такий тип використовується для зберігання значення типу так / ні, наприклад:
var checked = true; // Поле форми позначено галочкою
checked = false; // Поле форми не містить галочки
null - спеціальне значення. Воно має сенс «Нічого». значення null не відноситься до жодного з типів вище, а утворює свій окремий тип, що складається з одного значення null:
var age = null;
В JavaScript null не є «посиланням на неіснуючий об'єкт» або «нульовим покажчиком», як в деяких інших мовах. Це просто спеціальне значення, яке має сенс «нічого» або «значення невідомо».
Зокрема, код вище говорить про те, що вік age невідомий.
undefined - спеціальне значення, яке, як і null, утворює свій власний тип. Воно має сенс «значення не присвоєно».
Якщо змінна оголошена, але в неї нічого не записано, то її значення як раз і є undefined:
var u;
alert (u); // Виведе "undefined"
можна привласнити undefined і в явному вигляді, хоча це робиться рідко:
var x = 123;
x = undefined;
У явному вигляді undefined зазвичай не присвоюють, так як це суперечить його змістом. Для запису в змінну «порожнього значення» використовується null.
Об'єкти object
Перші 5 типів називають "примітивними".
Окремо стоїть шостий тип: «об'єкти». До нього відносяться, наприклад, дати, він використовується для колекцій даних і для багато чого іншого.
Приклад оголошення змінних і їх використання:
<! DOCTYPE html> <html>
<Body>
<Script>
var pi = 3.14;
var name = "John Doe"; var answer = 'Yes I am!';
document.write (pi + "<br>");
document.write (name + "<br>");
document.write (answer + "<br>");
</ Script>
</ Body>
</ Html>
Приклад використання кнопок на сторінці:
<! DOCTYPE html> <html>
<Body>
<P> Натисніть кнопку для оголошення змінної і виведення результату. </ P>
<Button onclick = "myFunction ()"> Try it </ button>
<P id = "demo"> Текст, позначений міткою demo </ p>
<Script>
// Оголошуємо функцію, яку буде викликати кнопка за методом onclick function myFunction ()
{
// Оголошуємо змінну строкову var carname = "Volvo";
/ *
document.getElementById - метод об'єкта document. Він повертає посилання на вузол документа, яку можна використовувати для зміни властивостей і звернення до методів вузла.
* /
// Метод getElementById, який одержує дані з тега по мітці demo Властивість innerHTML встановлює або отримує всю розмітку і зміст всередині даного елемента.
document.getElementById ( "demo"). innerHTML = carname;
}
</ Script>
</ Body>
</ Html>
Приклад на Undefined and Null:
<! DOCTYPE html> <html>
<Body>
<Script> var person;
var car = "Volvo";
// document.write- метод, виводить на сторінку передані йому аргументи
document.write (person + "<br>"); document.write (car + "<br>"); var car = null
document.write (car + "<br>"); </ Script>
</ Body>
</ Html>
Приклад створює об'єкт з назвою "person" і додає 4 властивості об'єкту:
<! DOCTYPE html> <html>
<Body>
<Script>
var person = new Object ();
person.firstname = "John";
person.lastname = "Doe";
person.age = 50;
person.eyecolor = "blue";
document.write (person.firstname + "is" + person.age + "years old."); </ Script>
</ Body>
</ Html>
Основні оператори
Для роботи зі змінними, зі значеннями, JavaScript підтримує всі стандартні оператори, більшість яких є і в інших мовах програмування.