Понимание javascript - работа с DOM
HTML-код
- Опубликовано: 28 июн 2016
- Подключение первого скрипта
Объектная модель документа
Ключ к пониманию языка
Свойства, события, методы
innerHTML и style
Обработка событий
Слайдер фотографий в 20 строк
Исходники: yadi.sk/d/ACGhscUtsxYD6
Курс: js.dmitrylavrik.ru/
Огонь урок! Дмитрий, у Вас реально талант объяснять))
Спасибо тебе, Дмитрий!
Дмитрий благодарю Вас. Из всех уроков, что мне доселе повезло увидеть - Ваши самые понятные! Вы и правда учитель от Бога)Всех благ!
Діма, дякую! чесно, ти супер учитель!
Великолепная подача материала все сразу становится на свои места! Спасибо лойс!!!
Вижу лайк, ставлю лаврика, красавчик!
+
@Francisco Ingalls ля англичаны разводилы
Дмитрий учитель от бога, способный объяснить даже самые необъяснимые вещи, его уроки хочется слушать, а не засыпать на второй минуте )))
Но на мой взгляд 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!
Дмитрий красавчик.
Все понятно и внятно и доходчиво.
И еще самый позитивный и веселый преподаватель.
Ты лучший Дмитрий!
А ещё он мастер спорта по шахматам
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!
Большое спасибо, Дмитрий, на 2-х пальцах объяснили с первого раза.!)
Дмитрий, учитель от бога!!! Посмотрев ваше видео я наконец-то поняла DOM. Спасибо огромное.
Очень толковое объяснение, наверное, лучшее, что видел!! Спасибо за лекцию!
Восхитительно!!! Ты лучший, Дмитрий спасибо!
Только после твоего видео я реально начал что то понимать :)
Действительно толковый человек. Дмитрий легко и красиво выражает свои мысли, а также замечательно преподносит информацию.
Тёска, респект тебе и уважение за то, что ты делаешь.
Хороший учитель.Очень доступно. Че тут еще сказать, пальцаверхипдписался.
Это просто бомба! Объяснение нереально крутое))) Спасибо!!!
очень интересно, так держать!
Отличный урок ! Дмитрий Вам огромное спасибо !
Отличный учитель, прекрасная подача материала. Спасибо огромное!
Здравствуйте, вы уже давно устроились разработчиком?
Дмитрий молодец ! ! ! Действительно понятно все. Большое вам спасибо.
Спасибо Дмитрий, очень нравится вас слушать самый позитивный учитель))
Здравствуйте, как ваши успехи? Вы уже давно устроились разработчиком?
Спасибо, Дмитрий!я вас люблю!!!!!
Спасибо! Очень хорошее объяснение
Дмитрий я вас просто люблю спасибо вам за видео. Я прохожу курс сейчас на английском языке курс очень популярный курс о js так в этом курсе не оъесняется так как вы в это делаете. Продолжайте своё дело у вас очень круто получается
Большое спасибо! Все понятно, получилось повторить самостоятельно. Перед этим смотрела видео Дмитрия "Основы программирования" и делала по ним домашки. Очень советую, там 10 уроков.
Спасибо за урок! Проверил имеющиеся в голове знания.
Очень доступно объясняет, лайк! Жаль дальше нет ничего(
Дмитрий, спасибо за видео. Наиболее четкие и логичные объяснения работы в js во всем ютуб.
Здравствуйте, как ваши успехи, вы давно уже устроились фронтендером?
@@fantast2568 Здравствуйте)) Работаю PM. Изучала js для лучшего технического понимания девелоперов. Знания очень помогли))
@@christinasoroka1157 Оо круто, вы профи своего дела 😉
Благодаря этому видео я научился делать slider, спасибо большое автору!
08:10 - статический сайт - к серверной части, а не к клиентской.
08:29 - взаимодействие клиент-сервер.
09:18 - клиент обратно получает от сервера сгенерированную статическую страницу.
[!] 10:02 - DOM
11:03-11:50 - место JS.
17:30 - взаимодействие JS с тегами (интерактивность).
дальше тебя не хватило xD
Отличный посыл, спасибо 👍🏻
Это лучшее, что я находил, спасибо
первый урок сейчас с вами пр js. до этого не сталкивался с этим, все понятно, на счет платного курса подумаю, попробую посмотреть что говорят другие. Вас посоветовал друг, говорит очень крутые и ему нравитесь
Дмитрий Лаврик! Вы преподаватель от Бога! Я еще не встречал на просторах инета такой способности рассказать так просто о сложном. Жаль что вы дипломов о профпереподготовке не даете. Позднее все равно к вам на курс JS запишусь.
Отлично объясняешь! Так держать!
Учить это дар. Дмитрий он у Вас есть.
Никакого солнечного майского денька. Все четко и просто. Спасибо.
Лукас, подписка, дззззынь.
Рад, что нашелся человек, способный объяснить материал. Но, лично мне, было скучновато, т.к. хорошо знаю JS. Думал, что здесь узнаю что-то новое. Как бы то ни было, имеющиеся данные разложились по полочкам)
Отличное видео, все прям по пальцам расписал!
Благодарность из конца декабря 2019💪
Да чего уж там... Из декабря 2020 тоже спасибо!
@@IvanSergienkodrfunk из декабря 2021 тож
получил удовольствие от урока)
я чуток поковырялся в коде моего кота и теперь при событие 'летящий тапок' его шерсть меняет цвет на синий. Все просто .Заходим в ДНК кота и в конце вставляем эту строку "кот.летящийТапок = function(){
кот.стили.цветШерсти = "синий";
}
"
круто:DD
А что если кота побрить и кинуть тапок на шерсть, она посинеет?
@@quatout146 Тестировщики подтянулись :D
Хороший ролик . Манера исполнения 10 баллов. Я первый раз на вашем канале , хотелось бы знать будет ли, что то более реактивное. (не для новичков) . Видосов на Реакт-тему и так много, но вы, очень хорошо "на котах объясняете".
Лаврик - Учитель от бога
Отличная речь. Большинство видео по JS вызывают желание спать. Этот улыбаться. Подписался, Скачиваю. +
А скачивать никто не разрешал.
Так и никто и не запрещал ...
Очень доступно и полезно!)))
Отличное видео.
Круто, внятно обьяснил )
Ни одной секунды не пожалел после просмотра этого видео, топ.
За слайдер спасибо, юзабельный, чуть допились и вообще пушка будет
Димон - кросафчег. Даешь ООП кота!
лучшего объяснения просто нет!! Спасибо))
боже, этот человек просто гений
Урок просто бомба
спасибо Дмитрий
Проходил у него курс JS для верстальщика. Да, действительно, хороший преподаватель!
Благодарность с конца 2022 )
не ну вебинар был полезным. не не, ставлю тебе лайкус. заебашил норм урок. пиздато
Все хорошо. Чисто субъективно, мне больше нравится, как объясняет Сергей Мелюков (Loftschool)
нужно больше видео про ДЖС !!! да да да
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);
}
умеет ... знают предмет многие, но лишь некоторые понимают и умеют доходчиво рассказать ( не пересказать) интересующимся. Дима, ты умеешь. Может это дар божий? Тогда развивай. Удачи не желаю, но творческого вдохновения да.
Спасибо, 2.5 лет занимаюсь программированием, только сейчас понял, что такое DOM .. )
вордпресник не программист
@@j.d.3890 согласен, а зачем ты мне это пишешь?)
@@AlekseiKazantcev
> получаю 10к
от этого ты программистом не стал
@@j.d.3890
да ладно тебе, чуть проще технология, зато не приходится Angularы всякие учить, веостальщиков кстати тоже программерами я считаю, а вот вас кто на бэке работает, ненавижу
molotok!
Думал гляну на пару сек,- залип на более чем 1.5 часа!
крутой чувак
Дмитрий, подскажите, в вашем примере галереи в HTML-коде прописаны 8 картинок с display:none. При загрузке такой страницы эти картинки подгрузятся в браузер или они начнут подгружаться только тогда, когда установится display:block?
Когда объяснял про переменную на 50:40, мог для наглядности просто подставить везде `document.querySelector('#text)`, тем самым наглядно было бы видно, что переменная это просто сущность которая облегчает написания кода и не пришлось бы везде вместо ее имя писать `document.querySelector('#text)`
Опоздал. Понял.то что не понял и есть жизнь.
Спасибо за видео! А когда еще набор на курс будет?
Я б тоже записался
ну как, записывались, прошли курс?
Боже, какая красивая ученица.
я собираюсь, айда со мной народ)
js для верстальщика с конца марта
самое сложное в JS это понять, что язык работает с переменными и классами задаваемые браузером, а не программистом, как это обычно бывает, и это и есть DOM. а далее просто программируем поведение заданных в DOM объектов, и тут все зависит от вашей способности программировать вообще. Синтаксис JS как раз и приспособлен к этой работе c DOM.
16:25 уж ты! Мы вышли из бухты)
24:40 рисовал кота, а получилась свинья)
а как быть с свойствами, у которых несколько аргументов??
box-shadov например.-.
Для практики и изучения материала хорошо конечно, но вообще до такого редко доходит, ведь есть slick и owl.
Подскажите, возможно ли с помощью javascript взаимодействовать с открытой в браузере страницей стороннего сайта? Например создать бота, который будет делать последовательность действий.
блин, самый первый код не работает
интересно по CMS к примеру WP будут уроки?
Да с котами проблема))))
Здравствуйте ! Хотела спросить как можно сделать сайте поле в PHP или с JavaScript чтобы можно было только один раза вводить. То есть как можно поставить ограничения
лол
Киржаческий привет
А почему к display:none такое бинарное отношение, я юзаю jquerry довольно давно, он всё плавно открывает закрывает классы, которым display:none, display:block прописан, с анимацией, а не моментально, или я что то не уловил? Зачем всё это позиционирование и транзишен в случае с анимацией слайдера на JS?
Скорее всего, Вы что-то путаете. Сам процесс изменения свойства display нельзя растянуть во времени. А в случае с opacity, которое может иметь множество значений, мы, с помощью свойства transition, задаем временной интервал, за который все эти значения сменятся от изначального к указанному. Таким образом, мы скрываем все, кроме первого, блоки за счет придания им100% прозрачности, а потом возвращаем значение прозрачности нужному блоку в 0 за указанное время. И именно этот процесс мы воспринимаем как анимированное переключение слайдов.
.JS Подключение
===================
Конечно работая js не для вывода окон, js для работы более с дом клиента к тегам DOM.что тока дом!.document object model]
=====================
// Работа с переменными.
Почему есть обьекты а нет классов как в java? И почему синтаксис очень сложный. Например в функции alert() можно так и написать он работает и так работает а ведь там в конце должен быть ;
вопрос на засыпку. плагины для браузера пишут на js html css но есть плагины с авторизацией и добавлением слов со страницы в базу данных. как?
На ответ 2 месяца
Начало объяснения js - c 12: 00 мин
Куда двигаться после теории JS?
а как же es6?
где let?
что за дела?
Подскажите,пожалуйста,почему не работает display:none;,хотя другие стили вроде работают
скорей всего в файле стилей, в строке gallery .photos img пропущен пробел перед точкой
а как понять что такое в жизни например аргументы
Дима, СПАСИБО!!! jsfiddle.net/qj6v2fka/5/
this.nextSlide = () => {} - что значит такая запись?
Вроде сделал тоже самое, редактор выдает ошибку
1
'alert' was used before it was defined. alert('Hello, World!'); пока непонятно что не так(