JavaScript уроки ES6 - DOM и работа с html документом, завершение первой фазы [ ДЗ ] 🔊 - #12

Подписаться 137 тыс.

Просмотров 26 тыс.

50% 1

JavaScript DOM как язык взаимодействует с html страницей.
🙉 Канал в телеграмм: bit.ly/2QcOXD4
💕 Есть канал для ардуинщиков и программистов: bit.ly/2SMUUYs
☕🍗 Патреон, поддержи автора:
/ dkadevelop
🔹 Другие реквизиты на сайте автора:
dka-develop.ru/blog/donation
🔹 Используемый редактор:
Sublime: sublimetext.com
🌍 Официальный сайт:
dka-develop.ru
© Music:
RU-vid Library
#javascript #js #ityoutubersru

Опубликовано:

13 авг 2019

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 179

@DKADEVELOP 4 года назад

▶️ 13 (как 14:🔼 уровень 2) (Следующий) выпуск "NODE.JS, современная разработка": ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-dVS0B6WXXtA.html ◀️ 11 (Предыдущий) выпуск "Объекты и классы, разница": ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-wv3mKV_NlCs.html

@anton-trofimov 4 года назад

Как боженька объясняешь. Как же здорово наткнуться на подобный канал, после всего другого, что видел, где сухо и непонятно. Пили дальше, ты лучший

@DKADEVELOP 4 года назад

🤘😁 Благодарю

@user-ik1in6zt4y 4 года назад

Огромное спасибо за вашу работу!

@born_in_Moldova.Germany 4 года назад

Очень нравится подача материала. Спасибо большое за труды!

@user-qv4hn6qq4n 4 года назад

У автора талант к преподаванию!

@user-gm9th9yh7y 4 года назад

точно!!!

@dbbghost 2 года назад

100%

@1MrAnonymous11 2 года назад

Это просто космос!!! Видел и у других видео,но там много воды и инфы которая новичкам не нужна,поняв это дальше само пойдет.

@babkenromyan6129 4 года назад

Круче уроков по JS я нигде не видел! Огромный Респект!!!

@dondiablo3391 4 года назад

Дружище, смотрю все твои видосы по javascript.. выполняю все домашки)). Очень нравится подача. Довольно понятно преподносишь материал. Жду продолжения уроков по javascript :)

@ea5970 4 года назад

Мужик продвигай контент, в плане доступности обьяснения твой контент номер 1 на рунете

@user-zw2fu5iu1f 2 года назад

Спасибо бро ! Благодаря твоим урокам люди экономят свое время и деньги !!! +++ в твою карму!

@serge.stecenko 4 года назад

Отличные уроки! Огромное тебе спасибо за такой качественный контент!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

@lanam1182 2 года назад

это просто фантастика. отличный контент спасибоооооо

@_Fantom_. 4 года назад

Спасибо за интересный и очень познавательный урок!

@enjoygaming9788 4 года назад

Блин, спасибо тебе, дал полтора тысячам человек знания Javascript! Побольше бы таких людей, продвигайся!

@ivanstrilets443 4 года назад

Работаешь над видео прекрасно. Молодчина!

@DKADEVELOP 4 года назад

👍👍👍

@mrWiled 4 года назад

Просто мега-канал. Нарадоваться не могу! Как же всё доступно и понятно. Всё структурировано по полочкам. Столько работы проделанно для тех, кто хочет уйти в IT. Спасибо от всей души!!!

@axechannel5589 4 года назад

У вас офигенный канал!🔥🔥🔥 Процветания вам!

@DKADEVELOP 4 года назад

Спасибо 🔥👍

@LiubovAlexandra 3 года назад

спасибо Все толково и ясно

@NeedForHeavyMetal 2 года назад

Спасибо за урок!

@-konoplya-3534 4 года назад

Я аж подписался братан продолжай не останавливайся

@truman2948 3 года назад

Чувак ты мега крутой)нравятся твои уроки, доступно и понятно) успехов

@kristinagevorgyan1095 4 года назад

Спасибо большое. Очень помогло.

