Сегодня вместо видео — небольшой пятничный пример для обработки текста, чтобы можно было писать такие сообщения для Телеграмма: https://codepen.io/detepr/pen/MzyjLO

На этой неделе попробуем новый подход к обучению. Всю неделю будем разбирать одну тему при помощи серии коротких видео (менее 5 минут каждое). Кроме того, добавлю разбор домашки.

Код примера при этом остаётся единым, так что его можно легко прочитать от начала до конца: https://codepen.io/detepr/pres/BGNJqw

Есть гипотеза, что так будет легче воспринимать материал. Сейчас видео смотрят менее 10 процентов подписчиков. Посмотрим, возрастёт ли число просмотров у коротких видео.

На этой неделе — условные операторы. График публикаций:
пн — основы;
вт — булевые значения и операторы сравнения;
ср — приведение типов к логическому;
чт — логические операции && и ||;
пт — тринарный оператор;
сб — условное присвоение;
вс — разбор домашнего задания.

Сегодня — первое видео про основы условных операторов: https://www.youtube.com/watch?v=pcz3oj6BSMM

Если что, то видео продолжают публиковаться на Ютюбе по расписанию. В канал не пишу о выходе каждого, чтобы зря не беспокоить тех, для кого видео слишком простые. :)

Но про сегодняшний выпуск расскажу, так как он — про тернарный оператор (который я всю жизнь называл «тринарным», чёртова латынь). Выглядит он так:

let a = (условие) ? значение1 : значение2;

Если условие в скобках верно, то результатом присвоения будет значение1, иначе — значение2.

Раньше знать или не знать о тернарном операторе можно было по желанию. Но сейчас без него никуда — он часто используется в условной шаблонизации, в том же Реакте, например.

https://www.youtube.com/watch?v=NUTzTyd97ks

Оптимальным темпом выступлений считается 120 слов в минуту. У меня ни разу не получилось его выдержать, я всегда тараторю. Поэтому в этот раз решил попробовать написать текст целиком, благо, что тайминг всего 5 минут. Т. е. нужно уложиться в 600 слов.

Но вот беда, все программы считают слова вместе с предлогами и союзами. Текст длиной 600 слов получается размерено прочитать за 4 минуты. Нужен был способ посчитать слова без предлогов.

За 6 минут написал скрипт для этого (потом ещё 20 минут оформлял): https://codepen.io/detepr/pen/QJpyMB/. Вдруг он вам пригодится.

А ещё его интересно разобрать, так как почти всё то, что в нём используется — мы уже прошли в видео-курсе. Попробуйте разобраться сами, а я потом как-нибудь видео-разбор запишу.

В этом видео рассказываю почему истина и барсук — это барсук, а истина или барсук — истина: https://youtu.be/1hIYrfXyFmg

Также выложил видео про разбор домашки. Ссылку на него давать не буду, так как тот, кто делал домашку — найдёт. :)

HTML-разметка — это просто текст, который делит страницу на смысловые (и не очень) блоки. Когда браузер получает HTML-документ, он на его основе создаёт древовидную структуру блоков, вложенных друг в друга. Каждый объект при этом называется узлом.

Потом к узлам применяются CSS-стили и получается та страница, которую мы видим в браузере.

К любому из узлов можно обратиться через JS как к объекту, чтобы узнать и изменить их свойства или содержимое, создать новые узлы или удалить старые. Структура этих объектов и называется DOM — Document Object Model. Она нужна для того, чтобы вы могли динамически менять содержимое документа после его загрузки в браузер.

Подробнее в видео: https://youtu.be/TKxR2tNxTcA
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

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

let el = document.querySelector(selector)
и
let elems = document.querySelectorAll(selector)

Оба метода получают на вход CSS-селектор элемента. Например:

let el = document.querySelector(".someClass b");

Отличие их в том, что querySelector вернёт один узел, который попался первым, а querySelectorAll вернёт список всех узлов на странице, соответствующих селектору.

Список узлов очень похож на массив, но не является массивом. Например, у него, как и у массивов, есть метод forEach, при помощи которого можно перебрать один элемент за другим. Но у него нет метода map, который позволяет преобразовать один массив в другой, применив к каждому элементу функцию-колбэк.

