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

Как учить javascript самостоятельно

  • автор:

Современный учебник JavaScript

Перед вами учебник по JavaScript, начиная с основ, включающий в себя много тонкостей и фишек JavaScript/DOM.

Последнее обновление: February 11, 2024
Поделиться:

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

Язык JavaScript

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

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

Онлайн-курсы

Онлайн-курсы — это вебинары, которые ведёт преподаватель — опытный действующий разработчик. С теорией, практикой, ответами на вопросы, проектом и обратной связью по вашему коду («code review»).

Выберите курс ниже, чтобы узнать детали.

Основы веб-разработки

JavaScript / DOM / Интерфейсы

JavaScript / DOM / Интерфейсы

Современная верстка

Архитектура и паттерны

Фреймворки, смежные технологии

Angular

Node.js

React

Vue.js

TypeScript

RxJs

Продвинутый Angular

AI-помощники в разработке

Браузер: документ, события, интерфейсы

Изучаем работу со страницей – как получать элементы, манипулировать их размерами, динамически создавать интерфейсы и взаимодействовать с посетителем.

Тематические разделы

Важные темы, читать которые можно в любом порядке.

Следите за обновлениями javascript.ru

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

Комментарии

перед тем как писать…

  • Если вам кажется, что в статье что-то не так — вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег , для нескольких строк кода — тег , если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.
  • © 2007—2024 Илья Кантор
  • о проекте
  • связаться с нами
  • пользовательское соглашение
  • политика конфиденциальности

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

JavaScript — это объектно-ориентированный язык программирования общего назначения. Хотя он многофункционален, чаще всего его используют в вебе — 98% всех сайтов в мире разработаны именно на нем.

Если представить сайт как слоеный пирог, JavaScript (JS) будет в нем третьим слоем — этот язык программирования обеспечивает своевременное обновление контента, позволяет добавлять интерактивные элементы, анимированную графику, аудио и видео. Поэтому прежде, чем начинать учить JS, стоит освоить HTML и CSS, первые два слоя в аналогии.

Шаг первый

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

В первую очередь стоит разобраться в синтаксисе: хотя он не такой интуитивный, как в Python, он все же проще, чем в других C-подобных языках: например, C++ и Java. Следующим шагом стоит познакомиться с типами данных — строкой, числом и другими, — и особенностями их взаимодействия друг с другом.

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

Шаг третий

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

Решая задачи на CodeWars, вы почти со 100% вероятностью столкнетесь с большим количеством ошибок. Это совершенно нормально: если задача дается вам с первого раза, значит вы хорошо поняли какую-то часть материала. Ошибки возникают, когда вы выступаете в поле незнания — именно они дают опыт и позволяют двигаться вперед.

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

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

Еще один вариант — присоединиться к сообществу начинающих программистов Elbrus Beginners в Telegram. Оно создано для того, чтобы обсуждать свой прогресс в начале изучения JavaScript, получать помощь и поддержку.

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

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

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

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

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

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

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

Профессия «Фронтенд-разработчик»

  • Изучите востребованные JavaScript и TypeScript
  • Научитесь создавать пользовательские интерфейсы сайтов и приложений
  • Освойте самый популярный фреймворк JavaScript — React
  • Познакомьтесь с языками веб-разработки HTML и CSS

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

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

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

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

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

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

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

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

В дополнение изучите документацию 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:

  • Асинхронность и событийная модель — одна из «фишек» этого языка программирования. Кто-то ее любит, кто-то ненавидит, но у начинающих разработчиков эта концепция неизменно вызывает сложности. Чтобы стать программистом на JavaScript, нужно уметь работать с циклом событий и коллбеков, стеком вызова и промисами.
  • BOM и DOM-дерево — альфа и омега веб-разработки. BOM — объектная модель браузера, а DOM — объектная модель документа. Программист должен знать, из каких элементов состоит веб-страница, какая у нее структура и как разные части взаимодействуют между собой.
  • Объекты, классы, основы ООП — теоретический базис разработчика. ООП — это объектно-ориентированное программирование, одна из самых распространенных парадигм. Она предлагает создавать сущности в коде в виде различных объектов. А описывают их через классы — набор параметров и характеристик.
  • Помимо самого языка программирования — JavaScript разработчику необходимо освоить популярные библиотеки и фреймворки. Библиотеки — это наборы готовых кусков кода, а фреймворки — каркасы или шаблоны для создания приложений.

