Что такое JavaScript?

JavaScript — это прототипно-ориентированный язык сценариев, поддерживающий объектно-ориентированный, императивный и функциональный стили программирования.
Вопреки популярному мнению, JavaScript не имеет ничего общего с Java. Изначально, когда язык создавался как способ программирования веб-страниц в браузере Netscape Navigator, он назывался LiveScript, но ввиду огромной популярности в то время языка программирования Java, LiveScript был переименован в JavaScript.
Области использования JavaScript
Созданный Бренданом Эйхом в 1995 году, он появился как язык, который разработчики могли бы использовать для создания интерактивных браузерных приложений. На сегодняшний же день JS имеет огромную популярность и превратился из чисто интерфейсного языка в тот, который можно использовать для “полного стека” (браузер + сервер).
JavaScript также можно использовать при тестировании программных приложений, в базах данных, и даже для решений IOT (Internet of Things). Благодаря такой эволюции он стал универсальным языком программирования и, возможно, одним из самых полезных для изучения в наши дни.
JavaScript - это язык для браузеров. Браузер понимает его благодаря встроенному движку, который считывает код JavaScript и интерпретирует его. Затем браузер действует в соответствии с “инструкциями”, будь то изменение текста элемента на экране, выполнение арифметических операций и отображение результата в браузере.
JavaScript имеет полную интеграцию с HTML и CSS, и мы можем встроить “скрипты“ - программы, написанные на JavaScript, в любой HTML-документ.
Тег <script>
Для добавления «скриптов» на HTML-страницу используется тег script. Таких тегов на HTML-странице может быть сколько угодно. Как и в случае с CSS, к HTML-документу мы можем подключить и внешние скрипты. Для этого с помощью атрибута src нужно указать путь к файлу с расширением .js, содержащему нашу программу:
<script src="./main.js"></script>
Стоит отметить, что если имеется атрибут src, программный код внутри тега script будет проигнорирован. В статье “Основы HTML“ мы научились создавать веб-страницу. Теперь подключим к ней простой скрипт:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
alert('Привет!!!');
</script>
</body>
</html>
Открыв HTML-страницу в браузере, мы увидим данное сообщение:

Что такое инструкции?
alert('Привет!!!') - это инструкция JavaScript, которая показывает диалоговое окно браузера с необязательным сообщением и кнопкой “ОК“.
JavaScript-приложения состоят из инструкций - команд, выполняющих различные действия: объявление переменной; функции; запустить или прервать цикл; выполнить условную инструкцию и т.д. Инструкций может быть столько, сколько мы захотим, и все инструкции имеют определённый синтаксис.
Например:
// Инструкция объявления и инициализации переменной
let age = 26;
Для группировки нескольких инструкций может использоваться блок инструкций. Блок отделяется парой фигурных скобок - “ {} “ и может иметь название:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Инструкция объявления функции sayHello
function sayHello (){
// Две инструкции заключённые в блок внутри объявленной функции
let name = 'Name';
alert(`Hello ${name}!!!`);
};
// Инструкция вызова функции sayHello
sayHello();
</script>
</body>
</html>
Инструкции отделяются друг от друга символом “ ; “. Хотя он и не обязателен, но бывают ситуации, когда игнорирование точки с запятой в конце инструкции может привести к непредвиденным ошибкам в программе, которые довольно сложно обнаружить и исправить.
Использование комментариев
Большое количество инструкций в программе может вызвать ещё большее количество путаницы при чтении кода этой программы человеком. Хорошей практикой при написании программы является оставление комментариев с пояснениями, что делает тот или иной блок кода.
Комментарии бывают двух типов: однострочные - начинаются с двойной косой черты: “ // “, и многострочные - начинаются с косой черты со звёздочкой и заканчиваются звёздочкой и косой чертой: “ /* */ “.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Я однострочный комментарий
alert('Привет!!!');
/* А вот я -
многострочный */
</script>
</body>
</html>
Комментарии в JavaScript можно оставлять в любом месте. Это никак не повлияет на работу программы, поскольку интерпретатор браузера попросту проигнорирует их. Поэтому и код, заключённый в комментарий выполнен браузером не будет:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Я однострочный комментарий
alert('Привет!!!');
/* alert('Эта инструкция закомментирована и браузер проигнорирует её');*/
</script>
</body>
</html>
Что такое переменные?
Компьютеры работают с информацией. Эта информация представлена в виде данных. Данные можно читать, данные можно обрабатывать, данные можно создавать или вообще ничего с ними не делать. Но также данные нужно где-то хранить.
В JavaScript для этого существуют переменные - или “именованное хранилище данных”. Однако недостаточно просто написать какое-либо название переменной. Программе нужно сказать, что это переменная, а также присвоить этой переменной данные.
До 2015 года единственным способом объявления переменной было использование ключевого слова var. С приходом более современной спецификации ECMAScript 6 на смену уже устаревшему var пришли let и const.
Все три способа объявления переменной имеют различия. Ключевым же является определение с помощью const («константы») переменной, которую в дальнейшем уже нельзя переопределить. Чтобы присвоить переменной значение, используется оператор присвоения: «=».
Вспомним пример выше:
/* С помощью ключевого слова let объявили переменную age и присвоили ей значение 26 */
let age = 26;
Существуют некоторые правила и ограничения при именовании переменной. Так, в названии можно использовать цифры, например name44, но оно не должно начинаться с цифр. Не допустимо использование знаков препинания и специальных символов, за исключением знака доллара ($) и подчеркивания ( _ ).
Также переменные нельзя называть словами со специальным значением, являющимися ключевыми и зарезервированными - например let, const, class и др. Таких ключевых слов довольно много, однако не стоит запоминать их все. Использование такого слова для названия переменной непременно приведет к синтаксической ошибке.
Так же стоит отметить, что хорошим тоном будет называть переменные понятными именами, несущими в себе определённую смысловую нагрузку.
Типы данных в JavaScript
Переменная — хранилище для данных (значений). Каждое значение имеет определённый тип. Это строковый, числовой, логический тип и т.д. Существуют языки программирования со строгой типизацией - например, такие как Java и Python.
JavaScript, в свою очередь, не строго типизированный язык. Объявленной переменной не нужно указывать её тип - он зависит от значения, которое мы ей присваиваем. Типы данных делятся на две группы: примитивные (primitive data types) и сложные (composite data types). "Примитивами" являются числовой, строковый, логический типы, а также null и underfined.
Данные с числовым типом, number, представлен как целыми, так и дробными числами. Для слишком больших или слишком маленьких чисел можно использовать запись с добавлением буквы е (экспоненциальная запись). Например: 4.556е7, что означает 4.556 * 107.
В спецификации ECMAScript 2020 представлен новый примитивный тип под названием BigInt, который позволяет представлять целые числа размером больше 253 - 1. Данный тип позволяет работать с поистине “огромными“ числами.
/* Чтобы создать значение типа BigInt, необходимо добавить n в конец числового литерала*/let bigNumber = 34384934293829382009430492n;
Также в JavaScript существуют три специальных значения, которые имеют числовой тип, но ведут себя вовсе не как числа.
«Infinity» и «-Infinity» - определяют бесконечность, положительную и отрицательную соответственно. «NaN» - означает «Not a Number» (не число). Последний можно получить, выполнив какую-либо операцию, не имеющую осмысленного результата. Например при делении 0 на 0. В JavaScript эти три значения имеют числовой тип, но ведут себя вовсе не как числа.
С числами, как правило, выполняют арифметические действия (операции): сложение, вычитание, умножение, деление, возведение в степень и т.д.
Данные со строковым типом, string, используются для представления текста. Любая строка должна быть заключена в кавычки, двойные (""), одинарные ('') или обратные ( ). Не важно какой вид кавычек использовать, главное чтобы их вид в начале и в конце строки совпадал.
Двойные и одинарные ничем, кроме синтаксиса, не отличаются. Но вот «бэктики», или обратные кавычки, обладают определённой магией: в них можно заключать любые выражения, и результат этого выражения будет включён в строку:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// Объявили переменную sum и присвоили ей результат сложения двух чисел
let sum = 10 + 13;
// Вывели в диалоговое окно браузера шаблонную строку с результатом выражения
alert(`Сумма двух чисел равна ${sum}`);
</script>
</body>
</html>
Для использования внутри «бэктиков» любого выражения следует это выражение поместить в специальный блок - ${...}.
В виде строки мы можем представить всё,что угодно. Например, если поместить нашу предыдущую строку в двойные или одинарные кавычки, интерпретатор воспримет это как обычную строку и никакого выражения выполнено не будет:

