JavaScript и HTML

Articles

JavaScript и HTML

Эта статья объясняет JavaScript и HTML.

YouTube Video

Объект `window` в JavaScript

Объект window в JavaScript является глобальным объектом в браузерной среде, предоставляющим функции и информацию, связанные с веб-страницей и окном браузера. Поскольку window является глобальной областью видимости браузера, весь код JavaScript, выполняемый в браузере, становится частью объекта window. Объект window играет важную роль в запуске JavaScript в браузерной среде, предоставляя множество API и свойств.

Ключевые особенности объекта `window`

Свойства

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

window.document: Предоставляет доступ к текущему HTML-документу.
window.location: Управляет текущим URL и навигацией браузера.
window.history: Предоставляет доступ к информации об истории браузера и позволяет перемещаться вперед и назад.
window.navigator: Предоставляет информацию о браузере и устройстве.
window.innerWidth / window.innerHeight: Получает ширину и высоту области просмотра.

Методы

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

window.alert(): Отображает диалоговое окно с оповещением.
window.confirm(): Отображает диалоговое окно для подтверждения и возвращает результат 'ОК' или 'Отмена'.
window.prompt(): Отображает диалог для ввода данных и получает введенное значение.
window.open(): Открывает новое окно или вкладку.
window.setTimeout() / window.setInterval(): Устанавливает таймер для выполнения функции через определенное время или через регулярные интервалы.

Обработка событий

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

window.onload: Событие, которое выполняется, когда страница полностью загружена.
window.onresize: Событие, которое выполняется при изменении размера окна.
window.onscroll: Событие, которое активируется при прокрутке страницы пользователем.

Роль как глобальной переменной

1var myVar = 10;
2console.log(window.myVar); // 10

Объект window содержит глобальные переменные и функции. Другими словами, объявленные переменные и функции автоматически становятся свойствами объекта window.

Манипуляции с DOM в JavaScript

Манипуляции с DOM (Document Object Model) в JavaScript используются для динамического взаимодействия с элементами веб-страницы. DOM представляет структуру HTML-документа в виде дерева, которое можно изменять с помощью JavaScript для модификации структуры и управления отображением страницы.

Основы DOM

DOM рассматривает HTML веб-страницы как объекты, предоставляя доступ к элементам и атрибутам для их изменения. Используйте объект document для доступа к HTML-документу.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Получение элементов DOM

В JavaScript есть множество методов для доступа к элементам в DOM.

document.getElementById(): Получить элемент по атрибуту id
document.getElementsByClassName(): Получить элементы по имени класса (HTMLCollection)
document.getElementsByTagName(): Получить элементы по имени тега (HTMLCollection)
document.querySelector(): Получить первый элемент, соответствующий CSS-селектору
document.querySelectorAll(): Получить все элементы, соответствующие CSS-селектору (NodeList)

Пример: `getElementById` и `querySelector`

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Манипуляции с DOM

С полученными элементами можно выполнять различные операции.

Изменение текста

Чтобы изменить текст элемента, используйте textContent или innerHTML.

textContent: Получить или изменить текстовое содержимое элемента. HTML-теги не интерпретируются.
innerHTML: Получить или изменить HTML-содержимое элемента. Строки, содержащие HTML-теги, также обрабатываются.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Изменение атрибутов

Используйте setAttribute() и getAttribute() для изменения атрибутов элемента.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Изменение CSS

Используйте свойство style, чтобы изменять CSS-стили.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Управление классами

Используйте classList, чтобы добавлять или удалять классы элемента.

add(): Добавить класс
remove(): Удалить класс
toggle(): Добавить или удалить класс в зависимости от его наличия
contains(): Проверить, существует ли класс

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Создание и удаление DOM-элементов

Создание новых элементов

Используйте document.createElement(), чтобы создать новый элемент и добавить его в DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Удаление элементов

Используйте метод remove(), чтобы удалить элемент.

1newDiv.remove();  // Remove the created element

Добавление событий

Как часть работы с DOM, вы можете добавлять обработчики событий для реакции на действия пользователя. Используйте addEventListener(), чтобы обрабатывать события, такие как клики и взаимодействия с клавиатурой.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

В этом примере нажатие кнопки изменяет текст элемента #content.

Навигация по дереву DOM

Вы можете перемещаться по DOM, чтобы получить доступ к родительским и соседним элементам.

parentNode: Доступ к родительскому узлу
childNodes: Доступ к дочерним узлам (всех типов)
firstChild / lastChild: Первый/последний дочерний элемент
nextSibling / previousSibling: Следующий/предыдущий соседний элемент

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Пример: Добавление нового элемента в список

Вот пример добавления нового элемента в список.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

В этом коде нажатие кнопки "Добавить элемент" добавляет новый элемент <li> в список.

Резюме

Манипулирование DOM с помощью JavaScript позволяет получать, изменять, создавать и удалять элементы внутри HTML-документа.
Вы можете получать элементы, используя такие методы, как getElementById() и querySelector().
Используйте textContent или innerHTML для изменения текста и HTML и setAttribute() для работы с атрибутами.
Используйте createElement() для создания новых элементов и remove() для их удаления.
Вы можете создавать интерактивные веб-страницы, которые реагируют на действия пользователя через обработку событий.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Функции-генераторы в JavaScript

JavaScript и HTML

YouTube Video

Объект window в JavaScript

Ключевые особенности объекта window

Свойства

Методы

Обработка событий

Роль как глобальной переменной

Манипуляции с DOM в JavaScript

Основы DOM

Получение элементов DOM

Пример: getElementById и querySelector

Манипуляции с DOM

Изменение текста

Изменение атрибутов

Изменение CSS

Управление классами

Создание и удаление DOM-элементов

Создание новых элементов

Удаление элементов

Добавление событий

Навигация по дереву DOM

Пример: Добавление нового элемента в список

Резюме

YouTube Video

Объект `window` в JavaScript

Ключевые особенности объекта `window`

Пример: `getElementById` и `querySelector`