JavaScript заметки

Вычисленные стили: метод в лоб Итак, изменить стиль очень просто. Но как его прочитать? Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать? Свойство style оперирует только значением атрибута "style", без учёта CSS-каскада. Поэтому, используя elem.style, мы не можем прочитать ничего, что приходит из классов CSS. Например, здесь style не может видеть отступы. #браузер #документ #стили_классы

​​Три закрытых канала для фронтендера + бонус. @frontend_tests — сборник задач (с их разбором) для прокачки теоретических знаний и подготовки к собеседованиям. @on_the_frontend — дайджест самых актуальных статей по фронтенду. @build_html — сотни бесплатных макетов для верстки на русском языке. @mobileux — уникальная подборка интерфейсов для мобильных приложений. ⚠️ Доступ открыт на 3 дня, кто успеет подписаться, останется навсегда.

Следите за единицами измерения Не забудьте добавить к значениям единицы измерения. Например, мы должны устанавливать 10px, а не просто 10 в свойство elem.style.top. Иначе это не сработает. Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него. #браузер #документ #стили_классы

📌 БЕСПЛАТНЫЙ КУРС по дизайну с нуля. Вместе сделаем 3+ мощных кейса тебе в портфолио. 5 дней в сильном комьюнити с живым чатом и проверкой ДЗ от топ дизайнеров. Вы узнаете как делать лучший дизайн сайтов, презентаций, постов, креативов и зарабатывать на этом от 100к/мес. Если вы не работал с дизайном, то попробуете себя и изучите основу для новой прибыльной профессии. А если вы уже варитесь в этой сфере, то поднимете скиллы, узнаете трендовые фишки и полезные инструменты. 👉 Переходите в чат, там вас уже ждут кураторы, уроки, домашки и живое общение! - https://t.me/YudaevSchool2_bot?start=ml2 И всё это бесплатно, кликайте по ссылке пока есть места - https://t.me/YudaevSchool2_bot?start=ml2

Полная перезапись style.cssText Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px", потому что div.style – это объект, и он доступен только для чтения. Для задания нескольких стилей в одной строке используется специальное свойство style.cssText Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль. То же самое можно сделать установкой атрибута: div.setAttribute('style', 'color: red...'). #браузер #документ #стили_классы

Знание 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