21. js с нуля, ваще с нуля (Готовимся к объектам, делаем слайдер)

Поделиться
HTML-код
  • Опубликовано: 31 дек 2024

Комментарии • 106

  • @Benni9ton
    @Benni9ton 4 года назад +7

    Когда видишь, как Димыч не помнит, как прописать путь на файл стилей , начинаешь верить в свои силы прям так сильно ) спасибо за такую мотивацию, косвенную!)

  • @luckypunch6637
    @luckypunch6637 3 года назад +5

    блин , как же я ору с того, как автор сам с собой ведет беседу ахахах)
    Я: мы же задроты программисты...
    Я: Да мы не задроты-программисты, мы нормальные мужики...
    Я: Ну если дамочки, то вы тоже любите машинки...
    Я: хрен с ним... Ладно не буду ругаться, хрен это плохое слово, хотя хрен это еда...

  • @72_stroyka
    @72_stroyka 4 года назад +17

    "Да мы не задроты-программисты, мы нормальные мужики" Ахахахаха )))

  • @1_dimasik_1
    @1_dimasik_1 4 года назад +1

    я сначала послушал задание, сделал сам такой слайдер, а потом уже посмотрел твой видосик. И, кстати, в итоге ещё переделал, чтоб если ты в конце слайдера, то он тебя перекидывал на начало. Спасибо за ролики, отличный контент!

    • @LilysPictures
      @LilysPictures 3 года назад

      О! Покажи, пжлста, как перекинуть на начало? 🙏

  • @miroslavyakubov6494
    @miroslavyakubov6494 5 лет назад +3

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

  • @alexwinchester1087
    @alexwinchester1087 2 года назад +1

    Всем даров из 2022! Орнул с момента "Жесть, какой-то вирус хочет меня убить!" )))

  • @denysm5599
    @denysm5599 5 лет назад +1

    Спасибо! Хорошая инфа для создания слайдера и вообще подхода к разработке. Идеально для новичка в js.

  • @Дмитрий-щ3щ4щ
    @Дмитрий-щ3щ4щ 4 года назад

    Димас, красавчик, слайдер зашел в мозг и не выходит, все настолько понятно!!! А то умельцы некоторые советуют готовый плагин слайдер установи, натяни на react.js. Просто на установку и настройку тратишь больше времени, чем сейчас Димас рассказывает про слайдер на нативном JS

  • @teralph7878
    @teralph7878 3 года назад +1

    спасибо тебе больше Димыч!!! ты бы знал как я рад))))0))

  • @androedge
    @androedge 4 года назад +13

    Какой-то вирус хочет меня убить. Привет из 2020 года)

  • @Alex-hs8xj
    @Alex-hs8xj 4 года назад +11

    object-fit: cover, чтобы не скукоживалась картинка

    • @icatsby900
      @icatsby900 4 года назад +1

      Спасибо!!! Как перфекционисту мне было очень больно смотреть ))) на смазанные изображения, твоя подсказка вернула мне радость жизни ))) Покопавшись, нашла object-fit: contain, и теперь все идеально))))

  • @killo_gramm1598
    @killo_gramm1598 5 лет назад +33

    Очень жаль, что какой-то Sorax набрал в 10-20 раз больше просмотров, чем ты. Ты намного лучше и качественнее объясняешь, в отличие от того же Sorax'a. Тот выпускает видео на 5-10 минут, тараторит, невозможно ничего понять и запомнить будучи новичком, ты же все объясняешь подробно, с примерами. Надеюсь, что все таки тебя заметит ютуб, выложит в рекомендации, и ты хорошо бустанешься по подписчикам.

    • @konstantinsurnin855
      @konstantinsurnin855 5 лет назад +3

      Sorax не расчитан на новичков

    • @Hayabusa17
      @Hayabusa17 4 года назад

      sorax то же хорош, вот хауди хо это жесть

    • @Нннн-г3й
      @Нннн-г3й 4 года назад +1

      @@Hayabusa17 хауди скорее мотиватор

    • @Hayabusa17
      @Hayabusa17 4 года назад +1

      @@Нннн-г3й мотиватор на переключение видео, шутка, да ты прав в некотором смысле

    • @Нннн-г3й
      @Нннн-г3й 4 года назад

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

  • @alexr5664
    @alexr5664 6 лет назад

    Хороший урок! То что многим начинающим не хватает, ООП мышления!!

  • @Ярослав-й6и4щ
    @Ярослав-й6и4щ 4 года назад +1

    Крутые уроки, спасибо))
    минут 10 не мог вставить работающий путь к картинкам((

  • @skolotoi4588
    @skolotoi4588 2 года назад

    Спасибо огромное за труд, Дима!

  • @Mykhailo_Vdovychenko
    @Mykhailo_Vdovychenko 4 года назад +1

    И зачем нам Слик? Если можно самому написать слайдер. Не зря говорят: "все гениальное - просто". Так и тут, как легко и просто написать удобный простенький слайдер без всяких лишних приколов. 10/10!
    Спасибо за такой крутой урок!

    • @ant3413
      @ant3413 2 года назад +2

      Вот вот,я как-то попросил одного "программиста" написать слайдер.А он мне ответил "зачем самому писать если есть готовый уже" я его выкинул сразу...лентяй....мне такие прогеры не нужны!

  • @shalomerror6236
    @shalomerror6236 3 года назад

    спасибо димыч, объясняешь люкс

  • @angrycatstudio2816
    @angrycatstudio2816 4 года назад +4

    @
    "Не пейте кофе, пейте воду".
    @
    Я - бариста, сижу учусь, заглатывая 4 чашку эспрессо.

  • @musictop4180
    @musictop4180 2 года назад +1

    смотрю все его видео в скорости 1.75)

  • @АлексГ-п3ж
    @АлексГ-п3ж 4 года назад

    Спасибо! Очень интересно, доступно, полезно!!!

  • @Никита-ж1ф1в
    @Никита-ж1ф1в 4 года назад

    начал смотерть, решил сначала попробывать самому, в итоге часа за 2 справился, но больше часа наверное ушло что бы css правильно написать для удобства. Ну и лайк за контент

  • @icatsby900
    @icatsby900 4 года назад

    Спасибо! Все понятно, и все получилось)))

  • @АннаМ-г9и
    @АннаМ-г9и 2 года назад

    Обожаю юмор и видосы) Спасибо. А есть по Typescript?

  • @progi99
    @progi99 3 года назад

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

  • @Макар-я5ф
    @Макар-я5ф 5 месяцев назад

    2024 год 16 лет, учимся, учимся по твоим урокам)
    Буду крутым программистом)

  • @ДмитрийСергеевич-д8т

    Здравствуйте! Подскажите пожалуйста что значит эта строка "slideImage.src", именно "точка src", которая пишется в js, что это за синтаксис? Ничего не нашёл в гугле. Либо куда заглянуть чтобы понять. Заранее благодарю!

  • @РоманМатвеенко-м8ч
    @РоманМатвеенко-м8ч 4 года назад

    Почему если внутри функции после currentImageIndex++ не продублировать slideImage.src = imageUrls[currentImageIndex], функция не сработает? 38:30

  • @vlas_bochkarev
    @vlas_bochkarev 3 года назад

    я вместо disabled сделал через return мне так больше понравилось ))

  • @anthem_xlii
    @anthem_xlii 5 лет назад +1

    Все круто, но. Строго говоря, на инглише slider это немного другое ( элемент навигации для тач*скрина). Вроде и придирка - но слово зарезервировано под другой функционал, так что ощутимо). А вот это - slideshow. Или, если добавить круговой цикл по массиву адресов - carousel. На правах свежеподписанного зануды :)
    www.w3schools.com/howto/howto_js_slideshow.asp

  • @yakubovskiy6621
    @yakubovskiy6621 2 года назад +1

    Мы нормальные мужики !!!

  • @dmitry_beresten
    @dmitry_beresten Год назад

    Дякую за відео!

  • @progi99
    @progi99 3 года назад

    мы задроты, да не мы не задроты мы нормальные парни)))

  • @Alexrudz
    @Alexrudz 4 года назад

    отличный урок. Спасибо.

  • @marynaserhiichuk7780
    @marynaserhiichuk7780 3 года назад

    Может мне, как новичку что-то непонятно, поправьте
    Можно ведь было добавлять индекс++, через if(індекс < длины массива -1)
    А нерабочую кнопку уже дизайнить под свой вкус и цвет

  • @oriro3024
    @oriro3024 3 года назад +1

    у меня не работает js пишет ошибку из за этого я немогу ничего сделать с кнопками вот ошибка 1:index.js:4 Uncaught TypeError: Failed to execute 'addEventListener' on 'EventTarget': parameter 2 is not of type 'Object'.
    at index.js:4
    (anonymous) @ index.js:4
    ошибка 2:GET chrome-extension://gokhjmimgahenfjmnncbemlhlcgbfhko/content/styles.css net::ERR_FILE_NOT_FOUND
    Помогите я не понимаю , ошибок в коде нету гугл тоже не помогает

    • @oriro3024
      @oriro3024 3 года назад

      Я нашел свою ошибку
      поставил ковычки там где не надо

  • @ИванИванов-у3ч4м
    @ИванИванов-у3ч4м 4 года назад

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

  • @QBoomslangQ
    @QBoomslangQ 3 года назад

    поправьте меня если я не прав... в конце с этими кнопками много где написано showRevBtn.disebled = true; Но там же в самой функции достаточно было бы кода а-ля if (currentInageIndex === 0) { showRevBtn.disebled = true; } else { showRevBtn.disebled = false;} ??? Поправьте...

  • @vadimt9862
    @vadimt9862 5 лет назад +2

    что такое Push?

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 лет назад +3

      Добавить в массив новый элемент в конец

    • @vadimt9862
      @vadimt9862 5 лет назад

      IT-KAMASUTRA спасибо )

    • @光荣归于习近平同志
      @光荣归于习近平同志 4 года назад

      @@ITKAMASUTRA А для чего он здесь, ведь и без него всё работает, где тут подводный камень?

    • @Brinzovik
      @Brinzovik 4 года назад

      @@光荣归于习近平同志 удобство записи и чтения, пологаю

  • @ТемурбекМашарипов-н7ч

    Красава внятно обьясняешь

  • @ihortsarenko3119
    @ihortsarenko3119 6 лет назад

    Дмитрий, а что насчет использования новых стандртатов ЕS 6 и т.д? Там уже let и const вместо var.

    • @ITKAMASUTRA
      @ITKAMASUTRA  6 лет назад +11

      Игорь, при наличии ES6-7 всё равно важно понимать весь фундамент и почему то или иное обновление нужно и важно. Поэтому я потихоньку внедряю "новшества" скажем так. Да, для матёрых ребят - это не новшества, а обыденность, но для тех, кто изучает, важно понимать, откуда ноги растут)))
      На рынке сегодня ДЕСЯТКИ ТЫСЯЧ джунов ищут работу! Нужно выделяться среди них чем-то моим подписчикам))

  • @АлексейТишаков
    @АлексейТишаков 4 года назад

    Попробовал решить вопрос передачи одного елемента в масив получилось что-то такое !??
    //слайдер!!!!

  • @Stepan7493
    @Stepan7493 4 года назад

    Для тех кто хочет доделать слайдер:
    var currentImageIndex = 0;
    showPrevButton.disabled = true;
    function onShowPrevBtnClick() {
    currentImageIndex--
    if (currentImageIndex === 0) {
    showPrevButton.disabled = true;
    }else if (currentImageIndex !== (imagesUrls.length - 1)){
    showNextButton.disabled = false;
    }
    slideImage.src = imagesUrls[currentImageIndex];
    }
    function onShowNextBtnClick() {
    currentImageIndex++
    if (currentImageIndex === (imagesUrls.length - 1)) {
    showNextButton.disabled = true;
    }else if (currentImageIndex !== 0){
    showPrevButton.disabled = false;
    }
    slideImage.src = imagesUrls[currentImageIndex];
    }

  • @myquest6896
    @myquest6896 5 лет назад

    Все отлично работает, НО кнопка некст при переключении съезжает под картинку, а не остается строго слева. Может кто в курсе что делать? Спасибо!

    • @ITKAMASUTRA
      @ITKAMASUTRA  5 лет назад +1

      Попробуйте посоветоваться с сообществом в телеграм канале t.me/reactjs_samurai

  • @АлексейТишаков
    @АлексейТишаков 4 года назад

    А вот как сделать ету ерундовину плавной ?? Я думаю что через использование setTimeout(()=> и работу с метриками + соответствующая подготовка в( HTML +CSS ), если кто знает киньте код .

    • @ant3413
      @ant3413 2 года назад

      transition не не слышал!

  • @socrat5354
    @socrat5354 4 года назад

    Красавчик!

  • @Иван-с7р5х
    @Иван-с7р5х 6 лет назад

    Много нового для себя узнал. Если здесь так интересно, то оффлайн-курсы наверное еще лучше. Если бы жил в Минске, то обязательно записался бы на них.А как на счет того, чтоб приехать учиться с другой страны?)

    • @ITKAMASUTRA
      @ITKAMASUTRA  6 лет назад +3

      =)) Спасибо))
      С другого города (300 км) ко мне на курсы приезжал человек))) Из Питера сейчас - занимается онлайн)
      А вот чтобы прям-таки приехать и жить здесь в течение обучения... Нужно будет создать IT-инкубаторную деревню))

    • @Иван-с7р5х
      @Иван-с7р5х 6 лет назад +3

      Спасибо за ответ) . Я живу в Якутске (примерно 9000 км. от Минска).Здесь оффлайн-курсов можно сказать нету. Если бы не ютуб, то было бы просто беда). Из всех видео по этой тематике, которые я смотрел на ютубе, ваши лучшие. А у вас онлайн-курсы есть?

  • @KamilMahomedov
    @KamilMahomedov 5 лет назад

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

  • @НиколайАстаулов
    @НиколайАстаулов 3 года назад

    Спасибо

  • @A1_TR_812
    @A1_TR_812 11 месяцев назад

    Чтобы лучше воспринимать твой курс я себе тоже очки купил

  • @КузьмаКузьмин-н7в
    @КузьмаКузьмин-н7в 6 лет назад

    Уроки супер! Спасибо! Но тут ступор конкретный, и вроде все просто и правильно, но...
    PREV

    NEXT
    Без ссылки на картинку все красиво, css исправно работает! И js уже написал, работает. Но как только вставляю ссылку, картинка становится огромных размеров, непонятно где расположена. Что блин не так?

    • @ITKAMASUTRA
      @ITKAMASUTRA  6 лет назад

      проверьте css, корректно ли там для картинки заданы размеры! 99%, что проблема в этом

  • @aleksandrpushnin2244
    @aleksandrpushnin2244 4 года назад

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

  • @GrandAlexandr
    @GrandAlexandr 4 года назад

    сейчас только понял как мешает белый фон)

  • @compot8279
    @compot8279 4 года назад +1

    усё, пасэба

  • @YS-nh6bw
    @YS-nh6bw 4 года назад

    спс

  • @pogrebnoimaksim
    @pogrebnoimaksim 4 года назад +2

    Подключение CSS это конечно мелочь, но это надо знать, не полагаясь на "умные" IDE, потому что как по мне, то не зная правил подключения CSS ну или даже основ и базы CSS затрудняет решение проблем с отображением... База всегда обязательна, и этому тоже надо учить, а не учить пользоваться IDE, и кстати почему нет доктайпа, хэда и прочего, новичка это запутает, даете рекомендации все делать по феншую, а допускаются такие упущения...
    Урок хороший, но подача могла бы быть получше. Коммент пишу спустя два года после выхода ролика, надеюсь сегодняшние уроки уже выходят улучшеной подачей.))

  • @TheZionjke
    @TheZionjke 5 лет назад

    очень долго подключал файл сss)))

  • @aleksandrpushnin2244
    @aleksandrpushnin2244 4 года назад

    в 2020 уже не работает так

  • @АлексейТишаков
    @АлексейТишаков 4 года назад

    По ходу нащел ответ на свой вопрос в третей главе учебника learn.javascript.ru --->(CSS и JS ) анимации

  • @TirionLan
    @TirionLan 5 лет назад

    На 32-ой минуте случился краш. Час искал ошибку. Дважды переписывал код js. Оказалось, что каким-то хреном html документ не может подключиться к js, путь к которому прописал в head. Указал путь под хэдом - нашел сразу, никаких ошибок. Указал путь в head - снова ошибка, снова не может подключиться к джаве. Путь указан правильно, ЧТО ЗА ХЕРНЯ БЛЯДЬ?!

    • @konstantinsurnin855
      @konstantinsurnin855 5 лет назад +2

      чел, JS фаил ПОЧТИ ВСЕГДА подключается не в head в body в самом конце, это очень важно!

    • @TirionLan
      @TirionLan 5 лет назад

      @@konstantinsurnin855 Теперь я это знаю, а тогда реально бомбило XD

    • @andriikhomenko4061
      @andriikhomenko4061 5 лет назад

      Таже фигня! Скрипт в хєде не работает, хотя до этого с другими заданиями работало. Как только перенес его в бади... о, чудо! Все сразу заработало :))

    • @ВиталийКудин-ю8э
      @ВиталийКудин-ю8э 3 года назад

      Что за фигня?!...всё равно не работает, и хэд, и боди,и без них пробовал(...

  • @eugenegambler713
    @eugenegambler713 5 лет назад +2

    Еще надо чуток лучше готовиться к уроку, создается такое впечатление что вы плаваете в материале))) а так для новичков самое то!

  • @localhost_9999
    @localhost_9999 6 лет назад +1

    Надо тебе канал переименовать в "Программирование для гопников" =)
    Но, как по мне, если уж объясняешь js, то про html и css не стоит рассказывать. Про вложенность, src, id и т.д.
    Лучше в уроке по js рассказывай про js. Видос будет короче, просмотров больше.
    А так все ОК, спс за урок!

  • @bring_you_up
    @bring_you_up 3 года назад

    Cлова "хрень, херня, говняшка, нихера" не совсем хочется слушать. Если автор пытается подражать молодежи - это ошибочное действие. Мы здесь смотрим и учимся и не хочется, чтобы преподаватель выражался подобными словами

    • @tennis_girl19
      @tennis_girl19 3 года назад

      так автору и не 85)наоборот круто,когда без шаблонных фраз и заумных словечек.

  • @texno5440
    @texno5440 6 лет назад

    Крч шлак полный твои уроки

    • @rva3674
      @rva3674 6 лет назад +4

      покажи альтернативу

  • @Jake-vorobei
    @Jake-vorobei 6 лет назад

    я увидел в твоих уроках кое что полезное, но вот только измени подачу материала. Ты разговариваешь как шкет

    • @Master-lh2xt
      @Master-lh2xt 4 года назад +5

      Не нужно менять подачу материала! В этом большой плюс. Кому не нравится - ищет своего автора

  • @roflostrike-csgofunnymomen1355
    @roflostrike-csgofunnymomen1355 2 года назад

    В чем проблема? Выдает ошибку в консоли, картинки перелистываются через раз. Проверял на наличие опечатки в коде 3 раза.
    Unchecked runtime.lastError: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
    styles.css:1 Failed to load resource: net::ERR_FILE_NOT_FOUND