02. Основы JavaScript (часть 1)

Создание базового документа

Базовый документ для нас это связка html-файла и прикрепленного к нему js-файла. Весь основной код мы будем писать темно во втором, а первый же (на ближайшее время) нам нужен только для того, чтобы вызвать и выполнить js-код.

Нам необходимо создать два файла — lesson01.html и script.js. Для этого создайте где-то отдельную папку, затем откройте VSC и в меню File выберите Open, после чего укажите созданную папку. В левой панели у соответствующей папки нажмите кнопку отдания файлов, она появится при наведении на нее:

HTML-файл будет выглядеть так:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./script.js"></script>
</head>
<body>
    
</body>
</html>

Именно строчка <script src=»./script.js»></script> и подключит наш js-файл к html. Запись ./ перед названием файла означает, что файл будет браться из той же директории. Сам js-файл сейчас пустой динам не нужно его чем-то заполнять, будем делать это по мере продвижения по статье.

Оба файла сразу после создания откроются в редакторе. Далее попробуем проверить как все работает и порадуемся первым результатам, которые выведем в консоль браузера.

Для удобства следует сделать Chrome браузером по умолчанию. Чтобы запустить файл и видеть все изменения, нужно в нижней панели редактора нажать кнопку «Go Live», сразу же откроется браузер по умолчанию (если не хотите его менять на Chrome, просто скопируйте адрес и вставьте его в Chrome) и отобразить нашу страницу. Так как там ничего нет, мы увидим пустой белый лист. Нам нужна консоль браузера, для этого нажимаем на любом месте страницы правой кнопкой мыши и выбираем пункт «Просмотреть код». Откроется инструмент разработчика, там выберите Console. Именно она будет нашим инструментом на ближайшие лекции.

Теперь нужно проверить как все работает. Для этого необходимо открыть файл script.js, который мы создали ранее набрать там следующий текст:

console.log('Hello World!');

Сохраняем файл и смотрим в консоль. Если все работает правильно, то мы видим в ней сообщение «Hello World». Ура, вы только что написали свою первую каноническую программу приветствия мира!

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

JavaScript

Все готово к настоящему началу, переходим к базовым понятиям языка. Самая база будет занимать 2 статьи, в которых я расскажу об основных понятиях языка. В этой статье будут рассмотрены следующие понятия:

  • Переменные.
  • Типы данных и их преобразования.
  • Операторы

Переменные

Прежде всего необходимо пояснить, что это такое:

Переменная — это «именованное хранилище» для данных.

Как видно из определения, переменная должна что-то хранить, то есть какие-то данные. Таким образом мы создаем некоторое хранилище в памяти, к которому потом можем обратиться по имени. Как с людьми, мы обращаемся к конкретному человеку по имени и в толпе человек сразу понимает, что обращается к нему.

Переменные создаются с помощью двух ключевых слов: let и const. Сейчас можно еще часто встретить определение переменной с помощью ключевого слова var, но такое определение устарело. По прежнему можно его использовать, о в его применении есть ряд особенностей.

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

  • let — используется для значений, которые могут изменяться, то есть это в полной мере переменная.
  • const — используют для констант. попытка присвоить ей какое-то значение обернется ошибкой.

Теперь разберемся как создать переменную. Запись может выглядеть так:

let a = 1;

Поясню как прочитать такую запись: создаю переменную, которая может изменяться (так как использую ключевое слово let), с именем «a» и присваиваю ей значение 1. То же самое и с const, с той лишь разницей, что я в будущем намереваюсь использовать ее как константу в моей программе.

Теперь более подробно о некоторых особенностях. Используя let я могу создать переменную без присвоения ей какого-то значения. Предположим, мне нужна пустая переменная, которой будет присвоено что-то в будущем. Например, результат каких-то вычислений. С const я не могу так сделать, ей нужно сразу присвоить значение, так как мы не можем его менять, как я уже сказал ранее. Можно привести аналогию с реальным миром: Наше имя будет const, а никнейм, который используем в сети Корее будет let, так как мы можем его поменять и не один раз.

Посмотрим let на практике:

let nickname = 'Thanos';
let heroes;

На первой строке мы создали переменную nickname и сразу присвоили ей значение Thanos, на второй просто создали пустую переменную heroes.

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

Дальше, чтобы присвоить переменной heroes какое-либо значение нужно использовать следующую конструкцию:

heroes = 'Dr. Strange';

Таким образом теперь переменная heroes имеет значение Dr. Strange.

Как было сказано ранее, переменные можно переназначать:

heroes = 'Dr. Strange';
heroes = 'Nick Fury';
heroes = 'Thor';

Во второй строке мы присваиваем переменной значение Nick Fury, на третьей — Thor. То есть с каждой новой строкой мы меняли ее значение и если сейчас попытаться вывести эту переменную в консоль, то можно увидеть, что сейчас ее значение будет Thor.

Именование переменных

Для именований переменных можно использовать следующие варианты:

let userName; // используется нотация "camel case"
let user123; // имя переменной включает цифры
let $ = 'hello'; // переменная с именем $
let _ = 'world'; // переменная с именем _

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

// — означает однострочный комментарий, то есть текст после двойного слэша будет игнорироваться интерпретатором

Теперь о том, как нельзя называть переменные:

let 1a; // имя переменной не может начинаться с цифры
let user-name; // имя переменной не может содержать дефис

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

