- •1. Что такое ecmaScript?
- •2. Что такое типизация и какую типизацию использует JavaScript?
- •3. Типы данных в JavaScript
- •5. Стрелочные функции
- •6. Объекты в JavaScript
- •Вопросы для оценки самостоятельной работы:
- •2. Добавление / удаление классов:
- •Управление формой:
- •Создание формы:
- •Валидация email:
ECMAScript — стандарт JS.
Типизация — динамическая и слабая.
Типы данных — 7 примитивов + объекты.
let — блочная область видимости, var — функциональная.
Стрелочные функции — нет this, короткий синтаксис.
Объекты — хранят данные как { ключ: значение }, свойства можно добавлять динамически.
Вопросы для оценки самостоятельной работы:
1. Что такое DOM?
2. Что такое браузерные события и какие они бывают?
3. Как добавить обработку события?
4. Как програмно добавить стили CSS? Добавить или удалить класс CSS?
5. Как получить значение атрибута элемента? Как добавить атрибут для элемента?
6. Как получить значение, введенное в элемент input? Как получить значение, выбранное в элементе select?
1. Что такое DOM?
DOM (Document Object Model) — это программный интерфейс для работы с HTML- и XML-документами. Он представляет документ в виде дерева объектов (узлов), где каждый узел соответствует элементу, атрибуту или тексту на странице.
Основные особенности DOM:
Древовидная структура: DOM строится как иерархия узлов (элементы, атрибуты, текстовые узлы).
Доступ и манипуляции: JavaScript может изменять DOM, добавляя, удаляя или изменяя элементы.
Кросс-платформенность: DOM стандартизирован W3C и работает во всех браузерах.
Пример DOM-дерева:
html
Copy
Download
Run
<html>
<head>
<title>Пример</title>
</head>
<body>
<h1>Привет, мир!</h1>
</body>
</html>
В DOM это будет выглядеть как:
document (корень)
<html>
<head>
<title> → "Пример"
<body>
<h1> → "Привет, мир!"
2. Что такое браузерные события и какие они бывают?
Браузерные события — это действия или происшествия, которые случаются в браузере (клик, наведение, загрузка страницы и т. д.). JavaScript может их обрабатывать.
Основные типы событий:
События мыши:
click – клик по элементу.
dblclick – двойной клик.
mouseover / mouseout – наведение / уход курсора.
mousedown / mouseup – нажатие / отпускание кнопки мыши.
События клавиатуры:
keydown / keyup – нажатие / отпускание клавиши.
keypress – ввод символа (устаревшее).
События форм:
submit – отправка формы.
change – изменение значения (input, select).
focus / blur – фокус на элементе / потеря фокуса.
События загрузки:
load – страница или ресурс загружен.
DOMContentLoaded – DOM построен (без ожидания стилей и картинок).
Другие события:
scroll – прокрутка страницы.
resize – изменение размера окна.
3. Как добавить обработку события?
Есть несколько способов:
1. Через HTML-атрибут (не рекомендуется):
html
Copy
Download
Run
<button onclick="alert('Клик!')">Нажми меня</button>
2. Через свойство элемента (не всегда удобно):
javascript
Copy
Download
const button = document.querySelector('button');
button.onclick = function() {
alert('Клик!');
};
3. Через addEventListener (рекомендуемый способ):
javascript
Copy
Download
const button = document.querySelector('button');
button.addEventListener('click', function() {
alert('Клик!');
});
Преимущества addEventListener:
Можно добавить несколько обработчиков на одно событие.
Есть возможность удалить обработчик через removeEventListener.
Поддержка фазы всплытия и перехвата.
Пример с удалением:
javascript
Copy
Download
function handleClick() {
alert('Клик!');
button.removeEventListener('click', handleClick);
}
button.addEventListener('click', handleClick);
4. Как программно добавить стили CSS? Добавить или удалить класс CSS?
1. Изменение стилей через style:
javascript
Copy
Download
const element = document.querySelector('div');
element.style.color = 'red'; // цвет текста
element.style.backgroundColor = 'blue'; // фон
element.style.fontSize = '20px'; // размер шрифта