@user-yu3yj3yl4s 4 года назад

Thank you, father!

@alexdan3107 4 года назад

Спасибо за урок)

@oksanagil4066 Год назад

Шикарно!!

@tuzemec410 4 года назад

Это восхитительно, ты прекрасно объясняешь.

@wic1632 4 года назад

Видно, что над контентом человек работал.

@DKADEVELOP 4 года назад

Может скоро ИИ будет нас учить )) Хотя вроде где-то уже внедряют.

@user-tr8xi3ik3c 4 года назад

Вкусно объясняет.

@user-hs4ci1oz3n 4 года назад

@@DKADEVELOP Надеюсь эта ИИ не отберет у меня работу(

@DKADEVELOP 4 года назад

@@user-hs4ci1oz3n Развивайтесь, будьте первым кто за столом начинает разговор, вообщем если будете вкладывать в себя и развиваться, как профессионально так и развивать мышление, то это не смогут отобрать, а применить опыт будет всегда место ))

@exploringtheworld8780 3 года назад

Спасибо

@boson_higgs Год назад

Отличный урок!

@ZiminsRVE 4 года назад

Шикарно

@user-sc9ts7mm3i 3 года назад

Спасибо!!!!

@user-bg2pn4yz9l 3 года назад

спасибо

@skyrim7732 3 года назад

крутяк бро, рахмет огромный. Зацепило

@yesdoit9914 Год назад

Огромное спасибо за уроки!!! html js let element = { class: ".inputA", value: 40, } function finder(name) { let findElement = document.querySelector(name.class); findElement.value = name.value; } finder(element);

@user-kr7zq6dt3z 4 года назад

Коммент поддержки канала

@levangagua7012 4 года назад

Второй день смотрю твои уроки, и скажу честно лучшая подача информации по теме! За два дня узнал больше, чем просмотрев все уроки Дударя и т.п! Огромное спасибо за уроки и в принципе про тему js! надеюсь продолжишь в таком же духе! Респект

@olegzidane7099 4 года назад

гоша говнарь)

@MrKgzguy 4 года назад

спасибо большое! работает по принципу "для маленьких и тупых", т.е. все доходчиво и понятно!)

@v5842 4 года назад

КЛАСС!!! ДАВАЙ ЕЩЕ РОЛИКИ ПРОГРАММИРОВАНИЯ!!!!

@denisdol935 3 года назад

супер

@nazariikor5502 Год назад

Спасибо что учешь! Д/з let elemment = { class: 'myClass', value: 40 } let find = document.querySelector('.myClass') find.value = elemment.value console.log(find)

@artemgum4517 4 года назад

Лайк не глядя )))

@DKADEVELOP 4 года назад

🤘😁

@bitboominfo 4 года назад

Ждём новых уроков

@drino955jug3 4 года назад

let element = { class: "test", value: 40 }; let findElement = document.querySelector("." + element.class); findElement.value = element.value; console.log(findElement);

@jsb7239 4 года назад

То что следующие видео будет в новом формате, то ничего страшного, даже наоборот весьма интересно, с удовольствием смотрю за развитием канала. 👍🏻 И немного решения домашки: === HTML === === JS === let element = { class: 'homeWork', value: '666' }; let elementHW = document.querySelector(`.${element.class}`); elementHW.value = element.value;

@onlybataalay Год назад

(`.${element.class}`) люто не пон почему именно так? Объясни , я просто через .class

@questionsanswer6293 4 года назад

window.addEventListener("load", function() { let element = { class: 'textField', value: '40' } let findElement = document.querySelector("." + element.class); findElement.value = element.value; }); У меня элементы стал искать только после того как я добавил функцию загрузки страницы, как у вас в видео так работает я не понимаю..реально магия какая то!

@user-ug6cp5bs9d 4 года назад

даже неначиная смотреть сразу лайк. Жду каждый новый урок как ребенок новую игрушку хахаха

@DKADEVELOP 4 года назад

🤘😁

@Presspero 4 года назад

Лайк не глядя :)

@DKADEVELOP 4 года назад

Хорошечно 👍👍👍

