Основы Javascript
JavaScript - это язык сценариев, который позволяет реализовать сложные функции на веб-страницах: отображение своевременных обновлений контента, интерактивные карты, анимированную 2D/3D-графику и т. д. Можете не сомневаться, что JavaScript наверняка в этом участвует. Это широко используемый язык программирования для создания динамических и интерактивных элементов в веб-приложениях, и его легко выучить.
Типы данных
JavaScript предоставляет 7 различных типов данных:
Data Types | Examples |
---|---|
undefined | Переменная, которой не присвоено значение, имеет тип undefined . |
null | нет значения. |
string | 'a', 'aa', 'aaa', 'Hello!', '11 cats' |
number | 12, -1, 0.4 |
boolean | true, false |
object | Коллекция объектов |
symbol | Представляет собой уникальный идентификатор |
Переменные
Вы можете объявлять переменные, используя ключевые слова var
, let
и const
. Вот, что вам нужно знать о каждом из них:
-
var
: Это самый старый способ объявления переменных. В современном JavaScript он используется не так часто, но его все равно важно понимать. Переменные, объявленные с помощью var, ограничены функциональной областью, что означает, что они доступны только в той функции, в которой они объявлены.var name = "John"
-
let
: Это более новый способ объявления переменных, появившийся в ES6 (ES2015). Переменные, объявленные с помощью let, ограничены областью блока, что означает, что они доступны только в пределах того блока, в котором они объявлены.let age = 25;
-
const
: Также введенный в ES6, const используется для объявления констант, то есть переменных, которые нельзя переназначить. Как и let, const также имеет блочную область действия.const pi = 3.14159;
Вот несколько важных моментов, которые следует запомнить:
- Переменные, объявленные с помощью
var
, выводятся в верхнюю часть своей области видимости. Это означает, что их можно использовать до того, как они будут объявлены. Это не относится кlet
иconst
. let
иconst
создают переменные, которые ограничены областью действия блока, что означает, что они существуют только в пределах блока, в котором они объявлены. Это отличается отvar
, который создает переменные, ограниченные областью действия функции.- Переменные, объявленные с помощью
const
, не могут быть переназначены. Однако, если переменная является объектом или массивом, ее свойства или элементы все равно могут быть изменены.
Арифметические операторы
Арифметические операторы используются для выполнения математических операций:
Operator | Description | Example | Result |
---|---|---|---|
+ | Сложение | 5 + 2 | 7 |
- | Вычитание | 5 - 2 | 3 |
* | Умножение | 5 * 2 | 10 |
/ | Деление | 5 / 2 | 2.5 |
% | Модуль (Остаток) | 5 % 2 | 1 |
++ | Увеличивать (Increment) | let x = 5; x++; | x is 6 |
-- | Уменьшать(Decrement) | let x = 5; x--; | x is 4 |
** | Возведение в степень | 5 ** 2 | 25 |
- Сложение (
+
): Добавляет два числа.
let result = 5 + 10; // result is 15
- Вычитание (
-
): Вычитает второе число из первого.
let result = 10 - 5; // result is 5
- Умножение (
*
): Умножает два числа.
let result = 5 * 10; // result is 50
- Деление (
/
): Делит первое число на второе.
let result = 10 / 5; // result is 2
- Модуль (
%
): Возвращает остаток от деления первого числа на второе.
let result = 10 % 3; // result is 1
- Инкремент (
++
): Увеличивает число на 1.
let num = 5;
num++; // num is now 6
- Уменьшить (
--
): Уменьшает число на 1.
let num = 5;
num--; // num is now 4
- Возведение в степень (
**
): Возводит первое число в степень второго числа.
let result = 5 ** 2; // result is 25
Эти операторы могут использоваться с числами, переменными или выражениями.
Операторы присваивания
Операторы присваивания используются для присвоения значений переменным:
Operator | Description | Example | Result |
---|---|---|---|
= | Присваивание | let x = 10; | x is 10 |
+= | Присваивание сложения | let x = 5; x += 10; | x is 15 |
-= | Задание на вычитание | let x = 10; x -= 5; | x is 5 |
*= | Задание на умножение | let x = 5; x *= 10; | x is 50 |
/= | Назначение деления | let x = 10; x /= 5; | x is 2 |
%= | Присвоение модуля | let x = 10; x %= 3; | x is 1 |
**= | Присвоение степени | let x = 5; x **= 2; | x is 25 |
- Присваивание (
=
): Присваивает значение справа переменной слева.
let x = 10; // x is now 10
- Назначение сложения (
+=
): Добавляет значение справа к переменной слева и присваивает результат переменной слева.
let x = 5;
x += 10; // x is now 15
- Назначение вычитания (
-=
): Вычитает значение справа из переменной слева и присваивает результат переменной слева.
let x = 10;
x -= 5; // x is now 5
- Назначение умножения (
*=
): Умножает переменную слева на значение справа и присваивает результат переменной слева.
let x = 5;
x *= 10; // x is now 50
- Назначение деления (
/=
): Делит переменную слева на значение справа и присваивает результат переменной слева.
let x = 10;
x /= 5; // x is now 2
- Присвоение модуля (
%=
): Делит переменную слева на значение справа и присваивает остаток переменной слева.
let x = 10;
x %= 3; // x is now 1
- Назначение возведения в степень (
**=
): Возводит переменную слева в степень значения справа и присваивает результат переменной слева.
let x = 5;
x **= 2; // x is now 25
Эти операторы предоставляют сокращенный способ обновления значения переменной по отношению к ее текущему значению.
Операторы сравнения
Операторы сравнения используются для сравнения двух значений:
Operator | Description | Example | Result |
---|---|---|---|
== | Равно | 5 == 5 | true |
!= | Не равно | 5 != 4 | true |
=== | Строго равно | 5 === 5 | true |
!== | Строго не равно | 5 !== '5' | true |
> | Больше, чем | 10 > 5 | true |
< | Меньше, чем | 5 < 10 | true |
>= | Больше или равно | 10 >= 10 | true |
<= | Меньше или равно | 5 <= 5 | true |
- Равно (
==
): Возвращает значение true, если операнды равны.
5 == 5; // true
'5' == 5; // true, because it does type coercion
- Не равно (
!=
): Возвращает значение true, если операнды не равны.
5 != 4; // true
- Строго равно (
===
): Возвращает значение true, если операнды равны и имеют одинаковый тип.
5 === 5; // true
'5' === 5; // false, because the types are different
- Строго не равно (
!==
): Возвращает значение true, если операнды не равны или имеют разный тип.
5 !== '5'; // true
- Больше, чем (
>
): Возвращает значение true, если левый операнд больше правого.
10 > 5; // true
- Меньше (
<
): Возвращает значение true, если левый операнд меньше правого.
5 < 10; // true
- Больше или равно (
>=
): Возвращает значение true, если левый операнд больше или равен правому операнду.
10 >= 10; // true
- Меньше или равно (
<=
): Возвращает значение true, если левый операнд меньше или равен правому операнду.
5 <= 5; // true
Эти операторы часто используются в условных выражениях для выполнения различных действий, основанных на различных условиях.
Логические операторы
Логические операторы используются для определения логики между переменными или значениями:
Operator | Description | Example | Result |
---|---|---|---|
&& | И (AND) | true && true | true |
\|\| | ИЛИ (OR) | true \|\| false | true |
! | НЕ (NOT) | !true | false |
- Логический И (
&&
): Возвращает значение true, если оба операнда равны true.
true && true; // true
true && false; // false
- Логическое ИЛИ (
||
): Возвращает значение true, если хотя бы один из операндов равен true.
true || false; // true
false || false; // false
- Логическое НЕ (
!
): Возвращает значение true, если операнд равен false, и значение false, если операнд равен true. По сути, это изменяет логическое значение операнда на обратное.
!true; // false
!false; // true
Эти операторы часто используются в условных выражениях для объединения или инвертирования логических условий. Например, вы можете использовать логический оператор AND (
&&
), чтобы проверить, что оба условия верны, прежде чем запускать фрагмент кода.
Побитовые операторы
Побитовые операторы оперируют 32-разрядными двоичными представлениями чисел:
Operator | Description | Example | Result |
---|---|---|---|
& | Побитовое И | 5 & 1 | 1 |
|" | Побитовое ИЛИ | 5 | 1| 5` | ||
^ | Побитовое XOR | 5 ^ 1 | 4 |
~ | Побитовое НЕ | ~5 | -6 |
<< | Сдвиг влево | 5 << 1 | 10 |
>> | Сдвиг вправо с распространением знака | 5 >> 1 | 2 |
>>> | Сдвиг вправо с нулевым заполнением | 5 >>> 1 | 2 |
- Побитовое И (
&
): Возвращает единицу в каждой битовой позиции, где у операндов есть единицы.
5 & 1; // 1 (0101 & 0001 => 0001)
- Побитовое ИЛИ (
|
): Возвращает единицу в каждой битовой позиции, где по крайней мере один операнд имеет единицу.
5 | 1; // 5 (0101 | 0001 => 0101)
- Побитовое XOR (
^
): Возвращает единицу в каждой битовой позиции, где ровно один операнд имеет единицу.
5 ^ 1; // 4 (0101 ^ 0001 => 0100)
- Побитовое НЕ (
~
): Инвертирует биты своего операнда.
~5; // -6 (~0101 => 1010)
- Сдвиг влево (
<<
): сдвигает биты первого операнда влево на количество позиций, указанное во втором операнде. Новые биты заполняются нулями.
5 << 1; // 10 (0101 << 1 => 1010)
- Сдвиг вправо с распространением знака (
>>
): Сдвигает биты первого операнда вправо на количество позиций, указанное во втором операнде. Знаковый бит используется для заполнения новых битов.
5 >> 1; // 2 (0101 >> 1 => 0010)
- Сдвиг вправо для заполнения нулем (
>>>
): Сдвигает биты первого операнда вправо на количество позиций, указанное во втором операнде. Новые биты заполняются нулями.
5 >>> 1; // 2 (0101 >>> 1 => 0010)
Эти операторы используются реже, чем арифметические, присваивающие, сравнивающие и логические операторы, но они могут быть полезны в определенных сценариях, особенно в задачах низкоуровневого программирования.
Комментарии
Писать комментарии в свой код необходимо, чтобы объяснить, что он делает, оставлять заметки для себя или других, или предотвращать выполнение кода:
Однострочные комментарии
Они создаются с помощью двух прямых косых черт //
. Все, что находится справа от //
в той же строке, является комментарием.
// Это однострочный комментарий
Многострочные комментарии
Они создаются с помощью /*
в начале комментария и */
в конце. Все, что находится между /*
и */
, включая несколько строк, является комментарием.
/*
Это многострочный комментарий
Он может занимать несколько строк
*/
Комментарии
Комментарии игнорируются интерпретатором JavaScript и не влияют на выполнение кода. Они предназначены исключительно для чтения людьми.
Функция console.log
Функция console.log()
используется для вывода выходных данных на консоль. Это может быть очень полезно для отладки, поскольку позволяет выводить значения переменных в разных точках вашего кода или выводить сообщения, которые помогают вам понять ход выполнения вашего кода.
console.log("Hello, World!"); // выводит "Привет, мир!" на консоль
Вы можете распечатать значения переменных:
let a = 1;
console.log(a); // выводит значение a (1) на консоль
Вы также можете напечатать несколько значений одновременно, разделив их запятыми:
let a = 1;
let b = 2;
console.log(a, b); // выводит "1 2" на консоль
console.log
Обратите внимание, что console.log()
не влияет на выполнение вашего кода. Он предназначен исключительно для вывода информации на консоль.