Udemy.Иван Петриченко.Полный курс по JavaScript + React - с нуля до результата
I.Консольное приложение. first_project
- Практика, ч.1. Начинаем создавать приложение
/* Задание на урок:
-
Создать переменную numberOfFilms и в неё поместить ответ от пользователя на вопрос: 'Сколько фильмов вы уже посмотрели?'
-
Создать объект personalMovieDB и в него поместить такие свойства:
- count - сюда передается ответ на первый вопрос
- movies - в это свойство поместить пустой объект
- actors - тоже поместить пустой объект
- genres - сюда поместить пустой массив
- privat - в это свойство поместить boolean(логическое) значение false
-
Задайте пользователю по два раза вопросы: - 'Один из последних просмотренных фильмов?' - 'На сколько оцените его?' Ответы стоит поместить в отдельные переменные Записать ответы в объект movies в формате: movies: { 'logan': '8.1' }
Проверить, чтобы все работало без ошибок в консоли */
- Практика, ч2. Применяем условия и циклы
/* Задание на урок:
-
Автоматизировать вопросы пользователю про фильмы при помощи цикла
-
Сделать так, чтобы пользователь не мог оставить ответ в виде пустой строки, отменить ответ или ввести название фильма длинее, чем 50 символов. Если это происходит - возвращаем пользователя к вопросам опять
-
При помощи условий проверить personalMovieDB.count, и если он меньше 10 - вывести сообщение "Просмотрено довольно мало фильмов", если от 10 до 30 - "Вы классический зритель", а если больше - "Вы киноман". А если не подошло ни к одному варианту - "Произошла ошибка"
-
Потренироваться и переписать цикл еще двумя способами*/
// Код возьмите из предыдущего домашнего задания
- Практика , ч3. Используем функции
/* Задание на урок:
-
Первую часть задания повторить по уроку
-
Создать функцию showMyDB, которая будет проверять свойство privat. Если стоит в позиции false - выводит в консоль главный объект программы
-
Создать функцию writeYourGenres в которой пользователь будет 3 раза отвечать на вопрос "Ваш любимый жанр под номером ${номер по порядку}". Каждый ответ записывается в массив данных genres
P.S. Функции вызывать не обязательно*/
- Практика , ч4. Используем объекты
/* Задание на урок:
-
У нас уже есть рабочее приложение, состоящее из отдельных функций. Представьте, что перед вами стоит задача переписать его так, чтобы все функции стали методами объекта personalMovieDB Такое случается в реальных продуктах при смене технологий или подхода к архитектуре программы
-
Создать метод toggleVisibleMyDB, который при вызове будет проверять свойство privat. Если оно false - он переключает его в true, если true - переключает в false. Протестировать вместе с showMyDB.
-
В методе writeYourGenres запретить пользователю нажать кнопку "отмена" или оставлять пустую строку. Если он это сделал - возвращать его к этому же вопросу. После того, как все жанры введены - при помощи метода forEach вывести в консоль сообщения в таком виде: "Любимый жанр #(номер по порядку, начиная с 1) - это (название из массива)"*/
II. Работа с элементами на странице. second_project
- Практика. Задание на отработку действий со страницей
/* Задания на урок:
- Удалить все рекламные блоки со страницы (правая часть сайта)
- Изменить жанр фильма, поменять "комедия" на "драма"
- Изменить задний фон с постером фильма на изображение "bg.jpg". Оно лежит в папке img. Реализовать только при помощи JS
- Список фильмов на странице сформировать на основании данных из этого JS файла. Отсортировать их по алфавиту
- Добавить нумерацию выведенных фильмов */
- Практика. Используем события на странице проекта
/* Задания на урок:
-
Реализовать функционал, что после заполнения формы и нажатия кнопки "Подтвердить" - новый фильм добавляется в список. Страница не должна перезагружаться. Новый фильм должен добавляться в movieDB.movies. Для получения доступа к значению input - обращаемся к нему как input.value; P.S. Здесь есть несколько вариантов решения задачи, принимается любой, но рабочий.
-
Если название фильма больше, чем 21 символ - обрезать его и добавить три точки
-
При клике на мусорную корзину - элемент будет удаляться из списка (сложно)
-
Если в форме стоит галочка "Сделать любимым" - в консоль вывести сообщение: "Добавляем любимый фильм"
-
Фильмы должны быть отсортированы по алфавиту */
III. JS в работе. Third_project
- Создаем табы в новом проекте
- Создаем таймер обратного отсчета на сайте
- Создаем модальное окно.
- Модификации модального окна
- Используем классы в реальной работе
- Rest оператор и параметры по умолчанию (ES6)
VI. Продвинутый JavaScript
- Реализация скрипта отправки данных на сервер
- Красивое оповещение пользователя
- Fetch API
- Подробно про npm и проект. JSON-server
- Получение данных с сервера. Async/Await (ES8)
- Создаем слайдер на сайте, вариант 1
- Создаем слайдер на сайте, вариант 2
- Создаем навигацию для слайдов
- Регулярные выражения
- Создаем калькулятор на сайте, часть 1
- Создаем калькулятор на сайте, часть 2
- Webpack. Собираем наш проект