Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
JavaScript заметки
Відкрити в Telegram
Регулярные заметки по практическому JavaScript. Обучащию посты позволят прокачать навыки во Frontend-разработке. Можно почитать пока компилируется проект :) Сотрудничество: @noname_media Канал на бирже: telega.in/channels/notesjs/card?r=Wj7h1mbl
Показати більше7 737
Підписники
+124 години
-57 днів
-5130 день
Архів дописів
7 737
Как выучить Java Script за пару недель
1. Забить на курсы
2. Подписаться на JavaScript CMD
3. Впитать все знания и скиллы в ёмких статьях, картинках, примерах и тестах.
Нафиг курсы, теперь у тебя есть JavaScript CMD👇🏻
7 737
DOM-коллекции
Как мы уже видели,
childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив.
И есть два важных следствия из этого:
1. Для перебора коллекции мы можем использовать for..of (1 пример).
Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод Symbol.iterator).
2. Методы массивов не будут работать, потому что коллекция – это не массив (2 пример).
Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя Array.from (3 пример).
#браузер #документ #dom_навигация7 737
7 737
childNodes, firstChild, lastChild
childNodes содержит список всех детей, включая текстовые узлы.
Пример выше последовательно выведет детей document.body.
Обратим внимание на маленькую деталь. Если запустить пример выше, то последним будет выведен элемент <script>. На самом деле, в документе есть ещё «какой-то HTML-код», но на момент выполнения скрипта браузер ещё до него не дошёл, поэтому скрипт не видит его.
Свойства firstChild и lastChild обеспечивают быстрый доступ к первому и последнему дочернему элементу.
Они, по сути, являются всего лишь сокращениями. Если у тега есть дочерние узлы, условие ниже всегда верно:
elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild
Для проверки наличия дочерних узлов существует также специальная функция elem.hasChildNodes().
#браузер #документ #dom_навигация7 737
Зачем айтишнику знать английский язык? Вот основные 3 причины:
1. Профессиональная литература
Вообще вся техническая документация для всех языков программирования составляется на английском языке. Зачем? Чтобы её все понимали!
2. Поиск решений в интернете
Шансов найти ответ на вопрос на английском кратно больше, чем искать его на родном языке.
3. Международные заказы
Рынок труда огромен и постоянно нуждается в новых кадрах. Но пускают туда только тех, кто уже знает английский язык.
Поэтому, если ты всерьёз рассчитываешь развиваться как профессионал, то без знания английского тебе не обойтись. А в этом поможет канал «Английский для программиста»
Наглядно, практично и бесплатно! Короче, подписывайся и изучай. После сам себе «спасибо» скажешь: @english_easily
7 737
Дочерние узлы и потомки
Здесь и далее мы будем использовать два принципиально разных термина:
- Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например,
<head> и <body> являются детьми элемента <html>.
- Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д.
В примере выше детьми тега <body> являются теги <div> и <ul> (и несколько пустых текстовых узлов).
А потомки <body>– это и прямые дети <div>, <ul> и вложенные в них: <li> (потомок <ul>) и <b> (потомок <li>) – в общем, все элементы поддерева.
#браузер #документ #dom_навигация7 737
📚Теперь JavaScript можно легко выучить по гайдам в картинках.
Первый канал с гайдами по JavaScript — @guides_js
7 737
Сверху: documentElement и body
Самые верхние элементы дерева доступны как свойства объекта
document:
<html> = document.documentElement
Самый верхний узел документа: document.documentElement. В DOM он соответствует тегу <html>.
<body> = document.body
Другой часто используемый DOM-узел – узел тега <body>: document.body.
<head> = document.head
Тег <head> доступен как document.head.
Есть одна тонкость: document.body может быть равен null
Нельзя получить доступ к элементу, которого ещё не существует в момент выполнения скрипта.
В частности, если скрипт находится в <head>, document.body в нём недоступен, потому что браузер его ещё не прочитал.
Поэтому, в примере выше первый alert выведет null.
#браузер #документ #dom_навигация7 737
Какая вакансия становится всё востребованнее с каждым годом? Вакансия разработчика.
Почему одним разработчикам платят 100-200тр, а другим — 500-700, хотя они все пишут один и тот же код?
Потому что первые не умеют себя грамотно позиционировать. Как работать за бОльший чек и как перейти из любой сферы в разработку, рассказывает Георгий Тер-Григорьянц — Android-разработчик и автор канала GEO.
В свои 22 года он уже зарабатывает 1.000.000+ рублей ежемесячно и знает как подать себя работодателю так, чтобы он был готов платить тебе любые деньги.
Прямо сейчас Георгий собирает команду мечты, поэтому у тебя есть шанс получить своё «теплое место под солнцем». Присоединяйся: @android_money_team
7 737
Навигация по DOM-элементам
DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект.
Все операции с DOM начинаются с объекта
document. Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу.
Так выглядят основные ссылки, по которым можно переходить между узлами DOM (см. картинку выше).
#браузер #документ #dom_навигация7 737
Хотите изучать платные курсы бесплатно? Тогда этот канал для вас.
📈 Сливакер — канал с бесплатными курсами по программированию, хакингу, дизайну, иностранным языкам.
Список актуальных курсов по JS:
▪️[Udemy] Полный Курс По JavaScript(2022)
▪️[Udemy] Node.js — с нуля, основы и построение архитектуры приложений (2021)
▪️[Udemy] Electron — разработка настольных приложений на JavaScript (2020)
Не плати за курсы — бери их бесплатно и учись новому на канале Сливакер!
7 737
Взаимодействие с консолью
При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console.
Для начала:
1. На вкладке Elements выберите первый элемент
<li>.
2. Нажмите Esc – прямо под вкладкой Elements откроется Console.
Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0; предыдущий, выбранный до него, как $1 и т.д.
Теперь мы можем запускать на них команды. Например $0.style.background = 'red' сделает выбранный элемент красным, как на картинке выше.
#браузер #документ #dom7 737
Linux для чайника
- Разбор утилит / инструментов ОС Linux
- Новости / факты о ОС
- Опросы для проверки знаний и навыков
и многое другое.
(p.s. А тут книги для программистов)
7 737
Поэкспериментируйте сами
Чтобы посмотреть структуру DOM в реальном времени, попробуйте Live DOM Viewer. Просто введите что-нибудь в поле, и ниже вы увидите, как меняется DOM.
Другой способ исследовать DOM – это использовать инструменты разработчика браузера. Это то, что мы каждый день делаем при разработке.
Для этого откройте страницу elks.html, включите инструменты разработчика и перейдите на вкладку Elements.
Выглядит примерно так, как на картинке выше.
Вы можете увидеть DOM, понажимать на элементы, детально рассмотреть их и так далее.
Обратите внимание, что структура DOM в инструментах разработчика отображается в упрощённом виде. Текстовые узлы показаны как простой текст. И кроме пробелов нет никаких «пустых» текстовых узлов. Ну и отлично, потому что большую часть времени нас будут интересовать узлы-элементы.
#браузер #документ #dom
7 737
Кодинг — умер. Пора переходить на простые способы обучения.
Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, ВУЗы учат платить деньги.
Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые книжки и часовые видео.
Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста.
Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках.
Короче, держите и изучайте, потом себе спасибо скажете: it_guides
7 737
Другие типы узлов
Есть и некоторые другие типы узлов, кроме элементов и текстовых узлов.
Например, узел-комментарий, который вы можете увидеть на картинке выше.
Здесь мы видим узел нового типа – комментарий, обозначенный как
#comment, между двумя текстовыми узлами.
Казалось бы – зачем комментарий в DOM? Он никак не влияет на визуальное отображение. Но есть важное правило: если что-то есть в HTML, то оно должно быть в DOM-дереве.
Все, что есть в HTML, даже комментарии, является частью DOM.
Даже директива <!DOCTYPE...>, которую мы ставим в начале HTML, тоже является DOM-узлом. Она находится в дереве DOM прямо перед <html>. Мы не будем рассматривать этот узел, мы даже не рисуем его на наших диаграммах, но он существует.
Даже объект document, представляющий весь документ, формально является DOM-узлом.
Существует 12 типов узлов. Но на практике мы в основном работаем с 4 из них: document, узлы-элементы, текстовые узлы, комментарии.
#браузер #документ #dom7 737
Как я стал айтишником, не умея писать код
1. Забил на курсы и онлайн-школы. Они не работают.
2. Подписался на IT Helper.
3. Через неделю написал свой первый сайт.
С чего начать кодить, какие сайты/приложения писать на старте, по каким урокам учиться – ребята запихнули всю теорию в реальные примеры и объяснили всё пошагово.
Самая востребованная профессия 21 века ждёт тебя по ссылке: @it_helper
7 737
Автоисправление
Если браузер сталкивается с некорректно написанным HTML-кодом, он автоматически корректирует его при построении DOM.
Например, в начале документа всегда должен быть тег
<html>. Даже если его нет в документе – он будет в дереве DOM, браузер его создаст. То же самое касается и тега <body>.
Например, если HTML-файл состоит из единственного слова "Привет", браузер обернёт его в теги <html> и <body>, добавит необходимый тег <head>.
При генерации DOM браузер самостоятельно обрабатывает ошибки в документе, закрывает теги и так далее.
В примере единственный тег <p> не закрыт, однако DOM будет нормальным, потому что браузер сам закроет тег и восстановит отсутствующие детали.
#браузер #документ #dom7 737
Хочешь постоянно практиковаться в решении задач и получать подробное объяснение?
Тогда подписывайся на JavaScript | Тесты для проверки знаний! Здесь ты найдешь огромное количество задач по JS с подробными объяснениями!
Переходи и развивайся ежедневно! 👇
7 737
Пример DOM
DOM – это представление HTML-документа в виде дерева тегов.
На картинке слева отображён пример простого HTML-документа, а справа DOM дерево тегов.
Каждый узел этого дерева – это объект.
Теги являются узлами-элементами (или просто элементами). Они образуют структуру дерева:
<html> – это корневой узел, <head> и <body> его дочерние узлы и т.д.
Текст внутри элементов образует текстовые узлы, обозначенные как #text. Текстовый узел содержит в себе только строку текста. У него не может быть потомков, т.е. он находится всегда на самом нижнем уровне.
Например, в теге <title> есть текстовый узел "О лосях".
Обратите внимание на специальные символы в текстовых узлах:
- перевод строки: ↵ (в JavaScript он обозначается как \n)
- пробел: ␣
#браузер #документ #dom