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

[@DKADEVELOP]

▶️ 13 (как 14:🔼 уровень 2) (Следующий) выпуск "NODE.JS, современная разработка": th-cam.com/video/dVS0B6WXXtA/w-d-xo.html
◀️ 11 (Предыдущий) выпуск "Объекты и классы, разница": th-cam.com/video/wv3mKV_NlCs/w-d-xo.html

[@anton-trofimov]

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

[@DKADEVELOP]

🤘😁 Благодарю

[@undefined-n5v]

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

[@НастяБуряк-п7л]

точно!!!

[@dbbghost]

100%

[@babkenromyan6129]

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

[@dondiablo3391]

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

[@mrWiled]

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

[@tuzemec410]

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

[@wic1632]

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

[@DKADEVELOP]

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

[@ЧеловексТопором]

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

[@ТарасКлімарчук2-12ФІТ]

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

[@DKADEVELOP]

@@ТарасКлімарчук2-12ФІТ Развивайтесь, будьте первым кто за столом начинает разговор, вообщем если будете вкладывать в себя и развиваться, как профессионально так и развивать мышление, то это не смогут отобрать, а применить опыт будет всегда место ))

[@enjoygaming9788]

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

[@ivanstrilets443]

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

[@DKADEVELOP]

👍👍👍

[@ea5970]

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

[@1MrAnonymous11]

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

[@ДимДимыч-у1м]

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

[@levangagua7012]

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

[@olegzidane7099]

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

[@yesdoit9914]

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

[@questionsanswer6293]

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

[@lanam1182]

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

[@TonyNagan]

Спасибо за урок!
Вот ДЗ:
let elephant = {
class: 'Animals',
value: 100000
}
let findElephant = document.querySelector('.Animals');
findElephant.value = 100000;
console.log(findElephant);

[@nazariikor5502]

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

[@СкрепоносныйБузотёр-э5ш]

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

[@DKADEVELOP]

🤘😁

[@axechannel5589]

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

[@DKADEVELOP]

Спасибо 🔥👍

[@born_in_Moldova_Germany]

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

[@truman2948]

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

[@VB-s4p]

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

[@jsb7239]

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

[@onlybataalay]

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

[@-konoplya-3534]

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

[@serge.stecenko]

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

[@boson_higgs]

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

[@drino955jug3]

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

[@_Fantom_.]

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

[@ОлегОгнев-ф2й]

Thank you, father!

[@oksanagil4066]

Шикарно!!

[@skyrim7732]

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

[@gladiatorrussia]

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

[@yannieyannie6797]

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

[@СекретныйИнформатор-я3к]

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

[@podbot4231]

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

[@LiubovAlexandra]

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

[@MrKgzguy]

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

[@NeedForHeavyMetal]

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

[@zhalgassaparov8471]

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

[@ВасилийНефёдов-и4п]

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

[@МансурЛатыпов]

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

[@shchuka5]

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

[@denisdol935]

супер

[@ilgul9177]

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

[@aleksprimetv]

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

[@lonrav6073]

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

[@DKADEVELOP]

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

[@v5842]

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

[@alexeynikiforov9637]

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

[@whitegandalf978]

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

[@Parmax885]

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

[@default2199]

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

[@kristinagevorgyan1095]

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

[@artemgum4517]

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

[@DKADEVELOP]

🤘😁

[@generalsofclash8186]

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

[@alexdan3107]

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

[@НесторБаландович-д6р]

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

[@gladiatorrussia]

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

[@yannieyannie6797]

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

[@НесторБаландович-д6р]

@@yannieyannie6797 не помню)

[@ZiminsRVE]

Шикарно

[@odimlife]

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

[@МаксимБоровик-ы9б]

Спасибо!!!!

[@yannieyannie6797]

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

[@yannieyannie6797]

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

[@NeedForHeavyMetal]

@@yannieyannie6797 спасибо)

[@ВикторТуманов-р9з]

спасибо

[@arhim7650]

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

[@Civilizer1976]

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

[@arhim7650]

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

[@Civilizer1976]

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

[@arhim7650]

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

[@Civilizer1976]

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

[@ПРОСТОРОМА-ю6б]

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

