Как выучить javascript с нуля
Перейти к содержимому

Как выучить javascript с нуля

  • автор:

Основы JavaScript

Курс Основы JavaScript

На этом курсе вы изучите основы JavaScript — одного из самых широко используемых языков.

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

Изучение основ программирования на JavaScript с самого нуля требует особого способа организации учебного материала. Поэтому во время обучения вы будете не только изучать новые темы, но и отработаете свои навыки, привыкните к языковым конструкциям.

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

Как выучить JavaScript с нуля: интервью с автором курса Игорем Антоновым

Как освоить востребованную и высокооплачиваемую профессию? Выучить JavaScript! О том, в какой последовательности учить технологии с нуля до трудоустройства, рассказали на бесплатном лайве.

Вам будет полезен просмотр лайва, если вы:

  • Хотите освоить новую актуальную и востребованную профессию.
  • Думаете изучить фронтенд-разработку, но не понимаете с чего начать.
  • Имеете базовые знания в вёрстке и программировании, но хотите прокачать навыки.

Программа лайва:

  • Какие преимущества у JavaScript и стоит ли выбирать его в качестве первого языка программирования.
  • Какие технологии необходимо изучить, чтобы пройти путь с нуля до трудоустройства.
  • Что можно сделать на чистом JS и с помощью фреймворков.
  • Насколько актуальна профессия фронтенд-разработчика.

Спикеры:

  • Лёша Симоненко — директор по развитию HTML Academy.
  • Игорь Антонов — автор профессиональных курсов по JavaScript.

Бонусы. Начните работать удалённо, освоив одну из самых востребованных профессий 2022 года — веб-разработчик! Выбирайте направление: «Фронтенд-разработчик», «React-разработчик» или «Фулстек-разработчик».

  • Наша группа в VK
  • Наш канал на YouTube
  • Наша страница в Twitter
  • Наш канал в Telegram

Книга «JavaScript с нуля до профи»

image

Привет, Хаброжители!

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

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

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

Для кого эта книга

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

Объектно-ориентированное программирование

Прежде чем мы начнем погружаться прямиком в увлекательные классы, давайте кратко поговорим об объектно-ориентированном программировании (ООП). ООП — очень важная парадигма программирования, в которой код структурируется в виде объектов, что приводит к более удобному обслуживанию и многократному использованию кода. Работа с ООП учит вас по-настоящему продумывать всевозможные ключевые моменты в объектах, объединив свойства таким образом, чтобы их можно было сгруппировать в схеме, называемой классом, который, в свою очередь, может наследовать свойства родительского класса.

Например, когда мы берем животное, мы можем описать его определенные свойства: вид, вес, рост, максимальную скорость, цвет и многое другое. Если после этого нам нужно будет охарактеризовать конкретный вид рыбы, мы можем рассмотреть все свойства «животного», добавив туда также несколько свойств, специфичных для рыбы. То же самое справедливо и для собак: мы применяем все свойства «животного» и добавляем к ним несколько характеристик, специфичных для собак. Таким образом, у нас есть повторно используемый код нашего класса «животное». И если вдруг мы забыли какое-то свойство, очень важное для многих животных в приложении, останется только добавить его в класс «животные».

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

Классы и объекты

Кратко напомним: объекты представляют собой набор свойств и методов. Мы рассматривали их в главе 3. Свойства объекта должны иметь разумные имена. Так, например, если у нас есть объект person (человек), у него должны быть свойства с названиями age (возраст) и lastName (фамилия) и заданными значениями. Перед вами пример объекта:

let dog = < dogName: "JavaScript", weight: 2.4, color: "brown", breed: "chihuahua" >;

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

class ClassName < constructor(prop1, prop2) < this.prop1 = prop1; this.prop2 = prop2; >> let obj = new ClassName("arg1", "arg2");

