25. js с нуля, ваще с нуля (создаём клоны, фабрика)

[@bitcoin-]

Ребята,если вдруг кто то сильно застрял,то вот рабочий мой пример! PREV NEXT PREV NEXT let slider1 = sliderFactory.createNewSlider(); let slider2 = sliderFactory.createNewSlider(); slider1.start('slider-one'); slider2.start('slider-two'); let sliderFactory = { createNewSlider:function(){ let newSlider = { urlList: [], currentItem: 0, nextButton: null, prevButton: null, image: null, getElement: function (id) { return document.querySelector(id); }, initialData: function () { this.urlList.push('www.look.com.ua/large/201210/53782.jpg'); this.urlList.push('encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ69Mr4vWji47DmESTuyCgbdvFehjOwAJhhKn6jC2vKXfa3NU9h'); this.urlList.push('sebweo.com/wp-content/uploads/2019/06/landshaft-bernskikh-alp-v-yasniy-den_thumb.jpg'); this.urlList.push('focus.ua/storage/pub/images/2017/2615387.jpg'); this.urlList.push('fotorelax.ru/wp-content/uploads/2016/03/Beautiful-photos-and-pictures-on-various-subjects-01.jpg'); }, start: function (param) { let that = this; let el = this.getElement('#'+ param); this.nextButton = el.querySelector('.next'); this.prevButton = el.querySelector('.prev'); this.image = el.querySelector('.img'); this.nextButton.addEventListener('click', function (e) { that.getNextSlide(e); }); this.prevButton.addEventListener('click', function (e) { that.getPrevSlide(e); }); this.initialData(); this.image.src = this.urlList[this.currentItem]; this.prevButton.disabled = true; }, getPrevSlide: function (e) { this.currentItem--; if (this.currentItem === 0) { this.prevButton.disabled = true; } this.image.src = this.urlList[this.currentItem]; this.nextButton.disabled = false; }, getNextSlide: function (e) { this.currentItem++; if (this.currentItem === (this.urlList.length - 1)) { this.nextButton.disabled = true; } this.image.src = this.urlList[this.currentItem]; this.prevButton.disabled = false; } } return newSlider; } };

[@ondrejhrabovec6796]

В последний день 2021 за 6 часов до НГ я учу JS. Спасибо, Димыч, за уроки и с наступающем всех 2022! ❄

[@AlexAlex-cm7ne]

Начало немного сумбурное, но откладываю кофе с печешками и начинаю пересматривать внимательнее. А потом, когда вник в суть, начинаю радоваться, как ребёнок, насколько всё элементарно ))) СПАСИБО за доступные разъяснения.

[@svoboda21veka]

31:00 нужно сначала нажать CTRL+K, а потом отпустить и отдельно нажать S

[@ihortsarenko3119]

про querySelector так и не расказал :)

[@ВячеславЗайцев-в9и]

Всем привет. Информацию по querySelector можно найти здесь: learn.javascript.ru/searching-elements-dom

[@Gazovchik]

Добрый вечер А я в другом месте посмотрел

[@braivs]

Мощный урок. Д/З приходится уже самому себе выдумывать. Совершенствовать самостоятельно созданный слайдер ранее.

[@Girlfriendrain]

очень крутой урок, всё супер понятно! было бы прикольно сделать разные картинки в слайдерах, но до меня пока не доходит как)

[@ahahahahahahahahahaahahaha5306]

в последний день 2020 я учу ЖС. спасибо, Димыч, за уроки и с наступающем всех 2021!

[@TheMalekula]

Как успехи?

[@ahahahahahahahahahaahahaha5306]

@@TheMalekula изучаю программирование по Столярову

[@ahahahahahahahahahaahahaha5306]

@@TheMalekula знаком с его трудом? фундаментальные знания. и он, кстати, противник ЖСа))

[@TheMalekula]

@@ahahahahahahahahahaahahaha5306 ну по обложке явно вижу что мне это подойдет ))))Я про трудоустройство и какой начальный скилл у вас был? Спустя год какой результат

[@ahahahahahahahahahaahahaha5306]

@@TheMalekula я ещё в процессе обучения, в основном где-то топтался на месте не зная что и как изучать. так что ни о каком трудоустройстве пока и мысли нет. ЖС нужен был чтоб в колледже сдать предмет по ангуляру, но колледж в итоге ничего не дал.

[@ВячеславЗайцев-в9и]

Спасибо, Димон! Препод от Бога, серьезно! (like,like,like)

[@Mykhailo_Vdovychenko]

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

[@bitcoin-]