[@ОльгаЗиборова-щ8ж]

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

[@vasyl_bielkin]

let element = {
elementClass: 'input',
elementValue: 90
}
let findElement = document.querySelector(element.elementClass);
console.log(`Old value: ${findElement.value}`);
findElement.value = element.elementValue;
console.log(`New value: ${findElement.value}`);

[@whitegandalf978]

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

[@bitboominfo]

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

[@aleksandrkedria4024]

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

[@avazart614]

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

[@ОлегДолгов-т8и]

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

[@multiwin]

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);

[@infinitynoir5441]

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

[@DKADEVELOP]

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

[@frencolesov3794]

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

[@Presspero]

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

[@DKADEVELOP]

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

[@fatar_916]

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

[@voroninfinity2295]

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

[@ВладимирВладимиров-ш8х]

норм

[@inzoddex8312]

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

[@ДедушкаБарис]

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

[@iCars-ua]

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

[@DKADEVELOP]

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

[@DKADEVELOP]

При открытии ссылки, ответ подписчика на ДЗ из этого видео будет первым:
th-cam.com/video/sJ3yMXiUgOc/w-d-xo.html&lc=UgzTH-5n3djpOmRUpu94AaABAg

[@KuKu_RuKu88]

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);

[@pattern_kz7167]

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

[@DKADEVELOP]

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

[@АлександрЖеребко-ж4ж]

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

[@Parmax885]

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

[@samfe1800]

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

[@samfe1800]

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

[@avkryukov71]

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

[@Kejla_art]

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

[@ГеоргийМедведев-я8п]

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

[@СеверныйШоколад]

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

[@domusv3246]

пеши есчо!

[@Civilizer1976]

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

[@andreytv7215]

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

[@sofyap.2153]

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

[@lifeisgreat2508]

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

[@yannieyannie6797]

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

[@invkg]

/** 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]

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

[@ivanstrilets443]

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

[@КирилоРізниченко]

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

[@politbers562]

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

[@КирилоРізниченко]

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

[@dimkazambidis]

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

[@david_coder]

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

[@DKADEVELOP]

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

[@t1nderboy]

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

[@tilegenbakitov9243]

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

[@Александр-у6н5ю]

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

[@oleksiikhrebtan5556]

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

[@serge.stecenko]

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

[@moi-nick-zanyat]

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

[@vapo39]

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

[@DevilApprove]

при поиске по dom выдает все время null что бы я не делал
=(

[@Civilizer1976]

То-же такой прикол был. Оказалось :) я в, уже существующий из другого урока, код html добавил тег input ПОСЛЕ тега с подключением js.

[@ЫЫыЫТ.Т]

@@Civilizer1976 спасибо

[@Thoughts-of-the-greats]

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

[@kostetorlovsky7052]

let obj = {
class:'perfecto',
value: 27
};
let findElement = document.querySelector(".perfecto")
console.log(findElement);
findElement.value = 33;

[@mr.Skoloff]

Привет с программированием начал знакомство только из твоих роликов, до этого вообще ни как не отношусь к этому честно по началу вообще очень все не понятно по 10 раз пересматривал ролики что сделать ДЗ да и просто чтоб вывести в консоль но так потихоньку вроде получалось.ну и к чему я все это и вот в этом ролике на 4 минуте ты говоришь прежде чем изучать JS вы должны изучить и знать CSS и если мы не знаем это не очень хорошо . И тут сразу ЧТО ??? что ж ты раньше то не сказал в начальных видео. и вот получается что я щас ставлю на паузу и лезу искать CSS с нуля вроде как у тебя есть видео материал.

[@DKADEVELOP]

Именно с данного уровня уже желательно знать, раньше было по сути о программирование, и те знания с предыдущих выпусков можно применять на разных языках программирования. А с данного видео уже идет погружение в веб. поэтому и желательно

[@mr.Skoloff]

@@DKADEVELOP Вот оно как ,спасибо за ответ. Будем изучать))

[@evgeniyk.4618]

Опа, я думал что такой подачи уже нигде не встречу. На других каналах ,одно словоблудие, которое не поддается восприятию. Спасибо

[@СекретныйИнформатор-я3к]

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