1 / Основы

JavaScript (JS) — это язык программирования, который позволяет сайту реагировать на действия пользователя (придать интерактивность). Все современные браузеры понимают JS, что называется, «из коробки».

Чтобы начать изучать JS, не нужно скачивать специальный редактор. В современных браузерах есть специальная функция — инструменты разработчика (developer tools), с помощью которой можно выполнять любые команды JS.

Чтобы запустить инструменты разработчика, открой Google Chrome, потом нажми F12.

Здесь можно видеть множество разных вкладок, но нас интересует Console (консоль). Как только ты откроешь консоль, считай, что ты готов программировать.

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

iOS — JS run - Live code editor
Android — Code Runner For JS

Присоединяйся к чату
Задавай вопросы по задачам
Общайся с другими участниками!

Первая программа

Начнём с простейших математических операций: сложения, вычитания, умножения и деления. Как это сделать на JS?

function name(a, b) {
return a + b;
}

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

Перепиши его в консоль. После нажатия Enter браузер выведет слово undefined. Всё нормально, так и должно быть.

Теперь добавь новую строку name(2, 8). После нажатия Enter браузер выведет 10.

Итак, что же мы такое сделали?

Сначала мы сохранили в браузере функцию, которая выполняет некоторый набор команд. Браузер записал у себя эту функцию, и мы теперь можем выполнить её столько раз, сколько захотим. Собственно, далее, написав name(2, 8), мы обратились к функции и выполнили расчёты.

Как ты уже мог догадаться, эта функция сложила числа 2 и 8 и вернула браузеру результат.

Упражнения

1.1.1. Выполни следующие вызовы:

name(15, 5), в консоль выведется: 20
name(100, 11), в консоль выведется: 111
name(-5, 5), в консоль выведется: 0

1.1.2. Перепиши функцию, измени оператор (знак + ) на - и выполни вызовы:

name(15, 5), в консоль выведется: 10
name(0, 1), в консоль выведется: -1
name(-5, 5), в консоль выведется: -10

1.1.3. Перепиши функцию, измени оператор на * (умножить) и выполни вызовы:

name(2, 10), в консоль выведется: 20
name(-5, 5), в консоль выведется: -25
name(12345, 0), в консоль выведется: 0

1.1.4. Перепиши функцию, измени оператор на / (разделить) и выполни вызовы:

name(50, 10), в консоль выведется: 5
name(10, 1), в консоль выведется: 10
name(-100, -50), в консоль выведется: 2

1.1.5. Перепиши функцию с оператором + по памяти, замени имена параметров a и b на указанные в задании. Для этого в скобках и после слова return поставь новые значения вместо a и b.
• x и y
Вызови name(2, 8), в консоль выведется: 10
• i и j
Вызови name(2, 8), в консоль выведется: 10
• operand1 и operand2
Вызови name(2, 8), в консоль выведется: 10
• op_1 и op_2
Вызови name(2, 8), в консоль выведется: 10
• Поменяй местами параметры
Вызови name(2, 8), в консоль выведется: 10

1.1.6. Вспомни и напиши функцию с оператором + по памяти. Измени имя функции name на указанное в задании. Вызови функцию по новому имени.
• add
Вызови add(2, 8), в консоль выведется: 10
• sum
Вызови sum(2, 8), в консоль выведется: 10
• my_function
Вызови my_function(2, 8), в консоль выведется: 10
• myFunction
Вызови myFunction(2, 8), в консоль выведется: 10
• сложить (по-русски)
Вызови сложить(2, 8), в консоль выведется: 10

Объявление и параметры функций

Как объявляется функция?

Сначала надо написать слово function, чтобы JS понял, что это объявление функции.
Затем надо указать имя, чтобы мы позже могли вызвать функцию по имени.
После имени функции, в скобках, через запятую перечисляются параметры.
Далее в фигурных скобках заключено самое интересное — тело функции. Это набор команд для вычисления результата (в нашем случае суммы параметров a и b).

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