Очень разжевано!Многое для себя почерпнул!!

[@КузьмаКузьмин-н7в]

Как "сохранить все"? Нажать на карандаш рядом с "save all" (в огромной всплывающей таблице) и ввести собственную комбинацию, например, продублировать ctrl+KS. Работает)

[@compot8279]

Спасибо :), очень страшно что забуду это всё xD

[@aprinciple9559]

А в slider.init("#slider"); нельзя сразу добавить slider с шарпом "#", дабы не делать потом конкатенацию, записывать это все дело в переменную и т.д? А потом просто в querySelector вставляем параметр функции. Или ты это считается плохим тоном?) Там в VS Code было написано ctrl + K S, между K и S плюса не было, надо S отдельно нажимать от комбинации ctrl + k.

[@ITKAMASUTRA]

нет, не плохой тон, норм. Нужно будет только переименовать параметр с id на, например, selector! Потому что по факту уже передаваться будет не айди!

[@izan8846]

Дмитрий, подскажите почему не работает всё тоже (связанное с querySelector) в методе start, не работает в объекте slider1. Типо я пишу var el: document.querySelector("#slider1"), nextButton: el.querySelector(".next"), Вываливается ошибка

[@volodymyrsavkevych229]

не уверен, но у вас стоит : при объявление переменной вместо =

[@Ирина-л8ч7г]

Мозг взорван🎉

[@gn01tl29]

не понял, в который момент у нас появились строчки showPrewButton = null, и почему. У меня теперь из за этого не работает ивентлисенер. Спасибо за подсказку.

[@Brinzovik]

spasibo!

[@intenebris5922]

Я не понимаю, почему нельзя использовать вызов одного объекта с разными параметрами в методе (например, object1.start(id1); object1.start(id2) ), вместо создания объекта с функцией, создающей новые объекты? =)

[@texasviking7732]

круть просто!

[@anthem_xlii]

написали или нет не видел - в ВСкоде если удерживать контрол и КС жать - открываются шорткаты, а если контрол+К, потом С отпустив контрол - то общее сохранение. вроде б так.

[@svoboda21veka]

да, толоко не С, а S

[@VladiPoter]

четко

[@Gazovchik]

Сложно, сложно........ Как-то стыдно писать сколько дней%часов урок изучал, Но самостоятельно пока НЕ смог этот Слайдер повторить - забыл часть содержимого 24го /!/ урока ......... (потому что так до конца и не понял) - Сегодня стал вспоминать. Плюс концовку этого. ........ Короче счас прыгаю на 26-й урок а Завтра /с утречка наверное/, буду писать ещё раз С Нуля этот слайдер - чтобы Как Можно Лучше понять и запомнить!

[@Gazovchik]

Очень интересно и наверное хорошо, что есть Предпоследний плейлист на канале. - Вижу там есть ещё объяснения про ООП и addEventListener-ы - после окончания этого курса - Надо (!) смотреть......... Вообщем - Спасибо, Димыч!

[@Gazovchik]

Всё!! Кто хочет, тот может меня поздравить. Написал полностью Сам. По памяти. (Весь слайдер с урока) А значит - более - менее понял и разобрался! Писал правда (стыдно признаться) почти 3 часа...... Немногим больше половины времени занял более-менее подробный Псевдокод, html, css и js файлов. - Расписал себе сперва (постарался Без технических моментов) - как и что я буду делать....... А остальное время - писал сам Код. Возникли некоторые ошибки. Пока их нашёл..... Вообщем Всё Получилось Можно двигаться дальше Димыч, ещё раз спасибо за урок!

[@maximchernenkov6876]

very informative! Thank you!

[@LogopedLTD]

А сделать через вложеность селектора при поиске в querySelector?

[@texasviking7732]

ооп рулит!

[@oleksandrmelnychuk9061]

а как сделать чтобы в каждом слайдере были разные картинки ?

[@Ирина-л8ч7г]

Создать два разных слайдера в html и js

[@asgard1428]

Все круто. Но что делать если картинки в слайдере разные. Как-то по другому нужно будет картинки подтягивать из папки

[@131ZIL]

А не судьба просто ссылки поменять? Или в смысле разные??

[@asgard1428]

@@131ZIL В смысле, что мы как бы весь слайдер поместили в переменную и теперь ссылаемся на нее и вот типа так можно создавать несколько слайдеров. А как их несколько создавать таким образом разных. Там картинки одни и те же.

[@asgard1428]

@@131ZIL смотри внимательно видео

[@131ZIL]

@@asgard1428 ну вообще, да! картинки в ручную придётся пушить

[@Gazovchik]

