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

С чего начать изучение JavaScript и как это делать эффективно

С чего начать изучение JavaScript и как это делать эффективно главное изображение

JavaScript (JS) — это многофункциональный язык программирования. В основном разработчики используют этот язык в вебе. По данным рейтинга W3Techs на сентябрь 2022 года, на JavaScript работает 98% всех сайтов.

JS, наравне с HTML и CSS, используется в создании веб-страниц. С его помощью фронтенд-разработчики придают веб-страницам интерактивность: добавляют различные слайдеры, плашки, кнопки, анимации и тем самым делают сайты удобнее для пользователей.

В бэкенд-разработке программисты с помощью JavaScript создают серверные приложения на базе программной платформы Node.js. Данные об активности пользователя на сайте, файлы, которыми он делится, отправляемые запросы — все это делается на JavaScript.

Кроме того, JavaScript используют в этих областях программирования:

Мобильная разработка
Разработка игр
DevOps
Машинное обучение
Базы данных

С чего начать изучать JavaScript

Будьте готовы к тому, что начало изучения JavaScript — трудный этап. JS далеко не самый простой язык для изучения из-за сложного синтаксиса, хотя его правила все же легче, чем у C-подобных языков вроде Java или C++. Чтобы в будущем вам было легче кодить на JS, нужно грамотно подойти к составлению программы своего обучения.

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

Читайте также: Стоит ли учить JavaScript: перспективы, ситуация на рынке труда, мнения экспертов

Составьте план обучения

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

Изучите основы языка

Лексика, синтаксис и семантика — то, без чего вы не освоите ни один язык программирования. На этом этапе вы должны понять, в какой последовательности давать компьютеру инструкции, как выводить информацию на экран и писать простейшие программы на языке JavaScript.
Типы данных: что такое числа, строки, в чем разница между null и undefined.
Операторы. Здесь нужно узнать, какие бывают операции и чем они отличаются от операторов, как складывать, вычитать, умножать и делить числа на JS, и в каком приоритете это выполняет программа.
Переменные: что это такое, зачем они нужны, как изменять переменные и именовать их, как использовать.
Функции: зачем их используют разработчики, какие бывают функции, что такое их сигнатура, что такое чистая функция и какие у нее особенности.
Условные конструкции: как строить условия, как выполняется код в зависимости от условия и как строятся сложные условные конструкции.
Методы, объекты и свойства: в чем особенность каждого понятия, что такое объекты и структуры данных.
Циклы: для чего они нужны, как их задавать.

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

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

Изучите HTML и CSS

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

Лучше всего изучать HTML и CSS параллельно с основами JS. Но здесь важно не переусердствовать и не запутаться в обилии информации. Если вы чувствуете, что в голове появляется «каша» из разных понятий, отложите изучение HTML и CSS и дайте знаниям время для усвоения. Занимайтесь в удобном для вас режиме.

Установите и настройте редактор кода

Кодить на JavaScript можно и в простом «Блокноте». Но программисты практически не пользуются им в повседневной практике — возможности этого редактора очень ограничены. Для полноценной работы на JavaScript лучше выбирать редакторы с более широким функционалом.

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

Visual Studio Code — редактор со встроенным дебаггером, Git-командами для работы с системой управления версий GitHub.
Sublime Text — редактор с горячими клавишами, автосохранением, автодополнением.
WebStorm — редактор, который обеспечивает автодополнение, навигацию по коду, рефакторинг и отладку. Он платный, но очень популярный среди разработчиков.

О том, как настроить редакторы кода на JS, можно почитать в гайдах Хекслета.

Пробуйте кодить

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

Зайдите на GitHub и найдите там открытый код на языке JS. Выберите из него самый привлекательный для вас фрагмент, скопируйте его и откройте у себя в редакторе. Изучите код, проанализируйте, почему он написан именно в таком порядке, за что отвечает каждая строка. Это хорошая практика, которая вырабатывает насмотренность и структурирует знания.

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

