Необхідні інструменти
Для взаємодії з JavaScript, не потрібно спеціального програмного забезпечення, нам достатньо звичайного текстового редактора та браузера. Але для зручності, рекомендую встановити один з популярних (безкоштовних або умовно безкоштовних) редакторів коду:
- Atom
- Brackets
- Sublime Text
- Visual Studio Code (використовую саме його)
та браузер Google Chrome із зручним Developer Tools (інструментом розробника), хоча ви можете використовувати, цей браузер який вам більше до вподоби. Також, припускаю, що ви володієте базовими знаннями з HTML та СSS.
Для запуску JS є і інші методи запуску, але цей найпростіший.
Створюємо проект
Створюємо папку з назвою проекту, наприклад “basicJS” та відкриваємо у редакторі коду. Створюємо файл index.html з базовою структурою (для цього використовую плагін Emmet), ввожу “!” та натискаю “tab”, додаємо заголовок першого рівня із класичним “Hello, world”, та відкриваємо файл в браузері.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>basicJS</title>
</head>
<body>
<h1>Hello, world</h1>
</body>
</html>Результат:
Тепер потрібно створити файл із розширенням .js, де будемо писати скрипти.
Хоча, можна вставляти javascript код, одразу на сторінку, розмістивши його наприклад в секції head документа, використавши тег <script> , проте ми одразу будемо писати javascript в окремому файлі, наприклад main.js та підключимо його за допомогою відомого нам тегу <script> із атрибутом src, де вкажемо розташування нашого js файлу. Атрибут type="text/javascript", писати вже не обов’язково. Підключаємо скрипт перед закриваючим тегом <body> (для оптимізація швидкості завантаження сторінки).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>basicJS</title>
</head>
<body>
<h1>Hello, world</h1>
<script src="main.js"></script>
</body>
</html>Для тесту, розмістимо функцію alert() у файлі main.js, яка застосовується для виводу у вікні браузера, невеликого модального вікна з повідомлення. Для прикладу виведемо вікно із привітанням “Hello”.
alert('Hello');Результат:
Дана функція відобразить вікно в браузері і призупинить подальше виконання скриптів до тих пір, поки користувач не натисне кнопку «OK».
На сьогодні все. Далі поговоримо про створення змінних (varibles) в JavaScript.
