logo
logo

Что такое JavaScript?

Что такое JavaScript? image
#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?

  1. Удобный для начинающих язык программирования, что делает его идеальным для начинающих программистов. Это естественный язык, который очень легко освоить. Он не только прост в освоении, но и очень доступен. Каждый веб-браузер уже имеет предварительно установленный JavaScript, поэтому вам не нужно устанавливать дополнительное программное обеспечение, чтобы начать его использовать.
  2. Этот мощный язык поддерживает объектно-ориентированное, функциональное и императивное программирование, поэтому вы можете легко адаптировать свои навыки JavaScript к другим языкам программирования, таким как Python, Java или C++.
  3. Очень гибкий язык программирования. Как только вы освоите его, возможности станут безграничными. Вы сможете использовать всю мощь библиотек и фреймворков, таких как Angular на стороне клиента или Node.js на стороне сервера. Вы также можете использовать React Native, React и Electron для создания мобильных, веб- и настольных приложений.