Добрый вечер Как на сейчас дела? Разобрались?......

[@user-uu2id7re7g]

вот я угорал когда ты адрес в консоль скопировал и не понимал что происходит и откуда это

[@progi99]

вроде все хорошо, но почему то у меня листает только первый и второй слайдер, и все просмотрел весь код вроде идентичен с твоим, но так и не смог найти решение?

[@Gazovchik]

Добрый вечер Как сейчас успехи?.....

[@Almas-2002]

ты не тупой ты умный

[@konstantinsurnin855]

решения автосохранения это использовать редактор Brackets там эта функция изначально встроена

[@ITKAMASUTRA]

Неа...!не используйте ничего кроме vs, ws, atom )) моя субъективная рекомендация

[@happy_cutman]

Костя, если используешь vscode, зайди в settings и там в строке поиска пропиши "autosave", дальше в предложенном списке выбери "saveAfterDelay" и будет тебе автосохранение.

[@ТаратутаМарта]

@@ITKAMASUTRA как по мне, то если нужно открыть какой-то один файл (или пару файлов) и внести небольшие правки, то sublime очень хорош

[@АнтонинаСуворова-п8н]

@@ITKAMASUTRA я просто влюбилась в редактор vs! до этого использовала саблайм. Спасибо за такой чудесный совет

[@petssmile5985]

@@ITKAMASUTRA а как же PyCharm? Очень годный редактор

[@Alexrudz]

Писал все , как в уроке, но в ElId приходит #'itk-slider1' (не смог пока найти причину) , поэтому просто передал elId в querySelector. За урок спасибо! Урок 01 -300к просмотров. Урок 25 - 5к просмотров. Все что нужно знать о мотивации людей стать JS разработчиками

[@Haruhi_Suzumiyya]

Я сейчас на 4 уроке, решил посмотреть сколько просмотров на последнем, не удивился

[@imperror555]

У VS Code есть autosave в настройках

[@pavel5057]

На видео все понятно, пытаешься что-то сделать сам, начинаются траблы. Сложно понять что во что нужно оборачивать.

[@ITKAMASUTRA]

Не бойтесь продолжать движение! Поднимаясь по ступеням знание будет вырисовываться в нормальную картину!

[@Almas-2002]

@@ITKAMASUTRA летим не стоим на месте!!!!

[@Bjfhj]

Вопрос!: А that нужно создавать на любое событие, а не только на button?

[@ITKAMASUTRA]

вопрос не корректен, но скорее всгео - ДА!

[@progi99]

ох как же я себе голову заморочил, пишет у меня что не может найти слайдер1 в индексе, уже все изгуглил

[@compot8279]

fabriq xD

[@РусланПВ-л7я]

Если все точно скопировать - код не запустится

[@Gazovchik]

Добрый вечер Странно....... Всё работает

[@user-frond-end_dev]

а сразу с первого раза нельзя было писать правильно, как нужно, зачем такую путаницу устраивать для новичков?- если и платный курс такой запутанны, , то маловероятно, что по прохождению его, кому то удастся стать разрабом

[@Gazovchik]

Добрый вечер Как я понимаю: Чтобы всё По Порядку объяснить Как говорят - от Простого к Сложному

[@Easycore2000]

Для чего делать доп. проверку this.showPrevBtb.disabled = true; в методе start, когда в контексте методов с кнопками всё работает без проблем? Может в 2023 что-то изменилось) onShowPrevbtnClick: function (e) { console.log('prev clicked'); this.currentImgIndex--; this.showNextBtb.disabled = false; if (this.currentImgIndex === 0) { this.showPrevBtb.disabled = true; } this.slideImage.src = this.imgArr[this.currentImgIndex]; }, onShowNextBtnClick: function (e) { console.log('next clicked'); this.currentImgIndex++; this.showPrevBtb.disabled = false; if (this.currentImgIndex === this.imgArr.length - 1) { this.showNextBtb.disabled = true; } this.slideImage.src = this.imgArr[this.currentImgIndex] }

[@asgard1428]

Все круто. Но что делать если картинки в слайдере разные. Как-то по другому нужно будет картинки подтягивать из папки

[@МолдирЛесбекова-е9д]

наверное для тебя уже не актуально, но меня тоже волнует этот момент )

[@asgard1428]

@@МолдирЛесбекова-е9д я уже не помню просто смысл даже моего вопроса? Нет времени пересматривать урок. Но думаю, что картинки лучше через source вставлять и все

[@Gazovchik]

​@@МолдирЛесбекова-е9д, Добрый вечер Нашли ответ?