Код определяет класс с именем ClassName, объявляет переменную obj и делает ее новым экземпляром объекта. Приводятся два аргумента, они будут использоваться конструктором для инициализации свойств. Как вы заметили, параметры для конструктора и свойства класса (prop1 и prop2) носят одинаковые названия. Свойства класса можно распознать по ключевому слову this перед ними. Ключевое слово this относится к объекту, которому принадлежит, поэтому является первым свойством экземпляра ClassName.

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

function Dog(dogName, weight, color, breed) < this.dogName = dogName; this.weight = weight; this.color = color; this.breed = breed; >let dog = new Dog("Jacky", 30, "brown", "labrador");

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

class Dog < constructor(dogName, weight, color, breed) < this.dogName = dogName; this.weight = weight; this.color = color; this.breed = breed; >> let dog = new Dog("JavaScript", 2.4, "brown", "chihuahua");

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

console.log(dog.dogName, "is a", dog.breed, "and weighs", dog.weight, "kg.");

Результат вывода на экран:

JavaScript is a chihuahua and weighs 2.4 kg.

В следующем разделе мы погрузимся во все детали классов.

Классы

Вы можете задаться вопросом: если классы делают то же самое, что и простое определение объекта, зачем они вообще нужны? Ответ заключается в том, что классы, по сути, являются схемами для объектов. Если нужно создать 20 записей собак, придется писать гораздо меньше кода, когда у нас есть класс dog. При описывании каждого объекта по отдельности нам придется каждый раз указывать имена всех свойств. И можно легко сделать опечатку или неправильно прописать свойство. Классы пригодятся в подобных ситуациях.

Как показано в предыдущем разделе, мы используем ключевое слово class, чтобы сказать JavaScript, что хотим создать класс. Далее мы присваиваем имя классу. По общепринятым правилам имена классов начинаются с заглавной буквы.

Давайте рассмотрим различные элементы классов.

Метод constructor

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

Ниже вы можете рассмотреть пример использования метода constructor при создании класса Person:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >>

Под внешней оболочкой JavaScript инициализирует специальную функцию, основанную на методе constructor. Эта функция получает имя класса и создает объект с заданными свойствами. С помощью данной специальной функции вы можете прописывать экземпляры (объекты) класса.

А теперь перед вами код, создающий новый объект на основе класса Person:

let p = new Person("Maaike", "van Putten");

Именно слово new дает понять JavaScript, что требуется искать специальную функцию конструктора в классе Person и создавать новый объект. Конструктор вызывается и возвращает экземпляр объекта person с заданными свойствами. Этот объект сохраняется в переменной p.

Если использовать новую переменную p для логирования, можно увидеть, что свойства действительно установлены:

console.log("Hi", p.firstname);

Так будет выглядеть результат:

Hi Maaike

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

let p = new Person("Maaike");

Многие языки программирования выдали бы ошибку, но не JavaScript. Он просто присвоит оставшимся свойствам значение undefined. Давайте понаблюдаем за тем, что происходит, логируя результат:

console.log("Hi", p.firstname, p.lastname);

В консоли отобразится следующая запись:

Hi Maaike undefined

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

constructor(firstname, lastname = "Doe")

В результате на экран будет выведено не Hi Maaike undefined, а Hi Maaike Doe.

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

1. Создайте класс Person, включающий конструктор для firstname и lastname.
2. Создайте переменную и присвойте значение новому объекту Person, используя имя и фамилию вашего первого друга.
3. Теперь добавьте вторую переменную с именем второго друга, используя его имя и фамилию.
4. Выведите на экран обе записи с приветствием hello.

Методы

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

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there! I'm", this.firstname); >>

Вызвать метод greet для объекта Person можно следующим образом:

let p = new Person("Maaike", "van Putten"); p.greet();
Hi there! I'm Maaike

В классе можно указывать любое количество методов. В данном примере мы используем свойство firstname. Мы вызываем его с помощью this.property. Для чело­века с другим значением firstname, например Rob, на экран будет выведено следующее:

