JavaScript заметки

Ещё немного ссылок: таблицы До сих пор мы описывали основные навигационные ссылки. Некоторые типы DOM-элементов предоставляют для удобства дополнительные свойства, специфичные для их типа. Таблицы – отличный пример таких элементов. Элемент <table>, в дополнение к свойствам, о которых речь шла выше, поддерживает следующие: - table.rows – коллекция строк <tr> таблицы. - table.caption/tHead/tFoot – ссылки на элементы таблицы <caption>, <thead>, <tfoot>. - table.tBodies – коллекция элементов таблицы <tbody> (по спецификации их может быть больше одного). <thead>, <tfoot>, <tbody> предоставляют свойство rows: - tbody.rows – коллекция строк <tr> секции. <tr>: - tr.cells – коллекция <td> и <th> ячеек, находящихся внутри строки <tr>. - tr.sectionRowIndex – номер строки <tr> в текущей секции <thead>/<tbody>/<tfoot>. - tr.rowIndex – номер строки <tr> в таблице (включая все строки таблицы). <td> and <th>: - td.cellIndex – номер ячейки в строке <tr>. P.S. Пример выше на картинке. #браузер #документ #dom_навигация

Фишки, советы, полезные материалы — все это есть на канале Programmer Way Немного о нем: 📝 Авторские статьи, мысли и фишки 📍Верстка, JS, React, Redux, Wordpress 🤝 Чат фронтендеров 🗂 Полезные уроки/статьи

Навигация только по элементам Навигационные свойства, описанные выше, относятся ко всем узлам в документе. В частности, в childNodes находятся и текстовые узлы и узлы-элементы и узлы-комментарии, если они есть. Но для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы. Поэтому давайте рассмотрим дополнительный набор ссылок, которые учитывают только узлы-элементы. Эти ссылки похожи на те, что раньше, только в ряде мест стоит слово Element: - children – коллекция детей, которые являются элементами. - firstElementChild, lastElementChild – первый и последний дочерний элемент. - previousElementSibling, nextElementSibling – соседи-элементы. - parentElement – родитель-элемент. #браузер #документ #dom_навигация

💡 JavaScript - канал, в котором админ рассказывает сложный javascript человеческим языком. Подписывайся, если хочешь прокачать JS и повысить свой чек за работу - t.me/simple_js

Соседи и родитель Соседи – это узлы, у которых один и тот же родитель. Следующий сосед – в свойстве nextSibling, а предыдущий – в previousSibling. Родитель доступен через parentNode. P.S. Примеры показаны на картинке выше. #браузер #документ #dom_навигация

Как выучить Java Script за пару недель 1. Забить на курсы 2. Подписаться на JavaScript CMD 3. Впитать все знания и скиллы в ёмких статьях, картинках, примерах и тестах. Нафиг курсы, теперь у тебя есть JavaScript CMD👇🏻

DOM-коллекции Как мы уже видели, childNodes похож на массив. На самом деле это не массив, а коллекция – особый перебираемый объект-псевдомассив. И есть два важных следствия из этого: 1. Для перебора коллекции мы можем использовать for..of (1 пример). Это работает, потому что коллекция является перебираемым объектом (есть требуемый для этого метод Symbol.iterator). 2. Методы массивов не будут работать, потому что коллекция – это не массив (2 пример). Первый пункт – это хорошо для нас. Второй – бывает неудобен, но можно пережить. Если нам хочется использовать именно методы массива, то мы можем создать настоящий массив из коллекции, используя Array.from (3 пример). #браузер #документ #dom_навигация

🔔 Сайтодел — телеграм-сообщество веб-разработчиков: Объяснения основ JavaScript, эффективные приемы в CSS, пошаговая реализация сайта на Tilda, адаптивные макеты в Figma и обзоры инструментов для создания сайтов. Лучший способ освоить веб-разработку в кратчайшие сроки — это подписка на @sitodel

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_навигация

Зачем айтишнику знать английский язык? Вот основные 3 причины: 1. Профессиональная литература Вообще вся техническая документация для всех языков программирования составляется на английском языке. Зачем? Чтобы её все понимали! 2. Поиск решений в интернете Шансов найти ответ на вопрос на английском кратно больше, чем искать его на родном языке. 3. Международные заказы Рынок труда огромен и постоянно нуждается в новых кадрах. Но пускают туда только тех, кто уже знает английский язык. Поэтому, если ты всерьёз рассчитываешь развиваться как профессионал, то без знания английского тебе не обойтись. А в этом поможет канал «Английский для программиста» Наглядно, практично и бесплатно! Короче, подписывайся и изучай. После сам себе «спасибо» скажешь: @english_easily

