Webformyself javascript полное руководство для современной веб разработки

• Изучив курс, вы сможете создавать интернет-магазины на OpenCart со своим уникальным дизайном, который нужен вам и вашим заказчикам
• Создаваемый вами интернет-магазин будет адаптивным, то есть ваш магазин или магазин вашего заказчика не будет терять прибыль от посетителей с мобильных устройств
• Именно за адаптивные интернет-магазины с уникальным дизайном заказчики готовы платить большие деньги. Вы сможете увеличить заработок со своего магазина или вы будете больше зарабатывать на создании адаптивных интеренет-магазинов с уникальным дизайном
• Так же, изучив курс, вы сможете создавать уникальные шаблоны OpenCart и зарабатывать на этом, продавая их на специальных сайтах
• Изучив курс, вы не только научитесь делать интернет-магазины с уникальным дизайном, но и сможете делать специфический функционал, который нужен именно вашему интернет-магазину или магазину вашего заказчика
• Умея создавать специфический функционал для интернет-магазинов, который невозможно реализовать стандартными расширениями, вы сможете создавать такие магазины, за разработку которых готовы платить действительно большие деньги
• Умея создавать свои модули и модификаторы, вы сможете их разрабатывать и продавать, так же, как и шаблоны, на специальных сайтах. Тем самым вы обеспечите себе пассивный доход

Подробнее:

Скачать:

• Блок №1. Что такое JavaScript

В данном блоке говорится о том, что такое JavaScript, про то, как он работает. Далее говорится про выбор оптимальной среды разработки, в которой идет дальнейшая разработка на протяжении курса. В последнем уроке пишется первая мини-программа на JavaScript и разбираются способы включения скриптов в HTML файле.

• Урок №1. О курсе

В этом уроке вы узнаете про структуру курса, для кого он нужен, как его проходить и про автора.

• Урок №2. Что такое JavaScript

В данном видео вы узнаете про то, что такое JavaScript, для чего он служит. Вы узнаете, как появился данный язык и что с помощью него можно создавать.

• Урок №3. Редакторы кода

В этом уроке вы узнаете про самый оптимальный редактор кода, в котором будет вестись разработка на протяжении курса. Показана установка Visual Studio Code от компании Microsoft и настройка ее с помощью плагинов для удобной разработки.

• Урок №4. Выбор браузера

В данном уроке вы узнаете, чем отличаются разные браузеры друг от друга и выберете самый оптимальный из них для разработки — Google Chrome. Далее вы познакомитесь с инструментами для разработки, встроенные в сам браузер, которые будут использоваться на протяжении всего курса.

• Урок №5. Способ подключения в HTML

В этом уроке вы узнаете про несколько разных способ, с помощью которых можно подключить JavaScript к HTML странице, через которую будут запускаться скрипты.

• Блок №2. Основы JavaScript

Изучение начнется со старой версии языка — EcmaScript 5. А дальше осуществляется переход к самым последним нововведениям. В курсе рассмотрена именно эта версия, так как на текущий момент большое количество проектов еще написаны на старой версии и для их понимания необходимо понимать все аспекты языка.

• Урок №1. Переменные

В этом уроке вы узнаете про то, что такое переменные и как они создаются в JavaScript.

• Урок №2. Типы данных

В этом уроке вы узнаете про то, какие типы данных есть в языке несмотря на то, что JavaScript является не строго типизированным. Вы познакомитесь с шестью базовыми типами данных и для каждого из типов увидите примеры.

• Урок №3. Базовые операции

В этом видео вы узнаете про базовые операции, которые есть в JavaScript. Рассматриваются некоторые из них, такие как сложение, присвоение, умножение, вычитание и деление.

• Урок №4. Приоритет операций

Вы познакомитесь с таким понятием как приоритет операций (Operator Precedence): узнаете в каком порядке интерпретатор JavaScript выполняет операции.

• Урок №5. Больше операторов

В этом уроке вы познакомитесь еще с некоторыми важными операторами, которые часто используются при программировании, такие как взятие остатка от деления, инкремент и другие.

• Урок №6. Операторы сравнения

Вы познакомитесь с операторами, отвечающими за сравнение различных типов данных и значений.

• Урок №7. Как работают логические операторы

В этом уроке вы узнаете про то, как работает Boolean логика вне зависимости от языка программирования. На диаграмме вы увидите примеры и после вы напишите на языке JavaScript более сложные примеры, применяя базовые принципы.