Hi there! I'm Rob

Методы, как и функции, могут принимать параметры и возвращать результаты:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there!"); >compliment(name, object) < return "That's a wonderful " + object + ", " + name; >>

Функция compliment сама не выводит никаких значений, поэтому мы логируем ее:

let compliment = p.compliment("Harry", "hat"); console.log(compliment);

Результат будет следующим:

That's a wonderful hat, Harry

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

Получите полное имя своего друга.

1. Используйте класс Person из практического занятия 7.1, добавив метод с названием fullname, который будет возвращать совокупное значение firstname и lastname.
2. Создайте значения для person1 и person2, используя фамилии и имена друзей.
3. Используя метод fullname внутри класса, верните полное имя одного или обоих человек.

Свойства

Свойства (иногда называемые полями) содержат данные класса. В конструкторах мы уже видели один тип свойств:

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >>

В данном случае класс Person получает два свойства от конструктора: firstname и lastname. Свойства можно добавлять и удалять, как мы проделывали это с объектами. К свойствам можно получить доступ за пределами класса, мы видели подобное, когда логировали значения вне класса, получая доступ к свойствам в экземпляре:

let p = new Person("Maaike", "van Putten"); console.log("Hi", p.firstname);

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

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

class Person < #firstname; #lastname; constructor(firstname, lastname) < this.#firstname = firstname; this.#lastname = lastname; >>

В данный момент к свойствам firstname и lastname доступа извне нет. Если попробуем ввести:

let p = new Person("Maria", "Saga"); console.log(p.firstname);
undefined

Если бы мы хотели убедиться, что можем создавать объекты только с именами, начинающимися на букву М, мы могли бы немного изменить конструктор:

constructor(firstname, lastname) < if(firstname.startsWith("M"))< this.#firstname = firstname; >else < this.#firstname = "M" + firstname; >this.#lastname = lastname; >

Теперь при попытке ввести значение firstname, которое не начинается на М, код добавит М в начало. Так, например, в консоли значение следующего имени будет отображено как Mkay:

let p = new Person("kay", "Moon");

Это очень простой пример проверки. На данный момент мы вообще не можем получить доступ к свойству извне класса после конструктора. Оно доступно только изнутри класса. Вот тут-то и вступают в игру геттеры и сеттеры.

Геттеры и сеттеры

Геттеры и сеттеры — это особые свойства, которые можно использовать для получения данных из класса и записи полей данных в классе. Геттеры и сеттеры являются вычисляемыми свойствами. Можно сказать, что они даже больше похожи на свойства, чем на функции. Мы называем их аксессорами (accessors). Геттеры и сеттеры выглядят как функции, потому что после них ставят скобки (()), но функциями они не являются!

Аксессоры начинаются с ключевых слов get и set. Хорошей практикой считается максимально закрывать поля и предоставлять доступ к ним с помощью геттеров и сеттеров. Благодаря этому свойства не могут быть заданы извне без контроля самого объекта. Подобный принцип называется инкапсуляцией. Класс инкапсулирует (помещает) данные и объект под контроль собственных полей.

Вот как это реализовать:

class Person < #firstname; #lastname; constructor(firstname, lastname) < this.#firstname = firstname; this.#lastname = lastname; >get firstname() < return this.#firstname; >set firstname(firstname) < this.#firstname = firstname; >get lastname() < return this.#lastname; >set lastname(lastname) < this.#lastname = lastname; >>

Геттер используется для получения свойства. Поэтому он не берет никаких параметров, а просто возвращает свойство. Сеттер действует наоборот: принимает параметр, присваивает новое значение свойству и ничего не возвращает. Сеттер может включать в себя больше логики, например проводить какую-то проверку, как мы увидим ниже. Геттер можно использовать вне объекта, как если бы он был свойством. Свойства больше не доступны напрямую извне класса, но к ним можно получить доступ через геттер, возвращающий значение, и через сеттер, присваивающий значение. Вот как можно это реализовать вне экземпляра класса:

let p = new Person("Maria", "Saga"); console.log(p.firstname);

Результат вывода на экран:

Maria

Мы создали новый объект Person с именем Maria и фамилией Saga. На выходе отображается имя, что стало возможным только благодаря наличию у нас средства доступа — геттера. Мы также можем задать значение чему-то другому, используя сеттер. Давайте обновим значение имени так, что теперь это будет не Maria, а Adnane:

p.firstname = "Adnane";

На данный момент в сеттере не происходит ничего особенного. Мы могли бы выполнить такую же проверку, как и в предыдущем конструкторе, например:

set firstname(firstname) < if(firstname.startsWith("M"))< this.#firstname = firstname; >else < this.#firstname = "M" + firstname; >>

Теперь код проверит, начинается ли firstname с буквы M. Если да, то значение firstname обновится до значения параметра. Если нет, код добавит M перед параметром.

Обратите внимание, что мы не обращаемся к firstname так, как если бы это была функция. Если вы допишете круглые скобки (()), то получите сообщение об ошибке, говорящей, что это не функция.

Наследование

Наследование — одна из ключевых концепций ООП. Согласно ей классы могут иметь дочерние классы, которые наследуют свойства и методы родительского класса. Например, если вам понадобятся все виды транспортных средств в приложении, вы можете задать класс с названием Vehicle, в котором укажете некоторые общие свойства и методы объектов. Для продолжения можете создавать дочерние классы, основанные на классе Vehicle, например boat, car, bicycle и motorcycle.

Вот сильно упрощенная версия класса Vehicle:

class Vehicle < constructor(color, currentSpeed, maxSpeed) < this.color = color; this.currentSpeed = currentSpeed; this.maxSpeed = maxSpeed; >move() < console.log("moving at", this.currentSpeed); >accelerate(amount) < this.currentSpeed += amount; >>

Здесь представлены два метода в классе Vehicle: move и accelerate. Это может быть класс Motorcyle, наследуемый от данного класса с использованием ключевого слова extends:

class Motorcycle extends Vehicle < constructor(color, currentSpeed, maxSpeed, fuel) < super(color, currentSpeed, maxSpeed); this.fuel = fuel; >doWheelie() < console.log("Driving on one wheel!"); >>

С помощью ключевого слова extends мы указываем, что определенный класс является дочерним по отношению к другому. В данном случае Motorcycle — дочерний класс Vehicle. Это значит, что у нас будет доступ к свойствам и методам класса Vehicle в классе Motorcycle. Сюда же мы добавили особый метод doWheelie() для описания езды на заднем колесе. Включать данную возможность в класс Vehicle не было смысла, потому что она специфична для определенных транспортных средств.

Слово super в конструкторе вызывает конструктор родителя — в данном случае конструктор Vehicle. Это гарантирует, что поля от родителя также заданы и что методы доступны без необходимости делать что-либо еще: они наследуются автоматически. Вызов super() не является обязательным, но вы должны использовать это ключевое слово при нахождении в классе, который наследуется от другого класса — иначе получите ReferenceError.

В классе Motorcycle у нас есть доступ к полям класса Vehicle, поэтому следующая конструкция будет работать:

let motor = new Motorcycle("Black", 0, 250, "gasoline"); console.log(motor.color); motor.accelerate(50); motor.move();

В результате вы увидите:

Black moving at 50

Мы не можем получить доступ к каким-либо конкретным свойствам или методам класса Motorcycle в классе Vehicle: не все транспортные средства являются мотоциклами, поэтому мы не можем быть уверены, что при описании нашего конкретного объекта понадобятся дочерние свойства или методы.

