Тёмный

Практика JavaScript - пишем туду лист на JavaScript | Уроки для новичков 

Glo Academy
Подписаться 146 тыс.
Просмотров 65 тыс.
50% 1

В прошлом уроке мы поговорили о языке JavaScript - что он умеет, где используется, насколько популярен • JavaScript - что за яз...
Сегодня попрактикуемся в нём - напишем простой туду-лист на JavaScript.
Исходники к уроку codepen.io/gloMax/pen/aeNWwV
Пишите в комментариях, какие уроки по JS вы хотели бы видеть на канале)
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Больше контента в нашей группе Вконтакте
glo_academy
Присоединяйтесь к нашему сообществу Discord
/ discord
Telegram-канал "Лысый из браузера":
tele.click/baldfrombrowser
Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academy
Заказать рекламу на канале: vk.me/aislam23 или t.me/aislam23
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/billing/pl.php?... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma2html
ttttt.me/figma_start
ttttt.me/figmatamplates
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codepen_js
ttttt.me/css_features
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkforwork

Опубликовано:

 

23 июл 2019

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 112   
@user-rv2yz8ox4d
@user-rv2yz8ox4d 4 года назад
Классно объясняешь, понятно почти всё, и приятный голос. Спасибо.
@user-xq8tj4gv5i
@user-xq8tj4gv5i Год назад
Меня спасли. Вы первый человек, который смог нормально объяснить и сделать todo list 🥺❤️
@SNSDfOu
@SNSDfOu 3 месяца назад
работу нашел ?
@alinabulatova-um3qj
@alinabulatova-um3qj Год назад
Максим, спасибо большое за видео! Сколько видео по туду листу не просмотрела- ничего не поняла, а вот с вашем видео всё по полочкам разобрала!
@dimendroider7550
@dimendroider7550 Год назад
Максим - красавчик!! Как всегда здорово, понятно, отлично, и как всегда вовремя!
@andriinyvchyk830
@andriinyvchyk830 4 года назад
Очень доступно объясняешь , делай больше про JS
@virgo6324
@virgo6324 4 года назад
Супер урок! Сегодня даже пообщался в чате с Максимом. Спасибо за хорошее видео и профессионализм!
@dvsDesing
@dvsDesing 2 года назад
Спасибо за урок и за исходники, с ними учиться гораздо приятнее!
@diok707
@diok707 Год назад
Ищи лучше видео посвежее или просто попопулярнее. Я вроде новичок, но вижу на сколько тут всё плохо
@user-vo7sm5sz7p
@user-vo7sm5sz7p 4 года назад
О, второй годный учитель на канале после Прыгина) спасибо, было интересно, ждём ещё видео!
@user-vo7sm5sz7p
@user-vo7sm5sz7p 4 года назад
@Эльнур Абсаматов ну если это и Прыгин, то идентифицирует он себя как Максим Лескин, в чём и признается на 7 секунде видео
@petrskobelev3923
@petrskobelev3923 4 года назад
Спасибо! Все очень понятно! Здорово объясняешь )
@Dan1911Gal
@Dan1911Gal 3 года назад
Большое спасибо! все внятно и понятно :)
@user-kg6fz5tz2b
@user-kg6fz5tz2b 4 года назад
Блин, так классно объясняешь! Нужно,наверное, на курс к Тебе записаться!
@arthurshaidullin7981
@arthurshaidullin7981 4 года назад
Отличный урок, всё реактивно, спасибо )
@kudashof
@kudashof 4 года назад
Гениально и просто!
@igr3943
@igr3943 3 года назад
Приятно слушать и смотреть! Всё четко. Вот бы ещё впитывал я это, как губка 🧽)))
@mrs2251
@mrs2251 Год назад
Только начал смотреть и уже поставил лайк и подписался)👍
@mrhalless1462
@mrhalless1462 4 года назад
Спасибо за видео) очень подробно и понятно)
@maxleskin7444
@maxleskin7444 4 года назад
Спасибо
@katsugeki371
@katsugeki371 2 года назад
Огромное спасибо тебе!
@luxarmiger5729
@luxarmiger5729 2 года назад
Голова закипела. Спасибо!
@H1roHamada
@H1roHamada 4 года назад
если создать одинаковые заметки, то действие к одной дублируется на другую, так же лагают чекбоксы, если быстро по ним кликать, то значение checked может залагать и вместо true стать false и наоборот. Затем, после пкм по заметке, чекбокс обновится и выключится либо включится. Так же это работает если сделать важным один элемент, на другом залагавший чекбокс обновится
@farm_planets
@farm_planets 4 года назад
Спасибо. Очень полезно.
@seirant
@seirant 3 года назад
Крутооооо, Спасибо вам)
@user-ti6qb4gs4g
@user-ti6qb4gs4g 4 года назад
Круто!
@user-wh7px6xv5s
@user-wh7px6xv5s 4 года назад
Спасибо!
@user-eq7zs8bh2c
@user-eq7zs8bh2c Год назад
Thanks for video !)
@matskin
@matskin 4 года назад
Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?
@user-vw2mk3il9w
@user-vw2mk3il9w 4 года назад
Отличный пример! С конструктором и стрелками было бы еще круче!
@jarqynn6619
@jarqynn6619 Год назад
Круто спасибо
@eugenbelousov5027
@eugenbelousov5027 4 года назад
гениально
@Kashiro_Guitar
@Kashiro_Guitar Год назад
Огромной спасибо, благодаря тебе завтра сдам зачёт на изи!!!
@nikifanmac
@nikifanmac 4 года назад
Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд )часто вижу такой блок , и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи , думаю это интересно не только мне) ну или кто-нибудь в комментариях ответьте, как это реализовать , и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)
@mrak3059
@mrak3059 4 года назад
а что, бывают кудрявые скобочки? 😁 10:24
@unique4883
@unique4883 2 года назад
() => Левая&правая скобака; [] => Левая& правая квадратная скобка; {}=> Левая&правая фигурная скобка;
@noONEno0000
@noONEno0000 2 года назад
СПОСИБО ЗА ВИДЕО !!!!!!!!!!!!!!
@sergeybezumanuy8690
@sergeybezumanuy8690 Год назад
спасибо !
@fixggamer8756
@fixggamer8756 2 года назад
Хороший пример, но требует доработки и переработки, в том числе присвоение important и checked, можно реализовать по id, а не по содержимому
@user-or1le2xo6s
@user-or1le2xo6s 4 года назад
Отличное видео 5+ Сделайте пожалуйста в ООП стили
@poliuritanker
@poliuritanker Год назад
Сделай пожалуйста разбор такого туду листа с драгндропом и как записать это в локал сторедж, та же история с темами... как сохранять это и с редактированием текста в лишках.
@imanbekakylbekov1835
@imanbekakylbekov1835 10 месяцев назад
попробовал сделать, все получилось. Только единственная проблема заключается в том если текст в label одинаковый то статус и импортант и удаляются одновременно, поэтому вместо этого лучше думаю использовать их айдишки вместо этого
@user-mp9rs4qm1m
@user-mp9rs4qm1m Год назад
Кудрявые скобочки) 10:24
@mrballon
@mrballon 10 месяцев назад
так как я не очень хорошо понимаю чистый js, решил посмотреть видео меня немного напряг поиск по innerHTML, когда можно было добавить в новый элемент массива поле id, которое можно было бы генерировать обычным Math. Очень странный подход к работе с данными, ведь если там будет одинаковый текст, у вас они будут считать одинаковыми и все действия которые происходят с одним элементом произойдут и с другим элементом с таким же текстом, и тогда при рендере будет непойми что. после реакта все вышесказанное имеет очень большое зачение для меня (для реакта юзайте для генерации id. либу nanoid)
@user-gg9jf9dt4d
@user-gg9jf9dt4d 3 года назад
Крутой урок, хотелось бы узнать как удалить задачу по клику на кнопку, то есть я создал рядом кнопку и хочу при клике на нее удалить задачу
@dimakos84
@dimakos84 3 года назад
Про localStorage даже не знал, пользовался куками всегда. Хотя программирую уже 12 лет.
@awenn2015
@awenn2015 3 года назад
Куки в браузер сохраняют ? Я бы наверно через json запилил сохранение , практичнее наверное, и не денется никуда, и с ajax можно быстро манипулировать
@user-qq2mx6gv3q
@user-qq2mx6gv3q 6 месяцев назад
Здравствуйте, не подскажите где можно почитать про -webkit-box-sizing. Простым и понятным языком.
@user-zr3qf1xi7z
@user-zr3qf1xi7z 4 года назад
Подскажите как сделать кнопку view more,которая добавляет элементы на страницу. Спасибо)
@grantruss5238
@grantruss5238 4 года назад
Сделайте пожалуйста ползунки на javascript. Сортировка min и max цен с отправкой ajax и выводом из БД соответствующих запросов P.S. Так для заметки, технология сортировки и фильтрации с помощью range вообще нераскрытая тема ...
@joblab1967
@joblab1967 2 года назад
Не обязательно прописывать для тэга с атрибутом id="" свойство в JavaScript такой как document.querySelector(), Можно писать сразу индификатор вашего тэга. Например! Сначала вы напишите что let [название] = querySelector('#element'); Потом допишите: [Название].innerHTML = "[Любое значение]"; Для того чтобы задать значение html у тэга с индификатором 'element', мы сначала нашли его через document.qurySelector(); Ну так вот, можно не искать элемент по айди, можно сразу писать его индификатор. Вот пример: element.innerHTML = "Значение"; Вот и все, я не использовать querySelector() для этого, а просто вписал id из html структуры. Надеюсь будет полезно
@Sonya-io3sg
@Sonya-io3sg Год назад
Спасибо большое за видео! Решила сделать на телефоне тоже, однако удаление строки не получается( только на компьютере можно, а чтобы как-то видоизменить не набралась опыта
@firewatermoonsun
@firewatermoonsun 4 года назад
1) Функция important в Chrome браузере работает некорректно. Красным выделяется только после того, как поставишь галочку в чекбоксе. Чтобы убрать функцию, нужно убрать и поставить галочку)) 2) В Firefox работает функция important. 3) В Chrome и Firefox не работает удаление через ctrlKey. Попробовал заменить на shiftKey- тоже не работает))
@firewatermoonsun
@firewatermoonsun 4 года назад
Удаление для Firefox работает..забыл i(индекс) добавить..Теперь в Firefox все работает, а вот в Chrome все также не работает.
@OdessAlex
@OdessAlex 2 года назад
У меня не сохраняются отмеченные чек боксы и выделение важных криво работает, уже и полностью код переписывал точь в точь, но не работает
@realworld_test
@realworld_test 2 года назад
idea: Изучаем JS делая интересные проекты
@ivanmarchuk9252
@ivanmarchuk9252 4 года назад
было бы неплохо, получить доступ к коды на гитхаб. Я видимо где то сделал ошибку, и уже выполненные "дела" не сохранялись при обновлении страницы. пишет valueLabale id not dafinite. Ошибка скорее всего синтаксическая, и искать ее по видео очень сложно.
@mykytakurkan1251
@mykytakurkan1251 4 года назад
Что за сочетание клавиш, которое раскрыло console.log сразу с переменной на 9:36? И очищается ли locale storage при очистке кэша браузера?
@AlexMalagor
@AlexMalagor 4 года назад
Плагин консольки "Turbo Console Log" или настроить горячие клавиши stackoverflow.com/questions/40177331/what-is-the-shortcut-in-visual-studio-code-for-console-log
@Grapeoff
@Grapeoff 4 года назад
Nikita Kurkan это расширение такое, у меня на саблайме стоит, забыл как называется
@maxleskin7444
@maxleskin7444 4 года назад
Плагин для vscode, их полно, напишу позже какой у меня
@user-dm1ix4co9z
@user-dm1ix4co9z 4 года назад
А это правильно, что мы внутри forEach по todoList удаляем элемент из этого массива? Почему то меня это беспокоит 🤔
@sady3628
@sady3628 4 года назад
А как на телефоне можно будет сделать важное событие?
@user-pf2rk3ox6l
@user-pf2rk3ox6l 4 года назад
Как вы сделали checkbox прозрачным и border изменили? Подскажите пожалуйста как поменять стили чикбокса и радио кнопки
@maxleskin7444
@maxleskin7444 4 года назад
под видео ссылка на codepen там все стили есть
@aerokhin
@aerokhin 4 года назад
Поиск по тексту не очень. Если ввести две записи "123", то получается, что при изменении одной записи меняться будут обе.
@maxleskin7444
@maxleskin7444 4 года назад
Это легко исправить, но к примеру ты пишешь заметку, дело для себя: "Написать скрипт по отправки данных на сервер", ты второй раз будешь такой же писать?
@morkich
@morkich 4 года назад
@@maxleskin7444 Не важно будешь ли ты писать это сейчас или потом когда дел будет много появиться случайные совпадения. Важно предусмотреть заранее все варианты использования и возможные баги. Строчка id в объекте со случайным не повторяющимся числом и проверка по нему, решает много потенциальных проблем в том числе и эту.
@maxleskin7444
@maxleskin7444 4 года назад
@@morkich согласен, можно воспользоваться даже коллекцией set, где содержалась бы ссылка на объект, а работать с коллекциями вообще удовольствие. Но все сразу не предусмотришь, спасибо за совет.
@VladikBezsmertnyi
@VladikBezsmertnyi 2 года назад
У меня браузер ругается на innerHTML и галочка не остается после перезагрузки страницы, все правильно написано что делать?
@alekseisindarin6260
@alekseisindarin6260 Год назад
Скажите пожалуйста, как добавить сюда кнопку удаления строки? именно кнопку!
@UserName-vx7fi
@UserName-vx7fi 2 года назад
если он еще раз назовёт скобки кудрявыми, я начну убивать заложников
@srgnd4672
@srgnd4672 3 года назад
У меня у одного галки сбрасываются при перезагрузке страницы?
@Nikolombus
@Nikolombus 3 года назад
Всё хорошо, но есть одно замечание - при измении стейта одного элемента перерисовка всего списка не есть хорошая практика. Возможно это стоит вынести в домашнее задание.
@awenn2015
@awenn2015 3 года назад
Помню пилил настройки для какого то сайра на js, я просто добавлял новые элементы списка вроде и все , и данные улетали в базу, то есть при обновлении он никуда не денется
@sergobabayan529
@sergobabayan529 Год назад
А где взять полную версию кода?
@Autoprom500
@Autoprom500 Год назад
можно сразу готовый код?
@user-kz7kf8pb9k
@user-kz7kf8pb9k 4 года назад
3:30 у меня вылазиет ошибка: Uncaught TypeError: Cannot read property 'addEventListener' of null at. помогите пофиксить пожалуйста
@user-yq5ww3to7d
@user-yq5ww3to7d 3 года назад
В мене теж вибивало таку помилку, довго ламав голову чому не виходить, коли весь код записаний буква в букву... А з'ясувалося що помилка банальна - скріпт був підключений в хедері, внаслідок чого JS не встигав просканувати код HTML, відразу починаючи виконувати всі функції в файлі main.js) Підключив script в кінці body і все запрацювало)
@igorphyton857
@igorphyton857 2 года назад
@@user-yq5ww3to7d Спасибо большое
@awenn2015
@awenn2015 3 года назад
С помощью классов можно такую задачку решить ? А то хочу начать учить их, а как то пока не найду применение им
@phat80
@phat80 3 года назад
Можно, но зачем? В JS нет классов, только объекты. NewTodo - объект. Можно его создавать типа на основе какого-нибудь «класса» Todo, но зачем? Лишний код без причины - признак дурачины.
@rshirkhanov
@rshirkhanov 4 года назад
Все супер, только пишешь не очень аккуратно в плане пробелов в условиях и функциях, и при добавлении слушателей лично мне удобнее использовать стрелочные функции, если не нужна привязка к какому-то контексту, так как становится меньше текста, и выглядит читабельнее, но это уже вкусовщина
@maxleskin7444
@maxleskin7444 4 года назад
Полностью согласен со стрелками, но новички могут заблудится к этому лучше подводить, приходи сегодня вечером на трансляцию живую
@alexanderzhidkikh7536
@alexanderzhidkikh7536 4 года назад
Когда PHP курс норм запилите, почему прыгин ушел?
@Glo_Academy
@Glo_Academy 4 года назад
Прыгни вернётся 🤘
@user-vo7sm5sz7p
@user-vo7sm5sz7p 4 года назад
@@Glo_Academy я прыгнул) жду)
@volik8192
@volik8192 3 года назад
Какая цветовая тема????
@matskin
@matskin 4 года назад
Весь код выложил на хостинг, все работает, единственное - но. Если закрыть браузер и снова зайти по тому же адресу, записи не сохраняются. Вопрос: По какой причине?
@matskin
@matskin 4 года назад
Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?
@awenn2015
@awenn2015 3 года назад
Сохраняй в json
@zinc9885
@zinc9885 3 года назад
Только прописал addEventListener выдало ошибку. (script.js:5 Uncaught ReferenceError: addMessage is not defined at HTMLButtonElement.) Пробовал получать по id и добавлять .value Не работает.
@user-oc8ow2nf1i
@user-oc8ow2nf1i 3 года назад
тежи проблемы, пару разных способов попробывал не помогло((
@dimaa5175
@dimaa5175 4 года назад
Сразу же возникла проблема: "Uncaught TypeError: не удается прочитать свойство 'value' из null" Что не так? Подскажите, пожалуйста. let addMessege = document.querySelector('.messege'), addButton = document.querySelector('.add'); addButton.addEventListener('click', function(){ console.log(addMessege.value); });
@user-jm6rs9dm3i
@user-jm6rs9dm3i 3 года назад
Это из-за того что путь подключения скрипта записан в хеде, следует перенести его в боди после объявления всех тегов
@liliyakarasiova9782
@liliyakarasiova9782 2 месяца назад
Фигурные скобки это скучно, а вот кудрявые)))
@skeelo3157
@skeelo3157 4 года назад
А в чем разница addeventlistener от простого onclick
@firewatermoonsun
@firewatermoonsun 4 года назад
То же действие, просто по другому записывается.
@wightknight7056
@wightknight7056 Год назад
Если задача кажется сложной, а если написать алгоритм, то все становится легко, то почему не начать видео с написания алгоритма?
@playyer1116
@playyer1116 Год назад
Очень прошу дайте код js на этот тодо лист
@vladislavshunaev8928
@vladislavshunaev8928 2 года назад
блять, а ещё быстрее можно?
@maksp.5366
@maksp.5366 4 года назад
На codepen JS нету*
@grantruss5238
@grantruss5238 4 года назад
Надеюсь это сарказм )
@maksp.5366
@maksp.5366 4 года назад
@@grantruss5238 А что не так сказал? Ну смысл в исходниках без основного кода. Да я могу переписать код с экрана - я для этого второй монитор приобретал. Но зачем время тратить. Если его можно сразу изучить и дописать )
@grantruss5238
@grantruss5238 4 года назад
Эти туды листы валом на codepen )
@user-bt4tp6gw1o
@user-bt4tp6gw1o 3 года назад
вЭлуэе
@artemnovikov4302
@artemnovikov4302 2 года назад
сложно
@Amigo9876
@Amigo9876 2 года назад
Мне кажется, что это говнокод! Так как мы не обновляем конкретные измененные данные, а втупую загружаем все что есть. Это касается как локалстораджа, так и добавления htmla
@user-oc8ow2nf1i
@user-oc8ow2nf1i 3 года назад
Урок не для новичков явно,и этот лист сделай уже как для опытных людей,даже делая копипаст ошибки за ошибками, много лишнего обясняешь как для новичков ......
@alimkorogly8905
@alimkorogly8905 3 года назад
слишком быстрые действия в коде. Сложно уловить суть, одновременно печатая код
Далее
Список дел - Javascript. Часть 1
33:14
Просмотров 15 тыс.
СЕРГЕИЧ ОПОЗДАЛ #большоешоу
00:58
To Do List | Javascript Beginner Project Tutorial
10:16
СЕРГЕИЧ ОПОЗДАЛ #большоешоу
00:58