let let = 1;
let return = 1;
let class = 1;
let function = 1;

К слову, в имени переменной регистр имеет значение. На примере ниже будут совершенно разные переменные:

let test;
let Test;

Типы данных

Существует несколько типов данных, у каждого есть особенности, о которых я опишу ниже. Мы не будем рассматривать все, остановимся на наиболее часто встречающихся.

Number

Числовой тип данных предполагает как целочисленные значения, так и значения с плавающей точкой (дробные). Рассмотрим на примере:

let x = 123;
x = 123.21;

С числами можно производить простые математические операции:

let a = 5 * 4; // умножение
let b = 4 / 2; // деление
let c = 5 + 5; // сложение
let d = 10 - 3; // вычитание

На самом деле со строками также можно производить некоторые операции, но о них будет более подробно рассказано в статье про Массивы и Строки. Более подробно про операции с числами будут рассмотрены в части 2.

Существуют также и специальные числовые значения:

let i = Infinity; // бесконечность
let O = -Infinity; // - бесконечность
let n = NaN; // Not a Number - не число, результат неправильной математической операции.

String

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

let str = "Строка в двойных кавычках";
let str2 = 'Строка в одинарных кавычках';

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

let name = 'Alex';
let greet = `Hello, ${name}`;

Как результат вывода переменной greet мы получим строку: «Hello, Alex».

Boolean

Логический тип данных, не всегда сразу понимаемый. Может иметь только два значения: true (истина) и false (ложь).

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

let isAdmin = true;
let isUser = false;

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

let isGreater = 4 > 1; // Возвратит true так как 4 больше 1

Null и Undefined

Null является специальным значением и означает «ничего», «пусто». Применяется когда мы явно хотим указать отсутствие значения у переменной.

let age = null;

Если мы создадим переменную, но не присвоим ей какого-либо значения, то при попытке вывести ее нам вернется undefined:

let x;

Но на самом деле мы также можем назначить любой переменной undefined:

let y = 1;
y = undefined;

Правда в применении такая конструкция редко находит применение.

Symbol

Представляет собой уникальный идентификатор; Применяется в тех случаях, когда необходимо назначить чему-либо уникальный идентификатор:

let id = Symbol();

Можно создать идентификатор с описанием:

let userId = Symbol('user id');

При этом стоит учитывать, что Символы с одинаковым описанием будут разными:

let id1 = Symbol('id');
let id2 = Symbol('id');
id1 === id2; // false

typeof

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

// Синтаксис функции typeof
typeof(undefined); // undefined
typeof(0); // number
typeof(true); // boolean
typeof('foo'); // string

// Синтаксис оператора typeof
typeof Symbol('id'); // Symbol
typeof Math; // Object
typeof null; // Object
typeof alert; // Function

Math – это встроенный объект, который предоставляет математические операции и константы.

Результатом вызова typeof null является «object». Это неверно. Это официально признанная ошибка в typeof, сохранённая для совместимости. Конечно, null не является объектом. Это специальное значение с отдельным типом. Повторимся, это ошибка в языке.

Вызов typeof alert возвращает «function», потому что alert является функцией. Мы изучим функции в следующих главах, где заодно увидим, что в JavaScript нет специального типа «функция». Функции относятся к объектному типу. Но typeof обрабатывает их особым образом, возвращая «function». Формально это неверно, но очень удобно на практике.

Преобразование типов

Строковое преобразование

Преобразование к строке необходимо в тех случаях, когда требуется строковое представление чего-либо:

let value = true;
alert(typeof value); // boolean

value = String(value); // преобразование в строку переменной value
alert(typeof value); // теперь будет string

Численное преобразование

Преобразование в число может происходить несколькими способами:

// С помощью математических операций
let result = '10' / '5'; // 2, строки преобразуются в числа

// Можно использовать функцию Number
let str = '123';
alert(typeof str); // string

str = Number(str); // преобразование числу переменной str
alert(typeof str); // теперь будет number

Если строка не может быть преобразована в числе, то в качестве результата будет ошибка NaN:

let str = 'This is a string';

str = Number(str);
alert(str); // NaN

Правила численного преобразования

Number(undefined); // undefined преобразуется в NaN
Number(null); // null преобразуется в 0
Number(true); // true преобразуется в 1
Number(false); // false преобразуется в 0
Number(' '); // пробельные символы по краям обрезаются, если остается пустая строка, то 0
Number(' 123 '); // при не пустой строке получается число
Number('123word'); // результат будет NaN

Почти все математические операторы выполняют численные преобразования.Исключение составляет «+». Если одно из слагаемых является строкой, то и все остальные будут строками.

alert(1 + '2'); // строка 12
alert('1' + 2); // строка 12

Логическое преобразование

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

alert(Boolean(1)); // Выведет true
alert(Boolean(0)); // Выведет false

Часто как вариант замены true и false используют 1 и 0 соответственно. Н могут быть и другие примеры.

alert(Boolean('Hello!')); // Выведет true, так как строка не пустая
alert(Boolean('')); // Выведет false, строка пустая

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

Бывают случаи, когда чисто интуитивно значение может быть пустым, однако будет возвращено true.

alert(Boolean('0')); // Выведет true, так как строка не пустая
alert(Boolean(' ')); // Выведет true, так как пробел тоже не является пустым значением. Любая не пустая строка будет возвращать true