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