Javascript как научиться программировать

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

const name = 'Петя'; let age = 25; /// Изменение данных age = 26;

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

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

• string (строка) — ‘Петя’
• number (число) — 25 / 0 / -1111111 / 0.0001
• boolean (Булинь, Логический тип) — true / false
• undefined (отсутствующее значение) — undefined

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

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

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

/// ЧИСЛА: const X = 1; const Y = 2 + 4; // Y равен 6 const Z = X+Y; // Z равен 7 /// СТРОКИ: const a = 'a'; const b = 'b' + ' ' + 'c' const d = a + b ; /// d равна 'ab c' /// СТРОКИ + ЧИСЛА const Xa = X + a; /// Xa равен '1a' - ///при складывании числа со строкой - получается строка const XYa = X + Y + a; /// Xa равен '7a' ///при складывании действия выполняются слева направа. /// сначала число складывается с числом, затем со строкой

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

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

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

if(name === 'Петя' && age > 18) < // Действие выполнится, если оба условия верны >if(name !== undefined || age === 18) < // Действие выполнится, если хотя бы одно условие верно >if(name !== undefined || age === 18 && X === 1) < // Выполнится если name !== undefined или если age === 18 && X === 1 // Тут важно отметить! // Если используете в условии одновременно операторы && и || - // обязательно группируйте их скобочками, чтобы не сделать ошибки >if(name !== undefined || (age === 18 && X === 1) ) < // Таким образом гораздо понятнее, какие условия с какими связаны >if( (name !== undefined || age === 18) && X === 1 ) < // Или вот так >

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

if(name === 'Петя' && age > 18) < // Действие выполнится, если оба условия верны >else < // Действие выполнится, если хотя бы одно из условий неверно >

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

if(name === 'Петя') < /// >else if(age > 18) < /// >else < /// >

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

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

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

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

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

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

1. Написать код, который будет выводить в консоль поочередно цифры от одного до 5.
2. Написать код, который будет выводить в консоль слово «Мужчина» если в поле gender равен ‘male’ и «Женщина» иначе
3. Написать код, который будет в консоль выводить сообщение «С днем рождения, ИМЯ ФАМИЛИЯ» в том случае, если текущий день-месяц равен дню-месяцу рождения пользователя. А также увеличит возраст (age) на 1.
4. Написать код, который добавит запишет в переменную fullName , значение имени и фамилии. То есть будет равен Петя Иванов, но сделает это используя переменные.
5. Написать код, который выведет в консоль полное имя пользователя, в случае, если пользователь — женщина и сегодня у неё день рождения, либо в случае, если пользователь мужчина и ему больше 20. иначе в консоль должно быть выведено сообщение «Ничего особенного»

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

Источник

Как выучить JavaScript — 7 шагов от новичка до senior

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

HTML и CSS, как основа для изучения JavaScript

Одна из основных специализаций JavaScript это работа с контентом на web-странице — другими словами оперирование DOM-деревом (Объектная Модель Документа). Добавить динамически меняющийся текст, поменять цвет кнопки при клике, вывести pop-up — обычные задачи для JavaScript разработчика в сфере web-разработки. Для всего этого понадобиться разобраться в HTML и CSS. Здесь есть свои нюансы и чтобы стать гуру в этих областях придется попотеть (СSS), но для нас важно усвоить основы, а на это не уйдет более месяца.

Ресурсов для изучения HTML и CSS множество, но здесь хотелось бы отметить тренажер от HTML Academy. В интерактивной форме и за короткий срок можно получить базовые навыки на практике и приступить уже к изучению JavaScript.

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

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

• https://learn.javascript.ru — на русском;
• https://schoolsw3.com/js — на русском;
• https://www.freecodecamp.org — на английском.

Раздел за разделом, тема за темой, задание за заданием, пример за примером и в один момент вы поймете, что вы в чем-то начали разбираться.

Познакомиться с JavaScript также можно и в HTML Академии, здесь разработчики подготовили удобный тренажер по JS, который не даст сбиться с намеченного курса.

Как стать JavaScript разработчиком

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

Бесплатные курсы на YouTube

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

• Владилен Минин: Web-разработка, теория и практика
• Loftblog — IT видеокурсы
• Гоша Дударь — Нет времени объяснять программируй

Как ускорить процесс обучения JavaScript

Стажировка

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

Свои проекты

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

Фриланс

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

Прокачиваем JavaScript книгами

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

Источник