Также изучите фреймворки и библиотеки. В JavaScript сейчас популярны:

  • jQuery — помогает работать с событиями веб-страницы, а также содержит распространенные функции для использования в DOM, о которой говорили выше. jQuery каждый год хоронят, но за счет своей простоты библиотека не теряет актуальности.
  • React — универсальный помощник для разработки пользовательских интерфейсов. У React есть еще версии для мобильной разработки и VR.
  • AngularJS — фреймворк, который поддерживает Google. Он эффективен для разработки одностраничных приложений. AngularJS делит их на три отдельных части: модель, вид и контролер, что упрощает процесс написания кода.
  • Vue.js — фреймворк с самым высоким рейтингом среди разработчиков и прекрасной документацией. К его особенностям относят простоту шаблонов, которая избавляет программиста от необходимости прописывать каждое действие.

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

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

Дополнительная информация

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

Также, помимо написания кода, ему необходимо разбираться в сетях, протоколах и браузерах.

Какие знания потребуются:

  • Что такое протокол TCP/IP, какие у него есть уровни и как каждый из них работает, что такое DNS-зоны и домены.
  • Сессии, куки и аутентификация — веб-разработчик должен знать, как приложения взаимодействуют с пользователями.
  • База данных — одна из основных частей любого приложения, которое загружает или хранит информацию. Все разработчики используют их в своей деятельности. Нужно понимать, что такое реляционные и нереляционные базы данных, а также понимать типы связи между ними. Рекомендуется выучить основы SQL — языка запросов к базам данных.
  • Инструменты разработчика от Chrome — помогают отслеживать маршруты и проводить отладку приложений прямо в консоли. Ими нужно научиться пользоваться.
  • TDD — популярная техника разработки. Она предполагает, что крупный проект разбивают на несколько небольших циклов. В каждом сначала создают тесты, проверяющие изменения, а потом вносят их. Нужно понимать основы тестирования и знать об основных принципах этой техники.

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

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

Истории выпускников Хекслета

Как я пошел учиться на разработчика, пожертвовав финансовой стабильностью

Меня зовут Виталий. Расскажу, почему я ушел из нефтяной отрасли в фронтенд-разработку, как мой пет-проект придал мне уверенности на собеседованиях и тяжело ли вообще вливаться в IT после 30 лет.

Найти свою зону комфорта: как интроверт стал программистом

Меня зовут Сергей, мне 39 лет. Расскажу, как я оставил перспективную должность ради IT, почему выбрал для развития бэкенд-разработку и чем помогаю стримерам на Twitch в свободное от работы время.

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

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

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

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

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

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

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

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

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

Изучить основы языка JavaScript вам поможет подготовительный курс Хекслета «Фронтенд-разработчик». В программу включено много теоретических и практических заданий, которые выполняются в браузерном тренажере. Вы изучите основные понятия программирования, научитесь мыслить как разработчики, исправлять ошибки в коде, а еще создадите свою первую программу.

Как правильно учить Javascript?

Больше месяца назад начал изучение javascript, и кажется я застрял. Изучаю в основном по книгам: JavaScript: «The Definitive Guide»,» Секреты javaScript ниндзя», «JavaScript. Шаблоны»
и на сайте http://javascript.ru/.
Хочу сказать что книги не читаю «от корки до корки», вместо этого я их просматриваю, изучаю примеры, некоторые из них повторяю.
Смотрю на примеры и вроде бы понимаю что и зачем делается, но сам, без этих примеров практически ничего сделать не могу.
Это первый язык и не очень понятно что делать. С одной стороны нужна практика, но откуда ее брать, и что такого можно сделать на Javascript? Вот по PHP к примеру почти в каждой книге то создаем свой интернет магазин, то мини соц сеть, и становится более понятно. А что на Javascript?
Или может я что-то упускаю и стоит более внимательно изучать книги и справочники?

  • Вопрос задан более трёх лет назад
  • 128174 просмотра

Комментировать
Решения вопроса 1

IonDen

