Complie info

ExecutableCreationTime:
7/26/2023 4:39:08AM

ExecutableLastWriteTime:
7/26/2023 4:39:08AM

ExecutableHashSHA256:
9EB15669EDDE760F5D70D9B03E70DA4F6D7668A070469BD5193B79FBA70920E5

SettingsHashSHA256:
B5736D12DBE9C0F7B10339229BD1ABE1D1C8BD0B7331973D5DF752D8B033293A

AppStartDate:
2023-07-30 08:53:45.627

StylesHash:
D874A857C9AE35986454587CF15ED802E0DA670AA6BCBF2B7311FA7D0367145E

ScriptsHash:
B2860447F9AF448ED6C9353FCAD64AB324ABFB5D42697A9CA3F1A2C9535129E8

AdditionalHeadContentHash:
CDB97F7F404FBF14B9786071235C8E643776E7B3C78B6A356497F4AFAF322B64

InfoMaterialThemeConfigStringHash:
736D71B50382E598B979CFF287EA69DEFD6EB87F9A39E8C7A7A23D20681AC393

HtmlTextFormaterStringHash:
88AD5554385C49D69CE9656F9A3A9B6F7B1A2D26F55A8A6291C97C75CF3DF88F

HeaderHash:
32E97CCC90A1B0F0D42F16969725B3B6609EA18492A6CF6B8A43E824FA2D8EB7

FooterHash:
B8EA0644585A6D27C6B10FD167809CF1F1884EDC0374A494362B16876CE98B96

AdditionalMainDivContentHash:
D05224365F5F8632B8AC84C4032E59B7F61910A18D95DEB5F1C54140777D314C

Теорія

Завдання

Взаємодія JS та HTML

Основні методи зв'язку між HTML і JavaScript

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

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

Отримання елементів:
- За допомогою document.getElementById('id') можна отримати елемент за його ідентифікатором.
- За допомогою document.getElementsByClassName('class') можна отримати елементи за їх класом.
- За допомогою document.getElementsByTagName('tag') можна отримати елементи за їх тегом.
Створення та видалення елементів:
- За допомогою document.createElement('tag') можна створити новий елемент.
- За допомогою parentElement.appendChild(childElement) можна додати створений елемент як дочірній елемент до батьківського елемента.
- За допомогою parentElement.removeChild(childElement) можна видалити дочірній елемент з батьківського елемента.
.innerText і .innerHTML:
- Властивість .innerText дозволяє змінювати або отримувати текстовий вміст елементів.
- Властивість .innerHTML дозволяє змінювати або отримувати HTML вміст елементів.
Використання onclick:
- Додавання обробника події onclick до HTML елементів дозволяє виконувати дії при натисканні на них.

Загальний огляд використання основних інструментів взаємодії HTML-JS

Взаємодія між HTML і JavaScript є важливою частиною веб-розробки, оскільки дозволяє створювати динамічні інтерактивні веб-сайти та додавати функціональність до статичного контенту. HTML відповідає за структуру та вміст веб-сторінки, а JavaScript додає інтерактивність та динамічність до цього контенту.

Ось декілька основних понять, які слід розглянути при взаємодії між HTML і JavaScript:

Отримання елементів HTML: Ми можемо отримати доступ до елементів HTML з JavaScript за допомогою їх ідентифікаторів, класів або тегів. Наприклад, ми можемо отримати елемент за його ідентифікатором:

<div id="myDiv">Це div елемент</div>

let myDiv = document.getElementById('myDiv');

Створення та видалення елементів: Ми можемо створювати нові елементи HTML з JavaScript і додавати їх до веб-сторінки. Також ми можемо видаляти існуючі елементи. Наприклад, створимо новий елемент p і додамо його до body:

let newParagraph = document.createElement('p');
newParagraph.innerText = "Це новий абзац";
document.body.appendChild(newParagraph);

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

<div id="myDiv">Hello, <strong>world</strong>!</div>

let myDiv = document.getElementById('myDiv');
console.log(myDiv.innerText); // Виведе "Hello, world!"
console.log(myDiv.innerHTML); // Виведе "Hello, <strong>world</strong>!"

onclick: Ми можемо додати обробник події onclick до елементів HTML для виконання певних дій, коли користувач натискає на елемент. Наприклад, створимо кнопку, яка виведе повідомлення при натисканні:

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

