1 Створення та запуск програми мовою JavaScript.

Використання браузерних
інструментів розробника для відлагодження.

1.1 Методичні вказівки з організації самостійної роботи студентів

Для підготовки до лабораторної роботи необхідно повторити лекційний
матеріал й ознайомитися з рекомендованою літературою. Слід звернути увагу на
наступні питання: створення простих програм мовою JavaScript, покрокове
відлагодження програми, прості типи даних і управляючі конструкції.

1.1.1 Створення та запуск програми мовою JavaScript

Створення простої програми на JavaScript виконується в такій послідовності:
1. Відкрити будь-який текстовий редактор. Зручно використовувати редактор
NotePad++ (рис. 1.1). У цьому редакторі є підсвічування синтаксичних елементів
програм для різних мов програмування, є ряд інших зручних функцій.
Написати в новому документі текст програми, наприклад такий:
<script>
a= parseInt(prompt("Введите число a",1));
b= parseInt(prompt("Введите число b",2));
if (a>b) alert(b);
else alert (a);
</script>
У програмі здійснюється введення двох чисел та виведення меншого з них.

Рисунок 1.1- Вивід результату роботи програми

2. Зберегти файл з текстом програми, надавши йому ім'я, наприклад, first.html.

Зберігати файл слід в доступний для використання каталог (наприклад, с:/temp або в
свою бригаду на бригадному диску).
3. Для виконання програми слід відкрити створений файл в будь-якому
браузері. Якщо текст написаний правильно, то програма почне виконуватися.
Спочатку з'явиться віконце для введення значення змінної а (на рис.1.2 показано
виконання програми в Google Chrome).

Рисунок 1.2- Введення числа

Після введення першого числа та натискання на кнопку ОК з'явиться друге

вікно для введення значення змінної b. Після введення змінної b з'явиться вікно з
результатом програми (рисунок 1.3) . Для повторного запуску програми в браузері

досить оновити сторінку, натиснувши кнопку або кнопку на клавіатурі F5.

Рисунок 1.3- Вивід результату роботи програми

1.2.2. Покрокове виконання програми в браузері

Під час роботи програми її оператори виконуються один за другим зі
швидкістю роботи процесора комп’ютера. При цьому не можна визначити, яка саме
інструкція виконується у даний момент часу і проконтролювати відповідність
реального порядку виконання інструкцій розробленому алгоритму. Для
відлагодження програми зручно використовувати трасування програми. Трасування
– це процес виконання програми по крокам, оператор за оператором. Під час
трасування програміст дає команду: виконати черговий оператор програми.
Відладка в браузерах виконується за допомогою інструментів розробника.
Розглянемо налагодження в Google Chrome. У вашій версії Chrome панель може
виглядати дещо по-іншому, але що де знаходиться, має бути зрозуміло.
1. Спочатку потрібно запустити програму в браузері.
2. Далі слід відкрити інструменти розробника, використовуючи кнопку F12
або вибравши в меню Додаткові інструменти / Інструменти розробника.
Можуть бути доступні інші поєднання клавіш (наприклад, CTRL+SHIFFT+I).
Відкриється вікно інструментів розробки Google Chrome.
Виберемо в ньому вкладку Sources та відкриємо текст програми, клацнувши
двічі на імені файлу (рисунок 1.4).
3. Для того, щоб почати трасування, необхідно поставити точки зупинки, на
яких програма зупинить свою роботу та буде очікувати ваших дій. Щоб поставити
точки зупинки, можна клацнути в зоні тексту програми на номері відповідного
рядка. Слід розставити точки зупинки на всіх рядках програми, крім перших рядків
введення чисел (рисунок 1.5).
 Рисунок 1.4 – Вкладка Sources з відкритим вихідним кодом

5. Щоб активувати відладчик JavaScript слід перезавантажити сторінку

натиснувши кнопку або кнопку на клавіатурі F5.

При цьому буде здійснено введення чисел та виконання програми зупиниться
на 4 рядку (рис.1.6).
Перейти до виконання наступного рядка можна за допомогою однієї з команд,
які вказані в таблиці 1.1. Наприклад, можна використовувати F8.
 Рисунок 1.5 – Точки зупинки програми

Рисунок 1.6 - Зупинка програми

Таблиця 1.1 - Команди меню покрокової відладки у Google Chrome
Кнопка Клавіша Опис
 F8 Продовжує виконання скрипта з поточного моменту в
звичайному режимі. Якщо скрипт не зустріне нових точок
зупинки, то в відладчик управління більше не
повернеться
F10 Виконує одну команду скрипта. Якщо в ній є виклик
функції - то відладчик обходить його стороною, тобто не
переходить на код всередині.
Ця кнопка дуже зручна, якщо в поточному рядку
викликається функція JS-фреймворка або якась інша, яка
зовсім не цікавить.
F11 Виконує одну команду скрипта і переходить до
наступної. Якщо є вкладений виклик, то заходить
всередину функції.
Ця кнопка дозволяє докладно пройтися по черзі по
командам скрипта.
Shift+F11 Виконує команди до завершення поточної функції.
Ця кнопка дуже зручна в разі, якщо ненавмисно
увійшли у вкладений виклик, який не цікавий - щоб
швидко з нього вийти.

6. У процесі відлагодження програми мало тільки перегляду послідовності

виконання програми, слід ще вміти перевіряти значення змінних на кожному кроці.
Зробити це можна, помістивши потрібні змінні розділ Watch. Для цього натискаємо
на плюс в цьому розділі, пишемо потрібне ім'я змінної або вираз, потім натискаємо
Enter. Крім того, можна навести курсор мишки на змінну в коді програми і
побачити її значення
7. Правий клік на номер рядка (під час відладки) відкриває контекстне меню, в
якому можна запустити виконання коду до неї (Continue to here). Це зручно, коли
хочеться відразу перейти вперед без точки зупинки.