Объекты window и document. Подключение скриптов

Free Preview
Продолжительность: 12 мин

В третьем модуле мы изучили JavaScript как язык: переменные, типы, функции, циклы. Всё это было справедливо для любой среды, где работает JS — в браузере, на сервере, где угодно.

В четвёртом модуле мы переходим к браузерному JavaScript — к тому, ради чего в нашем курсе всё и затевалось. Здесь мы научимся работать с содержимым страницы прямо из кода: находить элементы, менять их текст и стили, реагировать на действия пользователя.

Как подключить JavaScript к странице

Прежде чем браузер выполнит JavaScript, нужно сообщить ему, где этот код находится. Делается это с помощью тега <script>.

Встроенный скрипт

Код можно написать прямо внутри тега <script> в HTML-файле:

<!DOCTYPE html>
<html>
  <head>
    <title>Санкт-Петербург</title>
  </head>
  <body>
    <h1>Добро пожаловать</h1>

    <script>
      console.log('Страница загружена');
    </script>
  </body>
</html>
html

Этот способ удобен для небольших фрагментов кода или быстрых экспериментов. В реальных проектах так не делают — по той же причине, по которой CSS выносят в отдельный файл: смешивать HTML и JavaScript неудобно поддерживать.

Внешний файл

Предпочтительный способ — создать отдельный .js файл и подключить его через атрибут src:

<script src="script.js"></script>
html

Код при этом пишется в script.js без каких-либо HTML-тегов — только чистый JavaScript.

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

Где размещать тег <script>

Место размещения <script> влияет на то, когда браузер выполнит скрипт — и это важно.

Браузер читает HTML сверху вниз. Когда он встречает <script>, он останавливает разбор HTML, загружает и выполняет скрипт, и только потом продолжает дальше.

Если поставить скрипт в <head>, он выполнится до того, как браузер построил всю страницу. Это означает, что если скрипт попытается найти элемент на странице — он его не найдёт, потому что элемент ещё не существует:

<head>
  <script src="script.js"></script> <!-- ⚠️ DOM ещё не построен -->
</head>
<body>
  <h1 id="title">Заголовок</h1>
</body>
html
// script.js
const title = document.getElementById('title');
console.log(title); // null — элемента ещё нет!
js

Именно поэтому исторически скрипты принято размещать в конце <body>, перед закрывающим тегом:

<body>
  <h1 id="title">Заголовок</h1>
  <!-- всё содержимое страницы -->

  <script src="script.js"></script> <!-- ✓ DOM уже построен -->
</body>
html

Атрибуты defer и async

Современный и более гибкий способ — разместить скрипт в <head>, но добавить атрибут defer или async. Оба атрибута работают только с внешними файлами (с src).

defer говорит браузеру: «скачивай скрипт параллельно с разбором HTML, но выполни только после того, как HTML полностью прочитан»:

<head>
  <script src="script.js" defer></script>
</head>
html

Это самый рекомендуемый подход для большинства скриптов. Страница не блокируется во время загрузки файла, и к моменту выполнения DOM уже готов. Если скриптов несколько — они выполняются в том порядке, в котором написаны.

async говорит браузеру: «скачивай параллельно и выполни сразу, как только загрузится»:

<head>
  <script src="analytics.js" async></script>
</head>
html

При async скрипт выполняется как можно раньше, не дожидаясь полной загрузки HTML. Порядок выполнения нескольких async-скриптов не гарантирован. Подходит для независимых скриптов, которым не нужен DOM и которые не зависят от других скриптов — например, счётчики аналитики.

Краткое сравнение

ВариантКогда скачиваетсяКогда выполняетсяDOM готов?
<script> в <head>сразу, блокирует HTMLсразунет
<script> в конце <body>после парсинга HTMLсразуда
<script defer>параллельно с HTMLпосле парсинга HTMLда
<script async>параллельно с HTMLсразу после загрузкине гарантировано

Для обычных скриптов, которые работают с DOM, используйте defer — это современный и правильный подход.

Браузер как среда выполнения

Когда браузер запускает JavaScript, он предоставляет коду доступ к специальным объектам, через которые можно управлять страницей и самим браузером. Главный из них — window.

Объект window

window — это глобальный объект браузера. Он представляет собой окно браузера и является «корнем» всего, что доступно из JavaScript на странице.

У window две важных особенности:

Во-первых, все глобальные переменные и функции, которые мы объявляем в коде, становятся свойствами window:

let city = 'Санкт-Петербург';
console.log(window.city); // 'Санкт-Петербург'

function greet() { console.log('Привет'); }
window.greet(); // тоже работает
js

Во-вторых, при обращении к свойствам и методам window можно опускать имя объекта — браузер поймёт сам. Именно поэтому мы писали просто console.log(...), а не window.console.log(...).

Полезные свойства и методы window

// размеры области просмотра браузера
console.log(window.innerWidth);  // ширина в пикселях
console.log(window.innerHeight); // высота в пикселях

// текущий URL и навигация
console.log(window.location.href);    // полный URL страницы
window.location.href = 'https://ya.ru'; // перейти на другой URL

// таймеры — мы уже встречали их
window.setTimeout(() => console.log('привет'), 1000);
window.setInterval(() => console.log('тик'), 1000);

// диалоговые окна браузера
window.alert('Сообщение');
const answer = window.confirm('Вы уверены?'); // true или false
const input = window.prompt('Введите имя:');   // строка или null
js

Полный список свойств и методов window огромный — всё это часть BOM (Browser Object Model, объектная модель браузера). При необходимости всегда можно обратиться к документации MDN.

Объект document

document — это свойство window, представляющее HTML-документ, загруженный в браузер. Через него мы можем читать и изменять содержимое страницы.

console.log(document.title);  // заголовок страницы (тег <title>)
document.title = 'Новый заголовок'; // изменить заголовок вкладки

console.log(document.URL);    // URL текущей страницы
js

document — это точка входа в DOM (Document Object Model, объектная модель документа). DOM — это представление HTML-документа в виде дерева объектов, с которым JavaScript умеет работать. Подробнее о нём — в следующем уроке.

Как window и document связаны

window
├── document   ← вся страница, HTML-дерево
├── location   ← текущий URL и навигация
├── history    ← история браузера
├── navigator  ← информация о браузере и устройстве
├── console    ← консоль разработчика
└── ...

window — это весь браузер. document — это один из его инструментов, отвечающий именно за HTML-страницу. Большинство работы с содержимым страницы идёт через document.

В следующем уроке разберёмся с тем, что такое DOM, и научимся находить нужные элементы страницы из JavaScript.

Предыдущий урокСледующий урок