Сложить числа.
Вернуть браузеру результат.
С первым пунктом всё понятно, вспоминаем школьную алгебру и пишем: a + b.
Командой return мы говорим функции вернуть результат расчётов.
Чтобы дать понять JS, что с действием мы закончили, в конце строчки надо поставить точку с запятой:

return a + b;

Для JavaScript ; — то же самое, что точка в обычном предложении. С помощью точки с запятой JS понимает, когда заканчивается одна команда и начинается другая.

Как читает эту функцию опытный разработчик?

function name(a, b) { // объявляем функцию с именем name, которая будет использовать параметры a и b
return a + b; // возвращаем сумму значений a и b
} // конец функции

Когда ты вызываешь name(2, 8), браузер начинает искать у себя функцию с именем name. Если он не находит такую функцию, выдаёт ошибку. Если находит, то вызывает её.
В параметр a попадает первое значение (2), а в параметр b второе (8).
Далее уже в теле функции происходит сложение 2 и 8, а полученная сумма сохраняется в памяти. Когда функция завершается, браузер возвращается к строке name(2, 8). Так как после неё нет других команд, то он просто берёт последнее значение из памяти (результат выполнения функции) и выводит его.

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

function pow(a) {
return a * a;
}

Вызови её со значением 5 (в консоль выведется: 25)

Можно не указывать параметры в функции

function pi() {
return 3.1416;
}

Вызови функцию (в консоль выведется: 3.1416)

Эта функция возвращает значение числа пи (3,1416).

Хоть параметров нет, нам всё равно необходимо написать пустые скобки.

Обрати внимание, что в JS мы должны использовать точку в десятичных дробях вместо привычной в России запятой.

Следующая функция использует 4 параметра:

function add4(a, b, c, d) {
return a + b + c + d;
}

Вызови её со значениями 1.1, 2.2, 3.3, 4.4 (в консоль выведется: 11)

Упражнения

1.1.7. Напиши функцию без параметров, которая возвращает температуру кипения воды.
Имя функции boilWater, температура кипения 100.

в консоль выведется: 100

1.1.8. Напиши функцию без параметров, которая возвращает значение ускорения свободного падения 9,8.

В консоль выведется: 9.8

1.1.9. Напиши функцию без параметров, которая возвращает квадрат числа пи (3,14 * 3,14).

В консоль выведется: 9.8596

1.1.10. Напиши функцию с 4 параметрами, которая возвращает их произведение.

mul(1, 2, 3, 4), в консоль выведется: 24

1.1.11. Напиши функцию с 5 параметрами, возвращающую разницу.

div(10, 4, 3, 2, 1), в консоль выведется: 0

1.1.12. Напиши функцию с 3 параметрами, которая возвращает сумму их квадратов (a * a + b * b + c * c).

pow(1, 2, 3), в консоль выведется: 14

Строки

В JS можно работать с текстом. В программировании текст называют строкой, от английского string.

Давай изменим функцию, чтобы она выводила строку.

function say(name) {
return "Hello, " + name;
}

Вызови её и передай параметр "Anna":

После нажатия Enter браузер выведет "Hello, Anna".
Как ты можешь видеть, теперь функция принимает один параметр name. В параметр сохраняется значение Anna.
JS понимает, что это строка, потому что значение написано в кавычках. Чтобы объединить строки "Hello, " и "Anna", необходимо использовать оператор +.

Упражнения

1.2.1. Напиши функцию с 2 параметрами, которая возвращает строку, полученную объединением этих параметров.

concatenation("Привет, ", "Мир!"), в консоль выведется: "Привет, Мир!"

1.2.2. Напиши функцию с 3 параметрами, которые возвращают строку, полученную объедением этих параметров.

concatenation("Здравствуй, ", "Саша! ", "Как дела?"), в консоль выведется: "Здравствуй, Саша! Как дела?"

1.2.3. Напиши функцию с 3 параметрами: день, месяц, год, которая возвращает строку "Сегодня <день> <месяц> <год> года".

date("1", "июня", "2020"), в консоль выведется: "Сегодня 1 июня 2020 года"