Взаємодія JS та HTML, JS в окремих файлах та модульність

Зв'язок між HTML і JavaScript має декілька основних методів:

1) Отримання елементів:
За допомогою document.getElementById('id') можна отримати елемент за його ідентифікатором.
За допомогою document.getElementsByClassName('class') можна отримати елементи за їх класом.

2) Створення та видалення елементів:
За допомогою document.createElement('tag') можна створити новий елемент.
За допомогою parentElement.appendChild(childElement) можна додати створений елемент як дочірній елемент до батьківського елемента.
За допомогою parentElement.removeChild(childElement) можна видалити дочірній елемент з батьківського елемента.

3) .innerText і .innerHTML:
Властивість .innerText дозволяє змінювати або отримувати текстовий вміст елементів.
Властивість .innerHTML дозволяє змінювати або отримувати HTML вміст елементів.

4) Використання onclick:
Додавання обробника події onclick до HTML елементів дозволяє виконувати дії при натисканні на них.

1. Отримання елементів

JavaScript може взаємодіяти з елементами на веб-сторінці (наприклад, кнопками чи текстами). Ось як це зробити:
Отримати елемент за ID: Якщо у тебе є елемент з атрибутом id, можна отримати доступ до нього за допомогою document.getElementById('id').
Наприклад:

<div id="myDiv">Текст тут</div>

let myDiv = document.getElementById('myDiv');
console.log(myDiv.innerText); // Виведе "Текст тут"  

Отримати елементи за класом: За допомогою document.getElementsByClassName('class') можна отримати всі елементи з певним класом:

<button class="myButton">Натисни мене!</button>

let buttons = document.getElementsByClassName('myButton');
console.log(buttons.length); // Виведе кількість елементів з класом "myButton"

2. Створення і видалення елементів<//span>

JavaScript дозволяє додавати нові елементи до сторінки. За допомогою document.createElement('tag') можна створити новий елемент.

let newElement = document.createElement('p');
newElement.innerText = 'Це новий абзац!';
document.body.appendChild(newElement); // Додає абзац на сторінку 

Видалити елемент: Щоб видалити елемент, використовуємо removeChild():

document.body.removeChild(newElement); // Видаляє абзац

3. Зміна тексту або HTML

JavaScript дозволяє змінювати текст чи HTML вміст елементів. Щоб змінити текст використовуємо .innerText:

let myDiv = document.getElementById('myDiv');
myDiv.innerText = 'Нове текстове повідомлення!'; // Змінює текст на сторінці 

Щоб змінити HTML використовуємо .innerHTML::

myDiv.innerHTML = '<strong>Привіт!</strong>'; // Змінює HTML вміст

4. Приклад використання

Давайте створимо лічильник клікерів. Коли натискатиметься кнопка, лічильник збільшуватиметься:

<button id="countButton">Клікни мене!</button>
<p id="clickCount">Кількість кліків: 0</p> 

let countButton = document.getElementById("countButton");
let clickCount = document.getElementById("clickCount");
let clicks = 0;
countButton.onclick = function() {
  clicks++;
  clickCount.innerText = "Кількість кліків: " + clicks;
};

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

За допомогою кнопки можна показувати чи приховувати текст:

<button id="toggleButton">Показати/приховати текст</button>
<p id="hiddenText" style="display: none;">Текст, який буде показуватися та приховуватися</p> 

let toggleButton = document.getElementById('toggleButton');
let hiddenText = document.getElementById('hiddenText');

toggleButton.onclick = function() {
  if (hiddenText.style.display === "none") {
    hiddenText.style.display = "block";
  } else {
    hiddenText.style.display = "none";
  }
}; 

Розділення коду на окремі блоки або модулі є важливим концептом у програмуванні та називається модульністю. Модульність означає організацію коду у невеликі, самостійні, ізольовані блоки, які виконують певні функції або мають певний функціонал. Ось деякі переваги розділення коду на модулі:

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

Також, ми можемо ставити скрипти в <body>, щоб JavaScript виконувався після того, як сторінка повністю завантажиться. Якщо скрипт знаходиться в <head>, браузер може спробувати його виконати до того, як усі елементи на сторінці будуть готові, і це може спричинити помилки, тому що скрипт може не знайти елементи, з якими він повинен працювати.

Ось кілька кроків, які слід виконати для підключення зовнішнього файлу до вашого проєкту:

1) Створіть файл з кодом: Спочатку створіть окремий JavaScript-файл з вашим кодом. Наприклад, назвім його myscript.js і розмістимо нашу функцію у цьому файлі:

function greet(name) {
  console.log(`Привіт, ${name}!`);
}

2) Підключіть файл до HTML: Вставте тег <script> в розділ <head> або перед закриваючим тегом </body> вашого HTML-файлу. В атрибуті src вкажіть шлях до вашого JavaScript-файлу:

<!DOCTYPE html>
<html>
    <head>
        <title>Приклад підключення файлу</title>
        <script src="myscript.js"></script>
    </head>
    <body>
        <script src="myscript.js"></script> // також можливе, якщо JavaScript виконувався після того, як сторінка повністю завантажиться
    </body>
</html>

3) Правило defer: Один із способів підключення - це використання атрибута defer в тезі <script>. Цей атрибут дозволяє браузеру завантажити скрипт у фоновому режимі, не затримуючи відображення сторінки. Скрипт буде виконано після того, як DOM буде повністю завантажений.

<head>
	<title>Приклад підключення файлу з defer</title>
	<script src="myscript.js" defer></script>
</head>
<body> <!-- Вміст вашої сторінки --> </body>

Тепер, коли ви виконуєте функцію greet у вашому HTML-файлі, вона буде шукатися у підключеному myscript.js:

<head>
	<title>Використання функції з підключеного файлу</title>
	<script src="myscript.js" defer></script>
</head>
<body>
	<button onclick="greet('Світ')">Привітати</button>
</body>

Коли ви натискаєте кнопку, виводиться повідомлення "Привіт, Світ!" у консолі, оскільки функція greet знаходиться у підключеному файлі myscript.js.
З підключенням файлів і використанням атрибута defer ви можете ефективно організовувати та підтримувати ваш код, зберігаючи структуру проєкту та роблячи взаємодію між HTML та JavaScript більш зручною та прозорою.
addEventListener дозволяє нам "слухати" події на елементах, таких як кнопки, картинки або текст. Коли відбувається подія (наприклад, натискання на кнопку), ми можемо виконати якусь дію.

element.addEventListener('event', function() {
    // код, який виконується, коли відбувається подія
});

element — це елемент (наприклад, кнопка).
'event' — це подія, яку ми слухаємо (наприклад, 'click').
function() — це код, який виконується, коли подія сталася.