Уроки по javascript для начинающих it

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. иначе в консоль должно быть выведено сообщение «Ничего особенного»

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

Источник