May 18 2022 at 09:31

JavaScript для начинающих. Урок 1

Invite pending

Здравствуйте, уважаемые начинающие разработчики!

Хочу написать серию статей о том, как безболезненно стать JS разработчиком. В моих планах научить вас самым популярным и полезным инструментам в JS и подготовить к выбору направления бэка или фронта. Про эти направления также собираюсь писать обучающие статьи, но всё по порядку. В рамках этого курса, я хочу познакомить вас с "ванильным" JS - то есть с базовым функционалом языка, не вдаваясь во всяческие фреймворки.

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

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

Ну, а если будут возникать вопросы - пишите в комментарии, постараюсь там держать с вами связь.

Также буду рад конструктивной критике от всех неравнодушных. Ну, и фидбэку от тех, кто читает мои статьи.

Ну всё, можем начинать.

Вступление

JavaScript - язык программирования!

По некоторым исследованиям, кстати, самый популярный. И уж точно один из самых простых для входа в IT.

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

Во многом, язык популярен благодаря развитию веба. Ведь он монополизировал браузер и является, за редкими исключениями, единственным языком способным ~~делать анимации и формочки валидировать~~ делать почти сколь угодно сложную логику на клиенте (в браузере).

Современный веб - это не лэндосики и интернет магазины из 2000-х, а, по большей части, достаточно сложные и интересные веб приложения. Помимо клиентской логики JS также популярен на сервере. И там его популярность растет год от года. Еще JS позволяет писать мобильные приложения и даже немного на десктоп замахивается.
В общем, язык один, а возможностей много.

Погнали (Hello world)

Принято в мире IT начинать изучение чего либо с "hello world" приложения.
Это довольно таки хорошая практика. Самое сложное, в изучении чего либо - начать, а начинать с чего то супер простого - не так сложно.

Я для вас подготовил мини проект в codesandbox. Там мы и будем работать:

https://codesandbox.io/s/js-1-96j2yl?file=/src/index.js

Итак, что мы можем туда написать, чтобы понять, что всё работает.
Есть основной способ проверки кода. Вывести какое-либо сообщение в консоль.
Для этого в JS есть функция console.log Она имеет следующий синтаксис:

console.log('ВАШ ТЕКСТ');

В нашем случае для отображения нужной фразы пишем такое:

console.log('Hello World!');

Должно получиться что-то подобное:

Если получилось - поздравляю! Вы теперь JS разработчик)

От элементарного к простому

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

1) Переменные

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

const name = 'Петя';

Читается это слева направо. "Неизменной переменной (константе) 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'
///при складывании действия выполняются слева направа. 
/// сначала число складывается с числом, затем со строкой

3) Условия

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

if(условие) {
  // строчки кода, которые выполняются, если условие верно 
}

Условие может быть просто булинем (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, в нем описаны функции (синтаксис которых мы разберем чуть позже).
Повторюсь, для каждой задачки написаны тесты для самопроверки.

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

Вот ссылка, на всякий случай: https://codesandbox.io/s/js-1-96j2yl?file=/src/hw.js

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

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

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

Как запустить тесты

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

Hubs:

JavaScript