Товар больше не доступны в связи с прекращение сотрудничества с автором. Выберите подходящий курс из похожих.
Автор(ы): Владилен Минин
Данный курс - это полный охват теоретических и практических знаний и навыков по JS - без воды и в концентрированном виде. В курсе собраны лишь самые актуальные и востребованные в 2019 году знания по JS - для современной веб-разработки.
В данном блоке говорится о том, что такое JavaScript, про то, как он работает. Далее говорится про выбор оптимальной среды разработки, в которой идет дальнейшая разработка на протяжении курса. В последнем уроке пишется первая мини-программа на JavaScript и разбираются способы включения скриптов в HTML файле.
В этом уроке вы узнаете про структуру курса, для кого он нужен, как его проходить и про автора.
В данном видео вы узнаете про то, что такое JavaScript, для чего он служит. Вы узнаете, как появился данный язык и что с помощью него можно создавать.
В этом уроке вы узнаете про самый оптимальный редактор кода, в котором будет вестись разработка на протяжении курса. Показана установка Visual Studio Code от компании Microsoft и настройка ее с помощью плагинов для удобной разработки.
В данном уроке вы узнаете, чем отличаются разные браузеры друг от друга и выберете самый оптимальный из них для разработки - Google Chrome. Далее вы познакомитесь с инструментами для разработки, встроенные в сам браузер, которые будут использоваться на протяжении всего курса.
В этом уроке вы узнаете про несколько разных способ, с помощью которых можно подключить JavaScript к HTML странице, через которую будут запускаться скрипты.
Изучение начнется со старой версии языка - EcmaScript 5. А дальше осуществляется переход к самым последним нововведениям. В курсе рассмотрена именно эта версия, так как на текущий момент большое количество проектов еще написаны на старой версии и для их понимания необходимо понимать все аспекты языка.
В этом уроке вы узнаете про то, что такое переменные и как они создаются в JavaScript.
В этом уроке вы узнаете про то, какие типы данных есть в языке несмотря на то, что JavaScript является не строго типизированным. Вы познакомитесь с шестью базовыми типами данных и для каждого из типов увидите примеры.
В этом видео вы узнаете про базовые операции, которые есть в JavaScript. Рассматриваются некоторые из них, такие как сложение, присвоение, умножение, вычитание и деление.
Вы познакомитесь с таким понятием как приоритет операций (Operator Precedence): узнаете в каком порядке интерпретатор JavaScript выполняет операции.
В этом уроке вы познакомитесь еще с некоторыми важными операторами, которые часто используются при программировании, такие как взятие остатка от деления, инкремент и другие.
Вы познакомитесь с операторами, отвечающими за сравнение различных типов данных и значений.
В этом уроке вы узнаете про то, как работает Boolean логика вне зависимости от языка программирования. На диаграмме вы увидите примеры и после вы напишите на языке JavaScript более сложные примеры, применяя базовые принципы.
В этом уроке вы познакомитесь с условными операторами, которые также применимы почти для любых языков программирования: конструкций If Else
В этом уроке вы узнаете, как упростить блок условных операторов, применив краткую запись - тернарный оператор, который позволяет записать все в одну строчку.
В этом уроке вы познакомитесь с альтернативной для некоторых записей конструкцией Switch Case, которая упрощает блок условных операторов.
В этом уроке вы узнаете, как создаются и инициализируются функции в JavaScript.
Задание: перепишите функцию checkAndLogAge таким образом, чтобы:
В этом уроке вы узнаете про 2 способа создания функций: через ключевое слово Var и Function. Далее вы узнаете, чем отличаются эти способы и какой способ лучше использовать на практике.
В этом уроке вы более подробно познакомитесь с типом данных строки, узнаете какие встроенные методы есть у строк, с помощью которых можно упрощать работу и узнаете про способы создания строк.
Вы познакомитесь более детально с типом данных числа, узнаете какие встроенные методы есть у чисел, какие встроенные функции в язык есть для работы с числами и какие есть граничные значения у данного типа данных.
Вы узнаете про то, что такое массивы в языке JavaScript, за что они отвечают и к какому типу данных принадлежат.
В этом видео вы познакомитесь с основами того, чем являются объекты и как с ними работать.
В этом видео вы узнаете про то, как циклы упрощают разработку и про то, как ими пользоваться на примере встроенного цикла For.
В данном блоке изучается взаимодействие с DOM-деревом. Разбирается, как получать доступ к DOM-элементам, как управлять состояниями элементов: менять свойства, контент, атрибуты и прочее. Рассматривается, как добавлять динамику веб страницам путем добавления событий на элементы. Далее говорится про свойства событий и способы их управления.
В этом уроке вы познакомитесь с таким понятием, как DOM-дерево. Узнаете про то, какие объекты есть в JavaScript при работе с ним в браузере.
В этом уроке вы познакомитесь со старыми и новыми методами, которые позволяют получать доступ к DOM-элементам прямо из скрипта.
Вы познакомитесь с возможностями внутри JavaScript, которые позволяют в динамичном режиме менять текстовое содержимое элементов или даже их HTML-код.
В этом видео вы узнаете, как с помощью двух встроенных методов вы можете менять любые атрибуты у элементов: менять их значения, удалять и просто считывать их значение.
В этом уроке вы узнаете про удобный API ClassList у элементов, который позволяет крайне просто манипулировать различными классами у элементов.
В этом видео вы узнаете, как добавлять динамики вашим веб страницам с помощью событий и функции addEventListener, познакомитесь с возможными событиями, которые поддерживает JavaScript.
В этом уроке вы узнаете про то, как отличается модель поведения событий: всплытие событий и погружение событий на примере DOM-элементов.
В этом видео подробно рассматривается объект события и говорится, что с помощь него можно сделать. Также вы узнаете, что такое функции preventDefault и stopPropagation, и чем они отличаются друг от друга.
В этом уроке вы узнаете про оптимальную стратегию добавления событий, которая позволяет максимально экономить память при наличии большого количества элементов с событиями.
В данном блоке вы познакомитесь с некоторыми дополнительными возможностями, заложенными в JavaScript, которые не были освещены ранее, но крайне важны для дальнейшего прохождения курса. Вы узнаете про способы асинхронной загрузки скриптов, способы взаимодействия с пользователем и про некоторые глобальные объекты, позволяющие работать с данными: математические формулы, операции, работы с массивами. Далее вы узнаете про методы работы с датами и временем, способы работы с JSON-объектами и методы хранения данных локально в браузере пользователя.
Вы узнаете, чем отличается атрибут у HTML-тега Script: Async от Defer и как с помощью данных атрибутов можно легко оптимизировать загрузку скриптов и отслеживать последовательность их загрузки.
Вы познакомитесь с основными встроенными методами взаимодействия с пользователем: с консолью и с тремя всплывающими окнами.
В этом уроке вы узнаете про полезные встроенные методы у массивов, которые позволяют крайне просто изменять массивы или находить в них элементы по условиям.
Вы узнаете про глобальный объект, который служит для работы с математическими операциями (например, взятие корня, вычисление синуса и другие), создание случайных чисел и много другое.
Вы узнаете, как в JavaScript работать с JSON-объектами: легко переводить их в строки и наоборот.
В JavaScript есть встроенный глобальный объект для работы с датами и временем, с которым вы познакомитесь в этом уроке.
В этом видео вы узнаете, что такое Local Storage и как с его помощью локально в браузере клиента сохранять любые данные, которые будут доступны даже после перезагрузки страницы.
Это первый практический блок из двух в данном курсе. В нем с нуля, применяя базовые знания, показано, как создать игру на JavaScript. Игра будет заключаться в том, что за выбранное вами время необходимо будет прокликать как можно больше случайно сгенерированных элементов разных размеров и цветов.
В этом видео показан финальный результат, и разрабатывается стратегия по созданию данного приложения.
В этом уроке начинается создание игры и пишутся первые строчки кода, являющиеся основой будущей игры.
Пишется функция, которая позволит генерировать элемент квадрата в рамках игрового поля.
Вы узнаете, как написать функцию, которая генерирует случайное значение в диапазоне заданных чисел. Далее на основе этой функции будут случайно задаваться размеры и положение квадрата.
В этом видео реализуется таймер обратного отсчета, который будет считать время до конца игры. Также реализуется функционал по самостоятельной настройке времени игры.
В этом уроке создается отображение пользователю результата его игры.
В этом видео показана оптимизация кода приложения и закончивается написание функционала игры.
Реализуйте задание случайного цвета квадрату
Данный блок является продвинутым, в нем рассматривается «сложная» теория JavaScript с углублением. Вы узнаете про то, что такое прототипирование, как оно работает в рамках языка и какие полезные функции можно делать. Вы узнаете про свойства объектов, как ими можно управлять. Узнаете про функции, как управлять передачей контекста и познакомитесь с таким понятием как замыкания.
В этом уроке вы узнаете про то, как устроен JavaScript и что он построен на прототипах. Рассматривается что такое объекты, как они работают, как устроены прототипы.
В этом видео вы подробней посмотрите на прототипы и на конкретных примерах разбираются способы их работы.
В этом уроке вы узнаете про то, как работает функция Object Create и как с помощью нее можно создавать и конфигурировать очень гибкие и кастомизируемые объекты.
Вы узнаете про два способа с помощью которых можно получить доступ и проитерировать все ключи объекта: Object.keys и циклы For In. Так же вы узнаете про функцию hasOwnProperty.
В этом уроке вы узнаете про такой концепт в JavaScript как замыкания. Показано создание двух примеров с замыканиями, показано, как они работают и узнаете про области применения замыканий.
В этом уроке вы узнаете более детально про то, что такое ключевое слово This, какие особенности работы есть с контекстом и что можно реализовывать с помощью данного объекта.
В этом видео вы узнаете про три важных функции: Call, Bind, Apply с помощью которых можно управлять контекстом и его передачей в объектах и функциях.
Задание: реализуйте возможность используя прототип, чтобы у каждого массива был новый метод, позволяющий удваивать значение каждого элемента с учетом типа данных таким образом, чтобы:
Пройдя данный блок, вы познакомитесь с современным стандартом языка - EcmaScript 6. В данном блоке вы узнаете про все основные изменения, которые наиболее часто применяются в практике, такие как: переменные, стрелочные функции, объекты, новые операторы и удобные синтаксические изменения.
Вы познакомитесь с двумя новыми способами создания переменных: с конструкцией Let для изменяемых переменных и Const для неизменяемых.
В этом видео вы узнаете про то, как создаются и работают стрелочные функции. Так же вы узнаете разницу между созданием функции через ключевое слово Function и стрелочной функцией при работе с контекстом.
Вы узнаете, как добавлять параметры по умолчанию в функциях и методах.
В этом видео вы подробней узнаете про новые способы работы с объектами и новыми синтаксическими конструкциями в языке.
Вы узнаете про два похожих оператора: Rest и Spread и узнаете на множестве примеров чем они отличаются, как работают и какие особенности у них есть.
В этом видео вы познакомитесь с нововведениями, которые коснулись строк: новые методы и способы нативной шаблонизации.
В этом уроке вы узнаете какие синтаксические конструкции добавили в язык, для того чтобы очень просто реализовывать ООП. Вы узнаете про такие ключевые слова, как: Class, Extends, Super и Constructor и на примерах увидите, как их использовать.
Задание: реализуйте класс Dropdown, который будет инициализировать компонент выбора элементов по функционалу похожий на обычный HTML-элемент Select, но полностью реализованный вашим кодом без Select-тега.
В данном блоке рассмотрено, как работать с асинхронными операциями в языке JavaScript. Вы узнаете про новые операторы Async Await и способы их применения для еще большего упрощения кода. После вы узнаете и научитесь более детальной работе с Promise.
В этом уроке вы узнаете, как работать с нативными асинхронными функциями, такие как setTimeout и setInterval, а также узнаете про то, как их очищать и настраивать.
В этом видео показано создание эмуляции клиент серверного взаимодействия и последовательно обрабатывается 5 асинхронных запросов используя Callbacks.
В этом видео вы познакомитесь с таким классом как Promise, который позволяет очень удобно работать с асинхронными функциями. Далее показано, как переписать прошлый урок с эмуляцией на Promise и увидите, как эти подходы отличаются.
Вы узнаете про функцию Fetch, которая позволяет очень удобно делать асинхронные Ajax-запросы на удаленные сервера в фоновом режиме, используя API Promise.
В этом уроке вы познакомитесь с новыми операторами Async Await, которые сильно упрощают взаимодействие с асинхронным кодом и превращают его в синхронный.
В этом видео вы узнаете про два удобных метода у Promise: Race и All, которые упрощают работу с несколькими асинхронными запросами и позволяют легко управлять ими.
Реализуйте класс MyPromise, который будет работать точно так же, как и Promise. Достаточно реализовать методы: Then, Catch, Finally. Методы All, Race делать не нужно.
Наиболее важный итоговый практический блок, в котором применяются все знания, полученные в данном курсе. Перед тем как его проходить стоит ознакомиться с двумя бонусными блоками по Webpack и основам NodeJS, так как в этом блоке создается приложение, используя самые передовые методы и инструменты разработки. В результате данного блока создается полноценное приложение на чистом JavaScript, которое по своей сути будет блогом.
В этом уроке показано финальное приложение для того, чтобы понимать, какие элементы в нем будут присутствовать, и далее разрабатывается стратегия того, как будет вестись разработка.
В этом уроке настраиваются необходимые инструменты для того, чтобы подготовить окружающую среду для максимально эффективной разработки. Показана инициализация проекта и создание файла инструкции package.json.
В этом видео показана настройка WebPack для вашего проекта, настраивается два режима сборки: версия для продакшн билда и для разработки.
В этом видео настраивается babel для компиляции проекта для того, чтобы можно было писать, используя самые последние возможности языка, и они были так же доступны в любых других браузерах. Также подключаются полифилы для проекта.
В этом видео начнется разработка и создается общий класс компонента, от которого будут наследоваться все компоненты в приложении. Далее создается первый компонент.
В этом уроке создается компонент, который отвечает за окно приветствия и реализуется так, чтобы оно показывалось только при первом посещении сайта пользователем.
В этом уроке показано создание компонента навигации, отвечающим за переключение видимости компонентов. Вы узнаете, как реализовать возможность отображения выбранной вкладки.
В этом уроке вы узнаете про то, как при переключении вкладки показывать нужный компонент и скрывать предыдущие.
В этом видео создается форма, которая служит для создания новых постов в системе.
В этом видео вы узнаете один из способов универсальной динамической валидации формы, где можно очень гибко настраивать валидаторы и добавлять их на любые контролы внутри формы.
В этом видео реализуется возможность по отображению ошибки на контроле если он не прошел валидацию, а если прошел, то ошибка будет автоматически удаляться.
В этом уроке создается приложение с базой данных Firebase, и сохраняется первый пост уже на сервере.
В этом видео создается сервис, который будет отвечать за работу с API и реализуется метод, который позволит получать список всех постов с сервера.
В этом видео вы узнаете, как вывести на страницу список всех постов. Вначале показана загрузка их с севера, дальше приведение к локальному формату, а потом они циклом выводятся в HTML шаблон.
В этом уроке создается новый компонент, который будет отвечать за индикацию загрузки данных с сервера. Далее создаются компоненты и реализуется даннаю возможность.
В этом видео вы узнаете, как добавлять в избранное любой из постов используя Local Storage.
В этом уроке реализуется последний компонент в приложении, который будет отвечать за вывод избранных постов в список и загрузку отдельного поста используя его ID.
В этом видео рассматривается готовое приложение и показано, как выложить его на удаленный хостинг Firebase.
При деплои приложения возникает 2 неточности связанных с минификацией кода, потому в этом уроке показано, как починить приложение и заново залить его на удаленный хостинг уже без ошибок.
Задание: в списке избранное выведите названия заметок, а не их ID. Функционал должен остаться такой же