JavaScript заметки

Онлайн-митап Университета Иннополис «Карьерный путь в Fullstack-разработке от практиков»! Герои обсудят, зачем идти в Fullstack-разработку, что нужно уметь и как расти в профессии. В программе митапа: — суть профессии  Fullstack-разработчика — основные инструменты и библиотеки — что спрашивают на собеседовании — какие знания и навыки получают выпускники курсов. Спикеры: — Андрей Власов — лидер компетенции javascript на проекте СберИнвестор — Александр Примаков — главный инженер по разработке ПАО Сбербанк — Никита Григорьев — Lead frontend-разработки проекта SberMomentum — Рустам Кагапов — Frontend-разработчик Центра разработки ПО Университета Иннополис. Конкурс! Проверьте свои силы и решите задачу от наших спикеров. Ответы принимаются до 8 августа 2022 года 23:59 мск. Условия конкурса здесь. Троих победителей ждут призы, а решения разберем в прямом эфире.  🗓 Когда: 10 августа, в 16:00  👉 Регистрация и подробности https://clck.ru/sUw7y Наш телеграм-канал

Итого по стилям и классам Для управления классами существуют два DOM-свойства: - className – строковое значение, удобно для управления всем набором классов. - classList – объект с методами add/remove/toggle/contains, удобно для управления отдельными классами. Чтобы изменить стили: - Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style". Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию. - Свойство style.cssText соответствует всему атрибуту "style", полной строке стилей. Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется: - Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style. Только для чтения. #браузер #документ #стили_классы

Стили, применяемые к посещённым :visited ссылкам, скрываются! Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited. Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили. JavaScript не видит стили, применяемые с помощью :visited. Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность. #браузер #документ #стили_классы

Фронтендеры на месте? Нашли для вас канал, где постят эффекты с готовым кодом на Codepen. Увидел – и сразу заюзал в своём проекте. Подпишись и пили сайты на уровне Apple – @frontend_formula

getComputedStyle требует полное свойство! Для правильного получения значения нужно указать точное свойство. Например: paddingLeft, marginTop, borderTopWidth. При обращении к сокращённому: padding, margin, border – правильный результат не гарантируется. Например, если есть свойства paddingLeft/paddingTop, то что мы получим вызывая getComputedStyle(elem).padding? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет. Есть и другие несоответствия. Например, некоторые браузеры (Chrome) отображают 10px в документе выше (см. картинку), а некоторые (Firefox) – нет. #браузер #документ #стили_классы

Вычисленное (computed) и окончательное (resolved) значения Есть две концепции в CSS: - Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125%. - Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px. Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px. Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился. Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях. #браузер #документ #стили_классы

Изучить основы JavaScript за 14 дней? По цене пиццы?! Это реально! Подключайтесь к нашему подготовительному курсу по Frontend-разработке. Прямо сейчас переходите по ссылке и бронируйте место, мы стартуем 11 августа! 🙌

Вычисленные стили: getComputedStyle Что, если нам нужно, скажем, увеличить отступ на 20px? Для начала нужно его текущее значение получить. Для этого есть метод: getComputedStyle(element, [pseudo]). Результат вызова – объект со стилями, похожий на elem.style, но с учётом всех CSS-классов. #браузер #документ #стили_классы

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

‼️ 3 канала, которые дадут ощутимый буст начинающим и опытным айтишникам Телеграм — кладезь полезной инфы, и мы выделили самые важные источники. Подпишись, чтобы не потерять! 🖥 ПК_User — канал с фичами и хаками системы, которые прокачают твоё владение железом и помогут обойти многие ограничения. 🤝 IT Helper — серьёзный источник по всем языкам программирования с тестами, гайдами и секретами (авторы канала — профессиональные разрабы и наставники). 🐍 Python Teacher — сообщество Senior-разработчиков, разжёвывающих темы и проводящих тестирования по самому известному языку программирования.

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

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

Этот канал не сделает из тебя программиста за неделю! Там не гарантируют трудоустройство и не дают других пустых обещаний. Зато ежедневно постят самое интересное по WEB-разработке: 🍑 Полезные библиотеки 🍑 Обучающие материалы с примерами кода 🍑 Обзоры фич популярных фреймворков Если JS, CSS, HTML, PHP для тебя не просто набор букв - подписывайся на WebCraft👇

Сброс стилей Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его. Например, чтобы скрыть элемент, мы можем задать 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. #браузер #документ #стили_классы

Хочешь научиться создавать такие же прикольные анимации и эффекты? Для этого не нужно идти на курсы и учиться на дизайнера. 1. Подписываемся на Frontend Vollex 2. Повторяем инструкции 3. Уже через неделю создаём свой первый сайт  Переходи на канал и хвастайся перед друзьями новыми навыками: @vollex_frontend

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". #браузер #документ #стили_классы

Хочешь научиться разрабатывать современные сайты, но нет времени изучать тренды фронтенд-разработки? Админ канала Frontend Trends публикует все отборные тренды фронтенд-разработки в одном месте с готовым кодом на CSS, JavaScript, React и Vue.  Здесь можно изучать реализацию понравившихся идей и применять их в своих проектах за несколько минут. Подпишись на 👉 Frontend Trends, применяй тренды фронтенд-разработки и повышай свой чек.

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