Сейчас мы не используем никаких геттеров и сеттеров, но определенно могли бы. Если в родительском классе есть геттеры и сеттеры, они также наследуются дочерним классом. Следовательно, мы могли бы влиять на то, какие свойства могут быть извлечены и изменены (и как) за пределами нашего класса. Обычно это хорошая практика.

Прототипы

Прототипы — это механизмы JavaScript, которые делают возможным существование объектов.

Если при создании класса никакие детали специально не уточняются, объекты наследуются от прототипа Object.prototype. Среди всех встроенных классов JavaScript, которые мы можем применять, этот довольно сложный. Нет необходимости изучать, как он реализован. Его можно считать базовым объектом, который всегда находится на вершине дерева наследования, а значит, всегда присутствует в наших объектах.

Для всех классов доступно свойство prototype, и оно всегда называется «прототип». Вызвать его можно так:

ClassName.prototype

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

class Person < constructor(firstname, lastname) < this.firstname = firstname; this.lastname = lastname; >greet() < console.log("Hi there!"); >>

И вот как добавить функцию в этот класс, используя prototype:

Person.prototype.introduce = function () < console.log("Hi, I'm", this.firstname); >;

Свойство prototype содержит в себе все методы и свойства объекта. Таким образом, добавление функции в prototype — это добавление функции в класс. Вы можете использовать prototype, чтобы добавлять свойства или методы объекту (как мы сделали выше с помощью функции introduce). Данный способ применим и для свойств:

Person.prototype.favoriteColor = "green";

После их можно вызывать из экземпляра класса Person:

let p = new Person("Maria", "Saga"); console.log(p.favoriteColor); p.introduce();

Мы получим следующий результат:

green Hi, I'm Maria

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

Следовательно, методы и свойства, определенные через prototype, точно такие же, как если бы они были определены в классе. Это означает, что, перезаписывая их для определенного экземпляра, вы не перезаписываете методы и свойства всех экземпляров. Например, если бы у нас был второй объект Person, он мог бы перезаписать значение favoriteColor, и это не изменило бы значение любимого цвета для объекта со значением firstname, равным Maria.

Прототипы не следует применять, если у вас есть контроль над кодом класса и вы хотите изменить его навсегда, — в таком случае просто измените класс. Однако с помощью прототипов вы можете расширить существующие объекты, в том числе с применением условий. Важно также знать, что встроенные объекты JavaScript имеют прототипы и наследуют от Object.prototype. Не меняйте данный прототип, иначе это повлияет на работу JavaScript.

Напишите класс, содержащий свойства для разных животных — в том числе звуки, издаваемые каждым видом — и создайте два (или более) объекта.

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

Об авторах

Лоренс Ларс Свекис является экспертом в области инновационных технологий, имеет широкий спектр теоретических знаний и реальный опыт в области веб-разработки. Начиная с 1999 года участвует в различных веб-проектах, как крупных, так и небольших. Преподает с 2015 года и обожает воплощать идеи в онлайн-жизнь. Для Лоренса учить и помогать людям — потрясающая возможность, поскольку ему нравится делиться знаниями с обществом.

Майке ван Путтен известна страстью к обучению и разработке программного обеспечения, стремлением сопровождать людей на их пути к новым высотам в карьере. К числу ее любимых языков относятся JavaScript, Java и Python. Как разработчик участвует в проектах по созданию программного обеспечения и как тренер — в различных сферах, начиная с IT для «чайников» и заканчивая продвинутыми темами для опытных специалистов. Любит создавать образовательный онлайн-контент на различных платформах, предназначенный для широкой аудитории.

Роб Персиваль — уважаемый веб-разработчик и преподаватель Udemy с аудиторией более 1,7 миллиона учеников. Более 500 000 из них приобрели его «Полный курс веб-разработчика 2.0», а также курсы разработчиков Android и iOS.

О научном редакторе

Крис Минник — активный автор, блогер, тренер, спикер и веб-разработчик. Его компания WatzThis? занимается поиском лучших способов обучения новичков навыкам обращения с компьютером и программированию.

