JavaScript заметки

Хочешь научиться решать задачки с собеседований? А представь, что все это в формате MMORPG бота, где ты можешь прокачивать своего пресонажа, батлиться с друзьями, проходить собесы в разные IT компании и главное - прокачивать себя как разработчика! В Dev’s Battle ты найдешь: 👉 1000+ задачек по JS, Java и Python 👉 2000+ активных игроков 👉 7 компаний для собеседований. От Рабов Галерных до Facebook 👉 Прокачку и развитие внутриигрового персонажа 👉 Фан и общение с другими разработчиками Все это бесплатно, с небольшим кринжом и крутым комьюнити! 😎 Залетай в Dev’s Battle, если, конечно, сможешь…

Вложенные функции Функция называется «вложенной», когда она создаётся внутри другой функции. Это очень легко сделать в JavaScript. Мы можем использовать это для упорядочивания нашего кода, например, как в картинке выше. Здесь вложенная функция getFullName() создана для удобства. Она может получить доступ к внешним переменным и, значит, вывести полное имя. В JavaScript вложенные функции используются очень часто. Что ещё интереснее, вложенная функция может быть возвращена: либо в качестве свойства нового объекта (если внешняя функция создаёт объект с методами), либо сама по себе. И затем может быть использована в любом месте. Не важно где, она всё так же будет иметь доступ к тем же внешним переменным.

Function Declaration В отличие от переменных, объявленных с помощью let, они полностью инициализируются не тогда, когда выполнение доходит до них, а раньше, когда создаётся лексическое окружение. Для верхнеуровневых функций это означает момент, когда скрипт начинает выполнение. Вот почему мы можем вызвать функцию, объявленную через Function Declaration, до того, как она определена. Следующий код демонстрирует, что уже с самого начала в лексическом окружении что-то есть. Там есть say, потому что это Function Declaration. И позже там появится phrase, объявленное через let #функции #function_declaration

Сеньорами не рождаются, ими становятся А помогут тебе в этом топовые книги из канала IT Books, старый добрый VS Code и его функциональные плагины из канала VSCoder, и разные подборки, например, популярные API, которые для тебя собрал канал Look API. Сохрани подборку, чтоб не потерять

Нестандартные атрибуты, dataset Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset. Например, если у elem есть атрибут "data-about", то обратиться к нему можно как elem.dataset.about. Как в примере на картинке.

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

Хочешь легко прокачать свой скилл в HTML/CSS/JS? Знаешь теорию, но не хватает практики?   Подписывайся на Frontend Quiz Здесь ежедневно публикуются тесты разной сложности по HTML, CSS и JS Постоянная практика — путь к мастерству!

DOM-свойства типизированы DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип. Есть и другие примеры. Атрибут style – строка, но свойство style является объектом (как в примере на картинке). #браузер #документ #свойства_узлов

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

Расширенная демонстрация работы с атрибутами Пожалуйста, обратите внимание: 1. getAttribute('About') – здесь первая буква заглавная, а в HTML – строчная. Но это не важно: имена атрибутов регистронезависимы. 2. Мы можем присвоить что угодно атрибуту, но это станет строкой. Поэтому в этой строчке мы получаем значение "123". 3. Все атрибуты, в том числе те, которые мы установили, видны в outerHTML. 4. Коллекция attributes является перебираемой. В ней есть все атрибуты элемента (стандартные и нестандартные) в виде объектов со свойствами name и value. #браузер #документ #атрибуты_свойств

На собеседовании по JS потеют ладошки и пересыхает в горле? Это все потому, что ты плохо подготовился! Канал «Задачи по JS | Подготовка к собеседованию» исправит ситуацию. Ежедневно на канале постят крутые задачи по JS, учат тонкостям и рассказывают про подводные камни языка, которые могут встретиться на собеседовании. Будь готов к любым трудностям! Подписывайся: js_training

HTML-атрибуты В HTML у тегов могут быть атрибуты. Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты и создаёт DOM-свойства для них. Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный. #браузер #документ #атрибуты_свойств

Обработчик в атрибуте и свойстве Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – лишь один из способов его инициализации. Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. P.S. Два примера кода на картинке работают одинаково. #браузер #документ #события

One Day Offer для фронтенд-разработчиков 5 ноября Получить оффер Яндекса можно за 1 день. Участвуйте в One Day Offer Frontend: решите тестовое, пройдите 2 секции 5 ноября и получите оффер в тот же день. От Яндекса в мероприятии участвуют команды, которые готовы предложить работу в гибком формате — полностью удаленно, в гибридном режиме или из любого офиса или коворкинга в 20 городах России и мира. Варианты работы обсуждаются с каждым кандидатом индивидуально. На мероприятии ждут инженеров с опытом разработки от 3-х лет на JavaScript и TypeScript, либо готовых к работе на этих языках программирования.

Использование свойства DOM-объекта Можно назначать обработчик, используя свойство DOM-элемента on<событие>. К примеру, elem.onclick. Если обработчик задан через атрибут, то браузер читает HTML-разметку, создаёт новую функцию из содержимого атрибута и записывает в свойство. #браузер #документ #события

Использование атрибута HTML Обработчик может быть назначен прямо в разметке, в атрибуте, который называется on<событие>. Например, чтобы назначить обработчик события click на элементе input, можно использовать атрибут onclick. #браузер #документ #события

Прокачай скиллы в кодинге абсолютно бесплатно Инициативная команда создала несколько бесплатных каналов для комфортного развития в айтишке. Помощник фронта — хватит искать решения в гугле, поглядывай разок в день на крутые мини-проекты с исходным кодом и закидывай в свой проект Look at that API — здесь собрана база АПИшек на все случаи жизни JavaScript инструменты — куча полезных инструментов для Frontend-разработчика Python заметки — регулярные полезные заметки по языку Best Websites — подборка полезных веб-сайтов на все случи жизни Подпишись, дабы буст в карьере стал космическим!

Обработчики событий Событию можно назначить обработчик, то есть функцию, которая сработает, как только событие произошло. Именно благодаря обработчикам JavaScript-код может реагировать на действия пользователя. Есть несколько способов назначить событию обработчик. Мы их рассмотрим, начиная с самого простого. #браузер #документ #события

Введение в браузерные события Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM). Вот список самых часто используемых DOM-событий, пока просто для ознакомления: События мыши: click – происходит, когда кликнули на элемент левой кнопкой мыши. contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши. mouseover / mouseout – когда мышь наводится на / покидает элемент. mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе. mousemove – при движении мыши. События на элементах управления: submit – пользователь отправил форму <form>. focus – пользователь фокусируется на элементе. Клавиатурные события: keydown и keyup – когда пользователь нажимает / отпускает клавишу. События документа: DOMContentLoaded – когда HTML загружен и обработан. CSS events: transitionend – когда CSS-анимация завершена. Существует множество других событий. О них в следующих постах. #браузер #документ #события

Не очень комфортно заниматься сексом, когда твой телефон прослушивает Google 🤷 Или писать личную СМСку, когда каждое слово видит клавиатурный шпион. Приватности больше нет. Крупные поисковики в открытую залазят к нам в трусы ради прибыли, и только 5-10% пользователей знают, как этому противопостоять. Для тех, кому не наплевать на свою безопасность в сети, есть канал «Отдел К». Как понять, что ваш смартфон хотели взломать? Какие 3 настройки отключить, чтобы избавиться от прослушки? Как по любому сообщению узнать точное гео собеседника? Осторожно, после подписки вам захочется удалить все соцсети: @cyber_cab