Дочерние узлы и потомки Здесь и далее мы будем использовать два принципиально разных термина: - Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного. Например, <head> и <body> являются детьми элемента <html>. - Потомки – все элементы, которые лежат внутри данного, включая детей, их детей и т.д. В примере выше детьми тега <body> являются теги <div> и <ul> (и несколько пустых текстовых узлов). А потомки <body>– это и прямые дети <div>, <ul> и вложенные в них: <li> (потомок <ul>) и <b> (потомок <li>) – в общем, все элементы поддерева. #браузер #документ #dom_навигация

📚Теперь JavaScript можно легко выучить по гайдам в картинках. Первый канал с гайдами по JavaScript — @guides_js

Сверху: 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_навигация

Какая вакансия становится всё востребованнее с каждым годом? Вакансия разработчика. Почему одним разработчикам платят 100-200тр, а другим — 500-700, хотя они все пишут один и тот же код? Потому что первые не умеют себя грамотно позиционировать. Как работать за бОльший чек и как перейти из любой сферы в разработку, рассказывает Георгий Тер-Григорьянц — Android-разработчик и автор канала GEO. В свои 22 года он уже зарабатывает 1.000.000+ рублей ежемесячно и знает как подать себя работодателю так, чтобы он был готов платить тебе любые деньги. Прямо сейчас Георгий собирает команду мечты, поэтому у тебя есть шанс получить своё «теплое место под солнцем». Присоединяйся: @android_money_team

Навигация по DOM-элементам DOM позволяет нам делать что угодно с элементами и их содержимым, но для начала нужно получить соответствующий DOM-объект. Все операции с DOM начинаются с объекта document. Это главная «точка входа» в DOM. Из него мы можем получить доступ к любому узлу. Так выглядят основные ссылки, по которым можно переходить между узлами DOM (см. картинку выше). #браузер #документ #dom_навигация

Хотите изучать платные курсы бесплатно? Тогда этот канал для вас. 📈 Сливакер — канал с бесплатными курсами по программированию, хакингу, дизайну, иностранным языкам. Список актуальных курсов по JS: ▪️[Udemy] Полный Курс По JavaScript(2022) ▪️[Udemy] Node.js — с нуля, основы и построение архитектуры приложений (2021) ▪️[Udemy] Electron — разработка настольных приложений на JavaScript (2020) Не плати за курсы — бери их бесплатно и учись новому на канале Сливакер!

Взаимодействие с консолью При работе с DOM нам часто требуется применить к нему JavaScript. Например: получить узел и запустить какой-нибудь код для его изменения, чтобы посмотреть результат. Вот несколько подсказок, как перемещаться между вкладками Elements и Console. Для начала: 1. На вкладке Elements выберите первый элемент <li>. 2. Нажмите Esc – прямо под вкладкой Elements откроется Console. Последний элемент, выбранный во вкладке Elements, доступен в консоли как $0; предыдущий, выбранный до него, как $1 и т.д. Теперь мы можем запускать на них команды. Например $0.style.background = 'red' сделает выбранный элемент красным, как на картинке выше. #браузер #документ #dom

Linux для чайника - Разбор утилит / инструментов ОС Linux - Новости / факты о ОС - Опросы для проверки знаний и навыков и многое другое. (p.s. А тут книги для программистов)

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

Кодинг — умер. Пора переходить на простые способы обучения. Обучиться программировать сейчас нереально — ютуберы затирают про создание телеграм-ботов, ВУЗы учат платить деньги. Оглянитесь вокруг: джуны поголовно учат айти по картинкам. Они запоминаются в разы лучше, чем пресловутые книжки и часовые видео. Вы тоже можете стать частью этого тренда. Достаточно читать канал Гайды программиста. Там найдёте полезные гайды по программированию на любую тему: Python, JS, C++, хакинг, подборки книг. И всё это в картинках. Короче, держите и изучайте, потом себе спасибо скажете: it_guides