let myButton = document.getElementById('myButton');
myButton.onclick = function() {
  alert("Ви натиснули кнопку!");
};

Синтаксис

Синтаксис основних інструментів взаємодії HTML-JS.

Отримання елементів HTML:

HTML:

<div id="myDiv">Це div елемент</div>
<button class="myButton">Натисни мене</button>

JavaScript:

// Отримання елементу за його ідентифікатором
let myDiv = document.getElementById('myDiv');
console.log(myDiv.innerText); // Виведе "Це div елемент"

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

// Отримання елементів за тегом
let divElements = document.getElementsByTagName('div');
console.log(divElements.length); // Виведе кількість елементів <div> на сторінці

Створення та видалення елементів:

HTML:

<div id="myContainer"></div>

JavaScript:

let myContainer = document.getElementById('myContainer');

// Створення нового елементу <p> та додавання його до контейнера
let newParagraph = document.createElement('p');
newParagraph.innerText = "Це новий абзац";
myContainer.appendChild(newParagraph);

// Видалення елементу <p> з контейнера
myContainer.removeChild(newParagraph);

.innerText і .innerHTML:

HTML:

<div id="myDiv">Hello, <strong>world</strong>!</div>

JavaScript:

let myDiv = document.getElementById('myDiv');

// Отримання текстового вмісту
console.log(myDiv.innerText); // Виведе "Hello, world!"

// Отримання HTML вмісту
console.log(myDiv.innerHTML); // Виведе "Hello, <strong>world</strong>!"

// Зміна текстового вмісту
myDiv.innerText = "Привіт, світ!";

// Зміна HTML вмісту
myDiv.innerHTML = "Привіт, <strong>світ</strong>!";

onclick:

HTML:

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

JavaScript:

let myButton = document.getElementById('myButton');

// Додавання обробника події onclick
myButton.onclick = function() {
  alert("Ви натиснули кнопку!");
};

При натисканні на кнопку з ідентифікатором myButton, виведеться повідомлення "Ви натиснули кнопку!". Код function() {...} представляє функцію, яка буде виконана при події onclick.

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

Використання раніше розглянутих інструментів HTML-JS взаємодії на практиці.

Лічильник кліків:

HTML:

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

JavaScript:

let countButton = document.getElementById('countButton');
let clickCount = document.getElementById('clickCount');

let clicks = 0;

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

У цьому прикладі ми створюємо простий лічильник кліків на кнопці. Кожного разу, коли користувач натискає на кнопку, змінна clicks збільшується на 1, і нове значення кількості кліків відображається на сторінці.

Показати/приховати елемент:

HTML:

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

JavaScript:

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";
  }
};

У цьому прикладі ми створюємо кнопку, яка показує або приховує текст при кожному кліку. Спочатку текст прихований за допомогою стилів CSS (display: none;). Кожного разу, коли користувач натискає на кнопку, ми перевіряємо поточний стиль display тексту. Якщо текст прихований ("none"), ми змінюємо стиль на "block", щоб показати текст. Якщо текст показується ("block"), ми змінюємо стиль на "none", щоб приховати текст.

Генератор списку:

HTML:

<input type="text" id="textInput" placeholder="Введіть елемент списку">
<button id="addButton">Додати елемент</button>
<ul id="list"></ul>

JavaScript:

let textInput = document.getElementById('textInput');
let addButton = document.getElementById('addButton');
let list = document.getElementById('list');

addButton.onclick = function() {
  let listItem = document.createElement('li');
  listItem.innerText = textInput.value;
  list.appendChild(listItem);
  textInput.value = "";
};

У цьому прикладі ми створюємо простий генератор списку. Користувач може ввести елемент списку у текстове поле (<input type="text">) і натиснути кнопку "Додати елемент". Кожного разу, коли кнопка натискається, ми створюємо новий елемент <li> із введеним текстом і додаємо його до списку (<ul>). Потім поле вводу очищається, готове для введення наступного елементу.

Тема 15Взаємодія JS та HTML

Основні методи зв'язку між HTML і JavaScript

Загальний огляд використання основних інструментів взаємодії HTML-JS

Синтаксис

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

Тема 15

Взаємодія JS та HTML