JavaScript известен как самый популярный язык в мире: более 70% разработчиков используют его в разработке программного обеспечения. Если вы собираетесь потратить время и энергию на изучение нового языка программирования или начать свою карьеру в сфере IT, вам нужно убедиться, что вы выбираете полезный и востребованный язык программирования среди множества других языков. JavaScript в этом смысле - лучший.

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

Что такое JavaScript

JavaScript - это язык программирования, обеспечивающий динамическое поведение на веб-сайте. Язык имеет API-интерфейсы, которые работают с текстом, данными и объектной моделью документа (DOM). Он был разработан в 1995 году и представляет собой высокоуровневый мультипарадигменный язык сценариев, который поддерживает функциональные, императивные и событийно-ориентированные стили программирования.

JavaScript может открывать всплывающие окна, отправлять и принимать запросы с других ресурсов, манипулировать элементами страницы, подгружать контент, выполнять анимацию, управлять воспроизведением мультимедиа и т.д.

Среди популярных веб-сайтов, использующих JavaScript: Google, Facebook, Youtube, Instagram и многие другие. Это делает его самым используемым языком в истории Интернета. Как следствие - очень многому нужно будет научиться, и, поскольку, сразу невозможно освоить все концепции языка, изучение должно быть постепенным, что делает эту статью очень важной для вашего роста как разработчика JavaScript.

Основы JavaScript

Рассмотрим самые основные концепции языка, с которыми необходимо быть знакомыми.

Подключение скрипта в документе

Чтобы подключить JS на HTML-странице, код скрипта необходимо заключить в следующий тег:

<script type="text/javascript">

  <!-- Код скрипта -->

</script>

Подключение внешнего файла JavaScript

Вы можете создать отдельный файл JavaScript и подключить его в своем файле HTML. Так делать полезно, потому что на вашей странице может быть много скриптов и их наличие в HTML-файле сделает его ужасным и неуместным.

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

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

Комментирование кода

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

Есть разные способы добавления комментариев к коду JavaScript. Они могут быть:

• Однострочными (указывается // перед комментарием в одну строку)

// Однострочный комментарий в JS
let name = 'Иван';

• Многострочными (оборачиваются символами /* и */)

/* 
  Многострочный комментарий в JS
  Удобен для длинного описания кода
*/
let surname = 'Иванов';

Базовые понятия и сущности в JavaScript

Под сущностями в JS подразумевается то, из чего преимущественно будет состоять ваш код.

Переменные

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

Существует 3 распространенных способа объявления переменных в JavaScript:

• var - это наиболее часто используемый способ вызвать переменную и присвоить ей значение. Однако из-за возможности повторного объявления (var можно легко переобъявить и переопределить в коде) код может быть крайне нестабильным и подверженным ошибкам, что требует более внимательного его написания. В 2015 году был принят новый стандарт для JS и ввиду его новых возможностей хорошей практикой считается не использовать var в коде.
• let - такая переменная не может быть повторно объявлена, что снижает количество потенциальных ошибок. Однако ей можно присвоить новое значение.
• const - переменная, обладающая строгими правилами. Ее нельзя использовать до того, как она появится в коде, она не может быть переобъявлена или переназначена, т. е. информация, которую хранят в const, остается неизменной на протяжении всего жизненного цикла вашего кода.

var x = 2;
var x = 3;  // переобъявили переменную
x = 4;  // переназначили переменную

let y = 10;
y = 12;  // можем переназначить, но не можем переобъявить

const z = 35;  // не можем переназначать и переобъявлять

Типы данных

Переменные в JavaScript могут хранить информацию различных типов. Знак = используется для присвоения значений переменным. Рассмотрим основные типы данных в языке:

• Числа (Numbers) - это числовые значения в JavaScript, которые могут быть целыми, дробными, положительными, отрицательными и бесконечными.

let x = 10;  // 10 - числовой тип данных

• Строки (Strings) - это комбинация нескольких символов, представляющих в совокупности текст или строку. Строчное значение должно быть в кавычках.

let name = 'Иван';

• Булевый тип (Boolean) - значение переменной может быть либо верным (true), либо ложным (false). Используется обычно для условий в коде, либо для преобразований типов.

let a = true;
let b = false;

• null и undefined - два похожих между собой типа, которые говорят о неизвестности значения переменной. null обозначает "ничего" или "пустоту" и присваивается переменной вручную. undefined обозначает "значение не присвоено" и будет по-умолчанию у переменной, которой не задали значение.

let x;  // сейчас значение x = undefined
x = 10;  // теперь значение x = 10, а тип данных числовой
x = null;  // тип данных переменной x стал null

• Массив (Array) - это набор различных типов данных, заключенных в квадратные скобки и разделенных между собой запятыми.

let names = ['Иван', 'Петр', 'Олег', 'Николай'];
let apple = ['Яблоко', true, 10];

• Объект (Object) - контейнер, состоящий из свойств и их значений, объединенных фигурными скобками и разделенных между собой запятыми.

let friend = {
  name: 'Иван',
  age: 25,
  hobby: ['футбол', 'чтение', 'рисование']
};

Функции

Функции в JavaScript предназначены для получения данных, их обработки и вцелом совершения каких-либо манипуляций на основании предоставленной внутри функции и/или переданной ей информации и вызываются с помощью определенного синтаксиса:

// Обозначили функцию с именем hello
function hello() {
  alert('Привет!');
  // В теле функции указали, что результатом ее работы будет сообщение "Привет!" в модальном окне страницы
};
hello();  // Вызвали функцию

Методы

Методы в JavaScript предназначены для выполнения функций (встроенных или самописных) над объектом и вызываются с помощью добавления к объекту точки, имени метода и круглых скобок.

let object = {
  name: 'Иван',
  hello: function () {
    alert('Привет, ' + this.name);
  }
};
object.hello();  // Вызвали метод hello для объекта object

Библиотеки

Это встроенные в JavaScript дополнительные возможности выполнять определенные манипуляции с данными с применением готовых методов.

Math.random();  // Библиотека Math, имеющая свой метод random

Что еще есть в JavaScript

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

Операторы в JavaScript

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

Существуют следующие виды операторов:

• Арифметические операторы - используются для совершения математических действий.

+ Сложение
- Вычитание
* Умножение
/ Деление
(....) Оператор группировки
% Модуль
++ Увеличение числа на 1
-- Уменьшение числа 1

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

== Значения равны
=== Значения и их типы равны
!= Не равны
!== Не равны либо значения, либо их типы
> Больше
< Меньше
>= Больше или равно
<= Меньше или равно
? Тернарный оператор

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

&& и
|| или
! не

• Побитовые операторы

& оператор И
| оператор ИЛИ
~ НЕ
^ НИ
<< Левый сдвиг
>> Правый сдвиг
>>> Нулевое заполнение правым сдвигом

Условные операторы

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

if ( условие ) {
  // код, который будет выполнен 
  // при выполнении условия
} else {
  // код, который будет выполнен 
  // при невыполнении условия
} 

Циклы

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

• Цикл while - пока будет выполняться условие, код внутри цикла будет отрабатывать

while ( условие ) {
  // код, отрабатывающий при выполнении условия
  // в коде должно обновляться условие
}

• Цикл for - условие и его обновление задаются в самом начале цикла

for ( переменная; условие, содержащее переменную; изменение переменной по завершению цикла ) {
  // код, отрабатывающий при выполнении условия
}

• Цикл do while - похож на цикл while, но разница в том, что вначале отрабатывается код (т.е. он минимум раз точно выполнится), а потом, если условие выполняется, запускается снова

do {
  // код, отрабатывающий в теле цикла
  // в коде должно обновляться условие
} while ( условие )

Массивы

Как уже упоминалось, массивы - это формы объектов, которые используются для группировки наборов элементов или, простыми словами, - это набор данных. Пример массива:

let names = ['Иван', 'Петр', 'Олег'];

Массивам присущи специальные методы, используемые для выполнения определенных операций с содержащимися в них данными. Наиболее часто используемые:

Пример использования метода push():

let names = ['Иван', 'Петр', 'Олег'];
names.push('Игорь');

console.log(names);  // => ['Иван', 'Петр', 'Олег', 'Игорь']

Функции

Функции в JavaScript, можно определить как фрагменты кода, объединенные между собой и предназначенные для выполнения определенной задачи. Базовый синтаксис функции в JavaScript:

function functionName (parameterOne, parameterTwo, …parameterN) {
  // Тело функции
}

Блок функции кода начинается с ключевого слова function, за которым следует имя функции и параметры функции, определенные в круглых скобках. За ними следует тело функции в фигурных скобках, где прописывается код.

Популярные встроенные функции, используемые для отображения данных:

Полезные глобальные функции:

Пример использования функции parseInt():

let string = '3 Толстяка';
parseInt(string);  // => 3

Область видимости

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

• Глобальная область видимости. Она относится к любой переменной, которая была объявлена вне всяческого блока кода (паре фигурных скобок) или функции. Доступ к глобальной области можно получить из любой точки скрипта. Пример глобальной переменной:

let hello = 'Привет!';
console.log(hello);  // => 'Привет!'

function greet() {
  console.log(hello);  // => 'Привет!'
};
greet();

• Локальная область видимости. Сюда уже входят переменные, объявленные внутри функционального блока. Они доступны только внутри этой функции и не могут использоваться где-либо вне. Пример локальной переменной:

function greet() {
  let hello = 'Привет!';
  console.log(hello);  // => 'Привет!'
};
greet();

console.log(hello);  // В консоли выдаст ошибку

• Блочная область видимости. Если переменные внутри блока кода, ограниченного фигурными скобками, объявлены с помощью ключевых слов let или const, то к ним нельзя получить доступ снаружи и они обладают блочной областью видимости, т.е. доступны только в пределах этого блока. В отношении var блочная область видимости не действует. Пример блочной области:

if (1 > 0) {
  let hello = 'Привет!';
  var bye = 'Пока!';
  console.log(hello);  // => 'Привет!'
  console.log(bye);  // => 'Пока!'
}

console.log(hello);  // В консоли выдаст ошибку
console.log(bye);  // => 'Пока!'

Поднятие (Хоистинг)

Это методология JavaScript, которая перемещает функции, переменные и классы в верхнюю часть их области видимости перед тем, как скрипт начинает построчно выполняться. Это значит, что их можно использовать в коде раньше, чем они были объявлены. Однако это делать стоит с особой осторожностью во избежание непредвиденных ошибок в программе.

В JavaScript доступны два типа хоистинга:

• Поднятие функций - предоставляет возможность вызывать или использовать функцию в коде перед ее определением.

greet();

function greet() {
  console.log('Привет!');  // => 'Привет!'
};

• Поднятие переменных - позволяет использовать переменную до того, как она будет определена. Однако следует отметить, что JavaScript поднимает только объявление переменной, а не инициализацию. Для var и let/const поведения будут разные, что еще раз подчеркивает, что хорошая практика - использовать переменную уже после объявления. 

console.log(a);  // => undefined
var a;
console.log(a);  // => undefined;
a = 10;
console.log(a);  // => 10;

console.log(b);  // Выдаст ошибку о недоступности использования
let b;
b = 20;

Строки

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

Пример использования метода concat():

let hello = 'Привет ';
let world = 'Мир';

let helloWorld = hello.concat(world);  // => 'Привет Мир'

Объекты браузера

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

Список часто используемых свойств браузера:

Пример использования свойства innerHeight:

window.innerHeight;  // Отобразит высоту окна пользователя (800 например)

Наиболее распространенные функции браузера:

Пример использования метода setTimeout():

setTimeout(function(){
  console.log('Прошло 3 секунды');
}, 3000);
// В консоли отобразится сообщение через 3000 мс, т.е. через 3 секунды

Обработка ошибок

В процессе выполнения кода возникают различные виды ошибок. В JavaScript существует шесть типов ошибок:

Объектная модель документа (DOM)

Объектная модель документа описывает структуру кода веб-страницы. Существует несколько способов создания и изменения HTML-элементов, которые в JavaScript называются DOM-узлами.

Наиболее распространенные свойства DOM-узлов:

Пример использования свойства nodeName:

let app = document.getElementById('app');  // Обращаемся к узлу с id='app'
console.log(app.nodeName);  // Получим имя узла 'DIV'

Популярные методы для манипулирования DOM-узлами:

Пример использования метода appendChild():

let newDiv = document.createElement('div');  // Создаем новый узел 'DIV'
let app = document.getElementById('app');  // Обращаемся к узлу с id='app'
app.appendChild(newDiv);  // В элементе с id='app' появится пустой div