@user-kc3cv8ex2n 4 года назад

Спасибос огромный, постараюсь на всех видео коммент оставить) let element = { class: 'className', value: 40 }; let findElement = document.querySelector('input'); findElement.value = element.value; findElement.class = element.class; console.log(findElement);

@shchuka5 3 года назад

Надо ведь передавать свойство из объекта в querySelector, а не тег из html 🧐 или я что-то напутала? 😔

@user-zz6qo8rl8c 3 года назад

Сенькью тебе)

@zhalgassaparov8471 4 года назад

Если возникает ошибка: 'Cannot set property 'value' of null', то переместите script в конце body. Если поставить вышел, то скрипт загружается первым и он не может почему вы запрашиваете value, которого нет, или можете написать 'defer' в script, тогда скрипт загрузится после загрузки всей страницы.

@alexeynikiforov9637 4 года назад

let element = { class: 'myText', value: 1000 } let findElement3 = document.querySelector('[value ="33"]'); findElement3.value = element.value; console.log(findElement3);

@user-ym2fv6by7z 4 года назад

let element = { class: "js3", value: 40 } let findElement = document.querySelector(".js3"); findElement.value = 30; console.log(typeof document.querySelector(".js3"))

@ilgul9177 4 года назад

Бро, жду от тебя уроков по React.js. Понимаю, что речи о нем не было, но с твоими навыками (донести не доношаемое и впихнуть не впихуемое, в смысле знаний) разъяснения, очень уж хочется обучиться именно этой библиотеке.

@aleksprimetv 4 года назад

js выучи для начала

@lonrav6073 4 года назад

реакт требует крайне много времени и сил.. а если не освоил даже js, не освоил ES6, не научился работать со сборщиками и модулями.. и еще много чего, то и соваться туда нечего пока что..

@DKADEVELOP 4 года назад

Здоровки, до реакта ещё путь не близок, возможно, но точно не сейчас.

@user-os9ey6di7r 4 года назад

норм

@whitegandalf978 4 года назад

У кого выскакивает пустое значение null добавьте defer или async в строку с скриптом

@Parmax885 4 года назад

Спасибо! Кому интерестно, вот ссылочка по теме: learn.javascript.ru/script-async-defer

@default2199 3 года назад

Или же достаточно переместить файлы со скриптами и библиотеками из head перед закрывающим тегом body.

@infinitynoir5441 4 года назад

Блин, супер уроки! Качество контента растет как на дрожжах. Жду следующий урок прям с интересом. Не подскажешь когда примерно? Спасибо огромное за твои труды! P.S. подскажи пожалуйста шрифт в редакторе, спасибо

@DKADEVELOP 4 года назад

👍👍👍 Ну как и сказал следующий будет как повторение пройденных, т.е. переработанный материал 12 прошедших выпусков, возможно следующая неделя, а следующие части наверное через 2 недели, пока это крайне примерно. По поводу шрифта, я его не менял только тема установлена Material.

@user-sf2hd2bu2n 3 года назад

let element = { class: "myinput", value: 7, } let findElement = document.querySelector("." + element.class); findElement.value = element.value;

@user-zc1gm6lo4s 3 года назад

Метод тыка не всегда плох. Я так натыкал понимание по DOM, хотя программил на vba (парсинг)

@vasyl_bielkin 4 года назад

@aleksandrkedria4024 4 года назад

let element = { class: 'input', value: 50 } let findElement = document.querySelector(".input"); findElement.value = element.value; console.log(findElement);

@user-bi4ro6id4k 4 года назад

let element = { class: 'myClass', value: 40 } let findElemenet = document.querySelector('.myClass'); findElemenet.value = element.value;

@inzoddex8312 4 года назад

let element = { class: ".text", value: 40 } document.querySelector(element.class).value = element.value;

@domusv3246 2 года назад

пеши есчо!

@secret3019 4 года назад

Хочу ёще дай побольше знаний мухаха!

@fatar_916 4 года назад

let element = { class: "qwerty", value: 45 } let findElement = document.querySelector("." + element.class); findElement.value = element.value;