• Урок №8. Условные операторы

В этом уроке вы познакомитесь с условными операторами, которые также применимы почти для любых языков программирования: конструкций If Else

• Урок №9. Тернарные операторы

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

• Урок №10. Оператор Switch Case

В этом уроке вы познакомитесь с альтернативной для некоторых записей конструкцией Switch Case, которая упрощает блок условных операторов.

• Урок №11. Функции. Задание*

В этом уроке вы узнаете, как создаются и инициализируются функции в JavaScript.

Задание: перепишите функцию checkAndLogAge таким образом, чтобы:

1. В консоли можно было определить, что это за объект (человек или машина).
2. Мы могли сами определять с каким возрастом сравнивать (не только 10 лет, но и любой другой возраст), причем это должно быть отображено в консоли.

• Урок №12. Способы создания функций

В этом уроке вы узнаете про 2 способа создания функций: через ключевое слово Var и Function. Далее вы узнаете, чем отличаются эти способы и какой способ лучше использовать на практике.

• Урок №13. Строки

В этом уроке вы более подробно познакомитесь с типом данных строки, узнаете какие встроенные методы есть у строк, с помощью которых можно упрощать работу и узнаете про способы создания строк.

• Урок №14. Числа

Вы познакомитесь более детально с типом данных числа, узнаете какие встроенные методы есть у чисел, какие встроенные функции в язык есть для работы с числами и какие есть граничные значения у данного типа данных.

• Урок №15. Массивы

Вы узнаете про то, что такое массивы в языке JavaScript, за что они отвечают и к какому типу данных принадлежат.

• Урок №16. Объекты

В этом видео вы познакомитесь с основами того, чем являются объекты и как с ними работать.

• Урок №17. Циклы

В этом видео вы узнаете про то, как циклы упрощают разработку и про то, как ими пользоваться на примере встроенного цикла For.

• Блок №3. Работа с DOM

В данном блоке изучается взаимодействие с DOM-деревом. Разбирается, как получать доступ к DOM-элементам, как управлять состояниями элементов: менять свойства, контент, атрибуты и прочее. Рассматривается, как добавлять динамику веб страницам путем добавления событий на элементы. Далее говорится про свойства событий и способы их управления.

• Урок №1. Что такое DOM

В этом уроке вы познакомитесь с таким понятием, как DOM-дерево. Узнаете про то, какие объекты есть в JavaScript при работе с ним в браузере.

• Урок №2. Доступ к элементам

В этом уроке вы познакомитесь со старыми и новыми методами, которые позволяют получать доступ к DOM-элементам прямо из скрипта.

• Урок №3. Содержимое элементов

Вы познакомитесь с возможностями внутри JavaScript, которые позволяют в динамичном режиме менять текстовое содержимое элементов или даже их HTML-код.

• Урок №4. Атрибуты

В этом видео вы узнаете, как с помощью двух встроенных методов вы можете менять любые атрибуты у элементов: менять их значения, удалять и просто считывать их значение.

• Урок №5. Классы

В этом уроке вы узнаете про удобный API ClassList у элементов, который позволяет крайне просто манипулировать различными классами у элементов.

• Урок №6. Добавление событий

В этом видео вы узнаете, как добавлять динамики вашим веб страницам с помощью событий и функции addEventListener, познакомитесь с возможными событиями, которые поддерживает JavaScript.

• Урок №7. Всплытие и погружение

В этом уроке вы узнаете про то, как отличается модель поведения событий: всплытие событий и погружение событий на примере DOM-элементов.

• Урок №8. Объект события

В этом видео подробно рассматривается объект события и говорится, что с помощь него можно сделать. Также вы узнаете, что такое функции preventDefault и stopPropagation, и чем они отличаются друг от друга.

• Урок №9. Делегирование событий

В этом уроке вы узнаете про оптимальную стратегию добавления событий, которая позволяет максимально экономить память при наличии большого количества элементов с событиями.

• Блок №4. Дополнительные возможности

В данном блоке вы познакомитесь с некоторыми дополнительными возможностями, заложенными в JavaScript, которые не были освещены ранее, но крайне важны для дальнейшего прохождения курса. Вы узнаете про способы асинхронной загрузки скриптов, способы взаимодействия с пользователем и про некоторые глобальные объекты, позволяющие работать с данными: математические формулы, операции, работы с массивами. Далее вы узнаете про методы работы с датами и временем, способы работы с JSON-объектами и методы хранения данных локально в браузере пользователя.

