Frontend Study

2022-08-31 16:19:00 Будьте внимательны: «innerHTML+=» осуществляет перезапись

Мы можем добавить HTML к элементу, используя elem.innerHTML+="ещё html".

На практике этим следует пользоваться с большой осторожностью, так как фактически происходит _не добавление, а *перезапись*.

Технически эти две строки (см. картинку выше) делают *одно и то же*.

Другими словами, innerHTML+= делает следующее:
1) Старое содержимое удаляется.
2) На его место становится новое значение innerHTML (с добавленной строкой).

*Так как содержимое «обнуляется» и переписывается заново, все изображения и другие ресурсы будут перезагружены*.

В примере chatDiv выше строка chatDiv.innerHTML+="Как дела?" заново создаёт содержимое HTML и перезагружает smile.gif (надеемся, картинка закеширована). Если в chatDiv много текста и изображений, то эта перезагрузка будет очень заметна.

#документ #свойства_узлов Открыть/Комментировать

2022-08-31 14:17:49 Прекрати мечтать и стань мидлом за 50 дней

Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих.

Полезная вËрстка — канал с готовым решением повседневных задач: слайдеры, анимация, навигация и т.д.

JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке.

JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.

Войти в IT — канал с видеуроками и курсами, который научит тебя кодить с нуля за месяц.

Развивайся с нами, ведь так проще! Открыть/Комментировать

2022-08-29 13:29:03 ES6

ECMAScript 2015, также известный как ES6, является фундаментальной версией стандарта ECMAScript.

ES6 привнёс ряд фундаментальных изменений в язык, которые стали его неотъемлемой частью.

Что принёс с собой этот стандарт:
- стрелочные функции
- новая область this
- let и const
- промисы
- generators
- классы
- конструктор и ещё многое-многое другое

#ES6 Открыть/Комментировать

2022-08-27 08:50:42 Int8Array

Объект Int8Array представляет типизированный массив 8-разрядных целых значений. Содержимое инициализируется значением 0. Создав экземпляр Int8Array, возможно получить доступ к элементам массива, используя методы объекта или стандартный синтаксис доступа к элементу массива по его индексу (с помощью скобочной нотации).

#стандартные_встроенные_объекты Открыть/Комментировать

2022-08-22 18:10:29 HTML-атрибуты

В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них.

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит,
если атрибут нестандартный.

#атрибуты_свойств Открыть/Комментировать

2022-08-20 20:31:11 Живые коллекции

Все методы "getElementsBy*" возвращают живую коллекцию. Такие коллекции всегда отражают текущее состояние документа и автоматически обновляются при его изменении.

В приведённом выше примере есть два скрипта.
- Первый создаёт ссылку на коллекцию div. На этот момент её длина равна 1.
- Второй скрипт запускается после того, как браузер встречает ещё один div, теперь её длина – 2.

#DOM #браузер Открыть/Комментировать

2022-08-20 14:00:09 Кавычки

В JavaScript есть разные типы кавычек.
Строку можно создать с помощью одинарных, двойных либо обратных кавычек.

Одинарные и двойные кавычки работают, по сути, одинаково, а если использовать обратные кавычки, то в такую строку мы сможем вставлять произвольные выражения, обернув их в ${…}.

Ещё одно преимущество обратных кавычек — они могут занимать несколько строк.

Одинарные и двойные кавычки в языке с незапамятных времён: тогда потребность в многострочных строках не учитывалась. Что касается обратных кавычек, они появились существенно позже, и поэтому они гибче.

#строки #теория Открыть/Комментировать

2022-08-19 10:43:36 Введение в браузерные события

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий, пока просто для ознакомления:

События мыши:
click – происходит, когда кликнули на элемент левой кнопкой мыши.
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши.
mouseover / mouseout – когда мышь наводится на / покидает элемент.
mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
mousemove – при движении мыши.

События на элементах управления:
submit – пользователь отправил форму

.
focus – пользователь фокусируется на элементе.

Клавиатурные события:
keydown и keyup – когда пользователь нажимает / отпускает клавишу.

События документа:
DOMContentLoaded – когда HTML загружен и обработан.

CSS events:
transitionend – когда CSS-анимация завершена.

Существует множество других событий. О них в следующих постах.

#браузер #события

808 views07:43

Открыть/Комментировать

2022-08-16 20:00:08 insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html).

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
"beforebegin" – вставить html непосредственно перед elem,
"afterbegin" – вставить html в начало elem,
"beforeend" – вставить html в конец elem,
"afterend" – вставить html непосредственно после elem.

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

#документ #изменение Открыть/Комментировать

2022-08-16 13:36:00 Удаление узлов

Для удаления узла есть методы node.remove().
Например, сделаем так, чтобы наше сообщение удалялось через секунду.

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

#документ #изменение Открыть/Комментировать