Что такое JavaScript?

Обновлено: Декабрь 28, 2022

586

Поделиться в:

#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 для создания мобильных, веб- и настольных приложений.