2.3.1 Основы JS-кода

Изображение из открытых источников

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

Сейчас объясню. Во-первых - открываем консоль разработчика и открывем вкладку Console:

Итак, в окне консоли видим приглашение для ввода команд: тут мы можем написать скрипт. Да-да! Можно написать прямо здесь - главное тогда его не забывать копировать себе хотя бы в блокнот.

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

Ввод команды завершается нажатием Enter, а для написания многострочной команды используется Shift Enter.

Всё. Краткая приамбула закончена. Теперь с чего начать знакомство.

1. Объявление переменных.

Что такое переменная? По простому, это некое слово, которому мы назначаем какое-то соответствующее значение. Впоследствии мы используем переменную для оперирования соответствуеющими ему данными.

В JS переменные объявляются тремя способами: var, let и const. Сейчас будем рассматривать только var, как самую простую в понимании.

Объявление обычных переменных происходит простейшей строкой:

var a = 'Какой-то текст';
var b = 100;
var c = true;

Здесь я объявил три переенные: переменная a будет содержать текст 'Какой-то текст', в переменной b будет находиться число 100, а переменная c будет равна true. Более подробно о переменных в этой статье.

Еще в той же статье про типы массив и объект. Объявление происходит так:

var d = [0, 1, 2];
var e = ['a', 'b', 'c'];
var f = {a: 0, b: 'qwerty', d: true};

Переменную d я объявил массивом со значениями 0, 1 и 2; массив e - массив из трех букв a, b и c; переменная f назначена объектом со свойствами a равное 0, b - строка qwerty и свойство d - true.

2. Дебаг (проверка, вывод) значений

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

Во-первых скопирую цитаты выше с объявлениями переменных и вставлю в консоль.

Обратите внимание на undefined после каждого ввода. Это говорит о том, что выводить в консоль нечего: действие не привело ни к какому ответу.

Теперь попробую вывести в консоль значение первых переменных:

Просто пишем в консоли имя переменной и нажимаем Enter

Отлично! Переменные выводятся. Теперь выведу массив и объект.

Обратите внимание, что массивы и объекты выводятся в интерактивном виде: вы можете раскрывать "дерево" и детально смотреть данные, содержащиеся в переменной

То, что я сейчас продемонстрировал, вызывается из JS-кода командой console.log(...).

Демонстрация вывода объекта f:

Как видно на примере, последняя и предпоследняя строка приводит к одному и тому же результату.

Еще вывод возможен через команду alert(...):

В последней строке - вывод на экран текста из переменной a.

Однако, вывод массива или объекта приведет вот к такому результату.

Так что практический смысл для нас имеет только console.log(...).

3. Математические операции

Ничего сверх-экстраординарного тут не будет: + - / *, поддержка скобок - все как в начальной школе объясняли.
Объявлю две переменные с числовыми значениями и покажу действие математики в консоли.

4. Действия со строковыми переменными.

Из простейших действий тут есть только одно: сложение строк (называется страшным словом конкатенация):

Как видно, ничего сложного в этом нет!

5. Ну и в завершении о переопределении переменных.

До того, я только объявлял переменные и выводил их. Сейчас продемонстрирую что такое переопределение.

Переменную c я сразу объявил результатом деления от двух ранее объявленных переменных и вывел результат через console.log. А потом я переменную c еще раз пересчитал. Как видно, никаких сложных действий тут нет. Просто нужно помнить, что переменные мы можем переопределять.

Все окажется сложнее, если мы будем иметь переменную строкового типа:

Сработает только "сложение". При этом оно сработает исключительно как склейка двух строк: 10abc и abc10

В случае, если JS не сможет посчитать, он выдаст NaN.

Все статьи попадают в "Оглавление канала". Не пропускаем новости!