• Урок №1. Атрибут Async Defer

Вы узнаете, чем отличается атрибут у HTML-тега Script: Async от Defer и как с помощью данных атрибутов можно легко оптимизировать загрузку скриптов и отслеживать последовательность их загрузки.

• Урок №2. Взаимодействие с пользователем

Вы познакомитесь с основными встроенными методами взаимодействия с пользователем: с консолью и с тремя всплывающими окнами.

• Урок №3. Методы массивов

В этом уроке вы узнаете про полезные встроенные методы у массивов, которые позволяют крайне просто изменять массивы или находить в них элементы по условиям.

• Урок №4. Объект Math

Вы узнаете про глобальный объект, который служит для работы с математическими операциями (например, взятие корня, вычисление синуса и другие), создание случайных чисел и много другое.

• Урок №5. Объект JSON

Вы узнаете, как в JavaScript работать с JSON-объектами: легко переводить их в строки и наоборот.

• Урок №6. Дата и время с Date

В JavaScript есть встроенный глобальный объект для работы с датами и временем, с которым вы познакомитесь в этом уроке.

• Урок №7. Хранение данных в localStorage

В этом видео вы узнаете, что такое Local Storage и как с его помощью локально в браузере клиента сохранять любые данные, которые будут доступны даже после перезагрузки страницы.

• Блок №5. Практика. Создание приложения

Это первый практический блок из двух в данном курсе. В нем с нуля, применяя базовые знания, показано, как создать игру на JavaScript. Игра будет заключаться в том, что за выбранное вами время необходимо будет прокликать как можно больше случайно сгенерированных элементов разных размеров и цветов.

• Урок №1. Введение

В этом видео показан финальный результат, и разрабатывается стратегия по созданию данного приложения.

• Урок №2. Начало игры

В этом уроке начинается создание игры и пишутся первые строчки кода, являющиеся основой будущей игры.

• Урок №3. Создание квадрата

Пишется функция, которая позволит генерировать элемент квадрата в рамках игрового поля.

• Урок №4. Случайные значения

Вы узнаете, как написать функцию, которая генерирует случайное значение в диапазоне заданных чисел. Далее на основе этой функции будут случайно задаваться размеры и положение квадрата.

• Урок №5. Реализация таймера

В этом видео реализуется таймер обратного отсчета, который будет считать время до конца игры. Также реализуется функционал по самостоятельной настройке времени игры.

• Урок №6. Вывод результата

В этом уроке создается отображение пользователю результата его игры.

• Урок №7. Завершение

В этом видео показана оптимизация кода приложения и закончивается написание функционала игры.

• Урок №8. Задание «Случайный цвет»

Реализуйте задание случайного цвета квадрату

• Блок №6. Объекты и функции

Данный блок является продвинутым, в нем рассматривается «сложная» теория JavaScript с углублением. Вы узнаете про то, что такое прототипирование, как оно работает в рамках языка и какие полезные функции можно делать. Вы узнаете про свойства объектов, как ими можно управлять. Узнаете про функции, как управлять передачей контекста и познакомитесь с таким понятием как замыкания.

• Урок №1. Что такое объекты и прототипы

В этом уроке вы узнаете про то, как устроен JavaScript и что он построен на прототипах. Рассматривается что такое объекты, как они работают, как устроены прототипы.

• Урок №2. Как работают прототипы

В этом видео вы подробней посмотрите на прототипы и на конкретных примерах разбираются способы их работы.

• Урок №3. Создание и настройка объектов

В этом уроке вы узнаете про то, как работает функция Object Create и как с помощью нее можно создавать и конфигурировать очень гибкие и кастомизируемые объекты.

• Урок №4. Итерация ключей объекта

Вы узнаете про два способа с помощью которых можно получить доступ и проитерировать все ключи объекта: Object.keys и циклы For In. Так же вы узнаете про функцию hasOwnProperty.

• Урок №5. Как работают замыкания

В этом уроке вы узнаете про такой концепт в JavaScript как замыкания. Показано создание двух примеров с замыканиями, показано, как они работают и узнаете про области применения замыканий.

• Урок №6. Что такое контекст

