JavaScript заметки

3 канала, которые сделают из новичка опытного прогера и устроят на работу Первый делом подписывайся на IT подкасты: сборник лучших подкастов от преподавателей, топов рынка с разборами задач, советами по изучению и рекомендации для новичков. Затем начинай изучать книги в Книжном хранилище — самая большая база, более 2000 русскоязычных книг по PHP, Java, DB, Python, C, C++ ,C#, фронтенду и алгоритмам. И напоследок заходи в IT Jobs — ежедневные вакансии для новичков и мидлов, а также подборки советов по трудоустройству от ведущих IT-компаний.

Можно использовать класс для обработки событий Как видим, если addEventListener получает класс в качестве обработчика, он вызывает menu.handleEvent(event), когда происходит событие. Здесь один и тот же объект обрабатывает оба события. Обратите внимание, мы должны явно назначить оба обработчика через addEventListener. Тогда объект menu будет получать события mousedown и mouseup, но не другие (не назначенные) типы событий. #браузер #документ #события

Объект события доступен и в HTML При назначении обработчика в HTML, тоже можно использовать объект event. Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: f unction(event) { alert(event.type) }. То есть, её первый аргумент называется "event", а тело взято из атрибута. #браузер #документ #события

Какое расстояние от земли до луны? 🌚 Странный вопрос, но еще страннее - то, что его иногда задают разработчикам на собеседованиях.  Меня зовут MAX(), я - кот-ревью. Если ты находишься в поиске работы, то у меня для тебя крутые новости.  Тут я собрал кучу разных интересных кейсов и историй по то: 👉 Как сделать так, чтобы тебя начали звать на собеседования? 👉 Откуда брать опыт для резюме, если его нет? 👉 Что делать, если валишься на собеседованиях и не можешь получить оффер? 👉 Насколько стало сложнее искать работу с марта 2022 года? Все это с примерами и пояснениями!  Если хочешь преисполниться в своих познаниях, то залетай ко мне — буду тебя ждать 😉

Основные свойства объекта event event.type — тип события, в данном случае "click". event.currentTarget — элемент, на котором сработал обработчик. Значение – обычно такое же, как и у this, но если обработчик является функцией-стрелкой или при помощи bind привязан другой объект в качестве this, то мы можем получить элемент из event.currentTarget. event.clientX / event.clientY — координаты курсора в момент клика относительно окна, для событий мыши. #браузер #документ #события

Почти все события всплывают. Ключевое слово в этой фразе – «почти». Например, событие focus не всплывает. В дальнейшем мы увидим и другие примеры. Однако, стоит понимать, что это скорее исключение, чем правило, всё-таки большинство событий всплывают. #браузер #документ #всплытие

Привет! Меня зовут Сергей и я Senior JavaScript-разработчик из Хельсинки. На своём канале «Будни разработчика» я выкладываю самые интересные и оригинальные находки, что помогают мне в моей работе. Статьи, заметки, фишки, опросы и разбор багов браузеров. Подпишись, скучно не будет!

Создание элемента DOM-узел можно создать двумя методами: document.createElement(tag) - создаёт новый элемент с заданным тегом. document.createTextNode(text) - создаёт новый текстовый узел с заданным текстом. Большую часть времени нам нужно создавать узлы элементов, такие как div для сообщения. #браузер #документ #изменение

Поэкспериментируйте сами Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM. Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке. Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements. Выглядит примерно так, как на картинке выше. Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее. Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы. #браузер #документ #dom

Другие типы узлов Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов. Например, узел-комментарий, который вы можете увидеть на картинке выше. Здесь мы видим узел нового типа – комментарий, обозначенный как #comment, между двумя текстовыми узлами. Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве. Все, что есть в HTML, даже комментарии, является частью DOM. Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует. Даже объект document, представляющий весь документ, формально является DOM-узлом. Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них: document, узлы-элементы, текстовые узлы, комментарии. #браузер #документ #dom

