Спецификации и стандарты

ECMAScript (ES)

задаёт правила синтаксиса, поведение и основные возможности языка

является основой для нескольких языков, включая JavaScript , JScript (Microsoft) , ActionScript (Adobe)

Основные версии ECMAScript

ES3 (1999)

стабилизация языка

ES5 (2009)

strict mode, методы для работы с массивами

ES6 (ES2015)

классы, стрелочные функции, модули, константы, ...

ES7 (ES2016)

регулярные обновления

dat

HTML Living Standard

стандарт для описания структуры веб-страниц и взаимодействия с ними в браузере

описывает элементы, их атрибуты и правила их взаимодействия с другими элементами

Глобальные объекты браузера

`window`

центральный объект, который представляет саму вкладку или окно браузера

Представление вкладки браузера

Каждая вкладка представлена как объект window
window позволяет взаимодействовать с характеристиками окна (например, размеры окна, фокусировка).

В основном слушатели, влиять на само окно браузера было бы небезопасно

Глобальное пространство имён для JavaScript

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

В коде


let myVariable = 'Hello';

В браузере


console.log(window.myVariable);  // 'Hello'

API браузера

Таймеры
Всплывающие окна
Хранилища данных
Информация о браузере
Обработка событий

Объект `document`

объект, который представляет сам HTML-документ, загруженный в окно браузера

Позволяет взаимодействовать с самой страницей сайта


const heading = document.getElementById('heading');
heading.textContent = 'Hello, World!';

иерархия

window

document

html

head

body

Работа с элементами DOM

Чтобы работать с элементами на странице, сначала нужно найти их в DOM

`getElementById`

Возвращает первый элемент, который соответствует указанному id

`getElementsByTagName(tag)`

находит все элементы по указанному тегу tag

`getElementsByClassName(className)`

находит все элементы, которые содержат указанный класс className

Однако лучше использовать

`querySelector(selector)`

позволяет найти первый элемент , который соответствует указанному CSS-селектору

`querySelectorAll(selector)`

находит все элементы, соответствующие указанному CSS-селектору


let firstButton = document.querySelector(".button");
let buttons = document.querySelectorAll(".button");

Чтение и изменение содержимого

`element.innerText`

Работает с текстовым содержимым элемента, исключая все HTML теги

`element.textContent`

возвращает весь текст, включая скрытые элементы

`element.innerHTML`

позволяет получить или изменить HTML-содержимое элемента


let paragraph = document.querySelector("p");
console.log(paragraph.innerText); // Чтение текста
paragraph.innerText = "Новый текст!"; // Установка нового текста

Изменение стилей

через атрибут `style`

позволяет изменить стили элемента непосредственно JavaScript'ом через inline стили


let div = document.querySelector("div");
div.style.backgroundColor = "red"; // Установка фона
div.style.fontSize = "20px"; // Установка размера шрифта

Изменение стилей

через классы ( `classList` )

позволяет добавлять, удалять и проверять наличие классов в элементах

Сами стили пишутся отдельно в css файле

Методы `classList`

`add(className)`

добавляет класс

`remove(className)`

удаляет класс

`toggle(className)`

переключает класс (добавляет, если его нет, и удаляет, если он есть)

`contains(className)`

проверяет, есть ли класс у элемента


let div = document.querySelector("div");
div.classList.add("highlight"); // Добавить класс
div.classList.remove("highlight"); // Удалить класс
div.classList.toggle("highlight"); // Переключить класс
console.log(div.classList.contains("highlight")); // Проверка наличия класса

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

event handlers

функции, которые запускаются в ответ на действия пользователя

Подключение обработчиков

ТАК ДЕЛАТЬ НЕ НАДО!


<button onclick="alert('Нажато!')">Нажми меня</button>

Подключение обработчиков

Через свойство элемента `element.onclick`


const button = document.querySelector('button');
button.onclick = () => {
  alert('Нажато!');
};

Можно будет подключить только один слушатель

Подключение обработчиков

Через `addEventListener`


const button = document.querySelector('button');
button.addEventListener('click', () => {
  alert('Нажато!');
});

Можно подключить несколько слушателей

Снятие обработчика через `removeEventListener`


function handleClick() {
  console.log('Клик!');
}
const button = document.querySelector('button');
button.addEventListener('click', handleClick);

button.removeEventListener('click', handleClick);

Спецификации и стандарты