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. иначе в консоль должно быть выведено сообщение «Ничего особенного»
Тестирование задач
Справа от кода есть вкладка с тестами.
Тесты там описаны по каждой отдельной функции и добавлено описание о том, что конкретно проверяет тест.
Если тест успешно пройден — вместо красного крестика — будет зеленая галочка.
Как выучить JavaScript с нуля самостоятельно
JavaScript является одним из самых легких языков программирования, его можно изучить самостоятельно по книгам, официальной документации, бесплатным видео урокам или курсам.
Стоит ли изучать JavaScript в 2023 году
JavaScript стоит учить в 2023 году, потому что это популярный язык программирования. В рейтинге Github он занимает 3 место среди языков программирования.
JS применяется на фронтенде, бэкенде, для разработки мобильных приложений, поэтому вакансий предостаточно и работа будет всегда. Его стоит изучать тем, кто планирует с нуля войти в сферу IT и интересуется разработкой вебсайтов или мобильных приложений.
В перспективе можно перейти с JavaScript на изучение TypeScript, фреймворка Angular или библиотеки React, React Native, Node JS.
Что нужно знать перед изучением JavaScript?
JavaScript можно учить с нуля, но лучше иметь базовые знания по HTML и CSS. Необязательно углубляться, прочтите коротенькую книгу по HTML и CSS для начинающих или посмотрите видео на Youtube «HTML за 3 часа».
С чего начать изучать Javascript
Составьте план изучения языка программирования JS. Для этого можно посмотреть оглавление любой книги для начинающих по JS или поищите платный курс и перепишите программу курса. Так вы составите пошаговый план обучения. Начинать стоит с базовых вещей:
- Синтаксис и базовые операции
- Динамическая типизация.
- Работа с DOM
- Стандарт ES6, ES7, ES8.
Учебники по JavaScript для начинающих
Ник Морган. JavaScript для детей — простая книга для начинающих, поможет понять базовый синтаксис. Учтите, что книга издана в 2018 году и некоторые вещи уже устарели.
Дэвид Флэнаган JavaScript. Полное руководство — эту книгу стоит прочитать не только новичкам, а и программистам, которые уже работают с джаваскрипт. На сегодня актуально 7-е издание 2021 года.
Сайты для изучения программирования на JavaScript
developer.mozilla.org — основной справочник по языку JavaScript, HTML и CSS
learn.javascript.ru — современный учебник JavaScript с примерами и задачами. Есть возможность купить EPUB или PDF версию.
w3schools.com — руководство по языку JavaScript. На сайте можно найти не только справочную информацию, а и попробовать написать код.
Бесплатные видео уроки по изучению Javascript
В Youtube довольно много бесплатных видео по изучению джаваскрипта. Рекомендую подписаться на каналы:
Новичкам рекомендую посмотреть «Полный курс JavaScript для начинающих» от Богдана Стащука. По отзывам это самое доступное и понятное объяснение материала.
Курсы обучения Javascript с нуля
Полный курс по JavaScript + React — с нуля до результата от Ивана Петриченко.
JavaScript Стартовый — курс для новичков от ITVDN.
HTML, CSS, and Javascript for Web Developers — курс на Coursera от Johns Hopkins University.
На сайте Udemy часто можно купить курс для самостоятельного обучения всего за 10 — 20 долларов.
Как правильно учить JavaScript, чтоб был результат
Какой бы вариант обучения вы не выбрали, вам все равно нужно практиковаться писать код. Прочитать книгу или посмотреть видео — этого недостаточно. Пытайтесь повторять код, выполняйте домашние задания, потому что на следующий день вы забудете все, что прочитали или посмотрели.
На сайте codewars.com есть задачи по JavaScript. Выполняйте эти задачи сразу же после изучения определенной темы, чтоб закрепить полученные знания.
После изучения основ языка посмотрите в Youtube видео с выполнением реальных проектов на JavaScript. Также можно взять готовый скрипт галереи, слайдера или калькулятора и разобрать код, понять как это работает. Информацию берите из нескольких источников или от разных авторов, чтоб сравнить несколько подходов выполнения одной и той же задачи.
За сколько времени можно выучить Javascript
Основы JS можно выучить за несколько недель или месяцев, если уделять обучению 3 — 5 часов в день. Но это не сделает из вас хорошего программиста. С минимальной базой знаний попробуйте устроиться стажером или джуниором в IT компанию. На работе вы будете больше времени посвящать программированию и изучать именно то, что нужно для решения поставленных задач, а не все подряд.
Стать хорошим JavaScript разработчиком можно за 1 — 3 года, если уделять много времени обучению и практике.
Изучаем JavaScript с нуля. С чего начать изучение?
JavaScript — популярный мультипарадигменный язык программирования, поддерживающий объектно-ориентированный, функциональный и императивный стили. Сегодня он широко применяется в браузерах в качестве языка сценариев для придания веб-страницам интерактивности. В этой статье мы поговорим о том, как изучить JavaScript и с чего лучше начать.
Несколько советов
Изучать JavaScript можно разными способами. Вы можете записаться на соответствующие платные курсы или приступить к изучению самостоятельно. Курсы позволят изучить язык быстрее, т. к. самостоятельное изучение требует очень высокой мотивации, настойчивости и дисциплинированности. Кроме того, самостоятельное обучение имеет тенденцию длиться долго, если не бесконечно. Тем не менее при наличии желания и возможности такой подход тоже имеет право на жизнь.
Какой бы путь вы не выбрали, помните, что прежде, чем начать изучение, желательно пройти курс или самостоятельно изучить основы HTML и CSS. Считается, что после этого изучать JavaScript будет проще.
Если выбрали самостоятельное изучение, обязательно составьте план. Не приступайте к занятиям в чересчур утомлённом виде, иначе вы станете себя заставлять, а это плохо. Также в процессе обучения используйте современные техники управления временем, например, известный метод помидора (25 минут занимаетесь, 5 минут отдыхаете). Есть и другие методики, позволяющие повысить продуктивность.
Изучаем основы
Всё начинается с основ. Так как язык очень популярен, найти о нём информацию в интернете будет несложно. Но в этом-то и проблема, так как информации настолько много, что в ней легко потеряться. Дабы сократить поле поиска, обычно рекомендуют следующий список ресурсов: 1. MDN’s JavaScript Guide — руководство, охватывающее синтаксис, циклы, типы, циклы, выражения, функции, форматирование и многое другое. 2. You Don’t Know JS — здесь вы найдёте серию книг Кайла Симпсона. В них есть информация, которая поможет изучить язык программирования JavaScript на более глубоком уровне. 3. Eloquent JavaScript — крутейшая книга о JavaScript, но её лучше читать, когда получены базовые знания. 4. Free Code Camp — профессиональное сообщество программистов, где можно участвовать в чемпионатах, получать сертификаты, создавать проекты. 5. CodeCademy — неплохая платформа для обучения через решение задач. Хороша для новичка.
К сожалению, все эти ресурсы рассчитаны на тех, кто хорошо знает английский язык. Впрочем, в IT без английского сегодня никуда. Если же вас интересуют бесплатные курсы на русском, неплохой выбор есть на платформе Stepic.org.
Во время получения базовых знаний вы приступите к разработке первых простых программ. Главное — не лениться, и вы быстро почувствуете, что кое-что понимаете в этом языке программирования. Таким образом вы получите дополнительную мотивацию к изучению.
Когда сталкиваетесь с непосильной для вас задачей, изучайте форумы или обращайтесь за помощью на платформу вопросов и ответов StackOverflow. Не стесняйтесь спрашивать, вы ведь учитесь.
Я освоил основы. Что дальше?
Достигнув определённых успехов, нужно продолжать изучение на углубленном уровне. Здесь помогут следующие книги: 1.Effective JavaScript: 68 Specific Ways to Harness the Power of JavaScript. В этой книге рассказано про 68 подходов по написанию кода, причём каждый подход сопровождается примерами. 2. JavaScript — The Good Parts — довольно устаревшая книга. Но несмотря на это, она до сих пор учит писать эффективный и красивый код. 3. JavaScript Design Patters — здесь рассказано о том, как использовать современные шаблоны. Книга написана простым языком. 4. Test-Driven JavaScript Development — пожалуй, одна из лучших работ по обучению тестированию JavaScript-кода.
Книги книгами, но без практики никуда, поэтому нужно учиться и практиковаться одновременно. Обязательно создайте свой аккаунт на GitHub, старайтесь ежедневно писать пусть даже простой код, делитесь проектами, изучайте отзывы.
Если в вашем городе случаются мастер-классы и конференции JavaScript-разработчиков, не пропускайте подобные встречи — они могут быть очень полезны.
Заключение
Изучение JavaScript – дело непростое, особенно если речь идёт о самостоятельном обучении. Но результат того стоит. При этом вам стоит понимать, что даже освоив этот язык программирования и устроившись на высокооплачиваемую работу, учиться вам придётся всегда — это необходимо, чтобы оставаться на плаву, ведь технологии постоянно меняются и обновляются. Как говорится, поток информации бесконечен, поэтому опытный разработчик учится постоянно. А чтобы ничего не пропустить, многие подписываются на специализированные издания типа JSK Daily, JavaScript World, Hashnode Times, Frontend Buzz, JavaScript Weekly.
Кроме того, всегда можно пойти на углубленные курсы для опытных разработчиков и перейти на более высокий профессиональный уровень. Сделать это вам поможет OTUS:
JavaScript книги, курсы | что читать/смотреть | с чего начать
Приветствую, я сейчас делаю роадмап/план изучения по фронтенду, недавно закончил расписывать вводные уч. материалы по js, думаю это будет многим полезно, сделал в формате отдельного поста.
Сам роадмап в телеге, все в лайве, примерные сроки 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
Один из самых примечательных вводов в ЯП. Отличная книга, много кода, много примеров, все хорошо объяснено, отдельно хочется отметить главы-проекты, чего только стоит проект — создание маленького языка программирования.
Ну и разумеется, документация JS, там есть отличные туториалы, стоит ознакомиться.
9. Есть еще один курс, о котором нельзя не упомянуть. Сразу скажу — сложный, но абсолютно потрясающий. Я бы даже сказал, что он единственный в своем роде. Более полного и глубокого я не видел, что сказать это настоящий академический подход.
Этот курс стоит хотя бы просто посмотреть, поскольку пройти его с нуля получится очень не у многих. Наверно есть смысл подучить язык, а уже потом к нему вернуться.