@user-zu2xo1eb5o 3 года назад

Пришлось поменять редактор кода. На андроид anWriter меняет значения на новые в консоли, но в визуализации страницы изменений нет. Установил Dcoder - там всё работает. let object = { class:'my-class', value: 40 } let findElement = document.querySelector('.my-class'); findElement.class = object.class; findElement.value = object.value;

@odimlife 4 года назад

Подскажите пожалуйста. А как вывести в консоль все методы в Хроме? Выводится только строка с содержанием . Автор на мозиле делает, может только в ней так можно? let findElement = document.querySelector('.myclass'); console.log(findElement);

@KuKu_RuKu88 4 года назад

let elements = { class: "myinput", value: 40 }; let findElement = document.querySelector(".myinput"); console.log(findElement); findElement.value = elements.value; console.log(findElement.value); findElement.class = "output"; console.log(findElement.class);

@gladiatorrussia 4 года назад

2:50 почему то не получается открыть свойста тега, там где вы смотрели Inner text. Такая стрелка попросту отсутствует

@yannieyannie6797 4 года назад

У меня так же. Как решить?

@user-lm2ww1hj3u 3 года назад

innerHTML лучше попробуй.

@podbot4231 3 года назад

@Mykola Vyhivskyi у меня такая же проблема и это решение не работает, к сожалению

@multiwin 4 года назад

let element = { class: 'dom', value: 40 }; let name = element.class; console.log(name); let findElement = document.querySelector(`.${element.class}`); findElement.value = element.value; console.log(findElement);

@lifeisgreat2508 4 года назад

Задание наоборот тоже получилось: let element = { class: 'newClass', value: 40 } let findElement = document.querySelector('[value="40"]'); findElement.value = element.class; console.log(findElement);

@user-gl9ll2gs2d 4 года назад

let element = { class: '.dog', value: 40 } let findElement = document.querySelector(element.class); console.log(findElement); findElement.value = element.value;

@sofyap.2153 4 года назад

let testEl = { class:'test', value: 40 } let newEl = document.querySelector('.test'); newEl.value = testEl.value;

@davidkarapetyan4841 4 года назад

let element = { class: 'newClass', value: 50 } let findElement = document.querySelector('.newClass'); findElement.value = element.value; console.log(findElement);

@DKADEVELOP 4 года назад

Ммм... почти, .querySelector(вставить сюда свойство из объекта)

@dimkazambidis 4 года назад

В chrome console.log не показывает содержимое объекта, спасает console.dir, если у кого-то возникал вопрос)

@voroninfinity2295 3 года назад

на стороне JS let element = { class: 'Office', value: 4545 } let a=document.querySelector('.Office'); a.value=element.value; на стороне html Появилось два вопроса: 1. Разве слово class в js не зарезервированное слово? 2. и какой смысл вообще в наличии этого свойства, если нам кроме значения ничего не нужно?

@oleksiikhrebtan5556 4 года назад

Привет) Спасибо за уроки. Глянь пожалуйста, правильно? let element = { class: 'opo', value: 10 } let findElement = document.querySelector('.opo'); findElement.value = element.value; console.log(findElement);

@serge.stecenko 4 года назад

Походу всё таки правильно будет так: let findElement = document.querySelector('.' + elemet.class); findElement.value = elemet.value; Потому что он сказал: "Найдите данный элемент на странице передав свойство из объекта в котором хнарится класс"

@moi-nick-zanyat 4 года назад

@@serge.stecenko я тоже дошел до такого вывода, исходя из моих знаний, это единственный правильный ответ

@vapo39 2 года назад

У тебя было 10, и ты заменяешь на 10, программа работает, но разницы ты не увидишь

@Parmax885 4 года назад

