Pull to refresh

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

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

Хочу написать серию статей о том, как безболезненно стать 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

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

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

  1. Написать код, который будет выводить в консоль поочередно цифры от одного до 5.

  2. Написать код, который будет выводить в консоль слово "Мужчина" если в поле gender равен 'male' и "Женщина" иначе

  3. Написать код, который будет в консоль выводить сообщение "С днем рождения, ИМЯ ФАМИЛИЯ" в том случае, если текущий день-месяц равен дню-месяцу рождения пользователя. А также увеличит возраст (age) на 1.

  4. Написать код, который добавит запишет в переменную fullName , значение имени и фамилии. То есть будет равен Петя Иванов, но сделает это используя переменные.

  5. Написать код, который выведет в консоль полное имя пользователя, в случае, если пользователь - женщина и сегодня у неё день рождения, либо в случае, если пользователь мужчина и ему больше 20. иначе в консоль должно быть выведено сообщение "Ничего особенного"

Как запустить тесты
Тестирование задач
Тестирование задач

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

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.