В этом уроке вы узнаете более детально про то, что такое ключевое слово This, какие особенности работы есть с контекстом и что можно реализовывать с помощью данного объекта.

• Урок №7. Привязка контекста

В этом видео вы узнаете про три важных функции: Call, Bind, Apply с помощью которых можно управлять контекстом и его передачей в объектах и функциях.

• Урок №8. Задача: определить метод для всех массивов*

Задание: реализуйте возможность используя прототип, чтобы у каждого массива был новый метод, позволяющий удваивать значение каждого элемента с учетом типа данных таким образом, чтобы:

1. Для чисел это возведение в квадрат.
2. Для строк это удваивание строки.
3. Метод не изменял существующий массив и возвращал новый.

• Блок №7. Новый JavaScript: ES6

Пройдя данный блок, вы познакомитесь с современным стандартом языка — EcmaScript 6. В данном блоке вы узнаете про все основные изменения, которые наиболее часто применяются в практике, такие как: переменные, стрелочные функции, объекты, новые операторы и удобные синтаксические изменения.

• Урок №1. Переменные Let Const

Вы познакомитесь с двумя новыми способами создания переменных: с конструкцией Let для изменяемых переменных и Const для неизменяемых.

• Урок №2. Стрелочные функции

В этом видео вы узнаете про то, как создаются и работают стрелочные функции. Так же вы узнаете разницу между созданием функции через ключевое слово Function и стрелочной функцией при работе с контекстом.

• Урок №3. Параметры по умолчанию

Вы узнаете, как добавлять параметры по умолчанию в функциях и методах.

• Урок №4. Объекты

В этом видео вы подробней узнаете про новые способы работы с объектами и новыми синтаксическими конструкциями в языке.

• Урок №5. Операторы Rest и Spread

Вы узнаете про два похожих оператора: Rest и Spread и узнаете на множестве примеров чем они отличаются, как работают и какие особенности у них есть.

• Урок №6. Строки

В этом видео вы познакомитесь с нововведениями, которые коснулись строк: новые методы и способы нативной шаблонизации.

• Урок №7. Классы и наследование

В этом уроке вы узнаете какие синтаксические конструкции добавили в язык, для того чтобы очень просто реализовывать ООП. Вы узнаете про такие ключевые слова, как: Class, Extends, Super и Constructor и на примерах увидите, как их использовать.

• Урок №8. Задача: написать свой плагин*

Задание: реализуйте класс Dropdown, который будет инициализировать компонент выбора элементов по функционалу похожий на обычный HTML-элемент Select, но полностью реализованный вашим кодом без Select-тега.

• Блок №8. Асинхронность

В данном блоке рассмотрено, как работать с асинхронными операциями в языке JavaScript. Вы узнаете про новые операторы Async Await и способы их применения для еще большего упрощения кода. После вы узнаете и научитесь более детальной работе с Promise.

• Урок №1. Интервалы и таймеры

В этом уроке вы узнаете, как работать с нативными асинхронными функциями, такие как setTimeout и setInterval, а также узнаете про то, как их очищать и настраивать.

• Урок №2. Старый поход: Callbacks

В этом видео показано создание эмуляции клиент серверного взаимодействия и последовательно обрабатывается 5 асинхронных запросов используя Callbacks.

• Урок №3. Как работает Promise

В этом видео вы познакомитесь с таким классом как Promise, который позволяет очень удобно работать с асинхронными функциями. Далее показано, как переписать прошлый урок с эмуляцией на Promise и увидите, как эти подходы отличаются.

• Урок №4. Метод Fetch

Вы узнаете про функцию Fetch, которая позволяет очень удобно делать асинхронные Ajax-запросы на удаленные сервера в фоновом режиме, используя API Promise.

• Урок №5. Операторы: Async Await

В этом уроке вы познакомитесь с новыми операторами Async Await, которые сильно упрощают взаимодействие с асинхронным кодом и превращают его в синхронный.

• Урок №6. Еще о Promise

В этом видео вы узнаете про два удобных метода у Promise: Race и All, которые упрощают работу с несколькими асинхронными запросами и позволяют легко управлять ими.

• Урок №7. Задание: реализовать промисы

Реализуйте класс MyPromise, который будет работать точно так же, как и Promise. Достаточно реализовать методы: Then, Catch, Finally.  Методы All, Race делать не нужно.