index.html app.js let element = { class: 'lesson12DOMHW', //строковой литерал с именем класса value: 40 //числовой литерал, допустим число 40 } let findElement = document.querySelector('[class="lesson12DOMHW"]'); findElement.value = 40; console.log(findElement);

@user-hr3vr2xh9u 4 года назад

я не могу свойства тега посмотреть. Там где ты Inner text смотрел. У меня просто нет такой стрелки, для открытия свойств. Ето из за другого браузера (у меня хром) или ето мой косяк?

@gladiatorrussia 4 года назад

Такая же проблема

@yannieyannie6797 4 года назад

у меня так же. Тоже хром. Как решил?

@user-hr3vr2xh9u 4 года назад

@@yannieyannie6797 не помню)

@alexhug3836 3 года назад

let element = { class: "Hens", value: 40, } let findElement = document.querySelector(".Hens"); console.log(findElement); findElement.value = element.value;

@yannieyannie6797 4 года назад

let element = { class: 'myClass', value: '40' } let findElement = document.querySelector('.myClass'); findElement.value = element.value;

@generalsofclash8186 Год назад

6:24 сорри, ссылку на шпаргалки с селекторами css не вижу в описании под видео :(

@pattern_kz7167 4 года назад

У меня почему-то выходит ошибка и я не могу поменять значение в ID. Uncaught TypeError: Cannot set property 'innerText' of null at test.js:5

@DKADEVELOP 4 года назад

Где вы подключили файл test.js? До или после элемента с ID которому присваиваете значение. Если до то вы получаете ошибку, так как скрипт выполняется раньше чем подгрузилась страница с ID элементом. Есть множество вариантов это исправить, на данном этапе самое простое переместите подключение test.js вниз перед закрывающимся тегом body. И скорее всего вы забыли о чем говорилось в первых выпусках.

@user-nr3ql7bq9u 4 года назад

Надо везде порекломировать этот канал, топовый автор. Пират новой эры.

@thenest9104 4 года назад

топ, но как сменить имя класса?

@user-hj8fw9zp9h 2 года назад

let element = { class: 'input-test', value: 5 } let elemHTML = document.querySelector(`.${element.class}`); elemHTML.value = element.value;

@Civilizer1976 3 года назад

html: js: let element = { class: 'myclass', value: 40 } let findElement = document.querySelector(`.${element.class}`);//Вот тут споткнулся и застрял конкретно. оказывается нужно . добавить в шаблон findElement.value = element.value; console.log(findElement);

@samfe1800 3 года назад

Добрый день в принципе все очень понятно, только по какой то причине после ввода: console.log(document.getElementById('header')); в концоли появляется : null А в html код, такой: С чем это связано? Подскажите плз.

@samfe1800 3 года назад

Разобрался)) Надо было скрипт в конец страницы))

@invkg 4 года назад

/** index.html **/ /** App.js **/ let element = { class: 'className', value: 12 } let findElement = document.querySelector('.'+ element.class); findElement.value = element.value; console.log(findElement.value);

@DKADEVELOP 4 года назад

Правильно, можно было также добавить точку в свойстве, чтобы не делать конкатенацию в селекторе или использовать строковой шаблон, но это так к слову.

@ivanstrilets443 4 года назад

'.'+ element.class ты серьезно?

@user-le7pb9qu8g 4 года назад

Доброго времени суток,можно по подробнее с этого места let findElement = document.querySelector('.'+ element.class); я понимаю что можно было и так поступить в class: '.className'; я не могу именно понять как точка влияет на весь процесс спасибо за внимание

@politbers562 4 года назад

@@user-le7pb9qu8g Можно было и class: '.className'; Что касается того как точка влияет на процесс, то: document.querySelector(); - ищет элемент по css селектору, а в css селектор класса создаётся с приставкой точки. Например .className { color: #00ff00; } Как-то так. Именно поэтому если ты хочешь с помощью метода document.querySelector() вызвать класс, то перед названием класса ставишь точку.

@user-le7pb9qu8g 4 года назад

@@politbers562 спасибо за просветление)

@yannieyannie6797 4 года назад

не могу открыть свойства объекта в консоли. Нет стрелки, которая открывает дерево, чтобы посмотреть innerText. Как решить? Не могу продвигаться дальше из-за этого. Сижу в хроме. Гугл пока решение не дал. Ищу...

@yannieyannie6797 4 года назад

