JavaScript заметки

True Figma - канал, где публикуются макеты Figma для практики вёрстки. Макеты для вёрcтки - @true_figma

Используйте именно функции, а не строки. Назначение обработчика строкой elem.onclick = "alert(1)" также сработает. Это сделано из соображений совместимости, но делать так не рекомендуется. #браузер #документ #события

Частые ошибки Если вы только начинаете работать с событиями, обратите внимание на следующие моменты. Функция должна быть присвоена как sayThanks, а не sayThanks(). Если добавить скобки, то sayThanks() – это уже вызов функции, результат которого (равный undefined, так как функция ничего не возвращает) будет присвоен onclick. Так что это не будет работать. #браузер #документ #события

Доступ к элементу через this Внутри обработчика события this ссылается на текущий элемент, то есть на тот, на котором, как говорят, «висит» (т.е. назначен) обработчик. В коде выше button выводит своё содержимое, используя this.innerHTML. #браузер #документ #события

Прекрати мечтать! Подтяни технический английский и начни искать работу за рубежом! Мы регулярно публикуем самые необходимые слова, выражения и тесты на английском языке из мира IT. Подойдет всем IT-специалистам, которые хотят без труда читать документацию и свободно общаться с иностранными заказчиками. Подписывайся на @enforit и качай свой инглиш, пока компилируется проект👌

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

HTML теперь в телеграм! HTML — самый популярный язык в мире. Именно на нем написаны все сайты. Начать свой путь в программировании проще всего с изучения HTML. Тем более теперь в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!

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

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

❇️ Мы создали специальный канал по льготной IT-ипотеке и новостройкам. Новости, ставки, статистика – все собрано в одном канале. ❗️Лучшие лоты и рекомендации по подбору новостроек. Поможем оформить ипотеку и приобрести новую квартиру без комиссий! 🌐 Проходите в канал, знакомьтесь с информацией, обсуждайте, обращайтесь с вопросами - разъясним. Подписывайтесь: https://t.me/itipoteka

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

Учить Python и другие языки программирования полезно и интересно, но еще интереснее может быть наблюдать за тем, как программисты создают свою IT-компанию. В канале «Программисты делают бизнес» основатели и ведущие сотрудники KTS рассказывают про будни компании, проблемы, с которыми они сталкиваются, и делятся своими мыслями и советами. Если вам интересно в онлайне следить за тем, как создается IT-компания, подписывайтесь!

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

​​Совет на лето: изучите JavaScript. Средняя зарплата JavaScript-кодера по данным HeadHunter 152 000 рублей, а выучить его можно всего за 1-2 месяца. Главное, чтобы объяснили доступно. Этим и занимается разработчик с канала @true_js. Он укомплектовал инфу в простые уроки, чтобы любой научился кодить и получил работу через месяц. Никаких занудных учебников и бесполезных туториалов. Учиться программировать можно ПРЯМО в Телеграме. Дерзайте: @true_js

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

One Day Offer для фронтенд-разработчиков 25 июня Яндекс проводит One Day Offer — онлайн-встречу, на которой вы можете получить оффер от Яндекса всего за один день. Вы JS разработчик с опытом от трех лет и хотите работать над интересными проектами в Яндексе? Регистрируйтесь на сайте, успейте решить задачи контеста до 21 июня, а 25 июня мы встретимся на онлайн-секциях, по результатам которых лучшие участники смогут присоединиться к командам Поиска, Yandex Cloud или Директа.

Применение для fixed позиционирования Чаще всего нам нужны координаты для позиционирования чего-либо. Чтобы показать что-то около нужного элемента, мы можем вызвать getBoundingClientRect, чтобы получить его координаты элемента, а затем использовать CSS-свойство position вместе с left/top (или right/bottom). Например, функция createMessageUnder(elem, html) выше показывает сообщение под элементом elem. #браузер #документ #координаты

Хватит искать макеты Figma. Серьезно.  В Telegram есть бот, который за 2 мин предложит уникальные макеты figma реальных проектов по вашим критериям.

elementFromPoint(x, y) Вызов document.elementFromPoint(x, y) возвращает самый глубоко вложенный элемент в окне, находящийся по координатам (x, y). Например, код выше выделяет с помощью стилей и выводит имя тега элемента, который сейчас в центре окна браузера. #браузер #документ #координаты

Верстка сайта из Figma это не сложно! Автор канала ITDoctor выпустил 18 уроков с пошаговым объяснением как сверстать сайт по макету из Figma. В этом бесплатном курсе: Подготовка проекта, Работа со шрифтами, Плагин Pixel Perfect, CSS Grid и Flexbox, Верстка сайта и адаптивной версии. Создание интерактивных элементов таких как меню, галерея и модальные окна. А так же домашнее задание в виде макета для Практики! И много полезных, нюансов, лайфхаков, трюков с редактором кода и языками HTML, CSS, JS на канале ITDoctor. Учись создавать сайты сегодня, не откладывай на завтра 👇🏻