JavaScript developer. IonDen.com

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

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

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

Ответ написан более трёх лет назад
Нравится 124 6 комментариев
Спасибо за советы!

Arsenowitch

Artem Arsenowitch @Arsenowitch
jQuery — библиотека)

IonDen

VACUM

lastuniverse

Роман @lastuniverse
Превосходно сформулировано, плюсую.
Ответы на вопрос 6

Сейчас на Hexlet проходит интересный курс по Java Script. Он чисто об особенностях языка. Думаю, будет интересно.

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

Drink coffee write JavaScript 🙂

Ответ написан более трёх лет назад
Комментировать
Нравится 15 Комментировать

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

Ответ написан более трёх лет назад
Комментировать
Нравится 10 Комментировать

По поводу книг, кто бы, что не говорил, но Definitive Guide конченая книга, имхо! Человека не знающего программирования по мере чтения грузят разрознеными терминами, и чем дальше тем хуже. В итоге чтение превращается постоянное прыгание назад в попытках понять тот или иной термин. Вообще не рекомендую эту книгу.
Секреты нинзя обязательна к прочтению, но не сейчас. Шаблоны тем более.

Учебник на javascript.ru достойное руководство, вот его и читайте не прыгая.
На javascript можно теже самые и интернет-магазины, и мини соц. сети, но вы себе башку не забивайте этим. Изначально он был разработан для выполнения скриптов на стороне браузера (клиента). Добавление динамики для статичного html. Элементарные примеры: анимация (сложная), обработка событий (например мышки: клик, даблклик, пермещение).

Ответ написан более трёх лет назад
Нравится 9 8 комментариев
karpyuk7 @karpyuk7 Автор вопроса
Те же выводы сделал насчет Definitive Guide, много мест которые я как новичок осилить не смог.

По этому и читайте javascript.ru и как ранее рекомендовал @davex69 курсы Hexlet. Постоянное желание «точечного» изучения для решения той или иной задачи рано или поздно сделает свое дело, но это не лучший вариант. Все лучше изучить основу, с ней «поиграться», по придумывать элементарные себе задачки. Вот пару примеров и наверника без пособия вы уже и не вспомните как сделать: 1. Создать пустой div 2. Вывести с помощью JS в этом div`е фразу «Hello, world!» 3. Назначить стили, в частности зеленый цвет тексту Вот простая задача, при чем в необходимой последовательности. В целом ваша задача просто знать, что есть какие то уже предопределенные объекты, что с ними можно что-то делать. Например выше описаная задача порождать подобную мысль «так, нужно вставить в что-то в документ, аха, значит мне нужен объект document» и блаблабла. Общее понимаение нужно. И пока его нету, даже не пытайтесь змейки писать или тетрисы. Вот например еще задача: сделайте часы, которые будут «тикать», ну всмысли секунды, минуты и часы будут «идти». И если вы уже сразу же знаете, что вам нужен предопределенный объект Date, уже не плохо.

karpyuk7 @karpyuk7 Автор вопроса
Огромное спасибо, буду экспериментировать)
Ырий Ведомый @yrijvedomy

А по-моему, на то он и Definitive Guide, что не для самых маленьких. Новички должны страдать (как и многие из нас в своё время), пытаясь выхватить суть из разных источников (как то видеоуроки всякие, статьи, лисапеты с часами и прочее). Со временем знания систематизируются и становится проще. Я вот сейчас, например, снова начал читать этот самый Definitive Guide (год назад дропнул почти в самом начале), и получаю удовольствие, потому что больше не кажутся страшными слова вроде Объект, Класс, Итератор, Интерпретатор или, например, Регулярные Выражения.

Bandicoot

Я начинал с Definitive Guide, ничего плохого сказать не могу. Отличный учебник

erikaleie

@dakiesse Спасибо большое за комментарий!

А что делать если нет понимания самой «инфраструктуры» языка? Я посмотрела на Hexlet первую лекцию, и как раз, того, чего я не понимаю, нет.

Самый примитивный вопрос где писать JS код? Можно ли сразу в html документе?
Как весь этот стек (html, css, js, jquery) между собой взаимодействуют? Про html и css я понимаю, а в вот как я JS? Спасибо!

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

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