JavaScript и HTML

Articles

JavaScript и HTML

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

YouTube Video

javascript-html-dom.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8      box-sizing: border-box;
  9    }
 10
 11    body {
 12      margin: 0;
 13      padding: 2em;
 14      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 15      background-color: #f7f9fc;
 16      color: #333;
 17      line-height: 1.6;
 18    }
 19
 20    .container {
 21      max-width: 800px;
 22      margin: 0 auto;
 23      padding: 1em;
 24      background-color: #ffffff;
 25      border: 1px solid #ccc;
 26      border-radius: 10px;
 27      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 28    }
 29
 30    h1, h2 {
 31      font-size: 1.5rem;
 32      color: #007bff;
 33      margin-top: 0.5em;
 34      margin-bottom: 0.5em;
 35      border-left: 5px solid #007bff;
 36      padding-left: 0.6em;
 37      background-color: #e9f2ff;
 38    }
 39
 40    button {
 41      display: block;
 42      margin: 1em auto;
 43      padding: 0.75em 1.5em;
 44      font-size: 1rem;
 45      background-color: #007bff;
 46      color: white;
 47      border: none;
 48      border-radius: 6px;
 49      cursor: pointer;
 50      transition: background-color 0.3s ease;
 51    }
 52
 53    button:hover {
 54      background-color: #0056b3;
 55    }
 56
 57    #output {
 58      margin-top: 1em;
 59      background-color: #1e1e1e;
 60      color: #0f0;
 61      padding: 1em;
 62      border-radius: 8px;
 63      min-height: 200px;
 64      font-family: Consolas, monospace;
 65      font-size: 0.95rem;
 66      overflow-y: auto;
 67      white-space: pre-wrap;
 68    }
 69
 70    .highlight {
 71      outline: 3px solid #ffc107; /* yellow border */
 72      background-color: #fff8e1;  /* soft yellow background */
 73      transition: background-color 0.3s ease, outline 0.3s ease;
 74    }
 75
 76    .active {
 77      background-color: #28a745; /* green background */
 78      color: #fff;
 79      box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 80      transition: background-color 0.3s ease, box-shadow 0.3s ease;
 81    }
 82  </style>
 83</head>
 84<body>
 85  <div class="container">
 86    <h1>JavaScript Console</h1>
 87    <button id="executeBtn">Execute</button>
 88    <div id="output"></div>
 89  </div>
 90
 91  <div class="container">
 92    <h2>HTML Sample</h2>
 93    <div id="content">Hello, World!</div>
 94    <button id="changeText">Change Text</button>
 95  </div>
 96
 97  <script>
 98    // Override console.log to display messages in the #output element
 99    (function () {
100      const originalLog = console.log;
101      console.log = function (...args) {
102        originalLog.apply(console, args);
103        const output = document.getElementById('output');
104        output.textContent += args.map(String).join(' ') + '\n';
105      };
106    })();
107
108    document.getElementById('executeBtn').addEventListener('click', () => {
109      // Prevent multiple loads
110      if (document.getElementById('externalScript')) return;
111
112      const script = document.createElement('script');
113      script.src = 'javascript-html-dom.js';
114      script.id = 'externalScript';
115      //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116      //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117      document.body.appendChild(script);
118    });
119  </script>
120</body>
121</html>

Объект `window` в JavaScript

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

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

Свойства

 1// Get and display the document's title
 2console.log(`Title: ${window.document.title}`);
 3
 4// Get and display the current URL
 5console.log(`URL: ${window.location.href}`);
 6
 7// Go back to the previous page
 8// Note: this will navigate back in history, so be careful when running it
 9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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-документу.

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

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

document.getElementById(): Получает элемент по атрибуту id.
document.getElementsByClassName(): Получает элементы по имени класса. Возвращает HTMLCollection. HTMLCollection — это живая коллекция, которая отражает изменения в DOM в реальном времени.
document.getElementsByTagName(): Получает элементы по имени тега. Возвращает HTMLCollection.
document.querySelector(): Использует CSS-селектор для получения первого подходящего элемента.
document.querySelectorAll(): Использует CSS-селектор для получения всех подходящих элементов. Возвращает NodeList. NodeList — это статическая коллекция, которая фиксирует состояние на момент получения и не отражает последующие изменения DOM.

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

1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>

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"
3console.log(id);

Изменение 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: Получает дочерние узлы. Вы можете обращаться ко всем типам узлов, не только к элементам (тегам HTML), но также к текстовым и комментариям узлам.
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// Get the container element where the HTML will be inserted
 2const content = document.getElementById('content');
 3
 4// Create the <ul> element with id="list"
 5const list = document.createElement('ul');
 6list.id = 'list';
 7
 8// Add initial list items
 9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28    const newItem = document.createElement('li');
29    newItem.textContent = 'New Item';
30    list.appendChild(newItem);
31});

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

Резюме

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

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

YouTube Video

Функции-генераторы в JavaScript Shadow DOM в 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`