Нашел решение в хроме: заходим в Elements (слева от вкладки "консоль"), в ней находим вкладку Properties и в ней есть нужное нам дерево, как на видео.

@NeedForHeavyMetal 2 года назад

@@yannieyannie6797 спасибо)

@avkryukov71 4 года назад

let element = { class: 'myclass', value: 40 } let findElement = document.querySelector(`.${element.class}`); findElement.value = element.value;

@tatyanarudkovskaya5771 4 года назад

нашла правильное решение! ура!!!

@avazart614 3 года назад

А где ссылка на обещанную шпаргалку по селекторам?

@frencolesov3794 3 года назад

Что еще за метод со времён гороха? 3:47

@arhim7650 3 года назад

let element = { class: 'header', value: 40, } let findElement = document.querySelector('#head'); findElement.classList.add(element.class); findElement.value = element.value; Сделал сначала вариант попроще, в котором не объявлял класс из element. но что то подумал, что это уж слишком просто для 12 урока, покопался и получилось как то так. Может можно как то проще сделать, но думаю для человека вникающего в javascript сутки...сойдет.

@Civilizer1976 3 года назад

Смотри чего: здесь смысл что-бы в значение document.querySelector() передавалось любое значение из свойства объекта element.class, что-бы мы туда не подставляли. Значит в скобках будет шаблон получающий это значение из свойства с подставлением точки в начале: document.querySelector(`.${element.class}`); или по старому стилю ('.' + element.class); А, или это так и было сначала, наверное, первым вариантом?

@arhim7650 3 года назад

@@Civilizer1976 нет не так было, было совсем просто. Я понял о чем ты, видимо я не правильно понял задание. Твой вариант явно больше подходит. Хотя интересны в результате оба варианта. Спасибо за ответ, было познавательно.

@Civilizer1976 3 года назад

@@arhim7650 Ты главное не сдавайся. Я изучаю после работы всё это. Работаю на мебельной фабрике. Иногда заставляю себя через силу. Но 4 года назад изучал PHP по книге, записывал всё в альбом. Так-что мне всё это более-менее знакомо. Если не считать того что в конце 80-х уже делал какие-то программульки на Бейсике. Кроме торго хоршо знаком с HTML + CSS. И сделал несколько сайтов на CMS drupal. Но понял что пошёл не туда. Не надо изучать все эти CMS/конструкторы углублённо, а нужно было давно свернуть на тропу фронтенда.

@arhim7650 3 года назад

@@Civilizer1976 ну пару лендинг страниц я уже наверстал, так что базу html+css уже знаю, сейчас вот базу javascript и JQuery надо подтянуть, потом наверное php. Так что все вроде нормально ) По поводу конструкторов, ну очень спорно...сайтов на вордпрессе сейчас просто уйма, да и люди понимающие как это работает вроде как без работы не остануться.

@Civilizer1976 3 года назад

@@arhim7650 Как дела, изучаешь, дальше пошёл? Я решил двигаться дальше - выбрал видеоуроки Владилена Минина. После них - то что здесь покажется "цветочками". Сейчас на 14-м видео из плейлиста "Сложный JS простым языком" из 17 видео. Но это похоже самый структуированный курс из подобных. Пришёл к выводу что только набирая код и всё комментируя в редакторе, можно как-то двигаться, понимать, усваивать полученное.

@yarik83men51 4 года назад

+++

@user-lx8my1dw1u 4 года назад

как открыть сайт как и ты?

@andreytv7215 4 года назад

Извините, а где шпаргалки под видео?

@Anton-sj6ft 4 года назад

подскажите пожалуйста , решение ДЗ где увидеть?

@DKADEVELOP 4 года назад

Можете посмотреть в комментариях, зрители быстро ответили поэтому не стал писать где-то отдельно

@DKADEVELOP 4 года назад

При открытии ссылки, ответ подписчика на ДЗ из этого видео будет первым: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-sJ3yMXiUgOc.html&lc=UgzTH-5n3djpOmRUpu94AaABAg

@user-lm2ww1hj3u 3 года назад

Вместо innerTEXT лучше юзать innerHTML