Данные логического типа, boolean, представлены двумя значениями: истина (true) и ложь (false). Этот тип может быть получен путём операций сравнения, использования логических операторов, а также путём приведения значения к булевому типу.
/* Переменной isSmaller будет присвоен логический тип true,
как результат сравнения числа двух чисел*/
let isSmaller = 1 < 4;
В JavaScript есть два специальных значения: null и undefined. Они обособлены и не относятся к вышеуказанным типам данных, и используются для описания отсутствия осмысленного значения.
null обозначает «ничего», «пусто». Например: let firstName = null
undefined же означает, что значение не определено. Например: let firstName. Мы не присвоили переменной firstName никакого значения и, соответственно, значение переменной name будет undefined.
Тип данных конкретной переменной можно получить с помощью оператора typeof. Его использование бывает полезным в некоторых ситуациях. Вызов typeof вернёт нам строку с названием типа. Синтаксис его вызова имеет две формы:
typeof x;
// или
typeof(x);
Например:
typeof 22; // вернёт "number"
typeof "name"; // вернёт "string"
typeof false; // вернёт "boolean"
typeof [14, 23, 41]; // вернёт "object"
typeof undefined; // вернёт "undefined"
typeof null; // вернёт "object"
typeof 10n // вернёт "bigint"
С ECMAScript 2015 появился тип symbol. Используется для определения уникальных неизменяемых идентификаторов в объектах.
Коллекции данных состоят из более чем одного значения. К ним относятся объекты, массивы и функции. Объекты содержат свойства и методы, массивы представляют собой индексированный набор элементов, а функции состоят из коллекции инструкций.
Почему JavaScript?
- Удобный для начинающих язык программирования, что делает его идеальным для начинающих программистов. Это естественный язык, который очень легко освоить. Он не только прост в освоении, но и очень доступен. Каждый веб-браузер уже имеет предварительно установленный JavaScript, поэтому вам не нужно устанавливать дополнительное программное обеспечение, чтобы начать его использовать.
- Этот мощный язык поддерживает объектно-ориентированное, функциональное и императивное программирование, поэтому вы можете легко адаптировать свои навыки JavaScript к другим языкам программирования, таким как Python, Java или C++.
- Очень гибкий язык программирования. Как только вы освоите его, возможности станут безграничными. Вы сможете использовать всю мощь библиотек и фреймворков, таких как Angular на стороне клиента или Node.js на стороне сервера. Вы также можете использовать React Native, React и Electron для создания мобильных, веб- и настольных приложений.