Понимание javascript - работа с DOM
Вставка
- Опубліковано 28 чер 2016
- Подключение первого скрипта
Объектная модель документа
Ключ к пониманию языка
Свойства, события, методы
innerHTML и style
Обработка событий
Слайдер фотографий в 20 строк
Исходники: yadi.sk/d/ACGhscUtsxYD6
Курс: js.dmitrylavrik.ru/
Дмитрий красавчик.
Все понятно и внятно и доходчиво.
И еще самый позитивный и веселый преподаватель.
Ты лучший Дмитрий!
А ещё он мастер спорта по шахматам
i dont mean to be so off topic but does anyone know of a tool to log back into an Instagram account?
I somehow forgot the login password. I love any tricks you can give me!
Огонь урок! Дмитрий, у Вас реально талант объяснять))
Дмитрий учитель от бога, способный объяснить даже самые необъяснимые вещи, его уроки хочется слушать, а не засыпать на второй минуте )))
Но на мой взгляд javascript пугает не DOM и BOM, это как раз довольно логично остается лишь ознакомиться с методами объектов. А проблема в том, как было правильно озвучено, что "корявый" и корявый не значит плохой, а именно корявый - непривычный/необычный в своей логике.
Когда говорят что "JavaScript это объектно-ориентированный си-подобный язык", так это все от названия до эпитетов чисто маркетинг! Все знают что JavaScript назван так, чтобы отхапать часть популярности JAVA, но вряд ли кто-то задумывался что си-подобным он назван для тех же целей, так как С++ тоже довольно популярен, а от С в JS только скобки и точка с запятой, у любого Си-шника глаза лопнут если он увидит код JS программиста (именно JS-прогера, а не PHP-ника пишущего на JS). Объектно-ориентированный? да ни разу он не ориентирован на объекты! Он, собака, ближе к функциональному!
Пугают подвыверты в этом языке:
1) примитивы могут иметь некоторый функционал объекта из-за чего создается впечатления что все кругом объекты. var a = 5; var b = new Number(5); в браузере выглядят одинаково, они равны, a==b; //(true), но не эквивалентны a===b; // (false) Жуть!
2) Масси вы это объекты! В это время объекты это массивы! При том что объекты не обладают всей функциональностью массивов! Жесть?!
3) NaN (not a number- не число) числовой тип данных, при этом NaN==NaN (false)
4) Функции это Объекты высшего порядка, при том что Конструкторы Объектов это Функции. Но такие Функции, которые как функции вызывать в принципе бессмысленно! Круть?!
5) В параметры функции можно передать функцию, и мало того еще и из функции можно вернуть функцию. Каково?!
6) Количество параметров заданных при определении функции, совершенно не имеет отношение к количеству параметров при ее вызове.
7) Аргументы переданные в функцию хранятся в массиве, который не совсем массив
8) Ссылочные типы данных присваиваются по ссылке, а в функцию передаются по значению (читай Закаса стр 120, по-моему)
9) наследование у объектов реализовано через жж..., ой т.е. через прототип
10) Наличие самовызывающихся функций, функциональных выражений, анонимных функций ... и внимание жара - именованных анонимных функций!
и это я еще не все вспомнил ;))))
Вот где страх, вот где ужас!
Дмитрий, спасибо за видео! Спасибо, что делитесь знаниями и внушаете надежду! :)
PS: забыл про самый ужас - контекст выполнения
Вот кстати по поводу засыпать - хороший у вас комментарий, и ведь действительно - единственные длинные уроки на которых не засыпаешь и, более того, в которые вовлечен.
DarkFate Inc потому что шарить и быть хорошим педагогом - это разные вещи. Пусть многие ютуберы поучатся, как давать материал, Дмитрию, спасибо.
Как же мне страшно, от того что я не понимаю половины того что тут написано, но слайдер на джиквери очень хорошо прыгнул, но я пока по заветам sorax'а пытаюсь разобраться без джиквери, и по дому слабо, но Димка прям .. думаю про смартгрид теперь, про html academi и про смартгрид и можно будет потехонечку потом яваскрипт и пхп покусать
Как я, однако, рад, что понял все, что вы написали! Видимо, это значит, что я отлично знаю JS!
Дмитрий благодарю Вас. Из всех уроков, что мне доселе повезло увидеть - Ваши самые понятные! Вы и правда учитель от Бога)Всех благ!
Спасибо тебе, Дмитрий!
Вижу лайк, ставлю лаврика, красавчик!
+
@Francisco Ingalls ля англичаны разводилы
Діма, дякую! чесно, ти супер учитель!
Великолепная подача материала все сразу становится на свои места! Спасибо лойс!!!
Дмитрий, учитель от бога!!! Посмотрев ваше видео я наконец-то поняла DOM. Спасибо огромное.
Действительно толковый человек. Дмитрий легко и красиво выражает свои мысли, а также замечательно преподносит информацию.
Большое спасибо, Дмитрий, на 2-х пальцах объяснили с первого раза.!)
Очень толковое объяснение, наверное, лучшее, что видел!! Спасибо за лекцию!
Восхитительно!!! Ты лучший, Дмитрий спасибо!
Учить это дар. Дмитрий он у Вас есть.
Никакого солнечного майского денька. Все четко и просто. Спасибо.
Лукас, подписка, дззззынь.
я чуток поковырялся в коде моего кота и теперь при событие 'летящий тапок' его шерсть меняет цвет на синий. Все просто .Заходим в ДНК кота и в конце вставляем эту строку "кот.летящийТапок = function(){
кот.стили.цветШерсти = "синий";
}
"
круто:DD
А что если кота побрить и кинуть тапок на шерсть, она посинеет?
@@quatout146 Тестировщики подтянулись :D
08:10 - статический сайт - к серверной части, а не к клиентской.
08:29 - взаимодействие клиент-сервер.
09:18 - клиент обратно получает от сервера сгенерированную статическую страницу.
[!] 10:02 - DOM
11:03-11:50 - место JS.
17:30 - взаимодействие JS с тегами (интерактивность).
дальше тебя не хватило xD
Хороший учитель.Очень доступно. Че тут еще сказать, пальцаверхипдписался.
Только после твоего видео я реально начал что то понимать :)
Отличный урок ! Дмитрий Вам огромное спасибо !
Отличный учитель, прекрасная подача материала. Спасибо огромное!
Здравствуйте, вы уже давно устроились разработчиком?
Большое спасибо! Все понятно, получилось повторить самостоятельно. Перед этим смотрела видео Дмитрия "Основы программирования" и делала по ним домашки. Очень советую, там 10 уроков.
Очень доступно объясняет, лайк! Жаль дальше нет ничего(
Тёска, респект тебе и уважение за то, что ты делаешь.
Это просто бомба! Объяснение нереально крутое))) Спасибо!!!
очень интересно, так держать!
Спасибо за урок! Проверил имеющиеся в голове знания.
Благодаря этому видео я научился делать slider, спасибо большое автору!
Дмитрий молодец ! ! ! Действительно понятно все. Большое вам спасибо.
Спасибо, Дмитрий!я вас люблю!!!!!
Спасибо Дмитрий, очень нравится вас слушать самый позитивный учитель))
Здравствуйте, как ваши успехи? Вы уже давно устроились разработчиком?
Лаврик - Учитель от бога
Спасибо! Очень хорошее объяснение
получил удовольствие от урока)
Это лучшее, что я находил, спасибо
Дмитрий Лаврик! Вы преподаватель от Бога! Я еще не встречал на просторах инета такой способности рассказать так просто о сложном. Жаль что вы дипломов о профпереподготовке не даете. Позднее все равно к вам на курс JS запишусь.
Благодарность из конца декабря 2019💪
Да чего уж там... Из декабря 2020 тоже спасибо!
@@IvanSergienkodrfunk из декабря 2021 тож
Отличный посыл, спасибо 👍🏻
Отлично объясняешь! Так держать!
Дмитрий, спасибо за видео. Наиболее четкие и логичные объяснения работы в js во всем ютуб.
Здравствуйте, как ваши успехи, вы давно уже устроились фронтендером?
@@fantast2568 Здравствуйте)) Работаю PM. Изучала js для лучшего технического понимания девелоперов. Знания очень помогли))
@@christinasoroka1157 Оо круто, вы профи своего дела 😉
Отличное видео, все прям по пальцам расписал!
Хороший ролик . Манера исполнения 10 баллов. Я первый раз на вашем канале , хотелось бы знать будет ли, что то более реактивное. (не для новичков) . Видосов на Реакт-тему и так много, но вы, очень хорошо "на котах объясняете".
Дмитрий я вас просто люблю спасибо вам за видео. Я прохожу курс сейчас на английском языке курс очень популярный курс о js так в этом курсе не оъесняется так как вы в это делаете. Продолжайте своё дело у вас очень круто получается
Отличная речь. Большинство видео по JS вызывают желание спать. Этот улыбаться. Подписался, Скачиваю. +
А скачивать никто не разрешал.
Так и никто и не запрещал ...
Рад, что нашелся человек, способный объяснить материал. Но, лично мне, было скучновато, т.к. хорошо знаю JS. Думал, что здесь узнаю что-то новое. Как бы то ни было, имеющиеся данные разложились по полочкам)
первый урок сейчас с вами пр js. до этого не сталкивался с этим, все понятно, на счет платного курса подумаю, попробую посмотреть что говорят другие. Вас посоветовал друг, говорит очень крутые и ему нравитесь
Очень доступно и полезно!)))
боже, этот человек просто гений
Ни одной секунды не пожалел после просмотра этого видео, топ.
Отличное видео.
Урок просто бомба
Круто, внятно обьяснил )
Благодарность с конца 2022 )
Димон - кросафчег. Даешь ООП кота!
За слайдер спасибо, юзабельный, чуть допились и вообще пушка будет
лучшего объяснения просто нет!! Спасибо))
нужно больше видео про ДЖС !!! да да да
JS
спасибо Дмитрий
Проходил у него курс JS для верстальщика. Да, действительно, хороший преподаватель!
не ну вебинар был полезным. не не, ставлю тебе лайкус. заебашил норм урок. пиздато
Nice teacher!👍
Для полноценного слайдера с автоматическим переключением картинок добавьте две кнопки: "play" и "stop".
var btn_play = document.getElementById('play');
var btn_stop = document.getElementById('stop');
btn_play.onclick = function(){
playslider = setInterval(btn_next.onclick, 2000); // интервал 2с
}
btn_stop.onclick = function () {
clearInterval(playslider);
}
Все хорошо. Чисто субъективно, мне больше нравится, как объясняет Сергей Мелюков (Loftschool)
Дмитрий, подскажите, в вашем примере галереи в HTML-коде прописаны 8 картинок с display:none. При загрузке такой страницы эти картинки подгрузятся в браузер или они начнут подгружаться только тогда, когда установится display:block?
Бог учитель, от Дмитрия
Спасибо!
Лучший !
Отлично!!!!
Красавчик, Димас! давай больше видосов!
спасибо!
Подскажите, возможно ли с помощью javascript взаимодействовать с открытой в браузере страницей стороннего сайта? Например создать бота, который будет делать последовательность действий.
а как быть с свойствами, у которых несколько аргументов??
box-shadov например.-.
Молодец!
блин, самый первый код не работает
умеет ... знают предмет многие, но лишь некоторые понимают и умеют доходчиво рассказать ( не пересказать) интересующимся. Дима, ты умеешь. Может это дар божий? Тогда развивай. Удачи не желаю, но творческого вдохновения да.
Спасибо
Спасибо за видео! А когда еще набор на курс будет?
Я б тоже записался
ну как, записывались, прошли курс?
Боже, какая красивая ученица.
я собираюсь, айда со мной народ)
js для верстальщика с конца марта
Думал гляну на пару сек,- залип на более чем 1.5 часа!
Вроде сделал тоже самое, редактор выдает ошибку
1
'alert' was used before it was defined. alert('Hello, World!'); пока непонятно что не так(
molotok!
интересно по CMS к примеру WP будут уроки?
Добрый день, Дмитрий не могу записаться на Ваш курс по js (js.dmitrylavrik.ru), форма не работает. Уже три раза воодил данные и никакого результата.
Почему есть обьекты а нет классов как в java? И почему синтаксис очень сложный. Например в функции alert() можно так и написать он работает и так работает а ведь там в конце должен быть ;
самое сложное в JS это понять, что язык работает с переменными и классами задаваемые браузером, а не программистом, как это обычно бывает, и это и есть DOM. а далее просто программируем поведение заданных в DOM объектов, и тут все зависит от вашей способности программировать вообще. Синтаксис JS как раз и приспособлен к этой работе c DOM.
Куда двигаться после теории JS?
а как понять что такое в жизни например аргументы
а как же es6?
где let?
что за дела?
крутой чувак
а ещё уроки по js будут?
Когда объяснял про переменную на 50:40, мог для наглядности просто подставить везде `document.querySelector('#text)`, тем самым наглядно было бы видно, что переменная это просто сущность которая облегчает написания кода и не пришлось бы везде вместо ее имя писать `document.querySelector('#text)`
У меня почему-то 12345 при клике цвет не меняет.
Для практики и изучения материала хорошо конечно, но вообще до такого редко доходит, ведь есть slick и owl.
Спасибо, 2.5 лет занимаюсь программированием, только сейчас понял, что такое DOM .. )
вордпресник не программист
@@j.d.3890 согласен, а зачем ты мне это пишешь?)
@@AlekseiKazantcev
> получаю 10к
от этого ты программистом не стал
@@j.d.3890
да ладно тебе, чуть проще технология, зато не приходится Angularы всякие учить, веостальщиков кстати тоже программерами я считаю, а вот вас кто на бэке работает, ненавижу
А почему к display:none такое бинарное отношение, я юзаю jquerry довольно давно, он всё плавно открывает закрывает классы, которым display:none, display:block прописан, с анимацией, а не моментально, или я что то не уловил? Зачем всё это позиционирование и транзишен в случае с анимацией слайдера на JS?
Скорее всего, Вы что-то путаете. Сам процесс изменения свойства display нельзя растянуть во времени. А в случае с opacity, которое может иметь множество значений, мы, с помощью свойства transition, задаем временной интервал, за который все эти значения сменятся от изначального к указанному. Таким образом, мы скрываем все, кроме первого, блоки за счет придания им100% прозрачности, а потом возвращаем значение прозрачности нужному блоку в 0 за указанное время. И именно этот процесс мы воспринимаем как анимированное переключение слайдов.
Здравствуйте ! Хотела спросить как можно сделать сайте поле в PHP или с JavaScript чтобы можно было только один раза вводить. То есть как можно поставить ограничения
лол
Опоздал. Понял.то что не понял и есть жизнь.
Я конечно понимаю что мне скорее всего никто не ответит, учитывая что видео трехлетней давности, ну да ладно.
Подскажите если в теме, вот Дмитрий добавил в штмл несколько картинок, которые положил в нужную папку. Есть ли способ, чтобы в штмл эти картинки добавлялись сами, например в момент закидывания этих картинок в папку? Если да то как? Я вообще чайник если что, так-что предпочтительнее ответы "для тупых"
Простите за вопрос. Вроде же скрипты подключаются перед закрывающим тегом а не после. Я такой картины как не разу не видел. Или я что то не так понимаю...Спасибо.
там прописано ..... то есть грубо говоря- вместо записи в head пишете после body ... я тоже новичек, но я понимаю это так
Я не к этому задавал вопрос. А про то что сами скрипты которые опускают вниз документа пишутся не после закрывающего тега body а перед ним.. А в видео написано после. А пишут их снизу чтоб скрипт не блокировал построение документа(потому что пока грузиться script html и css подгружаться не будут, если мы конечно не используем async или defer) и после того как скрипт загрузиться весь dom уже будет построен. Но сами скрипты(их подключение) находятся в body, а не за его пределами. Скорее всего автор просто сделал опечатку!
P.S Многие вещи в js понял только после объяснений Дмитрия. Объясняет очень понятно!
Всё верно - опечатка. Лучше писать перед закрывающим body)
вопрос на засыпку. плагины для браузера пишут на js html css но есть плагины с авторизацией и добавлением слов со страницы в базу данных. как?
На ответ 2 месяца
Подскажите,пожалуйста,почему не работает display:none;,хотя другие стили вроде работают
скорей всего в файле стилей, в строке gallery .photos img пропущен пробел перед точкой
Дмитрий я смотрю это видео только сейчас, а информация спустя три года все еще будет актуальна?
Тоже интересует.... Хотя я код построил под свои файлы и не получилось увы.... Ошибка в 10 строке скрипта выдаёт... (
@@user-kw7fe6ek1f дак это может ошибка в самом коде?
@@ravabat5841 да вроде бы и нет.... Все есть =( забыл уже ошибку помню что нул
@@ravabat5841 думал может где-то ошибку допустил... Проверил раз 30... Не нашёл нечего... Только в консоле вон та ошибка (
Актуально, т.к. это база. Ну за исключением того, что через var переменные не называют