08. JS с нуля, ваще с нуля (getElementById)
ฝัง
- เผยแพร่เมื่อ 22 ก.ย. 2024
- 🚀Стань квалифицированным разработчиком за 9+ месяцев с трудоустройством в IT -INCUBATOR:
Front-end
it-incubator.i...
Back-end
it-incubator.i...
Поддержать меня можно на patreon / itkamasutra или оформив спонсорство на данном канале.
Дополнительные задания, о которых я говорю в видео, находятся вот здесь:
social-network...
document.getElementById - фигня, которая позволяет нашему JS-коду находить элементы на страницы по id этого элемента.
То есть мы с вами начинаем взаимодействовать с HTML с помощью JS! Основная ф-ция JS - обслуживать HTML. Вот мы и начинаем это делать! Ищешь качественные курсы JS (frontend) в Минске? Приходи в мой IT-инкубатор: it-kamasutra.co...
Это не просто курсы по JavaScript, блабла теория, учебная практика и красивый сертификат об окончании курсов на выходе.
Мне очень нравится, что постоянно озвучиваются горячие клавиши, это прям необходимая находка для новичка👍🏻👍🏻👍🏻
Твои уроки мотивируют и ты своей энергией заряжаешь и даёшь надежду, что всё получится!
посоветовали твои обучалки, до этого смотрел разные видео и вообще не понимал что куда и откуда берётся, у тебя всё четко получается объяснить даже самому не понимающему человеку, респект))
что-то этот урок я совсем не понял. одни helloMessage(((
Ctrl-Tab Ctrl-R - не знал, век живи - век учись, вот чем мне нравятся ваши видео - что-то новое узнаешь, детали в бекграунде.
На урок ушло 3 часа. Я столкнулся с проблемами, которые были вызваны по моей не ознакомленности с компьютером и немного моей невнимательности. Больше времени потратил на их решение, я их решил! Тему понял и старался эксперементировать с кодом и вызывал ошибки для собственного понимания. Благодаря 2 переменным я быстро схватил, чем остальные, незнаю почему некоторые жалуются, но это скорее из-за того, что у них код не правильно написан или они где-то провтыкали. Как по мне, это мега удобно использовать helloMessageElement и helloMessageId и просто прописывать путь через точку, который ты хочешь. Спасибо большое. Буду проходить каждый урок и резюмировать что я понял для себя, начиная с этого видео. Предыдущие уроки делал до посинения пока все четко не понял)
🤝👍👍 мчи
Очень крутые конечно у тебя уроки. Вначале ужасно запутался, уже подумал что все, приехали. Дальше слушал и начал понимать. Ты разжевывал и разжевывал. В итоге я старался уже видео на паузу ставить и сам искать ошибки или на опережение делать. Короче, все отлично, спс. Единственная просьба: не задавай всем подряд значение ПРИВЕТ))))))))
сделал сальто, сломал руку - программа дальше не работает 😂 спасибо за уроки! пересматриваю. больше всего понравилось объяснение про ручку к объекту. пока все знакомо. летим дальше!
Изучаю js уже пол года, и даже не подозревал, что есть столько способов поиска элементов HTML Джава Скриптом. Теперь я понимаю всю информативную нагрузку слова IT-Камасутра. Хотя если дальше пойду по этой дороге, еще не раз вспомнится слово сочетание IT-Камасутра
После первого урока в день, поешь припев пол дня.
Сэнсэй все понятно (хорошая подача!!!) и двигаюсь потиху вперед ) но домашних заданий реально не хватает. В принципе мне пофиг, я все-равно после больницы иду к Вам )
здарова
наверно так и состарюсь недождавшись домашек :)
Если вы подключили js файл к html следующим образом . У вас будет выходить ошибка
Uncaught TypeError: Cannot read properties of null (reading 'value')
Очень долго искал решение этой ошибки и на одном из форумов прочитал.
Это связанно с тем, что js файл грузиться раньше html документа и соответственно обращается к пустоте. Поэтому пишите js script внутри body, после всего кода
Да, помогло, спасибо)
+ за ускоритель, не знал) Доступно и легко все обьясняешь, респект)
До этого урока всё было понятно и хорошо. С этими ХэллоумэссэджИД пиздец пошёл. Сам запутался и всё на скаку начал переделывать и чайников запутал к чертям.
100%. Полный пз*ц
вот да, я запуталась между элемент и айди вперемешку
Я пересмотрел несколько раз ))) Поэкспериментировал часа 1.5 и всё стало понятно. )))
мне кажется, если бы он объяснил с "грехом" было бы все понятно, то есть:
так же можно написать: helloMessageElement = document.getElementById("hello-message"); ничего не изменится. Он просто добавил переменную helloMessageId, чтобы избежать дублирования кода. С "грехом" это выглядит так:
var helloMessageElement;
helloMessageElement = document.getElementById("hello-message");
alert(helloMessageElement.value);
Без греха:
var helloMessageElement;
var helloMessageId;
helloMessageId = 'hello-message';
helloMessageElement = document.getElementById(helloMessageId);
alert(helloMessageElement.value);
@@Dreyclin вот спасибо за объяснение! Теперь все понятно 👍
Долго не мог понять, почему не срабатывал window.alert(inputElement.value). В итоге разобрался, что Value был написан с заглавной буквы!
Спасибо за подробные и интересные уроки!!!
Огромное, тебе, человеческое спасибо!! Только с твоего объяснения я понял что такое переменная и с чем ее едят.
Классные уроки! 👍 Молодец Спасибо!
Visual studio code почему на русском?В начале JS с нуля говорил что только English :)
пришёл в js после C и по началу казалос что будет изиии но потом столкнулся с рядом проблем. Спасибо этому каналу за ''информатику без хуйни'' так сказать - очень помогло
переменная helloMessageElement находит своё значение в document с помощью оператора getElementById, который в свою очередь работает через переменную helloMessageID, которая в свою очередь принимает строковое значение "hello-message", содержащееся в идентификаторе сущности (тега)
Ага. Только непонятно почему переменная принимает значение input, a не просто строку hello-message...
getElementById() это функция которая принимает параметры
Здорово, что про отладчик показали. И вообще очень доступно. Спасибо большое!
А может домашнее задание это и есть самому придумать конспекты?
Единственное на что могу жаловаться, так это на отсутствие конспектов, а то как так, каждое видео говорят мне обязательно прям делать ДЗ, которого нет
Не понимаю как тут можно запутаться с hello-message`ами, всё же предельно понятно, я бы даже сказал, что автор очень затягивает видео, разжевывая это, но на то этот курс и зовётся "с нуля, ваще нуля"
Спасибо Вам за труд
прошу прощение за отсутствие конспектов. Работаем с командой над тем, чтобы их опубликовать!
@@ITKAMASUTRA Здравствуйте, нигде еще не выкладывали конспекты и ДЗ?)
@@MrIyourdeath Так и помрём без домах Xd
Я в душе не мог себе представить что class в душе представлен className(ом)
70% видео, это запутывание людей!
я по id на нашол Эльдар Давлетбаев )))) он алхимик 7 октября 1992 г. рождения :D :D :D
Я тоже))
+
Даа, тоже проверил xDD
Лайк за шутку про 3 секунды))
2024 полет нормальный, объяснений более разжеванных не найти думаю
Спасибо за видео! Очень подробно описано!
Так, ну до 70% ролика чуть не сдох. Потом стало понятно, что мы делаем, но я не понимаю пока что зачем мы ищем с помощью JS элементы с html? Получилось, что просто зазубрил, но не понятно зачем. А так всё гуд, кажись)
Чтобы можно было работать с этими элементами через JS. Напрмер, можно обращаться к элементам HTML с помощью CSS, и задавать в CSS стили для этого элемента (цвет шрифта, размеры и т.д много всего).
То же самое для JS, мы обращаемся к элементу с помощью его id чтобы делать с ним что-то, тот же шрифт поменять, например, но возможности JS намного шире, чем CSS
Спасибо, очень доходчиво объясняешь!
Дякую, і за настрій, зокрема)
Димыч, скоро к вам залечу, пересматриваю твой js для небольшой подготовки))
Уже не так просто как на прошлых уроках)
классно объясняешь! Спасибо!
Спасибо за комментарий ;)
Урок хороший. Но слишком много похожих элементов. helloMessage, hello-message, hello, Hello. Из-за этого теряется смысл и последовательность шагов.
Приветствую всё понятно, единственное лишние строчи кода, когда можно сократить до вида:
var helloMessage = document.getElementById('hello-message');
window.alert(helloMessage.id);
window.alert(helloMessage.value);
window.alert(helloMessage.className);
или я не понимаю зачем объявлять переменную а потом ещё отдельной строкой присвоить значение, а потом присвоить значение в переменную Element? Буду благодарен ответу))
Очевидно же , чтобы разжевать каждое действие по отдельности.
вот и я не понимаю зачем вторая переменная
очень интересно, но не чего не понятно)
отличный контент!
много воды, привел бы простой пример document.getElementById("hello-message").style.color = 'blue' по красил бы текст, а то люди не понимают что для чего! Потом привел бы пример по клику с мышкой по тексту, что бы цвет или текст менялся!
Спасибо огромное за твой труд!
Спасибо за уроки!
уже три раза посмотрел, так и ноль. хотя до этого все нормально было
Спасибо! Очень интересно, доступно, полезно!!!
а почему нельзя обратиться к аллерту первой переменной, зачем создавать вторую? Я понимаю что придется искать саму себя, обращаться к самой себе и это несколько нелогично, но ведь работает. Работает не значит что правильно, но смысл, смысл вводить вторую я не вижу.
var inputHelloId;
inputHelloId = 'inputHello';
inputHelloId = document.getElementById(inputHelloId);
window.alert(inputHelloId.value)
Норм урок, едем дальше..
Большое спасибо за урок!
Помогите разобраться. В 7 уроке сказано, что в строке str1 = 'number 1. sdfgsdsfg'. Сказано, что в кавычках может быть все что угодно. Как я понимаю это какой-то текст, который ни к чему не привязывается.
В этом уроке мы называем переменную helloMessageId присваиваем ей текст в кавычках, и он почему-то становится не обычным текстом, а именно id который в инпуте.
Не могу понять, почему так. Это как то связано со следующей строкой document.getElementById(helloMessageId) ? Он из текста переменной превращает обычный текст в какую-то "душу" которую нужно найти в документе?
Пересмотрел несколько раз, понял сам.
а почему код в одном файле?
Спасибо, добрая душа! )))
спасибо за хорошее обїяснение
Большое спасибо 👍
Смотрю в 2023 году
Спасибо, Димыч:)
это айди некого Эльдара Давлетбаева,кстати,я найти не могу домашку,где ее искать? там какие видео по типу "01-08" и я не понимаю о чем они,думал дз будет в форме заданий тип.
Знающие люди, объясните, пожалуйста, я правильно понял или нет:
1. Мы создаем 2 переменные (helloMessageElement и helloMessageId)
2. Переменной helloMessageId присваиваем значение инпута, прописанное в его id (hello-message)
3. Присваиваем переменной helloMessageElement значение переменной helloMessageId, то есть тоже hello-message.
4. Алертаем валуй элемента, id которого hello-message, то есть инпута.
Так что ли получается?
Тэгу в html вписываем Id="какой то айди", далее присваиваем этот айди переменной, потом создаём переменную которой присваиваем значение var per = document.getElementById(helloMessageId); Теперь переменная per хранит значение тэга, и можно делать с ним всё что хочешь, например Димыч вывел через alert(per.value) то что содержится в этом тэге в value;
получается js по-сути забирает душу?
Зачем нужна лишняя переменная helloMessageId, если можно просто указать 'id' в document.getElementById(тут)?
Алексей Журавлев я могу быть конечно не прав, но тут как мне кажется, суть в том что таких айди в коде может быть миллион, и он присвоил значение конкретно ему
ну раньше было сказано, что лучше для всего создавать переменные
Спасибо огромное за ускоренный режим!!!!
24:15
Спасибо
Всем привет а почему в описаниях ссылка на сайт, на домашнее задание, конспекты, но там всё платно. Ты же говорил что обучение бесплатное, это твоя миссия, цель и все такое. А домашнее задание платные
мог бы просто номер карты оставить и по желанию люди донатили бы. не впадлу за урок 100 рублей было бы скинуть. он больше бы денег поднял.
Объясните мне тупице пожалуйста. Для чего во всех манипуляциях мы работаем с текстом который заложен в id ?
Когда id в моем понимании это аля тот же класс. Который создан как вы говорите тупо хвататься например в сss за него. И возможно это тупейший вопрос ам сори)))
Душа это и есть окно которая выходит снизу в браузере, а именно вкладка Sources.
prosto super uroki, sposibo, a gde domashnaya rabota?
sposibo brat
До чего же упоротый трек,
в первый раз вижу настолько глубокое разъяснение на тему,присваивания элемента к переменной
на самом деле, в следующем цикле видео будет ещё детальнее всё разжёвано. И более структурно. Но это уже в следующем году!
Для меня, например, наоборот хорошо. Html и css пропустил правда... я их уже выучил
Пикап
подстричся
дифференцировать космичиское уравнение
приодется
выучить пару шуток
подойти к девушке
сказать привет
рассказать пару шуток
взять номер телефона
var helloMessageElement;
var helloMessageId;
helloMessageId = "hello-message";
helloMessageElement = document.getElementById(helloMessageId);
window.alert(helloMessageElement.value);
window.alert(helloMessageElement.id);
window.alert(helloMessageElement.className);
Закрепим урок)
ковычки не двойные только.
Здравствуйте! Спасибо за уроки!!!:-) Подскажите, когда в браузере в режиме разработчика наводите мышку на элементы, они у вас подсвечиваются и выделяется, это доп плагин?
разобрался, гугл сила!:-)
От ты водолей ))
Я вообще, все это, одной строкой записал.
var helloMessageElement = document.getElementById('hello-message');
Это правильно или нет?
мне тоже непонятно пока зачем вторая переменная
это такая же тема как на css сначала объясняют как подробно а после скажут что для удобства можно и сокращать
Спасибо
Не знаю как у вас в 2017 работало, но у нас в 2020 данный код не работал пока я не поставил кавычки в точности как указано в строке
в строку helloMessageElement = document.getElementById("hellomessage")
Что делать, если у меня не появляется при наведении курсора на строку вся информация о ней в консоле разработчика?
Спасибо!!!
почему бы скрипт не сделать в другом файле по аналогии с СSS а затем связать их- html и javascript ?
да. тоже появилась такая мысль в том же ролике где отделяется CSS. Видимо это чуть позже, когда коду будет чуточку больше
мне кажется, если бы он объяснил с "грехом" было бы все понятно, то есть:
так же можно написать: helloMessageElement = document.getElementById("hello-message"); ничего не изменится. Он просто добавил переменную helloMessageId, чтобы избежать дублирования кода. С "грехом" это выглядит так:
var helloMessageElement;
helloMessageElement = document.getElementById("hello-message");
alert(helloMessageElement.value);
Без греха:
var helloMessageElement;
var helloMessageId;
helloMessageId = 'hello-message';
helloMessageElement = document.getElementById(helloMessageId);
alert(helloMessageElement.value);
Спасибо за ускоренный режим)))
//Скорость 1.25
Мне нравятся ваши уроки все прекрасно понятно показано , но все же есть то из-за чего я много раз пересмотрел одно и тоже видео
Когда везде вы пишите одно и тоже слово во все переменные и названия всего чего можно одним и тем же hello message
Это начинает путать человека который не может разобрать разные моменты и команды
ya chainik i mne ocen nravitsa!!!!
У меня через f12 во вкладке Console в гугл хроме ничего не отображается, в том моменте, когда пытался выявить ошибку null. Как быть в данной ситуации, что исправить, чтобы все отображалось?
А ДЗ и конспекты только по платной подписке?
Извините, а где найти домашние задания?
почему так сложна сделат можна же было написат
document.getElementById('hello-message');
Дима, привет ! скажи пожалуйста , дз отдельно для каждого урока 1, 2, 3,4,5,6,7 нету ? только одно общее дз с 1-8 урок?
ну как получил ответ ?
меня это тоже интересует
скачал прогу, делаю как у тебя, но у меня почему то так не работает, когда пишу var то без етой "
Спасибо....скорость полезная утилита
До этого урока все идеально понимал, тут ничего не понятно. Что делатт??
Урок про гибкость кода.
Камасутра привет =) надесъ ты ответишъ мне . Естъ ли разница между задаванием имени класса через " " и ' '
Такие вопросы нужно гуглить. В противном случае кина не будет
спасибо like за speed )
Я что.то не поняла... почему id="hello-message" и у input, и у h1? Не лучше ли в таком случае использовать class, и getElementByClassName? Айдишки вроде как индивидуальными должны быть...
нужно внимательно слушать что он рассказывает. Он говорил что айди должен быть один. Если будет в инпут и аш1 то задача выполнится только в инпут.
Автор, где домашние задания?
У меня сналача скрипт грузится, потом страница. Это норм?
Можно подключать Js файл перед тегом
А где конспект?
Прошёл Д.З. примерно за час. Вполне выполнимое и интересное, понравилось.
На Патреоне более полный конспект, чем на social network. Взял то и то чтобы сравнить)
привет! не могу найти дз, подскажите пожалуйста где ?
@@valeriazbukar1120привет. по ссылке под видео
Привет. У меня в консоли ы браузере при наведении мыши на элемент , он не выделчется, и нет такого ниспадающего меню, где вы нашли ' class name'. Как мне это исправить? Спасибо
Тот же вопрос
Не могу найти задания((
Топ
не работает document.getElementById