- 182
- 13 728
Web-garage
Russia
Приєднався 14 сер 2021
The channel is dedicated to web development, exclusively frontend development. Lessons on HTML, CSS, Javascript, React.js, Vue.js, Next.js
Урок 5.8. Динамическое создание, добавление и удаление элементов
Что вы узнаете:
🔹 Создание элементов: научитесь создавать новые HTML-элементы на лету с помощью document.createElement().
🔹 Добавление элементов: узнаете, как добавлять элементы в DOM с помощью append и prepand, insertBefore() и других методов.
🔹 Удаление элементов: освоите удаление ненужных элементов из DOM с помощью remove.
🔹 Практические примеры: посмотрите на реальные примеры, такие как создание списка покупок!
Ссылки на документацию:
developer.mozilla.org/ru/docs/Web/API/Element/append
developer.mozilla.org/en-US/docs/Web/API/Element/prepend
developer.mozilla.org/ru/docs/Web/API/Element/remove
developer.mozilla.org/ru/docs/Web/API/Node/insertBeforedeveloper.mozilla.org/ru/docs/Web/API/Element/getBoundingClientRect
developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML
Во избежание лишних вопросов по appendChild, prepandChild и removeChild: эти методы считаются устаревающими, но вы их можете встретить в других проектах. Поэтому в видео о них даже не рассказываю. Вот ссылки на документацию по ним:
developer.mozilla.org/ru/docs/Web/API/Node/appendChild
developer.mozilla.org/ru/docs/Web/API/Node/removeChild
Подписывайтесь на канал, ставьте лайки и включайте уведомления, чтобы не пропустить новые уроки по JavaScript! 💻👍
#JavaScript #WebDev #DOM #HTML #CSS #JS #Программирование #Обучение #Ютуб
🔹 Создание элементов: научитесь создавать новые HTML-элементы на лету с помощью document.createElement().
🔹 Добавление элементов: узнаете, как добавлять элементы в DOM с помощью append и prepand, insertBefore() и других методов.
🔹 Удаление элементов: освоите удаление ненужных элементов из DOM с помощью remove.
🔹 Практические примеры: посмотрите на реальные примеры, такие как создание списка покупок!
Ссылки на документацию:
developer.mozilla.org/ru/docs/Web/API/Element/append
developer.mozilla.org/en-US/docs/Web/API/Element/prepend
developer.mozilla.org/ru/docs/Web/API/Element/remove
developer.mozilla.org/ru/docs/Web/API/Node/insertBeforedeveloper.mozilla.org/ru/docs/Web/API/Element/getBoundingClientRect
developer.mozilla.org/ru/docs/Web/API/Element/insertAdjacentHTML
Во избежание лишних вопросов по appendChild, prepandChild и removeChild: эти методы считаются устаревающими, но вы их можете встретить в других проектах. Поэтому в видео о них даже не рассказываю. Вот ссылки на документацию по ним:
developer.mozilla.org/ru/docs/Web/API/Node/appendChild
developer.mozilla.org/ru/docs/Web/API/Node/removeChild
Подписывайтесь на канал, ставьте лайки и включайте уведомления, чтобы не пропустить новые уроки по JavaScript! 💻👍
#JavaScript #WebDev #DOM #HTML #CSS #JS #Программирование #Обучение #Ютуб
Переглядів: 39
Відео
Урок 5.7. Навигация по HTML-элементам
Переглядів 142 години тому
🔍 В этом видео мы рассмотрим: 🛠️ Проблемы с использованием getElementById и querySelector -🌳 Навигация по DOM-дереву: children, parentElement, firstElementChild, lastElementChild 🔄 Разница между firstChild/lastChild и firstElementChild/lastElementChild, между previousSibling/nextSibling и previousElementSibling/nextElementSibling 💡 Лайфхаки для работы с DOM: - контекст вызова this на DOM-элемен...
Урок 5.6. Продвинутые способы работы с атрибутами HTML в JavaScript
Переглядів 294 години тому
В этом видео мы рассмотрим: 1. 🔍 Продвинутый поиск элементов по атрибутам: - Использование querySelectorAll для поиска элементов по атрибутам. - Примеры с точным совпадением, частичным совпадением и регулярными выражениями. 2. 🛠️ Работа с атрибутами disabled, class, id, href. 3. 🔄 Динамический поиск элементов. 🎬 Подписывайтесь на канал и ставьте лайки! 👍 Понравилось видео? Не забудьте поставить...
Урок 5.5. Стилизация HTML-элементов. Объект classList
Переглядів 447 годин тому
Timecode: 00:03 Когда нужна стилизация с помощью JavaScript 03:38 1. Стилизация в рендеринге 04:07 2. classList.add / classList.remove / classList.contains 10:55 3. classList.toggle 11:57 4. style.свойствоВcamelCase 14:12 5. style.cssText 14:55 6. setAttribute('class', 'название класса'); 15:22 Заключение
Урок 5.4. Свойства и атрибуты HTML в JavaScript
Переглядів 277 годин тому
🌟 Свойства и атрибуты HTML в JavaScript: магия DOM! 🚀 🔍 Что такое свойства и атрибуты HTML? Атрибуты HTML - это статические значения, которые задаются в HTML-разметке. Например, id, class, src, href. Свойства DOM - это динамические значения, которые представляют текущее состояние элемента в DOM. Например, element.id, element.className, element.src, element.href. 💡 Зачем они нужны? Управление эл...
Урок 5.3. Работа с текстовыми узлами: innerHTML, innerText, textContent
Переглядів 2512 годин тому
Timecode: 00:03 Вступление 00:40 innerHTML 04:10 innerText 04:33 textContent 05:20 Свойство hidden
Урок 5.2. Получение ссылки и поиск DOM-элемента
Переглядів 2912 годин тому
Timecode: 00:03 Вступление 01:11 Получение элемента по id: getElementById 01:28 Получение элемента по классу: getElementsByClassName 02:12 Получение элемента по тегу:getElementsByT agName 02:52 Получение элемента по имени: getElementsByName 03:40 Получение элемента по селектору: querySelector, querySelectorAll 06:12 Получение дочерних элементов: children, childNodes 07:33 Получение родительског...
Урок 5.1. Глобальные методы window, global, globalThis
Переглядів 5016 годин тому
Глобальны объекты: 🌍 Windows, Global, GlobalThis - кто есть кто? 🤔 🔥 В этом видео мы разберемся с Windows, Global и GlobalThis! 👉 Что такое глобальные объекты? 🌍 Объекты, доступные в любом месте кода 🎯 Предоставляют доступ к глобальным переменным и функциям 🚀 Помогают управлять средой выполнения 👉 Кто есть кто? 🖥️ Windows: глобальный объект в браузере 🛠️ Global: глобальный объект в Node.js 🌐 Gl...
Проект "Страница интернет-магазина"
Переглядів 9619 годин тому
Задачи на основании исходника (реализация показана в видео): Исходник: github.com/alexeirybak/JavaScript-course/tree/Module-4-project-1-start 1. Распарсить данные, получаемые в JSON-формате, превратив их в обычные js-объекты (они будут массивами). 2. Соединить распарсенные массивы в один. 3. Отсортировать велосипеды (в начале) и аксессуары. 4. Для товаров, которые поступили на склады более 90 д...
Урок 4.14. JSON-формат
Переглядів 97День тому
🔍 Что такое JSON? JSON (JavaScript Object Notation) -это текстовый формат для хранения и передачи данных. Он основан на синтаксисе объектов JavaScript, но может использоваться независимо от языка программирования. 💡 Зачем он нужен? Передача данных: JSON позволяет легко передавать данные между сервером и клиентом. Хранение данных: простой и удобный способ хранения конфигураций, настроек и других...
Урок 4.13. Деструктуризация в параметрах функции в JavaScript
Переглядів 53День тому
Что такое деструктуризация в параметрах функции? Деструктуризация в параметрах функции - это способ извлечения значений свойств объекта или элементов массива непосредственно в параметрах функции. 💡 Зачем она нужна? Упрощение кода: избавляет от необходимости использовать точечную нотацию или индексы для доступа к свойствам объекта или элементам массива внутри функции. Читаемость: Делает код боле...
Урок 4.12. Деструктуризация объектов в JavaScript
Переглядів 27День тому
🔍 Что такое деструктуризация объектов? Деструктуризация объектов - это способ извлечения значений свойств объекта и присваивания их переменным в одну строку. 💡 Зачем она нужна? Упрощение кода: избавляет от необходимости использовать точечную нотацию для доступа к свойствам объекта. Читаемость: делает код более читаемым и понятным. Гибкость: позволяет работать с частями объекта, не затрагивая ве...
Урок 4.11. Деструктуризация массивов в JavaScript
Переглядів 15День тому
🔍 Что такое деструктуризация массивов? Деструктуризация массивов- это способ извлечения значений из массива и присваивания их переменным в одну строку. 💡 Зачем она нужна? Упрощение кода: избавляет от необходимости использовать индексы для доступа к элементам массива. Читаемость: делает код более читаемым и понятным. Гибкость: позволяет работать с частями массива, не затрагивая весь массив. 🛠️ К...
Урок 4.10. Оператор "..." (spread / rest)
Переглядів 24День тому
🌟 Оператор "..." (spread / rest) в JavaScript: магия копирования и расширения! 🚀 🔍 Что такое оператор "..."? Spread (расширение): позволяет распаковать элементы массива или свойства объекта в другой массив или объект. Rest (остаток): позволяет собирать оставшиеся элементы в массив или свойства в объект. 💡 Зачем он нужен? * Копирование массивов и объектов: Создание копий без изменения исходных д...
Урок 4.9. Метод search()
Переглядів 2114 днів тому
Что такое метод search()? search(): Это метод строк в JavaScript, который ищет первое вхождение подстроки или регулярного выражения в исходной строке. Возвращает индекс первого совпадения или -1, если совпадений не найдено. 💡 Зачем он нужен? Поиск подстроки: позволяет быстро найти позицию подстроки в строке. Регулярные выражения: поддерживает поиск с использованием регулярных выражений для боле...
Урок 4.2. Иммутабельность в JavaScript
Переглядів 7614 днів тому
Урок 4.2. Иммутабельность в JavaScript
Урок 3.13. Знакомство с асинхронностью
Переглядів 2114 днів тому
Урок 3.13. Знакомство с асинхронностью
Проект на JavaScript "Имитация загрузки файла". Решение
Переглядів 4621 день тому
Проект на JavaScript "Имитация загрузки файла". Решение
Проект на JavaScript "Имитация загрузки файла"
Переглядів 10521 день тому
Проект на JavaScript "Имитация загрузки файла"
Проект на JavaScript "Таймер обратного отсчета". Решение
Переглядів 3521 день тому
Проект на JavaScript "Таймер обратного отсчета". Решение
Проект на JavaScript "Таймер обратного отсчета". Задание
Переглядів 7521 день тому
Проект на JavaScript "Таймер обратного отсчета". Задание
Урок 3.11. Планирование вызова: setTimeout и setInterval
Переглядів 4821 день тому
Урок 3.11. Планирование вызова: setTimeout и setInterval
Получается, создать тот же туду-лист можно многими способами, один из вы сейчас продемонстрировали
Таки да!
😎✌️
😎👍
Спасибо за разбор! Нужен совет: На моем SafePal кошельке хранится USDT и у меня есть seed фраза. (alarm fetch churn bridge exercise tape speak race clerk couch crater letter). Можете подсказать, как перевести их на Binance?
@@MarylouJun Здравствуйте! Не силен в этой теме.
😎👍
Странно, не нашёл это видео ни в одном из плейлистов
всё, нашёл
А какой лучше метод использовать? add|remove или toggle?
toggle - переключалка, с помощью add только добавляем, remove - только удаляет.
😎👍
Скажите пожалуйста, где могу найти макет Вело Сити для Pixso?
В практических уроках в описании под видео есть ссылки.
Спасибо, нашел.
Где взять макет Вело Сити?
По typescript будут уроки?
@@Ruslan-ps9rz Будут, но без углубления. Хотя, я ещё подумаю, с углубление или нет.
@user-web-garage понял. Спасибо🙂
😎👍
круто) спасибо) как всегда качественно и полезно)
@@Ruslan-ps9rz Спасибо за отзыв! Приходите, всегда рад.
😎👍
Важная тема
😎👍
Спасибо, двигаемся дальше
Работаю на вэб-шторме
Динамические сайты могут делаться на нативном JS или только на фреймворках, реакте и других?
Ура
Как вам задонатить?
Спасибо за отзыв! Пока этого достаточно 😊
Спасибо. Планирую пройти весь ваш курс.
Очень крутой разбор, спасибо большое!
@@Dmitrijserg Спасибо, приходите ещё!
@user-web-garage я подписался на все обновления. Реально считаю, что вы даёте превосходную программу
😎👍
Опа, еще один этап жести!)
@@thelowfer1016 Сорян, не я такой, жизнь такая ))
@@user-web-garage По итогу: Без проблем сделал 3-е задание, было сложности на втором и не справился с id, так как не понял задумку, считал, что проще переписать в data1 и data2 все айдишники
😎👍
логично этот урок продолжить фейк Апи, используя json-serever, json-file, в виде БД. Далее сделать взаимодействие без fetch, а с помощью Axios взаимодействие. Это очень популярная тема была? в фронтенде. Сейчас чето там вместо Axios мутят. Но вот такую штуку советую всем уметь делать и понимать
@@unicoxr5tj417 Привет! Полностью согласен. Правда, у меня по ванильному JS курс, а axios - библиотека. Но в последнем модуле будет разговор о библиотеках, обязательно скажу об axios.
😎👍
😎👍
Супер контент ,продолжай в том же духе👍👍👍👍
Спасибо!
😎👍
Спасибо! Так понимаю, скоро уже конец курса?
@@thelowfer1016 Всё только начинается )
😎👍
Здравствуйте, спасибо за Ваши видео. Вопрос по последним практическим видео с flexbox. Хэдэру и футеру мы задаём класс "center", а почему тогда main'у не задавали сразу, а задавали отдельным блокам order-box и action-box? Спасибо! P.S. Может быть Вам куда-то можно написать ещё, если возникнет вопрос по Вашим видео?
Здравствуйте! Спасибо за добрые слова! Main'у не задал сразу, потому что верстал и выравнивал сначала order-block, а только затем action-box. Действительно, по окончании работы в данном уроке можно было объявить общий класс, то есть center для main, и ничего бы не поменялось. Вы можете задать класс center в main, только учтите, что в последующих уроках придется делать верстку встроенных блоков немного отличную от той, которую я буду показывать дальше. Обратную связь можно делать через комментарии. Скоро закончу курс по JS, наверное, организую какую-нибудь специальную платформу для обсуждений.
3 видео за день!✌✌ Спасибо, Алексей, хорошая работа
😎👍
😎👍
Браво, Алексей. По-настоящему безграничный метод
😎👍
😎👍
На первый взгляд все просто и понятно. Трудно будет применять это на практике, когда надо будет взаимодействовать с элементами на странице
@@thelowfer1016 Что трудного?
@@user-web-garage Например, интернет магазин, где может множество товаров, которые будут в корзине и нужно одновременно сортировать по нескольким параметрам
😎👍
Скажите пожалуйста, именно у Вас сколько заняло времени изучение js?
Я его до сих пор изучаю 😂, и на мой век хватит. Вы, наверное, хотели узнать, сколько времени может потребоваться, чтобы начать работать программистом. Всё очень индивидуально и зависит от многих факторов. Если раньше опыта в программировании не было, то уйдёт в разы больше времени. Большую роль играет наличие рядом ментора (наставника), что также в разы сокращает срок обучения. Плюс мотивация, участие в реальных проектах (новичку вообще сначала могут доверить только стилизовать кнопки, но нахождение в атмосфере разработки - большое дело). Ладно, даю конкретику: 1000 часов практики (полгода по 6 часов в день), и вы - специалист.
Спасибо. Обнадёжили ))
Судя по всему, дальше темы крайне сложные
@@thelowfer1016 Не очень сложные, больше на запоминание.
На удивление, я выполнил задание. Хотя, вы расписали ВСЮ логику, оставалось только подставить в DOM элементы. Возможно, я сделал что-то неправильно, но код работает так, как показано у вас
@@thelowfer1016 Поздравляю, прогресс налицо.
На удивление, сделал за 5 минут. Но, признаюсь, погуглил, как получить секунды (что на что делить/умножить). Остальное - легко, подставить значения в функцию.
@@thelowfer1016 Молодец!
😎👍
😎👍
Спасибо за Ваш труд. Пожалуйста продолжайте нас учить )
😎👍