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

Подписаться 146 тыс.

Просмотров 66 тыс.

50% 1

В прошлом уроке мы поговорили о языке JavaScript - что он умеет, где используется, насколько популярен • JavaScript - что за яз...
Сегодня попрактикуемся в нём - напишем простой туду-лист на JavaScript.
Исходники к уроку codepen.io/glo...
Пишите в комментариях, какие уроки по JS вы хотели бы видеть на канале)
Подпишитесь на канал, если вам нравятся эти видео:
goo.gl/Zuu7wE
Больше контента в нашей группе Вконтакте
glo_aca...
Присоединяйтесь к нашему сообществу Discord
/ discord
Telegram-канал "Лысый из браузера":
tele.click/bal...
Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: vk.me/glo_academy
Заказать рекламу на канале: vk.me/aislam23 или t.me/aislam23
-----------
Я использую хостинг Link Host с 2014 года
link-host.net/... Телеграм-каналы с дизайн-макетами для тренировки вёрстки:
ttttt.me/figma...
ttttt.me/figma...
ttttt.me/figma...
Каналы с крутыми фичами на CSS и JavaScript:
ttttt.me/codep...
ttttt.me/css_f...
Канал с терминами для айтишников:
ttttt.me/slang_it
Канал, где публикуют ссылки на полезные сервисы и сайты:
ttttt.me/linkf...

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

26 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 113

@ВасилийКарнеев-р7э 5 лет назад

Классно объясняешь, понятно почти всё, и приятный голос. Спасибо.

@Евгений-х4л2щ 5 лет назад

О, второй годный учитель на канале после Прыгина) спасибо, было интересно, ждём ещё видео!

@Евгений-х4л2щ 4 года назад

@Эльнур Абсаматов ну если это и Прыгин, то идентифицирует он себя как Максим Лескин, в чём и признается на 7 секунде видео

@alinabulatova-um3qj Год назад

Максим, спасибо большое за видео! Сколько видео по туду листу не просмотрела- ничего не поняла, а вот с вашем видео всё по полочкам разобрала!

@andriinyvchyk830 5 лет назад

Очень доступно объясняешь , делай больше про JS

@luxarmiger5729 2 года назад

Голова закипела. Спасибо!

@dimendroider7550 Год назад

Максим - красавчик!! Как всегда здорово, понятно, отлично, и как всегда вовремя!

@H1roHamada 4 года назад

если создать одинаковые заметки, то действие к одной дублируется на другую, так же лагают чекбоксы, если быстро по ним кликать, то значение checked может залагать и вместо true стать false и наоборот. Затем, после пкм по заметке, чекбокс обновится и выключится либо включится. Так же это работает если сделать важным один элемент, на другом залагавший чекбокс обновится

@virgo6324 5 лет назад

Супер урок! Сегодня даже пообщался в чате с Максимом. Спасибо за хорошее видео и профессионализм!

@mrs2251 Год назад

Только начал смотреть и уже поставил лайк и подписался)👍

@igr3943 3 года назад

Приятно слушать и смотреть! Всё четко. Вот бы ещё впитывал я это, как губка 🧽)))

@dvsDesing 2 года назад

Спасибо за урок и за исходники, с ними учиться гораздо приятнее!

@diok707 2 года назад

Ищи лучше видео посвежее или просто попопулярнее. Я вроде новичок, но вижу на сколько тут всё плохо

@Kashiro_Guitar Год назад

Огромной спасибо, благодаря тебе завтра сдам зачёт на изи!!!

@katsugeki371 2 года назад

Огромное спасибо тебе!

@fixggamer8756 2 года назад

Хороший пример, но требует доработки и переработки, в том числе присвоение important и checked, можно реализовать по id, а не по содержимому

@mrak3059 5 лет назад

а что, бывают кудрявые скобочки? 😁 10:24

@unique4883 3 года назад

() => Левая&правая скобака; [] => Левая& правая квадратная скобка; {}=> Левая&правая фигурная скобка;

