JavaScript де-факто является языком для создания веб-приложений, поскольку это единственный язык, поддерживаемый браузерами. Со временем JavaScript превратился из простого языка программирования для Интернета в кроссплатформенный объектно-ориентированный язык программирования, то есть язык программирования, поддерживаемый несколькими операционными системами, и он следует парадигме объектно-ориентированного программирования, где все является объектом.

Как запустить код на JavaScript?

Если вы хотите использовать JavaScript только для веб-разработки, то для этой цели подойдет любой современный браузер. Все современные браузеры поддерживают JavaScript, и вы сможете выполнять сценарии, связанные с вашим HTML-кодом, например, вот так:

<script src="./script.js"></script>

Если вы хотите раскрыть все возможности JavaScript и использовать его в качестве языка программирования, вам необходимо установить Node.js. После установки ноды (сокр. от Node) используйте следующую команду, чтобы проверить, правильно ли она установлена.

$ node -vv12.17.0

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

Основы JavaScript

Давайте рассмотрим основы JavaScript. Поскольку JavaScript - язык со слабой типизацией, типы данных не важны, поскольку вы можете использовать одну и ту же переменную для хранения разных типов данных в разных частях скрипта.

Типы данных

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

Строка

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

let stringVariable = "Some String";

Вы также можете использовать обратные кавычки (``) для многострочных строк или строкового шаблона (${...}), где данные передаются в строку между символом доллара и фигурными скобками.

let multiLineStringVariable = `Это многострочная строка.`;
let stringTemplateVariable = `Шаблонная строка: ${multiLineStringVariable}`;

Число

В отличие от большинства языков программирования, JavaScript не поддерживает разные типы данных для целых чисел и чисел с плавающей запятой. Числа можно использовать для хранения как целых, так и дробных чисел.

const wholeNumber = 1; 
const fractionalNumber = -1.4;

Логический тип

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

let truthValue = true;
truthValue = false;

Undefined

Undefined используется для определения значения, которое еще не было определено.

let variable;

В этом случае, поскольку переменная не была инициализирована, ее значение не определено.

Null

Null используется для определения отсутствия значения.

const variable = null;

Условные конструкции

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

let shouldLog = true;
if (shouldLog) {    
	console.log("Logging changes");
}

// Результат:
'Logging changes'

В данном примере, мы выводим текст в консоль только в том случае, если переменная shouldLog истинна.

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

Операторы сравнения

Рассмотрим следующий пример x = 5

Untitled

Также поддерживаются операторы == и !=, но их использование не рекомендуется, поскольку они приводят к неожиданным результатам, например:

> 0 == '0'true > 0 == [] true > '0' == [] false

Логические операторы

Рассмотрим следующий пример x = 5 и y = 3

Untitled

Массивы

Если вы хотите сохранить коллекцию элементов в переменной, вы можете использовать массивы.

const numberArray = [1, 2, 3, 4, 5]; 
numberArray.push(6); // добавление элемента в переменную `numberArray` 
numberArray.pop(); // удаление последнего элемента из переменной `numberArray`

// Результат:
6
6

Циклы

JavaScript поддерживает циклы for и while.

Цикл for

Циклы For - лучший выбор, если известно количество итераций цикла.

const numberArray = [1, 2, 3, 4, 5];

for (let i = 0; i < numberArray.length; i++) {    
	const element = numberArray[i];    
	console.log(element);
}

// Результат:
1
2
3
4
5

Цикл whil

Циклы while эффективны, когда вы не знаете, сколько итераций будет выполняться. Он принимает условие и продолжает выполняться, пока условие не станет истинным.

const numberArray = [1, 2, 3, 4, 5];

let itemCount = 0;
while (numberArray.pop() !== undefined) {    
	itemCount += 1;
}

// Результат:
5

var vs let vs const

JavaScript позволяет вам определять элементы данных с помощью var, let и const, когда использовать какие? var создает глобальную переменную, let создает переменную с локальной областью видимости, то есть она будет существовать только внутри блока, в котором она определена, а const используется для создания константы.

var globalVariable = "Я доступна на протяжении всего сценария";
const constant = "Меня НЕВОЗМОЖНО поменять";
if (true) {    
	let localVariable = "Я могу быть использована только внутри этого блока";
}

Использование JavaScript в браузере

Использование JavaScript в браузере дает вам доступ к DOM или объектной модели документа, которая позволяет вам управлять HTML с помощью JavaScript.

Допустим, у вас есть input на вашей странице:

<input type="text" id="test-input" />

Вы можете получить доступ к input в вашем сценарии JavaScript и изменить его по своему желанию или добавить слушателей событий (event listeners) в

const inputElement = document.getElementById("test-input");
// стилизация элемента
inputElement.style.borderRadius = "6px"; 
// добавление прослушивателя события при щелчке по элементу
inputElement.addEventListener("click", function (event) {    
	console.log("Input Element Clicked");
});

Использование JavaScript с Node.js

Если вы используете JavaScript с Node.js, вы не можете получить доступ к DOM, поскольку он создается браузером, но вы сможете получить доступ к файловой системе, чего вы не можете сделать при использовании JavaScript из браузера.

const fs = require("fs");
const path = require("path");
const filePath = path.join(__dirname, "temp.txt");

const rawData = fs.readFileSync(filePath);
const data = rawData.toString();

console.log(data.toString())

Для запуска скрипта используйте команду:

node <filename>.js

Заключение

В этой статье мы разобрали с вами основы JavaScript, узнали что это такое и как начать его использовать. Мы также узнали, как использовать его в браузере и локально в соответствии с нашими требованиями. Теперь ваша очередь использовать его в своем проекте и воплотить свои идеи в жизнь.

Скачайте мою бесплатную электронную книгу чтобы подготовиться к собеседованию или начните учить Full-Stack JavaScript с нуля