Создание списка в Javascript. Самое понятное объяснение
Вставка
- Опубліковано 31 лип 2024
- Список пользователей на JS. Делаем отрисовку, Форму добавления элементов, валидацию, сортировку и фильтрацию.
👁🗨 Исходники кода в телеграм канале: t.me/frontend_du2
👁🗨 Discord сервер: / discord
👁🗨 VK: frontend_du2
👁🗨 Дзен: dzen.ru/frontend_it
Фильтрация массива: • Фильтрация массива объ...
Сортировка массива: • Сортировка массива объ...
Буду рад подписке, лайку и комментарию. Спасибо за вашу поддержку.
Тайм-коды:
0:00 - описание и подготовка проекта (создание элементов)
14:25 - функция Render() (отрисовка);
20:32 - отрисовка через цикл for of;
21:58 - подготовка копирование массива [...arr] и добавление в него fio
26:43 - стилизация таблицы
30:00 - добавление нового пользователя создание form и input
33:27 - находим элементы формы
33:43 - добавление через AddEventListener("submit")
38:48 - строка в число parseInt()
40:36 - очищаем $tableBody через innerHTML = " "
41:17 - оптимизируем код с помощью функции перемещаем в render()
43:34 - функция создания пользователя createUserTr() c return $userTr
46:10 - валидация
50:20 - сортировка пишем в функции render()
1:05:40 - фильтрация
вы просто подарок в этом большом и сложном мире IT)) спасибо огромное за Ваши уроки!!
Спасибо вам за такой теплый отклик )) :) Очень приятно
Александр, спасибо большое за видеоуроки.
После просмотра вашего контента становится более понятен алгоритм обучения JS.
Спасибо за ваш труд, все понятно и доступно
Спасибо большое за ваш комментарий :) Рад, что видео понравилось :)
Огромное Вам спасибо! вот такими должны быть уроки на образовательных платформах, тогда бы и по практике возникало гораздо меньше вопросов. Все по полочкам: что, куда, откуда и главное зачем))сразу все ясно понятно))
Спасибо вам за комментарий :) Я очень рад, что ролик получился понятным и вам удалось разобраться в реализации задания
Видео топ, спасибо. После его просмотра получилось значительно улучшить свой код и исправить некоторые недочеты.
Спасибо за Ваш комментарий😊 надеюсь и другие видео курса будут вам полезны 🤗
Спасибо Вам большое! Если бы не Ваш канал, я бы ни один модуль не сдал на курсе базовый JS. Лайк
Рад, что смог Вам помочь ☺ спасибо за ваш комментарий))
Александр, спасибо большое за видео! Делала все вместе с Вами, действительно Самое понятное объяснение! И еще многое, что для себя закрепила и на что-то посмотрела под другим ракурсом!
Спасибо за ваш комментарий. Я надеюсь, что видео помогло вам структурировать код. И лучше понять этапы и что для чего делается :)
Огромное спасибо за такой понятный разбор материала, одно удовольствие разбираться в теме вместе с вами!
Спасибо за ваш отзыв ) Рад, что видео понравилось. Надеюсь все чуть прояснилось :)
Классно!! Это очень шикарное видео. Спасибо Вам, Александр, за такую классную реализацию списка! Было у меня тестовое в одну компанию, там нужно было отсортировать товары по цене и по категориям. Но тогда моих знаний JS было еще недостаточно(( сейчас посмотрю Ваше видео! :) Это поможет мне в дальнейшем, т.к. это очень распространенная практика: списки, фильтрация и т.д. Как всегда от меня лайк 👍🙂
Огромное спасибо за ваши видео, это лучшая помощь для начинающих.
Очень приятен ваше комментарий :) Спасибо
Большое спасибо за такое понятное и подробное объяснение! :)
Ваши уроки помогают быстрее понять и разобраться в JS! ^_^
Так приятно читать такие комментарии ☺ Ваша поддержка очень вдохновляет! Желаю удачи в изучении JS, надеюсь другие видео на канале вам в этом помогут 😊
Спасибо. Как всегда всё на уровне! Благодаря этому виде познакомился с Bootstrap. Ждём продолжения вашего курса по JS
Иван, большое спасибо за ваш отзыв. Это очень приятно. Готовлю продолжение курса и уже скорее хочется его начать показывать :)
Спасибо большое за полезную информацию! 👍👍👍
Все максимально понятно, ясно и самое главное интересно. После ваших видео учить js стало легче. Побольше таких видео, спасибо👍
Благодарю за такой комментарий :)
заранее поставил лайк, как найду время, обязательно попробую реализовать
Спасибо за лайк авансом. Надеюсь видео этого заслуживает. Приятного просмотра. Будет интересно узнать ваше мнение :)
Спасибо, классное видео - все, что надо и подробно. 👍
Я рад, что ролик вам помог :) Спасибо за комментарий. Не всегда получается отвечать сразу (
Большое спасибо)) все очень понятно и доходчиво! Александр почему то всегда переживает что видео получается длинное, в записи в 2 захода очень удобно смотреть можешь все понять не спеша) Еще раз спасибо огромное
Спасибо вам за комментарий )) Да, согласен. Так умещается больше информации. Но статистика просмотра говорит, что после 15й просмотра видео смотрят меньше )) Отсюда и сомнения в продолжительности ролика. Но, комментарии в основном положительные. Думаю тайминг можно сохранять, как есть. Спасибо вам :)
Спасибо, Александр, за труд.
Спасибо вам за ваш комментарий и поддержку :)
Спасибо огромное за труд. Все по полочкам разложено.
Спасибо за ваш комментарий🤗 надеюсь и другие видео курса будут вам полезны
Прекрасное видео! Все было понятно и интересно! Спасибо!
Большое спасибо за ваш комментарий))
Делаю курсовую, полагаясь на многое из этого видео. Александр! Спасибо огромное за Ваш труд!
Спасибо за комментарий🤗 приятно, что мой канал вам полезен, желаю успехов в курсовой 🔥
Спасибо, Александр! Очень полезный материал.
Спасибо вам за ваш приятный и очень нужный комментарий :)
Александр, спасибо огромное за Ваши обучающие ролики! Лайк, комментарий, подписка - всё как Вы просили :)
Очень рад, что ролик вам помог разобраться в теме :) Спасибо за подписку, лайк и комментарий. Такая поддержка очень важна :)
Спасибо за работу!
Спасибо и вам ):
Спасибо большое! Как всегда на высоте!
Спасибо вам :)
Большая благодарность вам за объяснение 🌼🌼🌼
Спасибо вам :) Рад, что вы посмотрели это видео.
Видео хоть и длинное, но оно все равно смотрится на одном дыхании, т.к. Вы каждую мелочь объясняете и все понятно, от того интересно и познавательно смотреть!
Большое спасибо за труд! Не бросайте вести канал))
Очень приятно читать такие комментарии, потому что они реально помогают мне понять, что я делаю так а что нет. Кажется пока двигаюсь в верном направлении. Спасибо вам ❄️🎄🧑🎄
шутки пушка, всё заценили🤣
))) Буду отдельный курс по шуткам от Александра записывать ))
спасибо вам за вашу работу!
Спасибо за ваш комментарий🤗 🔥
Спасибо за Вашу работу❤
Спасибо за ваш комментарий🤗 ваша поддержка очень важна!))
Спасибо большое❤❤❤❤
Большое спасибо
Спасибо за супер видео
Спасибо за ваш комментарий😊
Спасибо большое! :)
Спасибо за ваш комментарий🤗
Спасибо!
Почти полтора часа на одном дыхании без склеек это мощно! Я бы только убрал из начала большое количество описания кого, как Вы назвали это видео.
Здравствуйте, спасибо за ваш комментарий. Как всегда поддерживаете. Да да :) Возможно начало затянул ) Без подготовки видео получаются длиннее. Заметил это за собой )) Но было интересно. Наверное, это самое большое видео на канале
@@alex_dudukalo было бы вообще за гранью фантастики таймкоды сделать)
БОЛЬШОЕ СПАСИБО!!!👏🤝
Спасибо за ваш комментарий🤗
Познавательное видео!! да, если запишете про Data..будет полезно!)
Спасибо вам :) Уже в плане, думаю в начале года будет ролик про работу с датами :)
Лучший спикер хорошо все обьясняет. Почему ты не ведешь курс по JavaScript? Надо стучаться в компанию чтобы заменили Тимофея
:)) Спасибо за ваш приятнейший комментарий. Я пока тоже учусь делать ролики. Надеюсь у меня будет возможность поработать над материалами курса :)
Вы правда приятный спикер которого приятно слушать. В вас видно что вы стараетесь у вас есть эмоции и вы объясняете на всех языках с понятными примерами. Вы также как и обычные люди другие совершаете ошибку и переживаете. Я бы ваше видео смотрел даже если оно 2 часа заняло. Пожалуйста не останавливайтесь
лайк, подписка, колокольчик, спасибо!
Спасибо за ваше доверие, надеюсь контент будет интересным ) с наступившим Новым Годом ☺️
Огонь, пушка... Огонь из пушки)))
Большое спасибо за ваш отзыв :) Очень приятно
Спасибо 👍
Спасибо вам за очередной отклик :)
Спасибо за подробный разбор. Вот бы еще localStorage на этом примере
Спасибо вам :) У меня есть такое видео. Думаю после просмотра вы сможете попробовать реализовать сохранение для этого списка :)
ua-cam.com/video/aCWAYWyymwA/v-deo.html
0:00 Описание и подготовка проекта (создание элементов)
14:25 Функция Render() (отрисовка);
20:32 Отрисовка через цикл for of;
21:58 Подготовка копирование массива [...arr] и добавление в него fio
26:43 Стилизация таблицы
30:00 Добавление нового пользователя создание form и input
33:27 Находим элементы формы
33:43 Добавление через AddEventListener("submit")
38:48 строка в число parseInt()
40:36 Очищаем $tableBody через innerHTML = " "
41:17 Оптимизируем код с помощью функции перемещаем в render()
43:34 Функция создания пользователя createUserTr() c return $userTr
46:10 Валидация
50:20 Сортировка пишем в функции render()
1:05:40 Фильтрация
Вы просто подарок :) Большое спасибо за тайм-коды. Добавлю с вашего позволение в основное описание видео :)
@@alex_dudukalo Да не за что, писал под себя, но может кому-то тоже пригодится 😊
@@user-lm9ee1gn5p уверен , что пригодится ) мне частенько напоминают в комментариях про тайм-коды
Лайк и подписка
Спасибо за поддержку и подписку. Надеюсь вы найдете что то полезное на канале )
Я хотел бы предложить идею(как твой подписчикк... хахааахах) . Как тебе идея решать задачки на CodeWars? Хотя бы получасовой ролик, а потом посмотришь на реакцию твоих других подписчиков
Отличная идея :) Можно попробовать. Нужно будет заняться после записи видео по плану :)
Хорошие шутки)
))) от сердца
Все очень подробно, видео супер!
Подскажите, а как сделать так, чтобы при первом нажатии на заголовок сортировка была по возрастанию, а при повторном по убыванию? Вданном решении направление сортировки меняется поочередно независимо от заголовка столбца
Александр, мой совет, лучше такие видео делать по частям, просмотров больше будет (как вы делали список сотрудников), ну и так лучше мне лучше воспринимается как новичку, ну или хотя бы там коды, мне не хватает усидчивости смотреть полтора часа 😅
Да, я думаю вы правы :) когда записывал ролик , увлекся и растянул )) будем за этим следить 😇
Александр, спасибо вам большое за это подробное видео! Название оправдано, всё разложено по полочкам! А я люблю работать ( пока еще учиться на frontend-разработчика) утром, часов с 5 утра. Хотя для кого-то это ночь)) JS идет сложнее вёрстки. Что можете посоветовать для большего понимания процессов?
Спасибо вам за отклик :) Я просыпаюсь поздно (ложусь тоже поздно), пью кофе и сразу начинаю работать. Можно сказать, я то же с пробуждения работаю )) Больше практики. Советую придумать или найти для себя интересную задачу и пробовать ее делать. Вы столько вопросов для себя откроете и самое главное будете пытаться получить на них ответы. Это крутой способ учиться)
Ваши видео как всегда чудесны и познавательны, спасибо!
Заметил один момент, где-то на 23 минуты когда вы используете оператор rest для создания копии объекта -> const copyListData = [...listData] и так как в listData хранятся сами объекты, то соответственно в переменную copyListData мы получим ссылки на те же объекты что и в listData, т.е. к примеру listData[0] === copyListData [0] //true. Сталкивался с этим уже не первый раз сам) чтобы скопировать именно массив объектов и сделать их именно независимой копией можно только через JSON.stringify, так как даже Object.assign не сможет в данном примере решить вопрос) то есть только JSON в данном формате решает вопрос. const copyListData = JSON.parse(JSON.stringify(listData))
Либо же через цикл сделать фактически тоже, что сделает два массива объектов независимыми
const copyListData = [];
for (const person of listData) {
copyListData.push({ ...person });
}
Спасибо за ваш комментарий :) К сожалению не получилось ответить быстрее 😔. Да, вы справедливо заметили, что мы копируем только набор ссылок на объекты. Но если так подумать, то нам этого достаточно. Из массива убираем ссылку на объект. Сортируем объекты ссылок. И тд. Главное где-то сохранять оригинальный набор ссылок на объекты :)
Кстати, с JSON.stringify (для копирования) иногда бывают свои сложности. Можно еще использовать рекурсию. Вообще я возмущен тому факту, что в JS нет встроенного удобного способа копирования таких массивов )
@@alex_dudukalo Ничего страшного)
а какие бывают сложности? просто интересно. Да вообще очень странно что нет способов для решения вроде бы элементарных вопросов)
@@PieceOfInternet Например, если значение какого то свойства - другой объект, переданный по ссылке. Ссылочная связь нарушиться :) Если значение свойства - экземпляр класса или метод )
@@PieceOfInternet Да, безусловно - для простых задач подойдет хорошо :)
@@alex_dudukalo Спасибо за ответ) не знал о таком)
красава
Спасибо :)
Спасибо :)
😊
Хорошее видео. Было бы круто, если бы показали, как делать фильтрацию с числовыми значениями. Спасибо!
Спасибо вам. Кажется с числовыми значениями тоже должна работать фильтрация. Или вы что тот другое имели ввиду?
@@alex_dudukalo Приложение падало в ошибку, но когда в функцию фильтрации добавил toString(), то стало работать)
@@user-ry2xs6jp1d СПАСИБО! И Александру и вам. Тоже прочитала что инклюд не работает с числовыми значениями, и добавляла toString() не в то место))) (как всегда)
Добрый день! Спасибо за видео. Скажите, как можно организовать фильтрацию по диапазону чисел? Например, возраст > 25лет, но меньше
Здравствуйте Александр! Спасибо вам за ваш труд. Можете ещё метки добавить на видео, чтобы навигация по материалу была удобнее?
Спасибо вам ща комментарий ) В новых роликах уже это делаю; Буду стараться делать это и в уже снятых :)
❤❤❤❤❤❤❤❤❤❤
Спасибо вам, это видео было долгим ) Надеюсь не заскучали )
Долго не решался посмотреть, потому что это сейчас моё дз по js,но решился на просмотр пока в дали от компьютера
Как впечатление ?:)
@@alex_dudukalo Все на много проще, чем кажется со стороны))
Очень толковый туториал. Но жаль нет редактирования айтемов. Работа со стейтом, edit true, edit false. Вот было бы здорово
Здравствуйте Александр. Видео лучшее)Огромное спасибо) Вот только исходник кода в телеграмме я не смог найти, не скажите,как его найти?
Здравствуйте, спасибо вам за комментарий :) Прикрепляю ссылку на пост в телеграмме с исходниками: t.me/frontend_du2/30
Здравствуйте не объяснили как очищать поля после заполнения, чтобы они автоматически становились пустыми после добавления, спасибо
Круто, но мне кажется что(на мой взгляд) слишком быстро. Я не то чтобы медленный, но и быстрым не назвал бы себя. Однако усваивать материал и печатать как-то не получается, из-за этого перематываю назад или ставлю на паузу, а так мне очень понравилось.
Спасибо за ваш отзыв :) Да, конечно. Я мог бы показывать и рассказывать медленнее, но боюсь видео растянулось бы на три часа :( А это очень долго ((
Я бы хотел видео по бутстрапу в твоем исполнении
Я записывал короткий ролик: ua-cam.com/video/66Pk0ygL5iQ/v-deo.html
Но да, для бутступ нужно больше видео. Или даже отдельный плейлист :)
спс за контент, делайте пж тайм коды для удобства
Спасибо вам за идею и комментарий. Пожалуй займусь этим и добавлю под видео :)
Комментарий в поддержку канала
Спасибо вам за него :)
А как выполнить валидацию даты по диапазону, можете пжста сказать? А то мучаюсь с этой практической работой по 10му модулю Skillbox, ищу видеоролики в Ютубе, но внятного ответа нет
Здравствуйте, здесь нужно сравнивать даты. Это очень похоже на проверку вхождения числа в нужный диапазон. У меня есть видео, в котором я показываю, как делать сравнение двух дат. Для вашей задачи придется добавить еще одно условие )
ua-cam.com/video/-_Q-E4ZR5SQ/v-deo.html
Просмотрела урок, скачала исходник и по образцу сделала задание. все понятно, все замечательно, спасибо! Одна только очень странная проблема - сортировка массива работает в Хроме, но не работает в Мозилле. Почему так, обнаружить не удалось. Пробовали ли вы выполнять это приложение в Мозилле и получилась ли у вас сортировка? И что вы думаете по этому поводу?
Большое спасибо за ваш комментарий и замечание. Да, вы правы. В фаерфоксе сортировка не работает в текущей реализации из-за особенности фаерфокс. Я немного доработал код и обновил в телеграме архив с исходниками. Вот так функция должна выглядеть и должна работать в фаерфоксе
copyListData = copyListData.sort(function(a, b) {
console.log(a, b);
let sort = a[sortColumnFlag] < b[sortColumnFlag]
if (sortDirFlag == false) sort = a[sortColumnFlag] > b[sortColumnFlag]
return sort ? -1 : 1
})
@@alex_dudukalo спасибо большое, все работает! Я просто предпочитаю фаерфокс, потому что мне удобнее его инструменты разработчика. Но это первый раз, когда я сталкиваюсь с подобным.
Добрый день! Делаю по вашему уроку список, скажите пожалуйста какую функцию добавить,чтобы была возможность удаления одного из сообщений?
Здравствуйте, вы делаете удаление с сервера ?
@@alex_dudukalo да с сервера
Добрый день, покажите пожалуйста как в качестве базы данных работать с json. Все данные списка сохранять туда
Здравствуйте, JSON можно использовать, как формат для хранения данных. Вы хотите хранить данные в localStorage?
@@alex_dudukalo да
Если есть возможность добавлять мне кажется логичным было бы иметь так же возможность удалять! А еще круче было бы иметь возможность редактировать тех кто уже есть...!
Спасибо за комментарий с предложением. Да, я думал о том, что бы добавить возможность редактировать. Пожалуй в следующих роликах добавлю это :)
У меня неприятное чувство, что я читерю, когда смотрю ваши видео и делаю дз по js, я зря так переживаю или для учебы все же нужно самостоятельно биться об стенку?
Безусловно это в какой то степени читерство )). Но я рекомендую так. Посмотрели видео -> поняли концпецию. И пробуете воспроизвести без подсматриваний :) Так будет очень даже хорошо
Я бы хотел чтобы ты поработал с датами, по крайней мере лишним не будет
Да, я планирую специальное видео с датами ) Возможно включу их в этот список :)
Зачем знак доллара?
Так мы показывает, что переменная или константа предназначена для DOM элемента :) Это удобно. Сразу понятно, что это HTML элемент )
@@alex_dudukalo спасибо
Я пока сохранил себе чтобы посмотреть потом, сейчас нет возможности посмотреть полностью видео. Но думаю все будет как всегда четко. Только благодаря Вам Александр у меня есть какие-то знание js. Ваше терпение при проверке работ -это железо. Конечно все не так просто, но только благодаря Вам у меня есть хоть что-то в голове.
Здравствуйте. Мне очень приятно, то что я могу учавствовать в процессе постижения вами программирования и JS. Надеюсь, что у вас все получится и эти знания помогут изменить что то в вашей жизни и строить планы. Я всегда стараюсь делать разборы лучше. Кстати, ваши комментарии всегда мне помогают. Как у вас сейчас дела? Есть прогресс по итоговой работе с CRM? или пока отложили ? :) Это видео может помочь с ней
@@alex_dudukalo если честно отложил немного. Решил полностью закончить верстку, а потом js по полной программе и как раз сразу после js начну изучать фреймворки. Думаю так будет более последовательно. Плюс получил свой первый коммерческий проект по созданию интернет магазина женской одежды, его нужно выполнять. Да и конечно все это оттягивает основная работа. В общем все кипит, а вот с временем конечно проблема🤷
@@alex_dudukalo видео это добавил себе в библиотеку чтобы не потерять. Начну выполнять дипломную работу обязательно посмотрю. Спасибо Вам!!!
согласен с Вами!!!
У вас массив не будет копироваться, а будет ссылаться на оригинал, для того чтобы сделать копию нужно (пример let newStudentsList = arrData.map((obj) => ({ ...obj })); )
Здравствуйте, подскажите о какой минуте из видео идет речь :) Хочу проверить.
@@alex_dudukalo Добрый день, ua-cam.com/video/J5y3F-So1aY/v-deo.html 22:04
C вами хоть можно учится
Спасибо за ваш комментарий :) Надеюсь видео помогло разложить все по полкам :)
37:59 я ничего не слышал
Запнулся в видео. Говорю: "Для добавления используем push"
Спасибо!
Спасибо вам :)