@Dan1911Gal 4 года назад

Большое спасибо! все внятно и понятно :)

@АлександрМелянюк-ц9ю 4 года назад

Блин, так классно объясняешь! Нужно,наверное, на курс к Тебе записаться!

@kudashof 5 лет назад

Гениально и просто!

@arthurshaidullin7981 5 лет назад

Отличный урок, всё реактивно, спасибо )

@imanbekakylbekov1835 Год назад

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

@petrskobelev3923 4 года назад

Спасибо! Все очень понятно! Здорово объясняешь )

@mrhalless1462 5 лет назад

Спасибо за видео) очень подробно и понятно)

@maxleskin7444 5 лет назад

Спасибо

@poliuritanker Год назад

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

@OdessAlex 2 года назад

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

@ИльяШишлачев 5 лет назад

Отличный пример! С конструктором и стрелками было бы еще круче!

@АнастасияБагдуева-х7щ 9 месяцев назад

Здравствуйте, не подскажите где можно почитать про -webkit-box-sizing. Простым и понятным языком.

@nikifanmac 5 лет назад

Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд )часто вижу такой блок , и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи , думаю это интересно не только мне) ну или кто-нибудь в комментариях ответьте, как это реализовать , и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)

@farm_planets 5 лет назад

Спасибо. Очень полезно.

@mrballon Год назад

так как я не очень хорошо понимаю чистый js, решил посмотреть видео меня немного напряг поиск по innerHTML, когда можно было добавить в новый элемент массива поле id, которое можно было бы генерировать обычным Math. Очень странный подход к работе с данными, ведь если там будет одинаковый текст, у вас они будут считать одинаковыми и все действия которые происходят с одним элементом произойдут и с другим элементом с таким же текстом, и тогда при рендере будет непойми что. после реакта все вышесказанное имеет очень большое зачение для меня (для реакта юзайте для генерации id. либу nanoid)

@ЗахарийКарпенко-ц5т 2 года назад

Thanks for video !)

@VladikBezsmertnyi 3 года назад

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

@joblab1967 2 года назад

Не обязательно прописывать для тэга с атрибутом id="" свойство в JavaScript такой как document.querySelector(), Можно писать сразу индификатор вашего тэга. Например! Сначала вы напишите что let [название] = querySelector('#element'); Потом допишите: [Название].innerHTML = "[Любое значение]"; Для того чтобы задать значение html у тэга с индификатором 'element', мы сначала нашли его через document.qurySelector(); Ну так вот, можно не искать элемент по айди, можно сразу писать его индификатор. Вот пример: element.innerHTML = "Значение"; Вот и все, я не использовать querySelector() для этого, а просто вписал id из html структуры. Надеюсь будет полезно

@grantruss5238 5 лет назад

Сделайте пожалуйста ползунки на javascript. Сортировка min и max цен с отправкой ajax и выводом из БД соответствующих запросов P.S. Так для заметки, технология сортировки и фильтрации с помощью range вообще нераскрытая тема ...

@dimakos84 4 года назад

Про localStorage даже не знал, пользовался куками всегда. Хотя программирую уже 12 лет.

@awenn2015 4 года назад

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

@ОлегОвчинников-ы7с 5 лет назад

Спасибо!

@firewatermoonsun 5 лет назад

1) Функция important в Chrome браузере работает некорректно. Красным выделяется только после того, как поставишь галочку в чекбоксе. Чтобы убрать функцию, нужно убрать и поставить галочку)) 2) В Firefox работает функция important. 3) В Chrome и Firefox не работает удаление через ctrlKey. Попробовал заменить на shiftKey- тоже не работает))

@firewatermoonsun 5 лет назад

Удаление для Firefox работает..забыл i(индекс) добавить..Теперь в Firefox все работает, а вот в Chrome все также не работает.

@noONEno0000 2 года назад

СПОСИБО ЗА ВИДЕО !!!!!!!!!!!!!!

@ВикторРайхерт-й8б 4 года назад

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