Если же вам всё-таки нужен метод map, то вы можете преобразовать список узлов в массив при помощи конструкции [...nodeList]:

let arr = document.querySelecroAll("a");
[...arr].map(el => el.innerText);

Подробнее в видео: https://youtu.be/KIBv7QMToP4
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

После того, как вы нашли элемент, вы можете узнать его содержимое и свойства, а таке поменять их.

let el = document.querySelector(".someClass");
el.innerText // текстовое содержимое
el.innerHTML // HTML-разметка содержимого
el.outerHTML // полная HTML-разметка
el.offsetWidth // ширина, аналогично Height
el.offsetLeft // координата левого угла
// и так далее

Назначенные узлу стили можно узнать через свойство sytle:

el.style.color // цвет текста

Но в нём содержатся только те CSS-свойства, которые назначены непосредственно узлу. Чтобы узнать все свойства, которые получил узел из CSS-стилей, потребуется более сложная конструкция:

getComputedStyle(el).color // цвет текста

Если захотите узнать более сложные свойства, то не забудьте преобразовать их названия в camelCase. Например: background-color → backgroundColor;

Подробнее в видео: https://youtu.be/kM8YAhsaHfE
И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

Свойства и содержимое можно не только читать, но и записывать:

let el = document.querySelector(".someClass")
el.innerText = "<b>О!</b>" // вставится как текст
el.innerHTML = "<b>О!</b>" // вставится как тег
el.style.fontSize = "12px" // изменится стиль

Подробнее в видео: https://youtu.be/tX1dmw8m66A

И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO

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

Для этого есть набор методов:

let el = document.querySelector(".someClass")
el.childNodes // дочерние элементы
el.nextSibling // сосед справа
el.parentNode // родительский элемент

Подробнее в видео: https://youtu.be/MoEWUWIDFDs

И в примере с кодом: https://codepen.io/detepr/pres/mQqKZO


✨Домашнее задание ✨

Взять пример из урока: https://codepen.io/detepr/pen/rQYYbx
1. Посчитать сумму цен всех подарков и вывести её в консоль
2. Отсортировать подарки по цене

За последний месяц я записал 20 видео про основы JS. За это время их посмотрели 1474 раза, общее время просмотра составило 4169 минут. Среднее время просмотра — 2,5 минуты.

Есть тенденция: чем дальше, тем меньше просмотров у видео набирается за неделю. Это недвусмысленно намекает на то, что формат нужно дорабатывать или менять. Поэтому два небольших опроса:

Как вам контент Детепра?

Как вам качество подачи уроков?

В этом видео рассказал о том, как сверстать секси-кнопку (Серёга очень просил): https://youtu.be/_gDY3TzG_hs

Один мой коллега попросил написать про его канал: «Простой маркетолог» (https://t.me/marketingdot). А я и не против.

Во-первых, я сам читаю его канал и он мне кажется интересным. Во-вторых, автор канала — человек, во многом благодаря которому состоялся успешный запуск Андромеды, ему есть о чём рассказать.

А рассказывает автор об основах маркетинга и интересных кейсах. Посты читаются легко, наводят на интересные мысли и составляют неплохую конкуренцию другому вечернему чтению.

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

В Developer Tools есть вкладка Animation при помощи которой можно препарировать анимации и разбирать как они устроены. Показываю на примере анимации кнопки аплодисментов на Медиуме:
https://youtu.be/lJ8ekUMjrnA

Только что родился новый телеграмм-канал, которым я просто не могу не поделиться: https://t.me/zastavil

Его ведёт дизайнер Поиска Андрей Репин. Иногда у меня сладывается ощущение, что он знает обо всём, что происходит в дизайн-среде. Поэтому мы заставили его делиться ценными находками со всеми.

Андрей очень стеснительный, поддержите его подписками. Люто рекомендую.

Когда переходишь на Фигму после Скетча, очень не хватает способа быстро расставить много картинок (как это делает, например, плагин Craft).

Оказывается, способ есть, но большинство новичков Фигмы о нём не знает.

Нужно выделить примитивы и нажать Cmd + Shift + K (Ctrl + Shift+ K на Windows). После чего нужно выбрать несколько картинок и расставить их по нужным шейпам.