034.1 Урок 1
Сертифікат: |
Основи веброзробки |
---|---|
Версія: |
1.0 |
Розділ: |
034 JavaScript-програмування |
Тема: |
034.1 JavaScript виконання та синтаксис |
Урок: |
1 з 1 |
Вступ
Вебсторінки розробляються за допомогою трьох стандартних технологій: HTML, CSS і JavaScript. JavaScript – це мова програмування, яка дозволяє браузеру динамічно оновлювати вміст вебсайту. JavaScript зазвичай виконується тим же браузером, що використовується для перегляду вебсторінки. Це означає, що, подібно до CSS і HTML, точна поведінка будь-якого коду, який ви пишете, може відрізнятися в різних браузерах. Але більшість поширених браузерів дотримуються https://en.wikipedia.org/wiki/ECMAScript [специфікації ECMAScript]. Цей стандарт, який уніфікує використання JavaScript в Інтернеті, і буде основою для цього уроку, разом із HTML5 специфікацією, яка визначає, як саме JavaScript має бути розміщений на вебсторінці, щоб браузер міг його виконати.
Запуск JavaScript у браузері
Щоб виконати JavaScript, браузеру потрібно отримати код або безпосередньо, як частину HTML, що складає вебсторінку, або як URL-адресу, що вказує місце розташування сценарію, який має бути виконаний.
У наступному прикладі показано, як включити код безпосередньо до файлу HTML:
<html>
<head>
</head>
<body>
<h1>Заголовок вебсайту</h1>
<p>Контент</p>
<script>
console.log('test');
</script>
</body>
</html>
Код міститься між тегами <script>
і </script>
. Усе, що включено до цих тегів, буде виконуватися браузером безпосередньо під час завантаження сторінки.
Позиція елемента <script>
на сторінці визначає, коли він буде виконаний. HTML-документ аналізується зверху вниз, при цьому браузер вирішує, коли відображати елементи на екрані. У вище показаному прикладі теги <h1>
і <p>
вебсайту аналізуються та, ймовірно, відображаються перед запуском сценарію. Якби код JavaScript у тегу <script>
виконувався дуже довго, сторінка все одно відображалася б без проблем. Однак, якби сценарій був розміщений над іншими тегами, відвідувач вебсторінки мав би зачекати, поки завершиться виконання сценарію, перш ніж побачити сторінку. Із цієї причини теги <script>
зазвичай розміщуються в одному з двох місць:
-
У самому кінці тіла HTML, так що сценарій виконується останнім. Робіть це, коли код додає на сторінку щось таке, що не було б корисним без вмісту. Прикладом може бути додавання функціональності до кнопки, оскільки кнопка має існувати, щоб функціональність мала сенс.
-
Усередині
<head>
елемента HTML. Це гарантує, що сценарій буде виконано до розбору тіла HTML. Якщо ви хочете змінити поведінку завантаження сторінки або щось, що потрібно виконати, поки сторінка ще не повністю завантажена, ви можете розмістити сценарій тут. Крім того, якщо у вас є кілька сценаріїв, які залежать від певного сценарію, ви можете розмістити цей спільний сценарій у заголовку, щоб переконатися, що він виконується до інших сценаріїв.
З різних причин, включаючи керованість, корисно помістити код JavaScript в окремі файли, які існують за межами вашого HTML-коду. Зовнішні файли JavaScript додаються за допомогою тегу <script>
з атрибутом src
, як показано нижче:
<html>
<head>
<script src="/button-interaction.js"></script>
</head>
<body>
</body>
</html>
Тег src
повідомляє браузеру місцезнаходження джерела, тобто файлу, що містить код JavaScript. Розташуванням може бути файл на тому самому сервері, як у прикладі вище, або будь-яка вебдоступна URL-адреса, наприклад, https://www.lpi.org/example.js
. Значення атрибута src
відповідає тій самій конвенції, що й імпорт файлів CSS або зображень, оскільки воно може бути відносним чи абсолютним. Побачивши тег сценарію з атрибутом src
, браузер спробує отримати вихідний файл за допомогою HTTP-запиту GET
, тому зовнішні файли повинні бути доступні.
Коли ви використовуєте атрибут src
, будь-який код або текст, розміщений між тегами <script>…</script>
, ігнорується відповідно до специфікації HTML.
<html>
<head>
<script src="/button-interaction.js">
console.log("test"); // <-- Це буде проігнороване
</script>
</head>
<body>
</body>
</html>
Існують інші атрибути, які ви можете додати до тегу script
, щоб додатково вказати, як браузер повинен отримати файли, і як він повинен обробляти їх потім. У наступному списку детально описано найбільш важливі атрибути:
async
-
Може використовуватися в тегах
script
і дає вказівку браузеру отримати сценарій у фоновому режимі, щоб не блокувати процес завантаження сторінки. Завантаження сторінки все одно буде перервано після того, як браузер отримає сценарій, оскільки браузер має його проаналізувати, що робиться відразу після повного отримання сценарію. Цей атрибут є логічним, тому запис тегу на кшталт<script async src="/script.js"></script>
є достатнім і не потрібно надавати значення. defer
-
Подібно до
async
, він вказує браузеру не блокувати процес завантаження сторінки під час отримання сценарію. Але крім того, браузер відкладе розбір сценарію. Браузер буде чекати, поки весь HTML-документ буде розібрано, а потім проаналізує сценарій, перш ніж оголосити, що документ повністю завантажений. Як іasync
,defer
є логічним атрибутом і використовується таким самим чином. Оскількиdefer
передбачаєasync
, не варто вказувати обидва теги разом.NoteКоли сторінка повністю проаналізована, браузер вказує, що вона готова до відображення, ініціюючи подію
DOMContentLoaded
. Ця подія дозволяє відвідувачу побачити документ. Таким чином, JavaScript, включений до події<head>
, завжди має шанс діяти на сторінці до її відображення, навіть якщо ви включите атрибутdefer
. type
-
Позначає, який тип сценарію браузер повинен очікувати у тегу. За замовчуванням це JavaScript (
type="application/javascript"
), тому цей атрибут не потрібен, якщо включати код JavaScript або вказувати на ресурс JavaScript, використовуючи тегsrc
. Як правило, можна вказати всі типи MIME, але лише сценарії, які позначаються як JavaScript, будуть виконуватися браузером. Є два реалістичні варіанти використання цього атрибута: вказувати браузеру не виконувати сценарій, встановлюючи дляtype
довільне значення, наприклад,template
абоother
, або повідомляючи браузеру, що сценарій є модулем ES6. У цьому уроці ми не розглядаємо модулі ES6.
Warning
|
Якщо кілька сценаріїв мають атрибут |
Консоль браузера
Хоча зазвичай JavaScript виконується як частина вебсайту, існує інший спосіб виконання JavaScript: через консоль браузера. Усі сучасні браузери настільних ПК забезпечують меню, за допомогою якого можна виконувати код JavaScript у JavaScript-двигуні браузера. Зазвичай це робиться для тестування нового коду або для відлагодження існуючих вебсайтів.
Існує кілька способів отримати доступ до консолі браузера, залежно від браузера. Найпростіший спосіб – за допомогою комбінацій клавіш. Нижче наведено комбінації клавіш для деяких браузерів, які зараз використовуються:
- Chrome
-
Ctrl+Shift+J (Cmd+Option+J на Mac)
- Firefox
-
Ctrl+Shift+K (Cmd+Option+K на Mac)
- Safari
-
Ctrl+Shift+? (Cmd+Option+? на Mac)
Ви також можете клацнути правою кнопкою миші на вебсторінці та вибрати параметр “Inspect” або “Inspect Element”, щоб відкрити інспектор, який є іншим інструментом браузера. Коли інспектор відкриється, з’явиться нова панель. На цій панелі ви зможете вибрати вкладку “Console”, на якій відкриється консоль браузера.
Після того, як ви відкрили консоль, ви зможете виконати JavaScript на сторінці, ввівши JavaScript безпосередньо до поля введення. Результат будь-якого виконаного коду буде показаний в окремому рядку.
Оператори JavaScript
Тепер, коли ми знаємо, як почати виконувати сценарій, ми розглянемо основи того, як насправді виконується сценарій. Сценарій JavaScript – це набір операторів і блоків. Прикладом оператора є console.log('test')
. Ця інструкція вказує браузеру вивести слово test
на консоль браузера.
Кожен оператор JavaScript закінчується крапкою з комою (;
). Це повідомляє браузеру, що оператор виконано і можна запустити новий. Розглянемо наступний сценарій:
var message = "test"; console.log(message);
Ми написали два оператори. Кожен оператор закінчується або крапкою з комою, або кінцем сценарію. Для зручності читання ми можемо розмістити кожен оператор в окремому рядку. Таким чином, сценарій також можна записати так:
var message = "test";
console.log(message);
Це можливо, тому що всі пропуски між операторами, наприклад пробіл, новий рядок або табуляція, ігноруються. Пропуски також часто можна розміщувати між окремими ключовими словами в операторах, але це буде докладніше пояснено в наступному уроці. Оператори також можуть бути порожніми або складатися лише з пропусків.
Якщо оператор є недійсним, оскільки не має закінчення крапки з комою, ECMAScript намагається автоматично вставити відповідні крапки з комою, базуючись на складному наборі правил. Найважливіше правило: якщо недійсний оператор складається з двох дійсних операторів, розділених новим рядком, вставте крапку з комою на новому рядку. Наприклад, наступний код не утворює дійсний оператор:
console.log("hello")
console.log("world")
Але сучасний браузер автоматично виконуватиме його так, ніби він був написаний з правильно розставленими крапками з комою:
console.log("hello");
console.log("world");
Таким чином, у деяких випадках можна опускати крапку з комою. Однак, оскільки правила автоматичної вставки крапки з комою є складними, ми радимо вам завжди правильно завершувати свої оператори, щоб уникнути небажаних помилок.
Коментування в JavaScript
Великі сценарії можуть бути досить складними. Ви можете прокоментувати те, що ви пишете, щоб зробити читання сценарію легшим для інших людей або для себе в майбутньому. Крім того, ви можете включити в сценарій метаінформацію, наприклад інформацію про авторські права або інформацію про те, коли сценарій був написаний і для чого.
Щоб зробити можливим включення такої метаінформації, JavaScript підтримує коментарі. Розробник може включити в скрипт спеціальні символи, які позначають певні його частини як коментар, який буде пропущено під час виконання. Нижче наведена версія сценарію, який ми бачили раніше, але з великими коментарями.
/*
Цей сценарій був написаний автором даного уроку в травні 2020 року.
Він має такий самий ефект, як і попередній сценарій, але містить коментарі.
*/
// Спочатку ми визначаємо повідомлення.
var message = "test";
console.log(message); // Потім ми виводимо повідомлення на консоль.
Коментарі не є операторами і не повинні закінчуватися крапкою з комою. Натомість вони дотримуються власних правил завершення, залежно від способу написання коментаря. Є два способи написання коментарів у JavaScript:
- Багаторядковий коментар
-
Використовуйте
/*
та*/
, щоб позначити початок і кінець багаторядкового коментаря. Усе після/*
, доки вперше не трапляється*/
, ігнорується. Цей тип коментаря зазвичай використовується для охоплення кількох рядків, але його також можна використовувати для окремих рядків або навіть всередині рядка, наприклад:console.log(/* що ми хочемо записати до журналу: */ "hello world")
Оскільки метою коментарів, як правило, є підвищення читабельності сценарію, вам слід уникати використання цього стилю коментарів всередині рядка.
- Однорядковий коментар
-
Використовуйте
//
(дві скісні риски), щоб закоментувати рядок. Усе після подвійної скісної риски в тому ж рядку ігнорується. У прикладі, показаному раніше, цей шаблон спочатку використовується для коментування цілого рядка. Після оператораconsole.log(message);
він використовується для написання коментаря до решти рядка.
Загалом, однорядкові коментарі слід використовувати для окремих рядків, а багаторядкові коментарі – для кількох рядків, навіть якщо їх можна використовувати іншими способами. Слід уникати коментарів в операторі.
Коментарі також можна використовувати для тимчасового видалення рядків фактичного коду, як показано нижче:
// Ми тимчасово хочемо використовувати інше повідомлення
// var message = "test";
var message = "something else";
Вправи до посібника
-
Створіть змінну під назвою
ColorName
і призначте їй значенняRED
. -
Які з наведених нижче скриптів є дійсними?
console.log("hello") console.log("world");
console.log("hello"); console.log("world");
// console.log("hello") console.log("world");
console.log("hello"); console.log("world") //;
console.log("hello"); /* console.log("world") */
Дослідницькі вправи
-
Скільки операторів JavaScript можна записати в одному рядку без використання крапки з комою?
-
Створіть дві змінні з іменами
x
таy
, а потім виведіть їх суму на консоль.
Підсумки
У цьому уроці ми дізналися про різні способи виконання JavaScript та як змінити поведінку завантаження сценарію. Ми також вивчили основні концепції складання сценарію та коментування, а також навчилися використовувати команду console.log()
.
HTML, який використовувався у цьому уроці:
- <script>
-
Тег
script
може бути використаний для включення JavaScript безпосередньо або зазначивши файл з атрибутомsrc
. Змініть спосіб завантаження сценарію за допомогою атрибутівasync
таdefer
.
Концепції JavaScript, представлені у цьому уроці:
;
-
Для розділення операторів використовується крапка з комою. Іноді крапку з комою можна (але можливо не слід) опускати.
//
,/*…*/
-
Коментування можна використовувати для додавання коментарів або метаінформації до файлу сценарію або для запобігання виконання операторів.
console.log("text")
-
Команду
console.log()
можна використовувати для виведення тексту на консоль браузера.
Відповіді до вправ посібника
-
Створіть змінну під назвою
ColorName
і призначте їй значенняRED
.var ColorName = "RED";
-
Які з наведених нижче скриптів є дійсними?
console.log("hello") console.log("world");
Недійсний: Перша команда
console.log()
не завершується належним чином, і рядок в цілому не утворює дійсний оператор.console.log("hello"); console.log("world");
Дійсний: Кожен оператор завершується належним чином.
// console.log("hello") console.log("world");
Дійсний: Весь код ігнорується, оскільки це коментар.
console.log("hello"); console.log("world") //;
Недійсний: В останньому операторі відсутня крапка з комою. Крапка з комою в самому кінці ігнорується, оскільки закоментована.
console.log("hello"); /* console.log("world") */
Дійсний: За дійсним оператором слідує закоментований код, який ігнорується.
Відповіді до дослідницьких вправ
-
Скільки операторів JavaScript можна записати в одному рядку без використання крапки з комою?
Якщо ми знаходимося в кінці сценарію, ми можемо записати один оператор, і він буде завершений до кінця файлу. Інакше ви не можете написати оператор без крапки з комою за синтаксисом, який ви вже вивчили.
-
Створіть дві змінні з іменами
x
таy
, а потім виведіть їх суму на консоль.var x = 5; var y = 10; console.log(x+y);