Назад Вперед Зміст

IDE (Інтегроване середовище розробки)

Термін IDE (Інтегроване середовище розробки) означає потужний редактор з багатьма можливостями, що зазвичай працює з “цілим проектом”. Як зрозуміло з назви, це не тільки редактор коду, а повноцінне “середовище розробки”.

IDE завантажує проект (який може мати багато файлів), дозволяє переключатися між файлами, надає можливість автозаповнення, яке базується на цілому проекті (не лише на відкритому файлі), інтегрується із системою контролю версій (наприклад, git), надає можливість розгортання вашого проекту на тестове середовище та багато інших функцій “на рівні проекту”.

Варіанти IDE:

  1. Visual Studio Code (багатоплатформний, безкоштовний).
  2. WebStorm (багатоплатформний, платний).
  3. Для Windows, також може бути “Visual Studio”, не плутайте з “Visual Studio Code”. “Visual Studio” – потужний платний редактор, який працює лише на Windows, добре підходить для програмування на платформі .NET. Також хороший для програмування на JavaScript. Також існує його безкоштовна версія: Visual Studio Community.

“Легкі редактори” не такі потужні, як IDE, проте вони прості, доступні і швидко запускаються.Їх зазвичай використовують, щоб швидко відкрити і відредагувати один або декілька файлів.

  1. Atom (багатоплатформний, безкоштовний).
  2. Sublime Text (багатоплатформний, безкоштовний на час випробувального терміну).
  3. Notepad++ (Windows, безкоштовний).

Подключення до сторінки

Програми JavaScript можна вставити у будь-яку частину HTML документа, використовуючи тег <script>.Опишем несколько способов размещения кода JavaScript на странице:

Як правило, тільки найпростіші скрипти поміщаються безпосередньо в HTML. Більш складні знаходяться в окремих файлах.

Перевага окремого файлу полягає в тому, що браузер завантажує його та зберігає у своєму кеші.

Інші сторінки, які посилаються на один і той самий скрипт, замість того, щоб завантажувати повторно, будуть брати його з кешу, тому файл буде завантажено лише один раз.

  1. В теговому контейнері <BODY>...</BODY> перед </BODY> або в теговому контейнері <HEAD>...</HEAD> - якщо код скріпта представляє собою функцію, яка викликається у відповідь на якусь подію.

  2. у зовнішньому файлі. За аналогією з тим, як стилі підключаються до станиці за допомогою елемента link, сценарії підключаються за допомогою елемента script в заголовку

  3. У тілі сторінки перед </BODY>.Причиною, за якою ми поставили елемент <script>в нижній частині HTML файлу, є те, що HTML-елементи завантажуються браузером у тому порядку, в якому вони розміщені у файлі. Тому, якщо JavaScript завантажується першим і йому потрібно взаємодіяти з HTML нижче за нього, він не зможе працювати, оскільки JavaScript буде завантажений раніше, ніж HTML, з яким потрібно працювати. Тому, розташовувати JavaScript у нижній частині HTML сторінки вважається найкращою стратегією.

    , тільки файл має розширення не .css, а .js.

Виконання операторів сценарію

Існує кілька способів визначення моменту запуску сценарію. Ось деякі з них:

  1. При завантаженні документа;
  2. Відразу після завантаження документа;
  3. У відповідь на дії користувача.

Найчастіше ми користуватимемося третім способом.

Налагодження скрипту

Налагодження – це процес пошуку та виправлення помилок у скрипті. Всі сучасні браузери та більшість інших середовищ розробки підтримують інструменти для налагодження – спеціальний графічний інтерфейс, який спрощує налагодження. Він також дозволяє кроками відстежити, що саме відбувається в нашому коді.

Використовуватимемо браузер Chrome, тому що у нього достатньо можливостей, в більшості інших браузерів процес буде схожим.

Увійдемо до інструментів розробника:

Інтерфейс складається з трьох зон:

  1. У зоні Resources (Ресурси) показані файли HTML, JavaScript, CSS, включаючи зображення, які використовуються на сторінці. Тут також можуть бути файли різних розширень Chrome.
  2. Зона Source показує вихідний код.
  3. Зона Information and control (Відомості та контроль) відведена для налагодження.

Щоб приховати список ресурсів та звільнити екранне місце для вихідного коду, клацніть по тому ж таки перемикачу стрілка.

Панель "Вихідний код" ("Sources")

Помилка синтаксису.

Синтаксис виправлено, налагодження виконання

  1. Watch показує поточні значення виразів. Натисніть + і введіть вираз. У процесі виконання відладчик автоматично перераховує та виводить його значення.

  2. Call Stack показує послідовність викликів функцій.

    У нашому прикладі відладчик працює з функцією hello (), викликаною скриптом з файлу index.html (там немає функції, тому виклик "анонімний").

    При натисненні на елемент списку (наприклад, на "anonymous") відладчик переходить до відповідного коду, і нам трапляється нагода його проаналізувати.

  3. Scope показує поточні змінні.

  4. У Local відображаються локальні змінні функцій, а їх значення підсвічуються в початковому коді.

  5. У Global перераховуються глобальні змінні (тобто оголошені за межами функцій).

Давайте розберемося, як працює код нашої сторінки. У файлі fontColor.html клацнемо по рядку номер 7, саме по самій цифрі, не за кодом.Поставлена точка останову. А тепер клацнемо по цифрі 12, номер рядка буде забарвлений в синій колір.

Ось що у результаті ми повинні отримати:

Точка останову - це ділянка коду, де відладчик автоматично призупинить виконання JavaScript.

Поки виконання поставлене "на паузу", ми можемо проглянути поточні значення змінних, виконати команди в консолі, одним словом, ми виконуємо відладку коду.

У правій частині графічного інтерфейсу ми бачимо список точок останову. А коли таких точок виставлені багато, та ще і в різних файлах, цей список допоможе ефективно ними управляти:

Швидко переміститися до будь-якої точки останову в коді – треба клацнути по точці в правій частині екрану. Тимчасово деактивувати точку - в загальному списку зніміть галочку навпроти непотрібної в даний момент точки. Видалити точку - клацніть по ній правою кнопкою миші і виберіть Remove (Видалити). .і так далі.

Покрокове виконання скрипта

  1. Швидка клавіша - F8.Поновлює виконання коду. Якщо більше немає точок останову, відладчик припиняє роботу і дозволяє додатку працювати далі.

  2. Швидка клавіша - F10, зробити крок (виконати наступну команду), не заходячи у функцію.

  3. Швидка клавіша - F11, зробити крок, тут ми "заходимо" у вкладені функції і крок за кроком проходимо по скрипту.

  4. Швидка клавіша - Shift F11, продовжити виконання до завершення поточної функції.

Назад Вперед Зміст