Крис более 25 лет трудится full-stack-разработчиком и более десяти лет — преподавателем. Обучает веб-разработке, ReactJS и продвинутому JavaScript во многих крупнейших мировых компаниях, а также в публичных библиотеках, коворкингах и на личных встречах.

Крис Минник — автор и соавтор более десятка технических изданий для взрослых и детей, включая React JS Foundations, HTML and CSS for Dummies («HTML и CSS для чайников»), Coding with JavaScript for Dummies («JavaScript для чайников»), JavaScript for Kids, Adventures in Coding и Writing Computer Code.

По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Для Хаброжителей скидка 25% по купону — JavaScript

Где бесплатно учить JavaScript: 17 курсов для новичков

JavaScript — один из самых популярных языков программирования в мире. Его используют для создания сайтов, приложений и игр. Популярность подтверждает статистика — около 98% всех сайтов созданы с использованием JS, оставшиеся 2% — это статичные веб-страницы, например сайты-визитки, где не требуется взаимодействие с пользователем.

Но как с нуля научиться писать код на JS? Для обучения JavaScript в интернете можно найти сотни бесплатных и платных онлайн-курсов на русском и английском языке. Мы отобрали самые интересные и сгруппировали их по блокам:

  • Онлайн-курсы по JavaScript с интерактивными заданиями, тестами и домашними работами
  • Онлайн-курсы по JavaScript в формате видеоуроков и вебинаров

Онлайн-курсы по JavaScript с интерактивными заданиями, тестами и домашними работами

Один из лучших способов обучения — не просто читать теорию, а сразу же пробовать применять её на практике. В этом разделе собрали онлайн-курсы с интерактивными элементами: тренажёром для отработки кода, тестами и домашними работами. Продолжительность курсов индивидуальна, так как зависит от темпа обучающегося.

Stepik: «JavaScript для начинающих»

Хороший вариант для старта, объединяющий теорию с практическими заданиями и тестами. Курс разработан Антоном Холиным, создателем 5 курсов на платформе Stepik. На его страницу подписаны 295 000 человек, а курсы прошли 27 288 участников. Это очень большие числа для Stepik.

Для кого: курс рассчитан на начинающих JS-разработчиков. Однако в отзывах отмечают, что он сложноват для тех, кто не знаком с другими языками программирования, — в уроках иногда упускают важные моменты, а теория может быть написана слишком коротко.

Формат: самостоятельное обучение.

Механика: видеоуроки с тестовыми заданиями и интерактивными задачами.

Количество уроков: 17 уроков, 28 тестов и 23 интерактивные задачи.

«Хекслет»: «Основы JavaScript»

Курс от онлайн-школы «Хекслет», существующей с 2012 года. Программа построена вокруг практических заданий для отработки теории.

Для кого: курс рассчитан на новичков, но точно не будет простым, что подтверждают отзывы учеников на лендинге.

Формат: самостоятельное обучение языку программирования в тренажёре с практикой. Есть возможность задать вопрос по заданию в поддержке — они подскажут правильное направление решения.

Механика: теория в виде текста с упражнениями в тренажёре и тестированием.

Количество уроков: 39 уроков, 129 проверочных тестов и 46 упражнений в тренажёре. За время обучения получится выполнить 8 мини-проектов. Всё обучение займёт 51 час.

itProger: «JavaScript для начинающих»

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

Для кого: курс рассчитан на начинающих. После его прохождения можно продолжить углублённое обучение языку программирования на курсах по фронтенд- и бэкенд-разработке на JavaScript. Но, в отзывах много жалоб на слабую обратную связь от преподавателей.

Формат: самостоятельно прохождение теории и практики.

Механика: теория в текстовом виде с практическими заданиями. На сайте есть справочник и онлайн-редактор кода.

Количество уроков: 15 уроков и 89 заданий.