Углубите свои знания

По мере вашего развития в программировании вам нужно будет познакомиться с этими понятиями языка JavaScript:

Асинхронность и событийная модель
BOM и DOM-дерево
Объекты, классы, основы ООП
Фреймворки React, Redux Toolkit и многое другое.

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

Читайте также: Как джуну найти работу и где лучше начинать карьеру в IT: советы от Хекслета

Сколько времени нужно, чтобы выучить JavaScript

Скорость обучения у всех разная. Но в среднем начинающие программисты, которые изучают JavaScript и практикуются около 10 часов в неделю, могут претендовать на позицию Junior JavaScript-разработчика через 10-12 месяцев.

Как эффективно учить JavaScript

Изучайте дополнительные материалы

Читайте обучающие статьи на Хабре, учебники, смотрите видеоуроки на YouTube. Найдите комьюнити или присоединяйтесь к Хекслет Комьюнити, чтобы обсуждать свой прогресс в обучении, получать помощь и поддержку.

Есть много хороших книг по изучению JavaScript. Будет здорово, если вы прочитаете некоторые из них:

Дэвид Флэнаган «JavaScript. Подробное руководство»
Дуглас Крокфорд «Как устроен JavaScript»
Алексей Васильев «JavaScript в примерах и задачах»

У Хекслета есть свой список рекомендованной литературы. Ознакомьтесь с этими книгами — они полезны для программистов любых направлений.

Соревнуйтесь на Codebattle

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

Codebattle особенно полезен новичкам, потому что он:

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

Каждый месяц Хекслет проводит турниры на Codebattle. Чтобы принять участие, нужно зарегистрироваться на сайте. Если вы не хотите участвовать в турнирах, то можете при регистрации выбрать режим дуэлей и упражняться в кодинге с ботом или другом.

Если у вас появятся вопросы по кодингу на Codebattle, не стесняйтесь задавать их разработчикам напрямую. Это можно сделать в каналах по Codebattle в Хекслет Комьюнити. Чаще упражняйтесь в кодинге, постоянно прокачивайте свои знания и у вас все получится!

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

JavaScript для начинающих. Урок 1

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

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

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

Ну, а если будут возникать вопросы — пишите в комментарии, постараюсь там держать с вами связь.

Также буду рад конструктивной критике от всех неравнодушных. Ну, и фидбэку от тех, кто читает мои статьи.

Ну всё, можем начинать.

Вступление

JavaScript — язык программирования!

По некоторым исследованиям, кстати, самый популярный. И уж точно один из самых простых для входа в IT.

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

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

Современный веб — это не лэндосики и интернет магазины из 2000-х, а, по большей части, достаточно сложные и интересные веб приложения. Помимо клиентской логики JS также популярен на сервере. И там его популярность растет год от года. Еще JS позволяет писать мобильные приложения и даже немного на десктоп замахивается.
В общем, язык один, а возможностей много.

Погнали (Hello world)

Принято в мире IT начинать изучение чего либо с «hello world» приложения.
Это довольно таки хорошая практика. Самое сложное, в изучении чего либо — начать, а начинать с чего то супер простого — не так сложно.

Я для вас подготовил мини проект в codesandbox. Там мы и будем работать:

Итак, что мы можем туда написать, чтобы понять, что всё работает.
Есть основной способ проверки кода. Вывести какое-либо сообщение в консоль.
Для этого в JS есть функция console.log Она имеет следующий синтаксис:

В нашем случае для отображения нужной фразы пишем такое:

Должно получиться что-то подобное:

Если получилось — поздравляю! Вы теперь JS разработчик)

От элементарного к простому

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

1) Переменные

В JS работа с данными происходит, в основном, путем манипуляций с «переменными». Это такие штуки, которые содержат в себе какую либо информацию. Например, мы знаем, что имя Пети — Петя и эту информацию мы можем положить в переменную для дальнейшей работы с ней:

Читается это слева направо. «Неизменной переменной (константе) name присваивается значение ‘Петя'». Кажется, ничего сложного.

В JS есть три способа объявления константы (один из них устарел, поэтому рассмотрим только два актуальных.) С помощью const и let . Синтаксис идентичен, разница в том, что const нельзя изменить, а let можно. Поэтому использовать их надо с умом. Имя человека поменять нельзя, а вот его возраст можно.
Чтобы перезаписать существующее значение (работает только в случае с let ) необходимо выполнить присвоение значения так же, как и при инициализации, но без указания ключевого слова let

2) Типы данных

В JS, как и в любом другом языке программирования есть несколько типов данных. Они делятся на примитивные и не примитивные. Сегодня разберем несколько из них.
4 основных примитивных типа:

string (строка) — ‘Петя’

number (число) — 25 / 0 / -1111111 / 0.0001

boolean (Булинь, Логический тип) — true / false

undefined (отсутствующее значение) — undefined

Есть еще несколько типов, но они чуть сложнее и мы рассмотрим их в следующих уроках.

Строки и числа можно складывать между собой.

С числами понятно, а строки «складываются» путем добавления одной строки к другой:

3) Условия

Условия — это такие конструкции, которые позволяют выполнять в программе определенные участки кода только в том случае, если условие выполняется.
Синтаксис такой:

Условие может быть просто булинем ( true / false )
Условие может быть сравнением, например:
— x < 10 — МЕНЬШЕ — выполняется, если x меньше 10
— x > 10 — БОЛЬШЕ — выполняется, если x больше 10
— x === 10 — РАВНО — выполняется, если x равно 10
— x !== 10 — НЕ РАВНО — выполняется, если x не равен 10
(Вместо x и 10 может быть любые переменные или значения). Сравнивать можно не только числа, но и строки — например ‘a’ < ‘b’ тут сравнение идет относительно порядкового номера буквы в алфавите.

Условие можно группировать, используя
&& — И — Выполняется, если оба рядом стоящие условия верны
|| — ИЛИ — Выполняется, если хотя бы одно из условий верно
Например:

Если хочется выполнить некий код в случае ложного условия — для этого можно использовать оператор else

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

Закрепим урок

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

Нужно будет писать код по заданию. В ссылке на condesandbox, которую я ранее скидывал есть файлик hw.js, в нем описаны функции (синтаксис которых мы разберем чуть позже).
Повторюсь, для каждой задачки написаны тесты для самопроверки.

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

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

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

Написать код, который будет выводить в консоль поочередно цифры от одного до 5.

Написать код, который будет выводить в консоль слово «Мужчина» если в поле gender равен ‘male’ и «Женщина» иначе

Написать код, который будет в консоль выводить сообщение «С днем рождения, ИМЯ ФАМИЛИЯ» в том случае, если текущий день-месяц равен дню-месяцу рождения пользователя. А также увеличит возраст (age) на 1.

Написать код, который добавит запишет в переменную fullName , значение имени и фамилии. То есть будет равен Петя Иванов, но сделает это используя переменные.

Написать код, который выведет в консоль полное имя пользователя, в случае, если пользователь — женщина и сегодня у неё день рождения, либо в случае, если пользователь мужчина и ему больше 20. иначе в консоль должно быть выведено сообщение «Ничего особенного»

Тестирование задач

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

12 книг по JavaScript, чтобы выучить язык с нуля и упорядочить знания

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

Содержание

Дэвид Флэнаган «JavaScript. Подробное руководство»

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

Руководство охватывает стандарты ECMAScript 5 и HTML5. Многие главы переписаны заново, другие дополнены новой информацией, появились и новые главы с описанием библиотеки jQuery и поддержки JavaScript на стороне сервера.

