Коли браузер отримує веб-сторінку з кодом html і javascript, то він її інтерпретує. Результат інтерпретації у вигляді різних елементів - кнопок, полів введення, текстових блоків тощо, ми бачимо перед собою в браузері. Інтерпретація веб-сторінки відбувається послідовно зверху вниз.
Коли браузер зустрічає на веб-сторінці елемент <script> з кодом javascript, то вступає в дію вбудований інтерпретатор javascript. І поки він не закінчить свою роботу, далі інтерпретація веб-сторінки не йде.
Розглянемо невеликий приклад і для цього змінимо сторінку index.html з минулої теми таким чином:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ITshnyk</title>
<script>
document.write("Початковий текст");
</script>
</head>
<body>
<h2>Перший заголовок</h2>
<script>
document.write("Перший текст");
</script>
<h2>Другий заголовок</h2>
<script>
document.write("Другий текст");
</script>
</body>
</html>
Тут три вставки коду javascript - один у секції <head> і по одному після кожного заголовка.
Відкриємо веб-сторінку в браузері і ми побачимо, що браузер послідовно виконує код веб-сторінки:
Тут ми бачимо, що спочатку виконується код javascript із секції head, який виводить на веб-сторінку деякий текст:
document.write("Початковий текст");
Далі виводиться перший стандартний html-елемент <h2>:
<h2>Перший заголовок</h2>
Після цього виконується друга вставка коду на javascript:
document.write("Перший текст");
Потім виводиться другий html-елемент <h2>:
<h2>Другий заголовок</h2>
І наприкінці виконується остання вставка коду на javascript:
document.write("Другий текст");
Після цього браузер закінчить інтерпретацію веб-сторінки, і веб-сторінка виявиться повністю завантаженою. Цей момент дуже важливий, оскільки може впливати на продуктивність. Тому нерідко вставки коду javascript йдуть перед закриваючим тегом </body>, коли основна частина веб-сторінки вже завантажена в браузері.
Основи синтаксису javascript
Перш ніж переходити до детального вивчення основ мови програмування javascript, розглянемо деякі базові моменти її синтаксису.
Код javascript складається з інструкцій. Кожна інструкція представляє деяку дію. І для відокремлення інструкцій одна від одної в javascript після інструкції ставиться крапка з комою:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ITshnyk</title>
</head>
<body>
<script>
document.write("2 + 5 = "); var sum = 2 + 5; document.write(sum);
</script>
</body>
</html>
Тут у коді javascript визначено три інструкції:
document.write("2 + 5 = ")
Виводить на сторінку текст "2 + 5 = "
var sum = 2 + 5;
За допомогою оператора var визначає змінну sum, яка дорівнює сумі 2 + 5
document.write(sum);
Виводить на сторінку значення змінної sum (тобто суму 2 + 5)
Однак сучасні браузери цілком можуть розрізняти окремі інструкції, якщо вони просто розташовуються на окремих рядках без крапки коми:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ITshnyk</title>
</head>
<body>
<script>
document.write("2 + 5 = ")
var sum = 2 + 5
document.write(sum)
</script>
</body>
</html>
Але щоб поліпшити читабельність коду і знизити кількість можливих помилок, рекомендується визначати кожну інструкцію javascript на окремому рядку і завершувати її крапкою з комою, як у першому варіанті.
Коментарі
У коді javascript можуть використовуватися коментарі. Коментарі не обробляються інтерпретатором javascript і ніяк не враховуються в роботі програми. Вони призначені для орієнтації по коду, щоб вказати, що робить той чи інший код.
Коментарі можуть бути однорядковими, для яких використовується подвійний слеш:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ITshnyk</title>
</head>
<body>
<script>
// виводимо повідомлення
document.write("2 + 5 = ")
// оголошуємо змінну і присвоюємо їй суму чисел 2 і 5
var sum = 2 + 5
// виводимо значення змінної sum
document.write(sum)
</script>
</body>
</html>
Крім однорядкових коментарів можуть використовуватися й багаторядкові. Такі коментарі укладаються між символами /*текст коментаря*/. Наприклад:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ITshnyk</title>
</head>
<body>
<script>
/* Приклад арифметичної операції
і визначення змінної
в коді JavaScript */
document.write("2 + 5 = ")
var sum = 2 + 5
document.write(sum)
</script>
</body>
</html>