JavaScript для начинающих 2022. Полный курс за 6 часов. Уроки. Теория + практика



Большой курс урок по JavaScript для новичков. Все что нужно для старта в 2022 году для работы с JavaScript.
↓↓↓ Файлы к уроку и тайм-коды ниже в описании ↓↓↓

Что такое JavaScript, переменные, типы данных, числа, BigInt, функции, стрелочные функции, массивы, циклы, обход массивов, объекты, свойства и методы объектов, классы, асинхронность, setTimeout, setInterval, callback hell, Promise, async await, работа с DOM. 3 практических проекта. Курс 2022 года.

Стартовый код к уроку: https://webcademy.ru/blog/867/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс “JS Frontend разработчик + React”: https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 17 Октября 2022 года

💻 Курс “Профессия HTML верстальщик”: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Старт курса: 24 Октября 2022 года

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс по верстке сайтов: https://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Сайт школы ВебКадеми: https://webcademy.ru/​
Вконтакте: https://vk.com/webcademy​
Telegram канал: https://t.me/webcademynews​

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Тайм-коды и код к уроку
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Код к уроку: https://webcademy.ru/blog/867/

00:00 Введение и содержание
02:24 Настройка окружения
04:55 Подключение JS файла

Основы

09:28 Переменные
13:00 Типы переменных let const var
20:15 Область видимости
23:41 Типы данных. Строки, числа, логические, BigInt, Symbol
38:30 Условия, операторы сравнения, логические операторы
47:50 Тернарный оператор
54:56 Конкатенация строк и шаблонные строки

Функции

1:00:36 Создание функций
1:04:02 Function expression и function declaration
1:12:41 Параметры и аргументы для функции
1:16:17 return
1:22:05 Функция как аргумент
1:31:30 Самовызывающаяся функция IIFE
1:39:22 Стрелочные функции

Массивы

1:48:16 Определение массивов
1:57:38 Методы массивов
2:06:44 Цикл for. Обход массива циклом for
2:18:37 Цикл for ( of ). Обход массива циклом for ( of )
2:21:20 Метод .forEach() для обхода массивов

Объекты

2:29:42 Объекты. Свойства объектов
2:39:00 Методы в объектах
2:42:50 Ключевое слово this
2:46:33 Обход свойств объекта через цикл for ( in )
2:50:17 Нюанс с const и изменением объекта или массива
2:52:43 Классы. Конструкторы объектов
3:02:30 Лайфхак работы с VS Code

Работа с DOM

3:04:30 Выбор DOM элементов
3:12:20 Выбор коллекции элементов
3:20:50 ES5 методы для выбора элементов
3:23:27 Работа с CSS классами
3:32:10 Атрибуты
3:42:07 Прослушка событий. Клик. addEventListener и onclick
3:49:53 Прослушка событий. Ввод текста
3:57:37 Объект event
4:03:21 Работа c HTML элементами. Создание. Копирование.
4:16:05 Список задач на JS [практика]

Асинхронность

4:40:51 Интервал setInterval. clearInterval
4:43:33 Таймер setTimeout
4:48:20 Секундомер [практика]

Внимание! Дальнейшие темы будут сложны для понимания. Здесь как в математике, доказание теоремы всегда сложнее чем ее использование. Поэтому можно вначале ознакомиться с примером на 6:28:10 и уже после перейти к изучению “мат части”.

5:03:45 Callback hell
5:11:09 Callback hell. Пример с отпуском. [осторожно, взрыв мозга!]
5:29:32 Callback hell. Итоги

5:33:22 Promise. Создание и потребление промисов
5:41:44 Promise. Цепочки then
5:43:44 Promise. Цепочки then c асинхронными действиями [осторожно, взрыв мозга!]
5:53:00 Promise. Пример с отпуском

6:11:33 Асинхронные функции
6:19:09 Асинхронные функции. Пример с отпуском

6:28:10 Курс валют [практика]
6:45:00 Важная информация

46 Comments

  1. Смотрел 3 часа, что сказать 80% я вобще ничего не понял но эти 20% достойны лайка.

  2. Там лежит Марк😁😁😁
    Очень понятный выпуск, спасибо за работу!

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

  4. messageFromCheckTickets все поломал, вот после этого момента ,Понимание всего происходящего просто улетело

  5. Добрый день! Спасибо за курс. Все четко и понятно. Подскажите пожалуйста когда можно будет записаться на следующий поток платного курса Frontend разработчика?

  6. классика жанра, хочешь заработать на том, чего не умеешь – начинай "учить" дургих))))))

  7. Читал учебник несколько дней, и если по началу основы воспринемальсь легко и понятно то гдето в районе методов обектов и масивов, все превратилось в кашу. Решил что нужно менять подход и начал смотреть ваше видео. Вя каша начала складыватся во чтото понятное. Спасибо вам огромное. Тот труд который вы сюда вложили поможэт сотням людей. Понравилась розбивка видео, понравились ремарки – "оно так работает но так не делайте". Очено понятная подача материала. Спасибо вам ещо раз

  8. Огромное спасибо! Гораздо понятнее и интереснее объясняете, чем на skillbox

  9. на отметке 4:38:00 Я просто использовал стрелочную функцию () => newTask.remove(), раз у нас уже есть переменная newTask которая по значению ссылается на только что созданный элемент li то почему ее надо было вытаскивать через метод closest() ? и почему нельзя обратится на прямую? ведь newTask локальная переменная

  10. 01:57:16 "Если индекс у нас самый большой это 3… когда мы возвращаем length это длина, а последний индекс это длина -1 потому что индексы идут с 0" – подскажите что автор имелл ввиду, причем тут -1 если все индексы в массиве начинаются с 0 и заканчиваются 3.

  11. а есть ли в Javascript "elseif" как в Lua и что оно выполняет просто мне с ним удобнее

  12. Отличное видео) спасибо большое) Про фишки очень улыбнуло) Н===Ностальгия)

  13. Сброс текста в input.value можно было организовать не через пустую строку, а через event.target.reset();

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

  15. Добрый вечер я полный чайник, но хочу попробовать разобраться, есть смысл смотреть это видео?

  16. Привет из Армении, спасибо тебе за такой замечательный урок, благодаря твоим урокам я начал понимать как работает JavaScript👍👍

  17. Курс очень хорош, спасибо Автору !
    Но ,как сказал Юрий , я немного запутался в конце ,все эти промисы ,колбэки осваиваются только с опытом . Всем удачи)

Leave a Reply

© 2023 53GB