JavaScript книги, курсы | что читать/смотреть
Приветствую, я сейчас делаю роадмап/план изучения по фронтенду, недавно закончил расписывать вводные уч. материалы по js, думаю это будет многим полезно, сделал в формате отдельного поста.
2881 просмотров
Сам роадмап в телеге, все в лайве, примерные сроки 6 месяцев, если хотите изучить фронтенд, welcome ( https://t.me/into_frontend ).
1. Взаимозаменяемость уч.материалов
Это очень важно, понимание этого способно решить кучу проблем, особенно на ранних этапах.
Изучение программирования не похоже на изучение какой-нибудь философии, нет кардинально разных взглядов на предмет(каких то определенных школ), способных изменить всю картину.
На практике это означает, что можно как угодно жонглировать учебными материалами. Если произошел какой-то затык и после изучения определенной темы, она все еще остается непонятной, хорошая идея — посмотреть как об этом рассказано в других книгах/курсах.
И чем больше учебных материалов, тем выше вероятность найти подходящее объяснение.
При очень большом желании, можно читать главу про функции у одного автора, типы данных у другого, ооп у третьего, и условные 10 глав ввода в ЯП разложить на 10 разных авторов. В этом не много смысла и скорее всего это не очень удобно в плане восприятия, но даже такой странный метод никак не собьет с пути правильного изучения.
2. Начать выстраивать план изучения лучше с какого-то опорного уч.материала
Он должен быть достаточно полным, и служить ориентиром для всего дальнейшего изучения. Важна именно функция ориентира, не обязательно двигаться конкретно по этому учебному материалу(но можно и двигаться, как хотите), важно именно мочь с ним свериться и понять на каком этапе находитесь, что уже пройдено, какие темы еще не закрыты и т.д. и т.п.
В целом, я бы разделил на два уровня: для начинающих и для продолжающих. Преимущество второй категории — больше и глубже, недостаток — не оч.
В JS для роли такого опорного материала отлично подойдут:
Для начинающих:
2.1.https://learn.javascript.ru — легендарный сайт, он всем хорош, однако ребята которых я менторил приходили ко мне вот с какой проблемой:
-прочитал главу на learnjavascript, все понял, задачи в конце решил, после открываю codewars, беру задачи по теме, не могу решить без открытой в соседней вкладке той самой прочитанной/понятой/прорешенной главы, как так?
Дальше мы обсудим эту тему, важно — это не проблема уч.материала, с ним все в порядке, это проблема самого языка, ничего тут не поделаешь, js имеет это странное свойство — маскироваться под очень простую понятную штуку, а потом ‘ускользать’, когда дело касается реального применения.
Для продолжающих:
2.2.Флэнаган Дэвид, JavaScript. Полное руководство
Просто лучшая книга по js, должна быть у каждого работающего с языком. Без малейшего понятия, почему ее рекомендуют начинающим, это немного сложноватый заход.
Я ее буквально сейчас держу в руках, и на задней обложке красуется “книга предназначена для программистов, желающих изучить js”, еще раз, ‘для программистов’, а не для новичков.
В любом случае, книга великолепна, ее обязательно надо будет прочитать. И как опорный материал — лучше некуда.
3.Ускользающий js
Тема кажется усвоенной, но когда дело касается применения полученных знаний, то обнаруживается куча пробелов.
Все дело в том, как js устроен и в его истории развития, если совсем просто — у js очень необычный дизайн, как следствие — он не учится также эффективно, как и другие языки.
Например, когда я писал об изучении питона, то настаивал на отходе от абстрактных задач к реальным, при том как можно быстрее. Все просто, реальные задачи питона в разы сложнее ‘созданных для проверки усвоения языка’.
В js все с точностью до наоборот, можно хоть сразу приступать к реальным задачам, и решать, разумеется, криво-косо, компонуя из кусков кода, который даже не до конца понимаешь.
И это огромная проблема, сколько угодно случаев, когда начинающий уверен на 100% в знаниях ЯПа(ну он же на нем проектики воял), а потом оказывается, что решить пресловутый fizzbuzz(задача, буквально, про самые основы) не получается.
Я как-то делал видео (там есть привязка ко времени, но если не сработает — 8:35) про питон, где затрагивал весьма искусственно разбиение на уровни(планирования и реализации). Так вот, js — это игровая площадка для уровня планирования.
Поэтому, как бы это печально не было, нужно намерено решать кучу абстрактных задач, для закрепления языка. Прочли о массивах, считайте вы только прикоснулись к прекрасному, по настоящему материал будет усвоен не после применение парочки методов в очередном ту-ду листе, а после прорешивания задач эдак 30-50 на codewars.
4. JavaScript с нуля, Чиннатхамби Кирупа
Эта книга — отличный(возможно лучший) вариант для старта. Материал изложен в ней именно последовательно, это не просто объяснить, но в сравнении с другими вводами в js, сразу станет понятно, почему это огромное преимущество, к тому же, книга совсем не перегружена(в js с этим проблемы).
На гугл книгах(прост вбейте название в гугле, справа будет карточка книги) доступен предпросмотр 80 страниц, тут проще один раз посмотреть, чем читать почему она хороша.
5. Freecodecamp
Freecodecamp[англ.] — является олицетворением вот этого ‘научим всех программировать’. Если вы спросите программиста из Америки/Канады, то вероятность 90% порекомендуют его или аналоги(например, codeacademy). Из аналогов выделяется тем, что это буквально пик подобных проектов.
Freecodecamp ‘nonprofit organization’, т.е. у них все бесплатно, но время от времени будут просить сделать донат, по моему в виде подписки(разумеется, все добровольно, можно и не делать).
Есть курсы начиная с основ html и до React-a, дают сертификаты(честно скажу, никому никакие сертификаты не нужны, но все же), куча задач, вполне себе хорошая теория, и оч крутой форум. Также есть отдельные задания-проекты.
6. Введение в программирование, hexlet
Давайте я сразу скажу, это не реклама, я не говорю ничего про их платные курсы, речь только о бесплатном.
https://ru.hexlet.io/courses/introduction_to_programming очень крутой курс введения в программирование, подача на высшем уровне.
Этот же курс есть на степике https://stepik.org/course/13929 , правда там он несколько урезан
7. Выразительный JavaScript
Оригинал — https://eloquentjavascript.net
Перевод — https://karmazzin.gitbook.io/eloquentjavascript_ru
Один из самых примечательных вводов в ЯП. Отличная книга, много кода, много примеров, все хорошо объяснено, отдельно хочется отметить главы-проекты, чего только стоит проект — создание маленького языка программирования.
8. https://developer.mozilla.org/ru/docs/Learn/JavaScript/First_steps
Ну и разумеется, документация JS, там есть отличные туториалы, стоит ознакомиться.
9. Есть еще один курс, о котором нельзя не упомянуть. Сразу скажу — сложный, но абсолютно потрясающий. Я бы даже сказал, что он единственный в своем роде. Более полного и глубокого я не видел, что сказать это настоящий академический подход.
Подробнее на хабре
Сам плейлист курса с канала Timur Shemsedinov
Этот курс стоит хотя бы просто посмотреть, поскольку пройти его с нуля получится очень не у многих. Наверно есть смысл подучить язык, а уже потом к нему вернуться.
JavaScript: что это, где используется и как работает
Объясняем на примерах, почему без JavaScript не будет современных сайтов и что делает этот язык программирования таким востребованным. Расскажем о преимуществах JS и его перспективах.
- Особенности JavaScript
- Для чего нужен JavaScript
- Области применения JavaScript
- Как работает JS-код на сайте
- Чего не умеет делать JavaScript в браузере
- Стоит ли учить JavaScript
- Совет эксперта
Особенности JavaScript
JavaScript — это язык программирования, который в первую очередь применяют в вебе. С его помощью сайты делают интерактивными: добавляют всплывающие окна, анимацию, кнопки лайков и формы для отправки информации.
Его ещё называют главным языком фронтенда — «лицевой» стороны сайта, с которой взаимодействуют пользователи.
JavaScript похож на Java, Python, Go, C#, но имеет свои особенности:
1. Интерпретируемый, а не компилируемый. Все языки программирования делятся на две группы. Код на компилируемых языках нужно сначала пропустить через специальную программу, компилятор, и только потом его можно использовать. Большинство современных языков как раз компилируемые в отличие от JavaScript.
Код на интерпретируемом языке компилировать не нужно. Его пишут и сразу передают программе-интерпретатору, которая тут же его выполняет. Это ускоряет разработку, но требует запуска только в связке с интерпретатором. Правда, интерпретатор JavaScript встроен во все современные браузеры, так что проблем с запуском кода нет.
2. Мультипарадигменный. В программировании существует несколько парадигм:
● Объектная. В ней для каждой сущности в коде, например кнопки заказа, создают объекты.
А затем прописывают связи между этими объектами.
● Функциональная. В ней больше внимания уделяют конкретным инструкциям. Кнопка здесь — не объект, в коде она обозначена как порядок действий, которые происходят после нажатия.
● Императивная. Здесь код пишут как чёткий набор инструкций, который выполняется строго последовательно. Императивная и функциональная парадигма часто применяются вместе.
Часто языки ориентированы на работу с одной парадигмой. JavaScript не такой — он не диктует, как писать код, и позволяет придерживаться разных стилей и способов.
3. Без строгой типизации. Есть языки программирования со статической типизацией. Если создать переменную, нужно сначала обязательно задать её тип, например число. И ничего, кроме числа, хранить в ней нельзя.
У языка JavaScript типизация динамическая — в переменную можно положить что угодно. Это облегчает написание кода, но может вызвать ошибки. Например, JavaScript позволит сравнить строку с числом и даже выдаст какой-то результат.
Что больше, «корова» или «81»? JavaScript знает ответ.
4. Интегрирован с HTML и CSS в браузерах. HTML и CSS — это языки разметки для сайтов. Они не относятся к языкам программирования, так как не позволяют писать функции и что-то обрабатывать. С их помощью задают внешний вид сайта: расположение блоков, размер шрифта, цвета. Чтобы сайт стал интерактивным, нужен язык программирования, и JavaScript тут подходит идеально. Современные браузеры позволяют просто вписать код на JavaScript прямо в разметку, написанную на HTML и CSS, — и всё заработает.
Часто для удобства скрипты пишут в отдельных файлах, а потом вставляют в код отсылку на сам файл. Это позволяет не перегружать код на странице и использовать одни и те же скрипты в разных местах, не переписывая их заново.
Так выглядят файлы скриптов на JavaScript, вставленные в код страницы
5. Подходит для бэкенда. Код JavaScript можно запускать и в браузере, и на сервере. Это значит, что на нём можно писать не только интерактивные элементы страниц, но и серверную часть сайта: функции обработки данных и вычислений.
Правда, для этого нужно освоить отдельный инструмент — Node.js. Это движок, который позволяет запускать JavaScript не в браузере, а на сервере.
Иногда из-за похожих названий язык JavaScript путают с Java. На самом деле это абсолютно разные языки для разных задач. Просто когда-то давно Java был очень популярен и его название добавили в язык JavaScript для привлечения внимания.
Материал по теме:
В чём разница между Java и JavaScript
Для чего нужен JavaScript
● Сделать сайт интерактивным — чтобы это была не просто статичная страница, а динамичная программа, реагирующая на действие пользователей. Например, если нажать кнопку «Нравится» и число лайков на записи увеличивается сразу, без обновления страницы. Это результат использования JavaScript.
● Передавать информацию между пользователем и сервером. Именно скрипты, написанные на JavaScript, отправляют на сервер информацию, которую ввёл пользователь.
● Анимировать объекты — добавить скролл до раздела по нажатию кнопки, анимацию фона, движущиеся объекты.
● Производить вычисления. Например, в онлайн-калькуляторе на сайте. Это можно делать как на стороне сервера, так и в самом браузере с помощью возможностей JavaScript.
● Писать серверную часть сайта или приложения.
На курсе «Веб-разработчик» студенты подробно разбирают, как именно работает JavaScript в браузере, и учатся делать сайты интерактивными и полезными для пользователей.
Каждый может стать веб‑разработчиком
Освойте навыки востребованной профессии в IT меньше чем за год: научитесь писать чистый код, разрабатывать сайты и веб-приложения. Начните с бесплатной вводной части курса «Веб-разработчик».
Области применения JavaScript
Теперь немного подробнее расскажем, что же можно написать на языке JS, где его используют чаще всего.
Веб-сайты и веб-приложения. Самая популярная область применения языка JavaScript — это написание кода для сайта. Практически на каждом современном сайте используют код, написанный на JS.
Расширения для браузера.
Небольшие простые скрипты, которые добавляют дополнительный функционал — блокируют рекламу, позволяют сохранять аудио, отправляют уведомления о новых письмах или меняют цветовую схему сайта.
Мобильные приложения. Их можно писать на специальных языках, например Kotlin. Но если нужно что-то простое, например интерфейс для работы с облачным хранилищем, его можно написать на JavaScript и собрать в приложение с помощью специальных инструментов.
Серверная часть сайтов и программ. Язык программирования JavaScript можно использовать для написания любых сервисов: чатов, компьютерных программ и даже нейросетей. Для этого к нему нужно подключить движок Node.js.
Игры. На JS можно писать несложные браузерные игры. Вот интересный платформер с необычной физикой.
Простая, но интересная игра-платформер, написанная на JavaScript
Как работает JS-код на сайте
JavaScript реагирует на действия пользователя на странице. Пользователь нажимает кнопку, это запускает триггер — и тут же срабатывает написанный скрипт.
Сам по себе JavaScript не может чего-то уметь или не уметь — это просто язык программирования. Его возможности зависят от того, что именно ему позволяет браузер. В современных браузерах JavaScript-код может:
● Изменить уже существующий на странице HTML-код или добавить новый, поменять стили. Например, сменить цвет шапки.
● Среагировать на щелчок мыши, перемещение указателя, нажатие клавиш, прокрутку.
● Отправить сетевой запрос на сервер, скачать или загрузить файл. Например, взять присланную пользователем картинку и отправить её на сервер для хранения.
● Задавать пользователю вопросы и показывать сообщения.
● Запоминать данные и хранить их на стороне клиента, в его браузере. Например, сохранить документ в офлайн-режиме, пока пользователь не очистит кэш или не обновит страницу.
Чего не умеет делать JavaScript в браузере
JavaScript изначально задумывали как безопасный язык. Браузер не позволяет ему глубоко влезать в работу компьютера пользователя и других веб-сайтов.
Поэтому JS в браузере не умеет:
● Читать и записывать файлы на жёсткий диск пользователя, запускать программы, работать с системными функциями ОС. Ему доступно только то, что пользователь сам добровольно согласился загрузить через браузер. В некоторых браузерах, например Mozilla Firefox, функция чтения и записи уже появилась, но пока доступна не везде.
● Работать с камерой и микрофоном без разрешения пользователя.
● Взаимодействовать с другими окнами и вкладками. Для этого обе страницы должны «согласиться» с этим и иметь специальный код для обмена данными. Это защищает пользователя и не помогает неизвестному сайту взаимодействовать со вкладкой, где открыты, например, соцсети или почта.
● Легко получать данные от других сайтов и доменов. Это возможно с согласия другого сайта или сервера.
Некоторые ограничения на использование JS можно снять — для этого браузер запросит у пользователя разрешение.
Стоит ли учить JavaScript
Тем, кто планирует стать фронтенд‑разработчиком, — однозначно стоит.
Этот язык будет основным рабочим инструментом. Без JavaScript невозможно разрабатывать ту часть сайтов и веб-приложений, с которой взаимодействуют пользователи.
У JS есть и другие плюсы для изучения:
● Простой в изучении. Уже через пять минут можно написать и запустить свой первый скрипт. А через пару дней обучения собрать вполне рабочую программу, например расширение для браузера.
● Хорош как база. На нём можно освоить основы, единые для всех языков программирования. И потом перейти к изучению других. Особенно хорошо после JS идут «С-образные» языки: C++, C#, Java, PHP.
● Универсален. Если освоить Node.js, можно перейти с фронтенда на бэкенд или в другую сферу разработки.
● Актуален. JS был создан больше 20 лет назад, но всё ещё развивается и не сдаёт свои позиции как главный язык для фронтенда.
● Имеет множество надстроек. CoffeeScript, TypeScript и Dart и другие надстройки делают код компактнее, чище и строже. Их можно изучить, чтобы развиваться в сфере фронтенда.
Совет эксперта
Статью подготовили:
Поделиться
Читать также:
Java-разработчик: плюсы и минусы профессии, как стать и сколько зарабатывает
Читать статью
Языки программирования: какие они бывают
Читать статью
JavaScript Куда
❮ Назад Далее ❯
Тег
.Пример
Попробуй сам "
В старых примерах JavaScript может использоваться атрибут типа:
Демо JavaScript в голове
Абзац