Джон Дакетт «Javascript и jQuery. Интерактивная веб-разработка»

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

Алексей Васильев «JavaScript в примерах и задачах»

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

Стоян Стефанов «JavaScript. Шаблоны»

Использование шаблонов при программировании на языке JavaScript имеет свои особенности. Некоторые из них, разработанные с позиций языков со строгим контролем типов, таких как C++ и Java, не могут непосредственно применяться в языках с динамической типизацией, таких как JavaScript. Для таких шаблонов в языке JavaScript имеются более простые альтернативы.

Разработчики серверных, клиентских или настольных приложений на JavaScript нередко сталкиваются с проблемами, связанными с объектами, функциями, наследованием и другими особенностями этого языка. Какие же приемы разработки приложений на JavaScript являются наиболее удачными? Данная книга дает ответ на этот вопрос, предлагая большое количество различных шаблонов программирования на JavaScript, таких как «единственный объект» (singleton), «фабрика» (factory), «декоратор» (decorator) и другие. Можно сказать, что они являются не только методами решения наиболее типичных задач разработки ПО, но и заготовками решений для целых категорий таких задач.

Марейн Хавербеке «Выразительный JavaScript. Современное веб-программирование»

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

Марейн Хавербеке — практик. Получайте опыт и изучайте язык на множестве примеров, выполняя упражнения и учебные проекты. Сначала вы познакомитесь со структурой языка JavaScript, управляющими структурами, функциями и структурами данных, затем изучите обработку ошибок и исправление багов, модульность и асинхронное программирование, после чего перейдете к программированию браузеров.

Мартин Фаулер «Рефакторинг кода на JavaScript: улучшение проекта существующего кода»

Более двадцати лет опытные программисты во всем мире использовали книгу Мартина Фаулера «Рефакторинг», когда им нужно было улучшить проект существующего кода, повысить удобство сопровождения программного обеспечения или облегчить понимание существующего кода. Это новое издание было полностью обновлено, чтобы отразить важные изменения в области программирования. Второе издание книги содержит обновленный каталог рефакторингов и включает примеры кода на JavaScript, а также новые функциональные примеры, демонстрирующие рефакторинг без классов.

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

Основные темы книги:

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

Дуглас Крокфорд «Как устроен JavaScript»

Игра в программирование без правил и ограничений. Большинство языков программирования выросли из древней парадигмы, порожденной еще во времена Фортрана. Гуру Javascript — Дуглас Крокфорд — выкорчевывает эти засохшие корни, позволяя нам задуматься над будущим программирования, перейдя на новый уровень понимания требований к Следующему Языку (The Next Language). Автор начинает с основ: имен, чисел, логических значений, символов и другой базовой информации. Вы узнаете не только о проблемах и трудностях работы с типами в JavaScript, но и о том как их можно обойти. Затем вы приступите к знакомству со структурами данных и функций, чтобы разобраться с механизмами, лежащими в их основе, и научитесь использовать функции высшего порядка и объектно-ориентированный стиль программирования без классов.

Кайл Симпсон « <Вы не знаете JS>Замыкания и объекты»

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

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

Владимир Дронов «JavaScript. Народные советы»

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

Кит Вуд «Расширение библиотеки jQuery»

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

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

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

Бер Бибо, Иегуда Кац «jQuery. Подробное руководство по продвинутому JavaScript»

Издание представляет собой введение и справочное руководство по jQuery — мощной платформе для разработки веб-приложений. Подробно описывается, как выполнять обход документов HTML, обрабатывать события, добавлять поддержку технологии Ajax в свои веб-страницы, воспроизводить анимацию и визуальные эффекты. Уникальные «лабораторные страницы» помогут закрепить изучение каждой новой концепции на практических примерах. Рассмотрены вопросы взаимодействия jQuery с другими инструментами и платформами и методы создания модулей расширения для этой библиотеки.

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

Danny Goodman «JavaScript Bible»

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