JavaScript заметки

Верстальщики, ловите лайфхак: Все макеты для верстки уже нашли и бесплатно выкладывают на канале Макеты Figma. Макеты для верстки: @figma_templates

Сброс стилей Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его. Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none". Затем мы можем удалить свойство style.display, чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "". Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было. #браузер #документ #стили_классы

Element style Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте "style". Установка стиля elem.style.width="100px" работает так же, как наличие в атрибуте style строки width:100px. Для свойства из нескольких слов используется camelCase. #браузер #документ #стили_классы

Испытайте себя в роли Frontend-разработчика🤘 Давайте вошли и вышли, приключение на 14 дней. Даём только мясную и прикладную информацию. Никакой воды и траты времени! По окончании вы уже владеете базовым знанием языка и даже напишете собственную программу! Начало 13 октября. Успейте присоединиться 🙌

classList elem.classList – это специальный объект с методами для добавления/удаления одного класса. Так что мы можем работать как со строкой полного класса, используя className, так и с отдельными классами, используя classList. Выбираем тот вариант, который нам удобнее. Методы classList: elem.classList.add/remove("class") – добавить/удалить класс. elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить. elem.classList.contains("class") – проверка наличия класса, возвращает true/false. #браузер #документ #стили_классы

className Изменение класса является одним из наиболее часто используемых действий в скриптах. Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class. Поэтому для классов было введено схожее свойство "className": elem.className соответствует атрибуту "class". #браузер #документ #стили_классы

Разрабатываешь сайты в Visual Studio Code и еще не подписан на VSCoder? Срочно исправляй! Visual Studio Code — это оптимизированный редактор кода с поддержкой таких операций разработки, как отладка, выполнение задач и контроль версий. Имеет множество плагинов, которые собраны у нас на канале!

Стили и классы Как правило, существует два способа задания стилей для элемента: 1) Создать класс в CSS и использовать его: <div class="..."> 2) Писать стили непосредственно в атрибуте style: <div style="...">. JavaScript может менять и классы, и свойство style. Классы – всегда предпочтительный вариант по сравнению со style. Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться». Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript. В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение. #браузер #документ #стили_классы

Несколько слов о «document.write» Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write. Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ. Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его. В современных скриптах он редко встречается из-за следующего важного ограничения: Вызов document.write работает только во время загрузки страницы. #браузер #документ #изменение

Бывший сотрудник Ozon завел свой канал, где делится фишками и наработками которые помогут украсить сайт. И ничего сложного в этом нет, просто копируешь и вставляешь в свой код. Посмотреть можно тут.

Устаревшие методы вставки/удаления Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам. Сейчас уже нет причин их использовать, так как современные методы append, prepend, before, after, remove, replaceWith более гибкие и удобные. Мы упоминаем о них только потому, что их можно найти во многих старых скриптах: parentElem.appendChild(node) parentElem.insertBefore(node, nextSibling) parentElem.replaceChild(node, oldChild) parentElem.removeChild(node) #браузер #документ #изменение

DocumentFragment DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов. Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое. Например, getListContent ниже генерирует фрагмент с элементами <li>, которые позже вставляются в <ul> #браузер #документ #изменение

ТОП-20 макетов , которые дополнят Ваше портфолио Выучил верстку и тебе не хватает работ в портфолио? Ищешь макеты, но они все платные? Заходи на канал, каждый день публикуются макеты разной сложности, подойдет как новичку так и профи!

Клонирование узлов: cloneNode Как вставить ещё одно подобное сообщение? Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости). Иногда, когда у нас есть большой элемент, это может быть быстрее и проще. Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false), тогда клон будет без дочерних элементов. #браузер #документ #изменение

Удаление узлов Для удаления узла есть методы node.remove(). Например, сделаем так, чтобы наше сообщение удалялось через секунду. Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого. Все методы вставки автоматически удаляют узлы со старых мест. #браузер #документ #изменение

@codewars_js - telegram-канал для фронтенд-разработчиков, в котором публикуют задачи разной сложности по JavaScript. Подписывайся и развивай мышление программиста.

insertAdjacentHTML/Text/Element С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html). Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих: "beforebegin" – вставить html непосредственно перед elem, "afterbegin" – вставить html в начало elem, "beforeend" – вставить html в конец elem, "afterend" – вставить html непосредственно после elem. Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML». #браузер #документ #изменение

Методы вставки Вот методы для различных вариантов вставки: node.append(...nodes or strings) – добавляет узлы или строки в конец node, node.prepend(...nodes or strings) – вставляет узлы или строки в начало node, node.before(...nodes or strings) – вставляет узлы или строки до node, node.after(...nodes or strings) – вставляет узлы или строки после node, node.replaceWith(...nodes or strings) – заменяет node заданными узлами или строками. #браузер #документ #изменение

⚡Хочешь стать универсальным разработчиком и участвовать во всех этапах разработки? Тогда профессия Fullstack-разработчик на JavaScript для тебя! Такой специалист отвечает как за внешнюю часть сайта: верстку, дизайн, интерфейс, так и внутреннюю часть: сервера и базы данных. Освоить все необходимые навыки для старта в этой профессии можно с помощью специализации «Fullstack Developer» от OTUS. На этом онлайн-курсе предумотрена серьезная поэтапная подготовка: 3 ступени с живыми вебинарами, практикой и видеокурсом. 📌За 14 месяцев вы соберете 3 проекта в портфолио из и сможете стать Fullstack-разработчиком уровня Middle+, а трудоустроиться можно еще во время обучения. В этом вам поможет центр карьеры OTUS. 👉Успей записаться в группу до конца сентября со скидкой в 20%: https://otus.pw/t4oE/

Методы вставки, append Чтобы наш div появился, нам нужно вставить его где-нибудь в document. Например, в document.body. Для этого есть метод append, в нашем случае: document.body.append(div). #браузер #документ #изменение