js-features

Домашнее задание к лекции «Возможности JavaScript в браузере»

Выполните задачи:

1. Таймер обратного отсчёта.
2. Игра-кликер.
3. Игра «Убей кротов».

Чтобы получить зачёт, выполните все три задачи. Пришлите на проверку все три задачи сразу, не частями.

Проследите, чтобы работа соответствовала стилю оформления кода.

Любые вопросы по задачам задавайте в чате учебной группы.

Примечание

В этих задачах и далее по курсу вам нужно будет выводить сообщения с помощью диалоговых окон. Функции alert, prompt и confirm — часть BOM. Почитать о том, как их использовать, можно на ресурсах:

1. Взаимодействие с пользователем: alert, prompt, confirm.
2. Window.confirm().
3. Window.prompt().
4. Window.alert().

Бонус

Книги на курс

1. DOM Enlightenment.
2. Eloquent JavaScript.
3. DOM Scripting: Web Design with JavaScript and the Document Object Model.
4. Николас Закас. JavaScript для профессиональных веб-разработчиков.

Скорость загрузки страницы

На лекции мы говорили о принципах построения страницы браузером и двух объектных моделях: DOM и CSSOM.

Для детального понимания рекомендуем пройти два бесплатных курса на Udacity от Google на английском:

1. Browser Rendering Optimization.
2. Website Performance Optimization.

Илья Григорик, соавтор этих курсов, а также автор большого числа материалов портала developers.google.com, выпустил книгу в 2013 году. Она доступна в онлайн-формате бесплатно по ссылке High Performance Browser Networking. Книга рассказывает про основы сетевого взаимодействия в JavaScript и способы повышения скорости загрузки сайта. Она будет актуальна до тех пор, пока мы используем протокол HTTP версии 1. Для понимания книги вам понадобится материал всего нашего курса, так как там применяется технология AJAX (объект XMLHttpRequest) и содержится информация, которую вам расскажут в следующих курсах Нетологии по JavaScript.

На портале developers.google.com вы найдёте массу справочной информации, которая поможет ускорить загрузку ваших сайтов.

События, обработчики событий

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

1. Введение в события DOM.
2. Введение в браузерные события.
3. AddEventListener vs onclick.

Вызов события программно

Событие click можно вызвать вручную. Для этого у найденного элемента есть отдельный метод click:

<button id="push-me">And then just touch me</button>

const button = document.getElementById( 'push-me' );

button.onclick = () => alert( 'Till i can get my satisfaction' );

button.click(); // Вызовет обработчик click

Подробнее смотрите: HTMLElement.click().

Defer или async?

На лекции вы познакомились с двумя атрибутами тега script — defer и asymc. Чтобы разобраться, какой из них в каком случае применять, прочтите статьи. Они помогут больше понять смысл атрибутов и расскажут о событиях загрузки страницы:

1. <script> async, defer, async defer, module, nomodule, src, inline.
2. Running Your Code at the Right Time.