@РустамАббасов-ы2р 5 лет назад

Круто!

@seirant 3 года назад

Крутооооо, Спасибо вам)

@Денис-ф2е4ь Год назад

Кудрявые скобочки) 10:24

@realworld_test 3 года назад

idea: Изучаем JS делая интересные проекты

@alekseisindarin6260 Год назад

Скажите пожалуйста, как добавить сюда кнопку удаления строки? именно кнопку!

@srgnd4672 3 года назад

У меня у одного галки сбрасываются при перезагрузке страницы?

@matskin 5 лет назад

Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?

@jarqynn6619 2 года назад

Круто спасибо

@sergeybezumanuy8690 2 года назад

спасибо !

@Sonya-io3sg Год назад

Спасибо большое за видео! Решила сделать на телефоне тоже, однако удаление строки не получается( только на компьютере можно, а чтобы как-то видоизменить не набралась опыта

@aerokhin 5 лет назад

Поиск по тексту не очень. Если ввести две записи "123", то получается, что при изменении одной записи меняться будут обе.

@maxleskin7444 5 лет назад

Это легко исправить, но к примеру ты пишешь заметку, дело для себя: "Написать скрипт по отправки данных на сервер", ты второй раз будешь такой же писать?

@morkich 5 лет назад

@@maxleskin7444 Не важно будешь ли ты писать это сейчас или потом когда дел будет много появиться случайные совпадения. Важно предусмотреть заранее все варианты использования и возможные баги. Строчка id в объекте со случайным не повторяющимся числом и проверка по нему, решает много потенциальных проблем в том числе и эту.

@maxleskin7444 5 лет назад

@@morkich согласен, можно воспользоваться даже коллекцией set, где содержалась бы ссылка на объект, а работать с коллекциями вообще удовольствие. Но все сразу не предусмотришь, спасибо за совет.

@sady3628 4 года назад

А как на телефоне можно будет сделать важное событие?

@МаксимПавлий-ъ4ж 4 года назад

3:30 у меня вылазиет ошибка: Uncaught TypeError: Cannot read property 'addEventListener' of null at. помогите пофиксить пожалуйста

@НиколайГнатюк-о4ц 4 года назад

В мене теж вибивало таку помилку, довго ламав голову чому не виходить, коли весь код записаний буква в букву... А з'ясувалося що помилка банальна - скріпт був підключений в хедері, внаслідок чого JS не встигав просканувати код HTML, відразу починаючи виконувати всі функції в файлі main.js) Підключив script в кінці body і все запрацювало)

@igorphyton857 2 года назад

@@НиколайГнатюк-о4ц Спасибо большое

@UserName-vx7fi 2 года назад

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

@zinc9885 3 года назад

Только прописал addEventListener выдало ошибку. (script.js:5 Uncaught ReferenceError: addMessage is not defined at HTMLButtonElement.) Пробовал получать по id и добавлять .value Не работает.

@ЄвгенійБойко-м3м 3 года назад

тежи проблемы, пару разных способов попробывал не помогло((

@eugenbelousov5027 4 года назад

гениально

@mykytakurkan1251 5 лет назад

Что за сочетание клавиш, которое раскрыло console.log сразу с переменной на 9:36? И очищается ли locale storage при очистке кэша браузера?

@AlexMalagor 5 лет назад

Плагин консольки "Turbo Console Log" или настроить горячие клавиши stackoverflow.com/questions/40177331/what-is-the-shortcut-in-visual-studio-code-for-console-log

@Grapeoff 5 лет назад

Nikita Kurkan это расширение такое, у меня на саблайме стоит, забыл как называется

@maxleskin7444 5 лет назад

Плагин для vscode, их полно, напишу позже какой у меня

@wightknight7056 2 года назад

Если задача кажется сложной, а если написать алгоритм, то все становится легко, то почему не начать видео с написания алгоритма?

@sergobabayan529 2 года назад

А где взять полную версию кода?

@ivanmarchuk9252 4 года назад

было бы неплохо, получить доступ к коды на гитхаб. Я видимо где то сделал ошибку, и уже выполненные "дела" не сохранялись при обновлении страницы. пишет valueLabale id not dafinite. Ошибка скорее всего синтаксическая, и искать ее по видео очень сложно.

@Autoprom500 Год назад

можно сразу готовый код?

@Nikolombus 4 года назад

Всё хорошо, но есть одно замечание - при измении стейта одного элемента перерисовка всего списка не есть хорошая практика. Возможно это стоит вынести в домашнее задание.

@awenn2015 4 года назад

Помню пилил настройки для какого то сайра на js, я просто добавлял новые элементы списка вроде и все , и данные улетали в базу, то есть при обновлении он никуда не денется

@rshirkhanov 5 лет назад

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

@maxleskin7444 5 лет назад

Полностью согласен со стрелками, но новички могут заблудится к этому лучше подводить, приходи сегодня вечером на трансляцию живую

@matskin 5 лет назад

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

@matskin 5 лет назад

Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?

@awenn2015 4 года назад

Сохраняй в json

@Атабек-д7ъ 5 лет назад

Как вы сделали checkbox прозрачным и border изменили? Подскажите пожалуйста как поменять стили чикбокса и радио кнопки

@maxleskin7444 5 лет назад

под видео ссылка на codepen там все стили есть

@playyer1116 Год назад

Очень прошу дайте код js на этот тодо лист

@volik8192 3 года назад

Какая цветовая тема????

@dimaa5175 4 года назад

Сразу же возникла проблема: "Uncaught TypeError: не удается прочитать свойство 'value' из null" Что не так? Подскажите, пожалуйста. let addMessege = document.querySelector('.messege'), addButton = document.querySelector('.add'); addButton.addEventListener('click', function(){ console.log(addMessege.value); });

@АлександрРокс 4 года назад

Это из-за того что путь подключения скрипта записан в хеде, следует перенести его в боди после объявления всех тегов

@awenn2015 4 года назад

С помощью классов можно такую задачку решить ? А то хочу начать учить их, а как то пока не найду применение им

@phat80 3 года назад

Можно, но зачем? В JS нет классов, только объекты. NewTodo - объект. Можно его создавать типа на основе какого-нибудь «класса» Todo, но зачем? Лишний код без причины - признак дурачины.

@skeelo3157 5 лет назад

А в чем разница addeventlistener от простого onclick

@firewatermoonsun 5 лет назад

То же действие, просто по другому записывается.

@alexanderzhidkikh7536 5 лет назад

Когда PHP курс норм запилите, почему прыгин ушел?

@Glo_Academy 5 лет назад

Прыгни вернётся 🤘

@Евгений-х4л2щ 5 лет назад

@@Glo_Academy я прыгнул) жду)

@vladislavshunaev8928 3 года назад

блять, а ещё быстрее можно?

@maksp.5366 5 лет назад

На codepen JS нету*

@grantruss5238 5 лет назад

Надеюсь это сарказм )

@maksp.5366 5 лет назад

@@grantruss5238 А что не так сказал? Ну смысл в исходниках без основного кода. Да я могу переписать код с экрана - я для этого второй монитор приобретал. Но зачем время тратить. Если его можно сразу изучить и дописать )

@grantruss5238 5 лет назад

Эти туды листы валом на codepen )

@artemnovikov4302 2 года назад

сложно

@Amigo9876 2 года назад

Мне кажется, что это говнокод! Так как мы не обновляем конкретные измененные данные, а втупую загружаем все что есть. Это касается как локалстораджа, так и добавления htmla

@ЄвгенійБойко-м3м 3 года назад

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

@Интернетобразование-о1и 4 года назад

вЭлуэе

@alimkorogly8905 3 года назад

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

@bikadV 5 дней назад

С середины ролика вообще какая-то дичь началась, когда автор начал мудрить с чекбоксами... Не сомневаюсь что есть намного более простые варианты, а здесь, просто непродуманный сырой урок.