Объект события Event

Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой MouseEvent или ввод с клавиатуры KeyboardEvent. Существует множество различных событий, которые будут иметь разный набор информации о них.

Пример
Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.

При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click, обработчик будет вызван с событием MouseEvent:
element.addEventListener('click', function (event) {})

👉 @frontendInterview

👉 @frontendInterview

cursor

С помощью этого свойства можно указать, какой внешний вид будет у курсора, когда пользователь наведёт мышку на элемент.

Пример
Пусть будет обычный блок статьи:
<article>
<h2>Какая-то статья</h2>
<p>
Многие кометы имеют два хвоста.
</p>
</article>

Пусть при наведении курсора на блок статьи показывается смайлик с котиком:
article {
cursor: url(cat.png) 2 2, default;
}

👉 @frontendInterview

👉 @frontendInterview

Любите находить решение сложных задач? У хостера FirstVDS для вас классная новость! Каждую Пятницу 13 они запускают масштабную акцию с крутыми интерактивами, чтобы вы могли «поразмять мозги».

В этот раз FirstVDS подготовили игру «Побег из лагеря Crystal Lake». Проверим, сможете ли вы выбраться из лагеря целым и невредимым, спасти друзей, найти ценные ресурсы, и разобраться с Jason’ом.

На кону — и сертификаты на пополнение баланса 500 р, и скидки (аж до 35%) на новые и действующие серверы! 

Но вы же знаете пословицу про рыбку и труд. Чтобы получить все эти ништяки, нужно не просто пройти игру, но и сделать это хорошо ;) 

Желаем удачи!

legend

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

 <fieldset>
   <legend>Заголовок для группы контролов</legend>
   …
 </fieldset>

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» h1-h6-заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

👉 @frontendInterview

Дебаггинг

👉 @frontendInterview

👉 @frontendInterview

JavaScript. Как писать программы

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

👉 @frontendInterview

(Don't) Make Me Repeat Myself

Создайте свою функцию repeat, которая будет применяться к строке и повторять эту строку указанное количество раз.

Примеры:
'a'.repeat(3) === 'aaa'
'around the world '.repeat(2) === 'around the world around the world'

👉 @frontendInterview

box-shadow

Свойство, бросающее тень на ваши блоки 👤
Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.

Пример
Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.
<button class="button">Купить немедленно!</button>
Помимо основных оформительских стилей задаём нашей кнопке тень:
.button {
box-shadow: -15px 15px 0 0 #ED6742;
}

👉 @frontendInterview

Станьте наставником по JavaScript или React в HTML Academy! Учитесь сами, обучая других веб-разработке: дружное комьюнити, удалёнка, море фана, опыт преподавания и скидки для своих. Приходите в команду: https://tml.io/us097

👉 @frontendInterview

Как TypeScript и статическая типизация помогают писать код?

В JavaScript слабая динамическая типизация. Это означает две вещи:
1. Любая переменная может произвольно менять свой тип во время выполнения программы.
2. При операциях с переменными разных типов они будут автоматически приведены к одному типу.

Эти свойства языка часто мешают создавать большие надёжные приложения. Поэтому появились решения, которые расширяют язык, добавляя в него строгую статическую типизацию. «Строгая» означает запрет автоматического приведения типов, «статическая» значит, что переменные не меняют свой тип. Самое популярное решение в этой области — TypeScript. Другие, менее популярные — Flow, Hegel.

👉 @frontendInterview

Поток документа

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

Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам заголовок <h1> крупнее заголовка <h2>, а ссылки — синие и подчёркнутые. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например, <div> будет блочным, а <span> или <a> — строчным. Поменять стандартное поведение можно при помощи CSS-свойства display.

Если вообще не применять никаких стилей, браузер формирует из элементов нормальный поток. Поведение блочных элементов в нормальном потоке отличается от поведения строчных.