Хочешь постоянно практиковаться в решении задач и получать подробное объяснение? Тогда подписывайся на JavaScript | Тесты для проверки знаний! Здесь ты найдешь огромное количество задач по JS с подробными объяснениями! Этот канал идеально подойдёт для тех разработчиков, которые хотят постоянно улучшать свои знания и развиваться вширь.  Можно почитать пока компилируется проект :) Переходи и развивайся ежедневно! 👇

Автоисправление Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM. Например, в начале документа всегда должен быть тег <html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>. Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>. При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее. В примере единственный тег <p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали. #браузер #документ #dom

Терминалоджи – сборник всех IT терминов, которые задают на собеседовании в 90% компаний. 💡На нас подписаны опытные кодеры со всего СНГ, подпишись и ты: @it_terms

Пример DOM DOM – это представление HTML-документа в виде дерева тегов. На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов. Каждый узел этого дерева – это объект. Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева: <html> – это корневой узел, <head> и <body> его дочерние узлы и т.д. Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне. Например, в теге <title> есть текстовый узел "О лосях". Обратите внимание на специальные символы в текстовых узлах: - перевод строки: ↵ (в JavaScript он обозначается как \n) - пробел: ␣ #браузер #документ #dom

BOM (Browser Object Model) Объектная модель браузера (Browser Object Model, BOM) – это дополнительные объекты, предоставляемые браузером (окружением), чтобы работать со всем, кроме документа. Например: - Объект navigator даёт информацию о самом браузере и операционной системе. Среди множества его свойств самыми известными являются: navigator.userAgent – информация о текущем браузере, и navigator.platform – информация о платформе (может помочь в понимании того, в какой ОС открыт браузер – Windows/Linux/Mac и так далее). - Объект location позволяет получить текущий URL и перенаправить браузер по новому адресу. Пример как мы можем использовать объект location показан на рисунке. Функции alert/confirm/prompt тоже являются частью BOM: они не относятся непосредственно к странице, но представляют собой методы объекта окна браузера для коммуникации с пользователем. #браузер #документ

МГУ открыли канал по программированию! Подписывайтесь: @mgu_it

DOM (Document Object Model) Document Object Model, сокращённо DOM – объектная модель документа, которая представляет все содержимое страницы в виде объектов, которые можно менять. Объект document – основная «входная точка». С его помощью мы можем что-то создавать или менять на странице. Мы использовали в примере только document.body.style, но на самом деле возможности по управлению страницей намного шире. Различные свойства и методы описаны в спецификации: DOM Living Standard на https://dom.spec.whatwg.org #браузер #документ

Браузерное окружение, спецификации Язык JavaScript изначально был создан для веб-браузеров. Но с тех пор он значительно эволюционировал и превратился в кроссплатформенный язык программирования для решения широкого круга задач. Сегодня JavaScript может использоваться в браузере, на веб-сервере или в какой-то другой среде, даже в кофеварке. Каждая среда предоставляет свою функциональность, которую спецификация JavaScript называет окружением. Окружение предоставляет свои объекты и дополнительные функции, в дополнение базовым языковым. Браузеры, например, дают средства для управления веб-страницами. Node.js делает доступными какие-то серверные возможности и так далее. P.S. На картинке в общих чертах показано, что доступно для JavaScript в браузерном окружении. #браузер #документ

Одно из главных в обучении фронтенд-разработке — это непрерывная практика и навыки, нужные бизнесу.  Чем раньше вы нырнёте с головой в продакшен, тем быстрее почувствуете себя уверенно на рынке труда. Изучите JavaScript, HTML и CSS, фреймворки React+Redux Toolkit и сопутствующую инфраструктуру на реальных кейсах, наполните портфолио готовыми веб-приложениями и пройдите оплачиваемую стажировку в проектах IT-кластера Ростелеком. 65% выпускников Хекслет получают оффер на первых 5 собеседованиях!  Начните учиться прямо сейчас, чтобы оценить формат 🙌