Шаг 4: JS

Javascript — язык который отвечает за динамику страницы и работу с DOM объектами (объектная модель документа). Уже известно что элементы на страницы размечаются с помощью HTML. Именно этими блоками js и будет управлять.
Страница в браузере уже состоит из объектов. Объект window соответствует окну браузера и содержит большой список методов и свойств, вот малая часть из них:

  • window.open(«http://ya.ru») — метод откроет новое окно в браузере, и перейдет на страницу указанную в скобках, если в скобках пусто, то просто откроет новую вкладку;
  • window.confirm(«Вы уверены?») — метод покажет всплывающее окно с текстом (передаем в скобках) и кнопками «да» и «нет»;
  • window.print() — метод для отправки на печать, откроет настройки печати страницы;
  • window.innerHeight — в этом свойстве содержится текущая высота окна браузера, в которой отображен сайт (без консоли и доп меню браузера);
  • window.outerHeight — свойство содержит полную высоту окна браузера со всеми ее элементами.

Так же окно умеет отслеживать события и на них реагировать:

  • window.onscroll — событие прокрутки страницы, можем приравнять к функции, которая будет выполнятся;
  • window.onload — событие полной загрузки страницы, сработает когда все элементы загрузятся, включая картинки, стили и т.п. 

Данный код будет выводить символ » ! » в консоль при прокрутке страницы:

window.onscroll = function () { console.log(" ! "); }

Страница содержит в себе объект документа document — эта часть внутри окна, в которой отображается сайт, с помощю этого объекта мы можем обратиться к контенту:

  • document.getElementById — получает DOM элемент по id;
  • document.getElementsByTagName — получает элементы по имени тега;
  • document.getElementsByClassName — получить элементы по имени класса.

html:

<div id="test"> ... </div>

js:

var test = document.getElementById("test");
var test = document.getElementsByTagName("div");

После того как элемент страницы получен, мы можем им манипулировать. Сделать все то же самое что и вручную, установить класс, передвинуть, скрыть или создать новый элемент внутри:

  • имя элемента.onclick — событие клика на элементе;
  • имя элемента.onmouseover — событие сработает при наведение курсора мыши на элемент;
  • имя элемента.onfocus — событие выбора элемента, например выбор элемента input для ввода;

Вот пример, при нажатии на кнопку в консоль будет выведена строка:

html:

<button id="btn"> Кнопка </button>

js:

var elem = document.getElementById("btn");
elem.onclick = function () {
    console.log( "Клик" );
}

можно сразу так:

document.getElementById("btn").onclick = function () { ... };

Технология AJAX позволяет сделать запрос без перезагрузки страницы. Таким образом работает подсказка в поисковике, когда пользователь вводит запрос в строку, js отправляет введенные данные на сервер и присылает вам в ответ список подсказок, которые тут же и выводит. Такой запрос может быть синхронный (в этом случае страница будет ждать ответа и «подвисает») и асинхронный (в этом случае пользователь сможет взаимодействовать со страницей).

Для этого используется объект XMLHttpRequest.

  • XMLHttpRequest.open( метод, урл, асинхронно ) — создает подключение с методом post или get на указанный урл адрес. Если третьим параметром передать true, то запрос будет происходить асинхронно;
  • XMLHttpRequest.send() — отправляет запрос по установленным параметрам в методе .open;
  • XMLHttpRequest.onreadystatechange() — событие, срабатывает при изменении статуса запроса;
  • XMLHttpRequest.readyState — параметр который содержит номер статуса:
    • 0 — начальное состояние;
    • 1 — вызван open;
    • 2 — заголовки получены;
    • 3 — загружается тело;
    • 4 — запрос завершен.
  • XMLHttpRequest.status — параметр который содержит код статуса ответа, например 200 — ответ загружен успешно или 404 — страница не найдена;
  • XMLHttpRequest.responseText — тело ответа;
  • XMLHttpRequest.statusText — текст статуса ответа.
var ajax = new XMLHttpRequest(); 			/* создали объект */
ajax.open( 'GET', 'page.php', true ); 			/* настройки */
ajax.send(); 						/* отправили запрос */
ajax.onreadystatechange = function (){ 		/* ждем ответ */
	if( ajax.readyState != 4 ) return; 		/* проверка на завершение запроса */
	if( ajax.status != 200 )
console.log( ajax.statusText );	/* выводит текст ошибки подключения */
else
	console.log( ajax.responseText );	/* все успешно, выводим тело ответа */
};

Библиотеки и фреймворки

Многие типовые задачи js упрощены и реализованы в библиотеках. Эти библиотеки написаны на js, это набот классов и функций, которые упрощают разработку. Самая популярная библиотека Jquery. Например способ обращение к блокам полностью повторяет селекторы css, это очень удобно. Или для отправки ajax запроса достаточно вызвать 1 функцию, удобно настраиваемую под ваши нужды. Крупные библиотеки превращаются в фреймворки например Vue.js или ReactJS. Например фреймворк сам меняет html код при изменении js переменной.

! Напоминание:

В статье были приведены не все свойства и методы различных объектов. Ваша задача научится спрашивать поисковик, и находить решения. Особенно если вы не знаете о возможности языка вы можете выдумать функцию и проверить, а вдруг она уже существует (например задача: получить адрес предыдущей страницы).

Задание:

  • Найти все события window и изучить свойства
  • Поэкспериментировать с запросами типа «js как перезагрузить страницу» или «js прокрутка страницы»
  • Найти информацию про windows.location