Онлайн-учебник по JavaScript

Это не образовательная платформа, а онлайн-учебник с задачами для самостоятельного изучения JavaScript с нуля. Разобраться получится в основах JS, функциях, генераторах и других понятиях, которые часто встречаются в работе фронтенд-разработчика.

Для кого: для начинающих разработчиков, которые хотят изучить JavaScript с нуля.

Формат: самостоятельно обучение.

Механика: текстовые уроки с практическими заданиями с правильными вариантами решения.

Количество уроков: 14 уроков по базовым темам.

Code Basics: онлайн-курс по JavaScript

Code Basics — бесплатный проект от онлайн-школы «Хекслет», созданный для изучения основ программирования. Программа позволит освоить базовые темы: арифметику, работу с переменными, типы данных и другое. В отзывах отмечают хорошую подачу материала и дружелюбное комьюнити.

Для кого: начинающие программисты.

Формат: самостоятельное обучение языку JS, построенное вокруг практики.

Механика: текстовые уроки с онлайн-тренажёром для выполнения практических заданий.

Количество уроков: 72 урока. Всё обучение занимает 25 часов.

beONmax: «JavaScript — полный курс с нуля до результата»

Курс для начинающих разработчиков с теорией и практическими заданиями по основам JavaScript. Перед тем как перейти к обучению, требуется самостоятельно изучить HTML и CSS.

Для кого: новички в программировании с базовыми знаниями HTML и CSS.

Формат: самостоятельное обучение языку JS.

Механика: видеоуроки с практическими заданиями и тестами.

Количество уроков: 48 уроков с 90 заданиями, 17 практическими упражнениями и 25 тестами. Обучение займёт 19 часов.

DoCode: «Основы JavaScript»

DoCode — платформа, существующая с 2015 года, с форумом для обучающих. Курс отличается от других тем, что в нём нет теории, а только задания для отработки практических навыков.

Для кого: начинающие JavaScript-разработчики со знанием теоретических основ языка программирования.

Формат: самостоятельное обучение JS.

Механика: практические задания для отработки навыков.

Количество уроков: 109 упражнений, рассчитанных на 10 часов.

«Нетология»: «Первые шаги в JavaScript: создаём сайт»

Курс с домашними заданиями от онлайн-школы «Нетология» для начинающих программистов. Итог прохождения — опубликованная веб-страница.

Для кого: для новичков в JS.

Формат: самостоятельное прохождение с разработкой итогового проекта.

Механика: видеолекции с практическими заданиями.

Количество уроков: 4 видеолекции и 6 часов самостоятельной практики.

Learn JavaScript

Важно! Этот курс на английском.

Learn JavaScript — это бесплатный интерактивный учебник по JavaScript с разбором основных понятий программирования: переменных, операторов, структур данных и так далее.

Для кого: для начинающих.

Формат: самостоятельное обучение JS.

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

Количество уроков: базовая часть курса состоит из 12 частей, продвинутая часть — из 7.

The Odin Project: JavaScript Basics

Важно! Этот курс на английском.

Проект Odin существует с 2013 года и поддерживается добровольцами, которые регулярно обновляют курсы. В JavaScript Basics рассказывают об основах JS: переменных, функциях и так далее. В учёбе упор делается на практику и создание собственных проектов. После завершения слушатель может выбрать, куда двигаться дальше: изучать Ruby и Ruby on Rails или JavaScript с Node.js/Express.

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

Формат: самостоятельное обучение языку программирования.

Механика: текстовые уроки со ссылками на дополнительные материалы и 3 простых практических проекта.

Количество уроков: 15 уроков и 3 практических проекта.

Sololearn: Introduction to JavaScript

Важно! Этот курс на английском.

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

Для кого: начинающие фронтенд-разработчики.

Формат: самостоятельное обучение языку JS. Помощь преподавателя доступна за дополнительную плату.

