JavaScript заметки

Знание SQL — must have в сфере аналитики На бесплатном курсе-симуляторе в Нетологии «Введение в SQL и работу с базой данных» вы  изучите основы SQL, научитесь подключаться к реляционным базам данных, делать SQL-запросы и создавать простые отчёты и аналитику. Все задания основаны на реальных кейсах из практики аналитиков. Курс подойдет всем, кто работает с данными или хочет начать. Записаться → https://netolo.gy/inG

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

Не знаешь о своих слабых местах на JS? Стартап @yourcodereview запустил 4-недельное обучение: на нём менторы — Senior-разработчики и HRы — помогают IT-специалистам проходить собеседования. Что ждёт на обучении: 🔹вместе разберёте свои ошибки, узнаете свои слабые места и получите гайд по исправлению 🔹научитесь правильно себя презентовать и продавать 🔹приведёте своё резюме в порядок вместе с Senior Frontend разработчиком и HRом 🔹получите фидбэк по тестовым Самая главная фича — пройдёте 4 собеседования с Senior-ом и HR🔥 В итоге — станешь готовым к собесу в любую компанию и узнаешь, сколько реально стоишь на рынке. Оставляй заявку и записывайся на подготовку, места ещё есть!

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

Как понять, что сфера IT вам подходит, и с чего начать карьеру, если нет опыта? Запишитесь на бесплатный вебинар от @htmlacademy и получите эффективные карьерные советы от IT HR и психолога из PSYvIT. Программа вебинара: ✔️ Кому подойдёт сфера IT. ✔️ Как стать программистом с нуля и в каком направлении двигаться. ✔️ Какие есть возможности и перспективы в IT. Всем участникам дарим скидки и полезные материалы. Записаться — https://tml.io/bno5g

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

Главная трудность начинающих фронтенд-разработчиков – непонимание в какую сторону развиваться и какие навыки прокачивать, чтобы расти профессионально. Мы собрали тест из 7 вопросов по тем навыкам, которые востребованы на рынке разработки. Пройдите тест на знание фронтенд-разработки и получите Карту компетенций, которая поможет составить вам персональный план развития до мидла! Получить план развития 🧗🏼‍♂️

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

Airplanes — анимация полёта самолета при прокрутке страницы, реализованная с помощью GSAP и ScrollTrigger. #анимация #animated #GSAP Такого еще много на codepen.js — это канал с крутыми и полезными фичами для вашего сайта: готовый код на css и javascript, который можно вставить в проект. Подписывайтесь, мы выкладываем свежие исходники каждый день 🔥

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

Самый низкострессовый способ попробовать себя в роли Frontend-разработчика, не рискуя совершенно ничем: спринт-курс от Хекслета. Основы JavaScript за 2 недели!  Вас ждет: 72 урока с практикой в онлайн-тренажере 2 вебинара с разбором сложных тем и полноценная лайвкодинг-сессия помощь и поддержка наставника, развернутая обратная связь. . 😱Ещё раз: не нужно иметь никаких знаний ни в программировании, ни в математике. Курс длится всего 14 дней и даст вам полное представление о профессии и о том, стоит ли погружаться в неё с головой. Начинаем 26 мая. Присоединяйтесь!

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

Макеты для верстки — telegram канал, куда выкладываются уникальные дизайн-макеты для тренировок. Верстайте, оценивайте свои навыки, добавляйте проекты в портфолио! Посмотреть макеты

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

Яндекс создал обучающий канал по SQL и Базам Данных для всех, кто хочет стать специалистом в дата-сайнс. — Полный комплект обучающих материалов — Советы и гайды по оптимизации — Помощь с поиском ваканский по специальности Подписывайтесь: t.me/sqltop

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

🔐 Теперь Хакинг и ИБ можно легко выучить по гайдам в картинках. Первый канал с гайдами по этичному хакингу — @hack_guides

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

Figma теперь есть в Telegram! Figma - топовый образовательный ресурс прямо в Telegram, где любой желающий обучится веб-дизайну абсолютно бесплатно и сможет на этом зарабатывать. Разработка дизайна сайтов, оформлений, превью и многое другое! ⚡️Не упусти возможность стать веб-дизайнером: @figma_russia

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