Практика JavaScript - пишем туду лист на JavaScript | Уроки для новичков
HTML-код
- Опубликовано: 23 июл 2019
- В прошлом уроке мы поговорили о языке 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
Меня спасли. Вы первый человек, который смог нормально объяснить и сделать todo list 🥺❤️
работу нашел ?
Классно объясняешь, понятно почти всё, и приятный голос. Спасибо.
Максим - красавчик!! Как всегда здорово, понятно, отлично, и как всегда вовремя!
Максим, спасибо большое за видео! Сколько видео по туду листу не просмотрела- ничего не поняла, а вот с вашем видео всё по полочкам разобрала!
Очень доступно объясняешь , делай больше про JS
Супер урок! Сегодня даже пообщался в чате с Максимом. Спасибо за хорошее видео и профессионализм!
Спасибо! Все очень понятно! Здорово объясняешь )
Большое спасибо! все внятно и понятно :)
О, второй годный учитель на канале после Прыгина) спасибо, было интересно, ждём ещё видео!
@Эльнур Абсаматов ну если это и Прыгин, то идентифицирует он себя как Максим Лескин, в чём и признается на 7 секунде видео
Блин, так классно объясняешь! Нужно,наверное, на курс к Тебе записаться!
Спасибо за урок и за исходники, с ними учиться гораздо приятнее!
Ищи лучше видео посвежее или просто попопулярнее. Я вроде новичок, но вижу на сколько тут всё плохо
Отличный урок, всё реактивно, спасибо )
Приятно слушать и смотреть! Всё четко. Вот бы ещё впитывал я это, как губка 🧽)))
Гениально и просто!
Только начал смотреть и уже поставил лайк и подписался)👍
Голова закипела. Спасибо!
Огромное спасибо тебе!
если создать одинаковые заметки, то действие к одной дублируется на другую, так же лагают чекбоксы, если быстро по ним кликать, то значение checked может залагать и вместо true стать false и наоборот. Затем, после пкм по заметке, чекбокс обновится и выключится либо включится. Так же это работает если сделать важным один элемент, на другом залагавший чекбокс обновится
Спасибо за видео) очень подробно и понятно)
Спасибо
Спасибо. Очень полезно.
Спасибо!
Крутооооо, Спасибо вам)
Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?
Thanks for video !)
Круто!
а что, бывают кудрявые скобочки? 😁 10:24
() => Левая&правая скобака; [] => Левая& правая квадратная скобка; {}=> Левая&правая фигурная скобка;
Огромной спасибо, благодаря тебе завтра сдам зачёт на изи!!!
Отличный пример! С конструктором и стрелками было бы еще круче!
Подскажите как сделать кнопку view more,которая добавляет элементы на страницу.
Спасибо)
Артём, запиши пожалуйста видео урок на тему блока «Этапы работ» (в нем несколько блоков соединены цепочкой и представляют из себя этапы 01, 02, 03 и тд )часто вижу такой блок , и как его верстать без понятия, толи абсолютным позиционированием, но тогда при уменьшении ширины экрана, все поплывет... подскажи , думаю это интересно не только мне) ну или кто-нибудь в комментариях ответьте, как это реализовать , и как такой блок называется технически, а то в гугле не нахожу ничего подобного. Спасибо)
Отличное видео 5+
Сделайте пожалуйста в ООП стили
Кудрявые скобочки) 10:24
Здравствуйте, не подскажите где можно почитать про -webkit-box-sizing. Простым и понятным языком.
Сделай пожалуйста разбор такого туду листа с драгндропом и как записать это в локал сторедж, та же история с темами... как сохранять это и с редактированием текста в лишках.
Хороший пример, но требует доработки и переработки, в том числе присвоение important и checked, можно реализовать по id, а не по содержимому
Скажите пожалуйста, как добавить сюда кнопку удаления строки? именно кнопку!
У меня браузер ругается на innerHTML и галочка не остается после перезагрузки страницы, все правильно написано
что делать?
Круто спасибо
А как на телефоне можно будет сделать важное событие?
СПОСИБО ЗА ВИДЕО !!!!!!!!!!!!!!
было бы неплохо, получить доступ к коды на гитхаб. Я видимо где то сделал ошибку, и уже выполненные "дела" не сохранялись при обновлении страницы. пишет valueLabale id not dafinite. Ошибка скорее всего синтаксическая, и искать ее по видео очень сложно.
А это правильно, что мы внутри forEach по todoList удаляем элемент из этого массива? Почему то меня это беспокоит 🤔
У меня не сохраняются отмеченные чек боксы и выделение важных криво работает, уже и полностью код переписывал точь в точь, но не работает
спасибо !
гениально
попробовал сделать, все получилось. Только единственная проблема заключается в том если текст в label одинаковый то статус и импортант и удаляются одновременно, поэтому вместо этого лучше думаю использовать их айдишки вместо этого
Крутой урок, хотелось бы узнать как удалить задачу по клику на кнопку, то есть я создал рядом кнопку и хочу при клике на нее удалить задачу
А где взять полную версию кода?
Как вы сделали checkbox прозрачным и border изменили? Подскажите пожалуйста как поменять стили чикбокса и радио кнопки
под видео ссылка на codepen там все стили есть
так как я не очень хорошо понимаю чистый js, решил посмотреть видео
меня немного напряг поиск по innerHTML, когда можно было добавить в новый элемент массива поле id, которое можно было бы генерировать обычным Math. Очень странный подход к работе с данными, ведь если там будет одинаковый текст, у вас они будут считать одинаковыми и все действия которые происходят с одним элементом произойдут и с другим элементом с таким же текстом, и тогда при рендере будет непойми что.
после реакта все вышесказанное имеет очень большое зачение для меня (для реакта юзайте для генерации id. либу nanoid)
У меня у одного галки сбрасываются при перезагрузке страницы?
Спасибо большое за видео! Решила сделать на телефоне тоже, однако удаление строки не получается( только на компьютере можно, а чтобы как-то видоизменить не набралась опыта
Что за сочетание клавиш, которое раскрыло console.log сразу с переменной на 9:36? И очищается ли locale storage при очистке кэша браузера?
Плагин консольки "Turbo Console Log" или настроить горячие клавиши stackoverflow.com/questions/40177331/what-is-the-shortcut-in-visual-studio-code-for-console-log
Nikita Kurkan это расширение такое, у меня на саблайме стоит, забыл как называется
Плагин для vscode, их полно, напишу позже какой у меня
можно сразу готовый код?
Поиск по тексту не очень. Если ввести две записи "123", то получается, что при изменении одной записи меняться будут обе.
Это легко исправить, но к примеру ты пишешь заметку, дело для себя: "Написать скрипт по отправки данных на сервер", ты второй раз будешь такой же писать?
@@maxleskin7444 Не важно будешь ли ты писать это сейчас или потом когда дел будет много появиться случайные совпадения.
Важно предусмотреть заранее все варианты использования и возможные баги.
Строчка id в объекте со случайным не повторяющимся числом и проверка по нему, решает много потенциальных проблем в том числе и эту.
@@morkich согласен, можно воспользоваться даже коллекцией set, где содержалась бы ссылка на объект, а работать с коллекциями вообще удовольствие. Но все сразу не предусмотришь, спасибо за совет.
3:30 у меня вылазиет ошибка: Uncaught TypeError: Cannot read property 'addEventListener' of null at. помогите пофиксить пожалуйста
В мене теж вибивало таку помилку, довго ламав голову чому не виходить, коли весь код записаний буква в букву... А з'ясувалося що помилка банальна - скріпт був підключений в хедері, внаслідок чого JS не встигав просканувати код HTML, відразу починаючи виконувати всі функції в файлі main.js) Підключив script в кінці body і все запрацювало)
@@user-yq5ww3to7d Спасибо большое
Сделайте пожалуйста ползунки на javascript.
Сортировка min и max цен с отправкой ajax и выводом из БД соответствующих запросов
P.S. Так для заметки, технология сортировки и фильтрации с помощью range вообще нераскрытая тема ...
Только прописал addEventListener выдало ошибку. (script.js:5 Uncaught ReferenceError: addMessage is not defined
at HTMLButtonElement.) Пробовал получать по id и добавлять .value Не работает.
тежи проблемы, пару разных способов попробывал не помогло((
Сразу же возникла проблема: "Uncaught TypeError: не удается прочитать свойство 'value' из null"
Что не так? Подскажите, пожалуйста.
let addMessege = document.querySelector('.messege'),
addButton = document.querySelector('.add');
addButton.addEventListener('click', function(){
console.log(addMessege.value);
});
Это из-за того что путь подключения скрипта записан в хеде, следует перенести его в боди после объявления всех тегов
idea: Изучаем JS делая интересные проекты
Про localStorage даже не знал, пользовался куками всегда. Хотя программирую уже 12 лет.
Куки в браузер сохраняют ? Я бы наверно через json запилил сохранение , практичнее наверное, и не денется никуда, и с ajax можно быстро манипулировать
1) Функция important в Chrome браузере работает некорректно. Красным выделяется только после того, как поставишь галочку в чекбоксе. Чтобы убрать функцию, нужно убрать и поставить галочку)) 2) В Firefox работает функция important. 3) В Chrome и Firefox не работает удаление через ctrlKey. Попробовал заменить на shiftKey- тоже не работает))
Удаление для Firefox работает..забыл i(индекс) добавить..Теперь в Firefox все работает, а вот в Chrome все также не работает.
Весь код выложил на хостинг, все работает, единственное - но. Если закрыть браузер и снова зайти по тому же адресу, записи не сохраняются.
Вопрос: По какой причине?
Максим, Вы можете, более подробно объяснить механизм работы локального хранилища (localStorage)?
Сохраняй в json
Не обязательно прописывать для тэга с атрибутом id="" свойство в JavaScript такой как document.querySelector(), Можно писать сразу индификатор вашего тэга. Например!
Сначала вы напишите что let [название] = querySelector('#element');
Потом допишите: [Название].innerHTML = "[Любое значение]";
Для того чтобы задать значение html у тэга с индификатором 'element', мы сначала нашли его через document.qurySelector();
Ну так вот, можно не искать элемент по айди, можно сразу писать его индификатор. Вот пример:
element.innerHTML = "Значение";
Вот и все, я не использовать querySelector() для этого, а просто вписал id из html структуры.
Надеюсь будет полезно
С помощью классов можно такую задачку решить ? А то хочу начать учить их, а как то пока не найду применение им
Можно, но зачем? В JS нет классов, только объекты. NewTodo - объект. Можно его создавать типа на основе какого-нибудь «класса» Todo, но зачем? Лишний код без причины - признак дурачины.
Какая цветовая тема????
Когда PHP курс норм запилите, почему прыгин ушел?
Прыгни вернётся 🤘
@@Glo_Academy я прыгнул) жду)
А в чем разница addeventlistener от простого onclick
То же действие, просто по другому записывается.
если он еще раз назовёт скобки кудрявыми, я начну убивать заложников
Очень прошу дайте код js на этот тодо лист
Всё хорошо, но есть одно замечание - при измении стейта одного элемента перерисовка всего списка не есть хорошая практика. Возможно это стоит вынести в домашнее задание.
Помню пилил настройки для какого то сайра на js, я просто добавлял новые элементы списка вроде и все , и данные улетали в базу, то есть при обновлении он никуда не денется
Фигурные скобки это скучно, а вот кудрявые)))
Все супер, только пишешь не очень аккуратно в плане пробелов в условиях и функциях, и при добавлении слушателей лично мне удобнее использовать стрелочные функции, если не нужна привязка к какому-то контексту, так как становится меньше текста, и выглядит читабельнее, но это уже вкусовщина
Полностью согласен со стрелками, но новички могут заблудится к этому лучше подводить, приходи сегодня вечером на трансляцию живую
Если задача кажется сложной, а если написать алгоритм, то все становится легко, то почему не начать видео с написания алгоритма?
На codepen JS нету*
Надеюсь это сарказм )
@@grantruss5238 А что не так сказал? Ну смысл в исходниках без основного кода. Да я могу переписать код с экрана - я для этого второй монитор приобретал. Но зачем время тратить. Если его можно сразу изучить и дописать )
Эти туды листы валом на codepen )
блять, а ещё быстрее можно?
вЭлуэе
Мне кажется, что это говнокод! Так как мы не обновляем конкретные измененные данные, а втупую загружаем все что есть.
Это касается как локалстораджа, так и добавления htmla
сложно
слишком быстрые действия в коде. Сложно уловить суть, одновременно печатая код
Урок не для новичков явно,и этот лист сделай уже как для опытных людей,даже делая копипаст ошибки за ошибками, много лишнего обясняешь как для новичков ......