Виконання коду JavaScript

Коли браузер отримує веб-сторінку з кодом 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>

Посібник по JavaScript

Виконання коду JavaScript

Основи синтаксису javascript

Коментарі