• Блок №9. Практика. Создание приложения

Наиболее важный итоговый практический блок, в котором применяются все знания, полученные в данном курсе. Перед тем как его проходить стоит ознакомиться с двумя бонусными блоками по Webpack и основам NodeJS, так как в этом блоке создается приложение, используя самые передовые методы и инструменты разработки. В результате данного блока создается полноценное приложение на чистом JavaScript, которое по своей сути будет блогом.

• Урок №1. Введение

В этом уроке показано финальное приложение для того, чтобы понимать, какие элементы в нем будут присутствовать, и далее разрабатывается стратегия того, как будет вестись разработка.

• Урок №2. Начало работы

В этом уроке настраиваются необходимые инструменты для того, чтобы подготовить окружающую среду для максимально эффективной разработки. Показана инициализация проекта и создание файла инструкции package.json.

• Урок №3. Настройка WebPack

В этом видео показана настройка WebPack для вашего проекта, настраивается два режима сборки: версия для продакшн билда и для разработки.

• Урок №4. Настройка Babel

В этом видео настраивается babel для компиляции проекта для того, чтобы можно было писать, используя самые последние возможности языка, и они были так же доступны в любых других браузерах. Также подключаются полифилы для проекта.

• Урок №5. Создание первого компонента

В этом видео начнется разработка и создается общий класс компонента, от которого будут наследоваться все компоненты в приложении. Далее создается первый компонент.

• Урок №6. Компонент заголовок

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

• Урок №7. Создание навигации

В этом уроке показано создание компонента навигации, отвечающим за переключение видимости компонентов. Вы узнаете, как реализовать возможность отображения выбранной вкладки.

• Урок №8. Работающие табы

В этом уроке вы узнаете про то, как при переключении вкладки показывать нужный компонент и скрывать предыдущие.

• Урок №9. Создание формы

В этом видео создается форма, которая служит для создания новых постов в системе.

• Урок №10. Валидация формы

В этом видео вы узнаете один из способов универсальной динамической валидации формы, где можно очень гибко настраивать валидаторы и добавлять их на любые контролы внутри формы.

• Урок №11. Отображение ошибок валидации

В этом видео реализуется возможность по отображению ошибки на контроле если он не прошел валидацию, а если прошел, то ошибка будет автоматически удаляться.

• Урок №12. Сохранение записи в Firebase

В этом уроке создается приложение с базой данных Firebase, и сохраняется первый пост уже на сервере.

• Урок №13. Получение данных с сервера

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

• Урок №14. Вывод списка постов

В этом видео вы узнаете, как вывести на страницу список всех постов. Вначале показана загрузка их с севера, дальше приведение к локальному формату, а потом они циклом выводятся в HTML шаблон.

• Урок №15. Добавление индикатора загрузки

В этом уроке создается новый компонент, который будет отвечать за индикацию загрузки данных с сервера. Далее создаются компоненты и реализуется даннаю возможность.

• Урок №16. Сохранение в избранное

В этом видео вы узнаете, как добавлять в избранное любой из постов используя Local Storage.

• Урок №17. Вывод списка избранного

В этом уроке реализуется последний компонент в приложении, который будет отвечать за вывод избранных постов в список и загрузку отдельного поста используя его ID.

• Урок №18. Обзор приложения и деплой на Firebase

В этом видео рассматривается готовое приложение и показано, как выложить его на удаленный хостинг Firebase.

• Урок №19. Исправление ошибок

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

• Урок №20. Задание*

Задание: в списке избранное выведите названия заметок, а не их ID. Функционал должен остаться такой же

Актуальные и применимые на практике знаний (а не просто голой абстрактной теории) в удобном формате с бонусами и практическими разборами, благодаря которым можно существенно повысить уровень знаний в быстрые сроки.

Курс построен таким образом, что в нем собрана исключительно теоретическая информация применимая в практике без лишнего, с учетом двух практических блоков, где наглядно показывается применение теории: создана простая игра и приложение личного блога.

JavaScript самый популярный веб-язык программирования. Сегодня очень популярны во Front-end разработке такие фреймворки, как Vue.js, React.js, Angular.js. Более того, сегодня и серверная часть веб-приложений также может быть написана на JavaScript, используя node.js. И знания по javascript открывают двери во front-end разработку или даже javascript Full-Stack разработку, где заработки начинаются от 100.000.