Механика: теория в виде текста, практические задания и тесты.

Количество уроков: 5 уроков.

Онлайн-курсы по JavaScript в формате видеоуроков и вебинаров

Курсы построенные на видеоуроках без интерактивных элементов в виде практических тренажёров или тестов. Все задания вам придётся выполнять самостоятельно в редакторе кода или IDE.

LoftSchool: «Основы JavaScript»

Курс из видеоуроков для начинающих от онлайн-школы LoftSchool, существующей с 2012 года. Преподаватель — Сергей Мелюков, Lead Engineer в «Яндексе». На курсе изучаются основные понятия и базовые возможности языка.

Для кого: новички в программировании.

Формат: самостоятельное обучение языку JS.

Механика: видеоуроки с самостоятельной практикой, доступные после регистрации на сайте. При регистрации сайт попросит ввести данные карты — этого можно не делать, а просто вернуться на страницу курса и перейти к занятиям.

Количество уроков: 14 уроков.

itProger: «Уроки JavaScript для начинающих с нуля!»

Курс от онлайн-школы itProger выложен в 2021 году.

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

Для кого: новички в программировании.

Формат: самостоятельное обучение.

Механика: видеоуроки по JS с самостоятельной практикой.

Количество уроков: 15 лекций — от 7 до 40 минут.

Год записи курса: 2021 год.

«Изучение JavaScript от нуля до гуру»

Курс поможет изучить базовые вещи в JS и делает упор на стандартные темы: переменные, циклы, функции и так далее. Важно, что материал был записан в 2015 году. Лучше выбрать курсы поновее.

Для кого: новички в программировании.

Формат: самостоятельное обучение.

Механика: видеоуроки с самостоятельной практикой.

Количество уроков: 21 урок — от 4 до 40 минут.

Год записи курса: 2015 год.

«Уроки JavaScript с нуля»

Курс рассчитан на начинающих и объясняет простым, понятным языком базовые вещи начиная с HTML и CSS и того, как они взаимодействуют с JavaScript.

Для кого: новички в программировании.

Формат: самостоятельное обучение.

Механика: видеоуроки JS с самостоятельной практикой.

Количество уроков: 28 уроков по 20–40 минут.

Год записи курса: 2018 год.

«Бесплатный курс по JavaScript 2020»

Курс для новичков в программировании от разработчика-фрилансера. Для обучения потребуется любой редактор кода или IDE. Обучение начинается с изучения основных тегов HTML и конструкции HTML-страницы. Затем ученики перейдут к базовым понятиям в JS: переменным, операторам, функциям и объектам.

Для кого: новички в программировании.

Формат: самостоятельное обучение.

Механика: видеоуроки с самостоятельной практикой.

Количество уроков: 3 вводные лекции о профессии фронтенд-разработчика и организации эффективной учёбы и 16 уроков про JS по 10–60 минут.

Год записи курса: 2020 год.

Skillbox: «Fullstack на JS: как стать универсальным веб-разработчиком»

Интенсив от образовательной онлайн-платформы Skillbox. Курс рассчитан на начинающих. Во время вебинаров слушатели знакомятся с основами языка, изучают программирование серверной части и в итоге создают собственный проект.

Для кого: новички в программировании.

Формат: самостоятельное обучение.

Механика: запись вебинаров с самостоятельной практикой.

Количество уроков: 3 занятия.

Подводим итоги

Для старта в JavaScript-разработке выбирайте любой из бесплатных курсов. Они помогут вам не только выучить нужную теорию, но и закрепить её на практике с помощью самостоятельных проектов и упражнений. А после этого можно переходить уже к большим образовательным программам и сложным проектам.

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Читайте также:

  • JavaScript: главный инструмент frontend-разработчиков
  • Как учиться на программиста с нуля, сколько времени и стоит ли вообще
  • TypeScript для начинающих: преимущества языка и первый код

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *