Грамматика и типы
В данной главе рассматриваются базовая грамматика, объявление переменных, типы данных и литералы.
Основы
JavaScript заимствует большую часть синтаксиса из Java, но также испытал влияние таких языков, как Awk, Perl и Python.
JavaScript чувствителен к регистру и использует кодировку символов Unicode. Например, слово Früh («рано» по-немецки) может использоваться в качестве имени переменной.
var Früh = "foobar";
Но, переменная früh не то же самое что Früh потому что JavaScript чувствителен к регистру.
В JavaScript инструкции называются statements и разделяются точкой с запятой (;). Пробел (space), табуляция (tab) и перевод строки (newline) называются пробельными символами (whitespace). Исходный текст скриптов на JavaScript сканируется слева направо и конвертируется в последовательность входных элементов, являющихся токенами (tokens), управляющими символами, символами конца строки, комментариями или пробельными символами. ECMAScript также определяет некоторые ключевые слова и литералы и устанавливает правила для автоматической вставки точек с запятой (ASI), чтобы обозначить конец инструкций (statements). Однако, рекомендуется всегда ставить точку с запятой в конце каждой инструкции вручную, чтобы избежать побочных эффектов. Чтобы получить более подробную информацию, прочитайте Lexical Grammar.
Комментарии
Синтаксис комментариев является таким же, как и в C++ и во многих других языках:
// Комментарий, занимающий одну строку. /* Комментарий, занимающий несколько строк. */ /* Нельзя вкладывать /* комментарий в комментарий */ SyntaxError */
Объявления
В JavaScript существует три вида объявлений:
Объявляет переменную, инициализация переменной значением является необязательной.
Объявляет локальную переменную в области видимости блока, инициализация переменной значением является необязательной.
Объявляет именованную константу, доступную только для чтения.
Переменные
Вы можете использовать переменные как символические имена для значений в вашем приложении. Имена переменных называются identifiers и должны соответствовать определённым правилам.
Идентификатор в JavaScript должен начинаться с буквы, нижнего подчёркивания (_) или знака доллара ($); последующие символы могут также быть цифрами (0-9). Поскольку JavaScript чувствителен к регистру, буквы включают символы от «A» до «Z» (верхний регистр) и символы от «a» до «z» (нижний регистр).
Вы можете использовать в идентификаторах буквы ISO 8859-1 или Unicode, например, å или ü. Вы также можете использовать управляющие последовательности Unicode как символы в идентификаторах.
Некоторые примеры корректных имён: Number_hits , temp99 , _name .
Объявление переменных
Вы можете объявить переменную тремя способами:
- Используя ключевое слово var . Например, var x = 42 . Данный синтаксис может быть использован для объявления как локальных, так и глобальных переменных.
- Просто присвоить переменной значение. Например, x = 42 . Переменные, объявленные данным способом, являются глобальными. Такое объявление генерирует строгое предупреждение (strict mode). Не рекомендуется использовать данный способ.
- Используя ключевое слово let . Например, let y = 13 . Данный синтаксис может быть использован для объявления локальной переменной в области видимости блока.
Присваивание значений
Переменная, объявленная через var или let без присвоения начального значения, имеет значение undefined .
При попытке доступа к необъявленной переменной или переменной до её объявления будет выброшено исключение ReferenceError :
var a; console.log("The value of a is " + a); //Значение переменной a undefined console.log("The value of b is " + b); //Uncaught ReferenceError: b не определена console.log("The value of c is " + c); //Значение переменной c undefined var c; console.log("The value of x is " + x); //Uncaught ReferenceError: x не определена let x;
Вы можете использовать undefined , чтобы определить, имеет ли переменная значение. В следующем примере переменной input не присвоено значение, и оператор if будет вычислен как true :
var input; if (input === undefined) doThis(); > else doThat(); >
Значение undefined ведёт себя как false , когда используется в логическом контексте. Например, следующий код выполняет функцию myFunction , т.к. элемент myArray не определён:
var myArray = []; if (!myArray[0]) myFunction(); >
Значение undefined конвертируется в NaN , когда используется в числовом контексте:
var a; a + 2; // NaN
Значение null ведёт себя как 0 в числовом контексте и как false в логическом контексте:
var n = null; console.log(n * 32); // В консоль выведется 0
Область видимости переменных
Когда вы объявляете переменную вне функции, то такая переменная называется глобальной переменной, т.к. доступна любому коду в текущем документе. Когда вы объявляете переменную внутри функции, то такая переменная называется локальной переменной, т.к. доступна только внутри данной функции.
До ECMAScript 6 в JavaScript отсутствовала область видимости блока; переменная, объявленная внутри блока, является локальной для _функции _(или глобальной области видимости), внутри которой находится данный блок. Например, следующий код выведет значение 5, т.к. областью видимости переменной x является функция (или глобальный контекст), внутри которой объявлена переменная x , а не блок, которым в данном случае является оператор if :
if (true) var x = 5; > console.log(x); // 5
Такое поведение меняется, если используется оператор let , введённый в ECMAScript 6:
if (true) let y = 5; > console.log(y); // ReferenceError
Поднятие переменных
Другим необычным свойством переменных в JavaScript является то, что можно сослаться на переменную, которая объявляется позже, и не получить при этом исключения. Эта концепция известна как поднятие (hoisting) переменных; переменные в JavaScript поднимаются в самое начало функции или выражения. Однако, переменные, которые ещё не были инициализированы, возвратят значение undefined :
/* * Example 1 */ console.log(x === undefined); // true var x = 3; /* * Example 2 */ var myvar = "my value"; (function () console.log(myvar); // undefined var myvar = "local value"; >)();
Приведённые выше примеры будут интерпретироваться так же, как:
/* * Example 1 */ var x; console.log(x === undefined); // true x = 3; /* * Example 2 */ var myvar = "my value"; (function () var myvar; console.log(myvar); // undefined myvar = "local value"; >)();
Из-за поднятия переменных, все операторы var в функции следует размещать настолько близко к началу функции, насколько это возможно. Следование этому правилу улучшает ясность кода.
В ECMAScript 2015, let (const) не будет подниматься вверх блока. Однако, ссылки на переменную в блоке до объявления переменной вызовут ReferenceError . Переменная во «временной мёртвой зоне» в начале блока, до объявления.
function do_something() console.log(foo); // ReferenceError let foo = 2; >
Поднятие функций
Для функций: только определения функций поднимаются наверх, но не функции, определённые через выражения.
/* Определение функции */ foo(); // "bar" function foo() console.log("bar"); > /* Определение функции через выражение */ baz(); // TypeError: baz is not a function var baz = function () console.log("bar2"); >;
Глобальные переменные
Глобальные переменные на самом деле являются свойствами глобального объекта. На веб-страницах глобальным объектом является window , поэтому вы можете устанавливать глобальные переменные и обращаться к ним, используя синтаксис window.variable :
.foo = "bar";
Следовательно, вы можете обращаться к глобальным переменным, объявленным в одном объекте window или frame из другого объекта window или frame, указав имя window или frame. Например, если переменная phoneNumber объявлена в документе, то вы можете сослаться на эту переменную из iframe как parent.phoneNumber .
Константы
Вы можете создать именованную константу, доступную только для чтения, используя ключевое слово const . Синтаксис идентификатора константы является таким же, как и у идентификатора переменной: он должен начинаться с буквы, нижнего подчёркивания или знака $ и может содержать буквы, цифры или нижнее подчёркивание.
const PREFIX = "212";
Нельзя изменить значение константы через присваивание или повторное объявление во время выполнения скрипта. Значение должно быть указано при инициализации.
Правила, касающиеся области видимости, для констант являются такими же, как и для переменных, объявленных через let . Если ключевое слово const не указано, то идентификатор будет являться переменной.
Нельзя объявить константу с таким же именем, как у функции или переменной в одной области видимости. Следующие примеры выбросят исключение TypeError :
// Это вызовет ошибку function f() > const f = 5; // Это тоже вызовет ошибку function f() const g = 5; var g; // какие-то выражения >
Однако, атрибуты объектов не защищены, так что следующее выражение выполнится без проблем
const MY_OBJECT = key: "value" >; MY_OBJECT.key = "otherValue";
Структуры и типы данных
Типы данных
Последний стандарт ECMAScript определяет семь типов данных:
- Шесть типов данных, которые являются примитивами:
- Boolean. true и false .
- null. Специальное ключевое слово, обозначающее нулевое или «пустое» значение. Поскольку JavaScript чувствителен к регистру, null не то же самое, что Null , NULL или любой другой вариант.
- undefined. Свойство глобального объекта; переменная, не имеющая присвоенного значения, обладает типом undefined .
- Number. 42 или 3.14159 .
- String. «Howdy».
- Symbol (ECMAScript 6)
Хотя типов данных относительно немного, но они позволяют вам выполнять полезные функции в ваших приложениях. Объекты и функции являются другими фундаментальными элементами языка. Вы можете думать об объектах как об именованных контейнерах для значений и о функциях как о процедурах, которые ваше приложение может исполнять.
Преобразование типов данных
JavaScript — это динамически типизированный язык. Это означает, что вам не нужно указывать тип данных переменной, когда вы её объявляете, типы данных преобразуются автоматически по мере необходимости во время выполнения скрипта. Так, например, вы можете определить переменную следующим образом:
var answer = 42;
А позже вы можете присвоить этой переменной строковое значение, например:
= "Thanks for all the fish. ";
Поскольку JavaScript является динамически типизированным, это присваивание не вызовет сообщения об ошибке.
В выражениях, включающих числовые и строковые значения с оператором + , JavaScript преобразует числовые значения в строковые. Например:
= "The answer is " + 42; // "The answer is 42" y = 42 + " is the answer"; // "42 is the answer"
В выражениях с другими операторами JavaScript не преобразует числовые значения в строковые. Например:
"37" - 7; // 30 "37" + 7; // "377"
Преобразование строк в числа
В том случае, если значение, представляющее число, хранится в памяти как строка, можно использовать методы для преобразования строк в числа:
- parseInt(numString, [radix])
- parseFloat(numString)
parseInt преобразует строку в целочисленное значение. Хорошей практикой является всегда указывать основание системы счисления (параметр radix ).
Альтернативным способом для получения числа из строки является использование оператора «унарный плюс»:
"1.1" + "1.1"; // "1.11.1" (+"1.1") + (+"1.1"); // 2.2 // Обратите внимание на то, что скобки не являются обязательными и используются для ясности.
Литералы
Литералы используются для представления значений в JavaScript. Они являются фиксированными значениями, а не переменными. В данной секции рассматриваются следующие типы литералов:
- Литерал массива
- Логический литерал
- Литерал целого числа
- Литерал числа с плавающей точкой
- Литерал объекта
- RegExp литерал
- Литерал строки
Литерал массива
Литерал массива — это список из нуля или более выражений, каждое из которых представляет элемент массива, заключённый в квадратные скобки ( [] ). Когда вы создаёте массив, используя литерал массива, он инициализируется с помощью переданных значений, которые будут являться его элементами, длина массива будет равна числу переданных аргументов.
В следующем примере создаётся массив coffees с тремя элементам и длиной, равной трём:
var coffees = ["French Roast", "Colombian", "Kona"];
Примечание: Обратите внимание на то, что литерал массива является инициализатором объекта. Чтобы получить более подробную информацию, прочитайте Использование инициализаторов объекта.
Если массив создаётся с помощью литерала в скрипте верхнего уровня, то JavaScript интерпретирует массив каждый раз, когда вычисляет выражение, содержащее литерал. Кроме того, литерал, используемый в функции, создаётся каждый раз, когда вызывается функция.
Литералы массива также являются объектами Array . Чтобы получить более подробную информацию, прочитайте Array и упорядоченные наборы данных.
Лишние запятые в литералах array
Не обязательно указывать все элементы в литерале array. Если вы поставите две запятые подряд, то пропущенные элементы будут иметь значение undefined . Например:
var fish = ["Lion", , "Angel"]; // ["Lion", undefined, "Angel"]
У этого массива есть 2 элемента со значениям и один пустой ( fish[0] — «Lion», fish[1] — undefined , а fish[2] — «Angel»).
Если вы поставите запятую в конце списка элементов, то она будет проигнорирована. В следующем примере, длина массива равна 3. Нет myList[3] . Все другие запятые в списке говорят о новом элементе.
Примечание: Лишние запятые могут вызывать ошибки в старых версиях браузеров, поэтому лучше избегать их использования.
var myList = ["home", , "school", ]; // ["home", undefined, "school"]
В следующем примере длина массива равна четырём, элементы myList[0] и myList[2] имеют значение undefined :
var myList = [, "home", , "school"]; // [undefined, "home", undefined, "school"]
В следующем примере длина массива равна четырём, элементы myList[1] и myList[3] имеют значение undefined . Игнорируется только последняя запятая.
var myList = ["home", , "school", ,]; // ["home", undefined, "school", undefined]
Понимание поведения лишних запятых важно для понимания JavaScript как языка. Однако, когда будете писать свой собственный код, то имейте в виду, что явное объявление отсутствующих элементов как undefined улучшает ясность кода и лёгкость его поддержки.
Логические литералы
Логический (Boolean) тип имеет два литеральных значения: true и false .
Не путайте примитивные логические значения true и false со значениями true и false объекта Boolean. Объект Boolean является объектом-обёрткой над примитивом логического типа. Чтобы получить более подробную информацию, прочитайте Boolean .
Литерал целого числа
Целые числа могут быть записаны в десятичной, шестнадцатеричной, восьмеричной и двоичной системах счисления.
- Десятичный целочисленный литерал состоит из последовательности цифр без ведущего нуля.
- Ведущий ноль в целочисленном литерале указывает на то, что он записан в восьмеричной системе счисления. Восьмеричные целые числа состоят только из цифр 0-7.
- Ведущие символы 0x (или 0X) указывают на то, что число шестнадцатеричное. Шестнадцатеричные целые числа могут состоять из цифр 0-9 и букв a-f и A-F.
- Ведущие символы 0b (или 0B) указывают на то, что число двоичное. Двоичные числа могут включать в себя только цифры 0 и 1.
Несколько примеров целочисленных литералов:
0, 117 и -345 (десятичная система счисления) 015, 0001 и -077 (восьмеричная система счисления) 0x1123, 0x00111 и -0xF1A7 (шестнадцатеричная система счисления) 0b11, 0b0011 и -0b11 (двоичная система счисления)
Литерал числа с плавающей точкой
Числа с плавающей точкой могут состоять из следующих частей:
- Десятичное целое число, которое может иметь знак (символ «+» или «-«, стоящий перед числом),
- Десятичная точка («.»),
- Дробная часть (другое десятичное число),
- Экспонента.
Экспонента состоит из символа «e» или «E», за которым следует целое число, которое может иметь знак. Число с плавающей точкой должно состоять по крайней мере из одной цифры и либо десятичной точки, либо символа «e» (или «E»).
В более сжатой форме синтаксис выглядит следующим образом:
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
3.14 -3.1E+12 -.3333333333333333333 .1e-23
Литерал объекта
Литерал объекта — это список из нуля или более пар, состоящих из имён свойств и связанных с ними значений, заключённый в фигурные скобки ( <> ). Вам не следует использовать литерал объекта в начале выражения, т.к. это приведёт к ошибке или к поведению, которого вы не ожидаете, потому что символ »
В следующем примере свойству myCar объекта car присваивается строка «Saturn» , свойству getCar — результат вызова функции CarTypes(«Honda») , свойству special — значение переменной Sales :
var Sales = "Toyota"; function CarTypes(name) if (name == "Honda") return name; > else return "Извините, мы не продаём " + name + "."; > > var car = myCar: "Saturn", getCar: CarTypes("Honda"), special: Sales >; console.log(car.myCar); // Saturn console.log(car.getCar); // Honda console.log(car.special); // Toyota
Кроме того, вы можете использовать числовой или строковой литералы в именах свойств или вкладывать один объект в другой. Например:
var car = manyCars: a: "Saab", b: "Jeep" >, 7: "Mazda" >; console.log(car.manyCars.b); // Jeep console.log(car[7]); // Mazda
Именем свойства объекта может быть любая строка, в том числе пустая строка. Если имя свойства не является корректным JavaScript идентификатором, то оно должно быть заключено в кавычки. Для обращения к таким именам следует использовать квадратные скобки ( [] ), а не точку ( . ):
var unusualPropertyNames = "": "An empty string", "!": "Bang!" > console.log(unusualPropertyNames.""); // SyntaxError: Unexpected string console.log(unusualPropertyNames[""]); // "An empty string" console.log(unusualPropertyNames.!); // SyntaxError: Unexpected token ! console.log(unusualPropertyNames["!"]); // "Bang!"
В ES2015 литералы объектов расширены до поддержки установки прототипа в конструкции короткой записи для foo: задание foo , определение методов, создание супер вызовов и вычисление имён свойств в выражениях. Вместе, они делают похожими объектные литералы и объявления классов, а также позволяют объектному дизайну получать выгоду одинаковых возможностей.
var obj = // __proto__ __proto__: theProtoObj, // Короткая запись для ‘handler: handler’ handler, // Методы toString() // Супер вызовы return "d " + super.toString(); >, // Динамическое вычисление имён свойств ["prop_" + (() => 42)()]: 42, >;
Обратите внимание на следующий пример:
var foo = a: "alpha", 2: "two" >; console.log(foo.a); // alpha console.log(foo[2]); // two // console.log(foo.2); // SyntaxError: Unexpected number // console.log(foo[a]); // ReferenceError: a is not defined console.log(foo["a"]); // alpha console.log(foo["2"]); // two
RegExp литерал
Литерал regexp — шаблон между слешами. Следующий пример литерал regex:
var re = /ab+c/;
Строковый литерал
Строковый литерал — это ноль или более символов, заключённых в двойные ( » ) или одинарные ( ‘ ) кавычки. Строка должна быть ограничена кавычками одного типа, т.е. либо обе одинарные, либо обе двойные. Например:
"foo" 'bar' "1234" "one line \n another line" "John's cat"
Вы можете вызвать любой из методов объекта String для строкового литерала: JavaScript автоматически преобразует строковой литерал во временный объект String , вызовет метод, а затем уничтожит временный объект String . Вы также можете использовать свойство String.length со строковым литералом:
.log("John's cat".length); // Число символов в строке, включая пробел. // В данном случае длина строки равна 10.
В ES2015 также доступны шаблоны строк. Шаблоны строк представляют собой синтаксический сахар для конструирования строк. Это похоже на возможности интерполяции строк в Perl, Python и других. Дополнительно, может быть добавлен тег, позволяющий настраивать конструирование строк, избегая атак внедрения и построения структур данных высокого уровня из содержимого строки.
// Простое создание строки через литерал string `In JavaScript '\n' is a line-feed.`; // Мультистроковые строки `In JavaScript this is not legal.`; // Интерполяция строк var name = "Бобби", time = "сегодня"; `Привет $name>, как ты $time>?`; // Строим префикс HTTP запроса, используемый для интерпретации замен и конструирования POST`http://foo.org/bar?a=$a>&b=$b> Content-Type: application/json X-Credentials: $credentials> < "foo": $foo>, "bar": $bar>>`(myOnReadyStateChangeHandler);
Вам следует использовать строковые литералы до тех пор, пока вам специально не понадобится объект String . Чтобы получить более подробную информацию об объекте String , прочитайте String .
Использование специальных символов в строках
Кроме обычных символов вы также можете включать специальные символы в строки.
"one line \n another line";В следующей таблице перечислены специальные символы, которые вы можете использовать.
Символ Значение \b Возврат (Backspace) \f Перевод или прогон страницы (Form feed) \n Перевод строки (New line) \r Возврат каретки (Carriage return) \t Табуляция (Tab) \v Вертикальная табуляция (Vertical tab) \’ Апостроф или одинарная кавычка \» Двойная кавычка \\ Обратная косая черта (Backslash) \XXX Символ в кодировке Latin-1, представленный тремя восьмеричными числами XXX от 0 до 377. Например, \251 (символ ©). \xXX Символ в кодировке Latin-1, представленный двумя шестнадцатеричными числами XX от 00 до FF. Например, \xA9 (символ ©). \uXXXX Символ в Unicode, представленный четырьмя шестнадцатеричными числами XXXX. Например, \u00A9 (символ ©). \u Символ в UTF-32BE. Например, \u обозначает то же, что обычная запись \uD87E\uDC04. Экранирующие символы
Для символов, не перечисленных в вышеприведённой таблице, предваряющая обратная косая черта игнорируется. Такое использование не является рекомендованным (deprecated) и вам следует избегать его.
Вы можете вставить кавычку в строку, если поставите перед ней обратную косую черту. Это называется экранированием кавычек. Например:
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."; console.log(quote); // He read "The Cremation of Sam McGee" by R.W. Service.
Чтобы включить обратную косую черту в строку, перед ней нужно поставить ещё одну обратную косую черту. Например:
var home = "c:\\temp"; // c:\temp
Вы также можете экранировать перевод строки. Обратная косая черта и перевод строки будут удалены из содержимого строки. Например:
var str = "this string \ is broken \ across multiple\ lines."; console.log(str); // this string is broken across multiplelines.
Хотя JavaScript не поддерживает синтаксис «heredoc» (форматированный текст в одной строковой переменной), но вы можете эмулировать его, добавив перевод строки и обратную косую черту в конец каждой строки:
var poem = "Roses are red,\n\ Violets are blue.\n\ I'm schizophrenic,\n\ And so am I.";
Дополнительная информация
Данная глава сфокусирована на базовом синтаксисе для объявлений и типов. Чтобы получить более подробную информацию о конструкциях JavaScript, прочитайте:
- Порядок выполнения и обработка ошибок
- Циклы и итерация
- Функции
- Выражения и операторы
В следующей главе рассматриваются управляющие конструкции и обработка ошибок.
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 10 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Основы javascript
Для хранения данных в программе используются переменные и константы . Переменные предназначены для хранения каких-нибудь временных данных или таких данных, которые в процессе работы могут менять свое значение. Константы, наоборот, предназначены для хранения неизменных данных, значение которых должно оставаться постоянным в течение всей программы.
Объявление переменных
Для создания переменных применяются операторы var и let . Например, объявим переменную username :
var username;
Объявление переменной представляет отдельную инструкцию, поэтому завершается точкой с запятой.
Аналогичное определение переменной с помощью оператора let :
let username;
Каждая переменная имеет имя. Имя представляет собой произвольный набор алфавитно-цифровых символов, знака подчеркивания (_) или знака доллара ($), причем названия не должны начинаться с цифровых символов. То есть мы можем использовать в названии буквы, цифры, подчеркивание и символ $. Однако все остальные символы запрещены.
Например, правильные названия переменных:
$commision someVariable product_Store income2 myIncome_from_deposit
Следующие названия являются некорректными и не могут использоваться:
222lol @someVariable my%percent
Также нельзя давать переменным такие имена, которые совпадают с зарезервированными ключевыми словами. В JavaScript не так много ключевых слов, поэтому данное правило не сложно соблюдать. Например, следующее название будет некорректным, так как for — ключевое слово в JavaScript:
var for;
Список зарезервированных слов в JavaScript:
await, break, case, catch, class, const, continue, debugger, default, delete, do, else, enum, export, extends, false, finally, for, function, if, import, in, instanceof, new, null, return, super, switch, this, throw, true, try, typeof, var, void, while, with, yield
С развитием JavaScript и принятием новых стандартов языка список зарезервированных слов может пополняться, однако в целом их не так уж много.
Также не рекомендуется объявлять переменные с именем, которые аналогичны уже имеющимся глобальным переменным. Например, для вывода на консоль используется метод console.log() . Здесь console — это имя глобального объекта, и мы можем определить переменную с этим именем.
let console; // определяем переменную console console.log("Hello"); // ! ОшибкаОпределение переменной console приведет к тому, что она переопределит одноименный глобальный объект console, и при вызове метода console.log() мы столвнемся с ошибкой.
Подобных глобальных объектов не так много, кроме console это также alert, blur, close, closed, document, focus, frames, location, navigator, open, screen, window .
При названии переменных надо учитывать, что JavaScript является регистрозависимым языком, то есть в следующем коде объявлены две разные переменные:
let username; let userName;
Через запятую можно определить сразу несколько переменных:
var username, age, height; let a, b, c;
Присвоение переменной значения
После определения переменной ей можно присвоить какое-либо значение. Для этого применяется оператор присваивания ( = ):
var username; username = "Tom";
То есть в данном случае переменная username будет хранить строку «Tom». После присвоения переменной значения мы можем что-то сделать с этим значением, например, выведем его на консоль:
METANIT.COM 
Можно сразу присвоить переменной значение при ее определении:
var username = "Tom"; let userage = 37;
Процесс присвоения переменной начального значения называется инициализацией .Можно обратить внимание, что одна переменная определена с помощью let , а другая — с помощью var . Конкретно в данном случае это не имеет значения, и мы могли бы определить обе переменных либо с помощью let , либо с помощью var . Но в целом между let и var , есть различия, которые будут рассмотрены в одной из следующих статьях.
Можно сразу инициализировать несколько переменных:
let name1 = "Tom", name2 = "Bob", name3 = "Sam"; console.log(name1); // Tom console.log(name2); // Bob console.log(name3); // Sam
JavaScript позволяет некоторые вольности при определении переменной. Так, мы можем НЕ использовать ключевые слова let или var
METANIT.COM Хотя мы можем так делать, но это не самый рекомендуемый подход. В одной из следующих статей мы увидим, с какими проблемами мы можем столкнуться при подобном подходе.
Изменение переменных
Отличительной чертой переменных является то, что мы можем изменить их значение:
METANIT.COM 
Константы
С помощью ключевого слова const можно определить константу , которая, как и переменная, хранит значение, однако это значение не может быть изменено.
const username = "Tom";
Если мы попробуем изменить ее значение, то мы столкнемся с ошибкой:
const username = "Tom"; username = "Bob"; // ошибка, username - константа, поэтому мы не можем изменить ее значение
Также стоит отметить, что поскольку мы не можем изменить значение константы, то она должна быть инициализирована, то есть при ее определении мы должны предоставить ей начальное значение. Если мы этого не сделаем, то опять же мы столкнемся с ошибкой:
const username; // ошибка, username не инициализирована
Когда использовать переменные, а когда константы? Если вы уверены, что значение в процессе программы не будет изменяться, тогда это значение определяется в виде константы. Если неизвестно, будет ли значение меняться или нет, то рекомендуется определить значение как константу. А в случае если в далее потребуется его изменить, то просто можно изменить определение значения с const на var / let .
Основы языка JavaScriptИсторияJavaScript появился в 1995 в браузере Netscape Navigator.
Несмотря на название из Java взяты только основа (язык Си), некоторые стандартные классы (Object, Math, String, . ) и невозможность перегрузки операций.
Большее влияние оказало популярное в то время функциональное программирование:
* анонимные функции (лямбда-выражения);
* отсутствие типизации (переменные могут хранить значения любого типа);
* отсутствие классов (частично исправлено в последних версиях) — вместо этого предлагалось создание объектов по образцу (язык Self);
* достаточно похожим образом осуществляется контроль за порядком вычислений в асинхронных операциях (Promise является аналогом конвейера).Каждый разработчик браузера вносил что-то своё в язык и для обеспечения [совместимости](https://learn.javascript.ru/strict-mode) и надежности рекомендуется писать « ‘use strict’; « в первой строке кода:
Например, использование необъявленных переменных в этом режиме запрещено:
Уберите первую строку, и программа будет работать без ошибок.
Переменные, базовые типы и вычисления[Переменные](https://learn.javascript.ru/variables) объявляются с помощью «let« или «const« и являются ссылками на значения (несколько переменных могут указывать на одно значение):
«`run-js
‘use strict’;
let x=5;
const pi=3.1415926;
x=10;
pi=2.71828;
console.log(x, pi);
«`«const« означает, что переменную нельзя переустановить на другое значение, но само значение можно изменять (если оно является коллекцией значений).
Имя переменной должно содержать только буквы, цифры или символы $ и \_. Регистр имен важен.
Базовые (примитивные) [типы данных]:
number (вещественное 64-битное число), bigint, string, boolean, null, undefined, symbol (уникальный идентификатор).«`run-js
‘use strict’;
let n=1.5; // number
console.log(typeof n);
let m=1; // тоже number
console.log(typeof m);
let k=123456789n; // bigint
console.log(typeof k);
let s=’abc’; // string
console.log(typeof s);
let b=true; // boolean
console.log(typeof b);
let p=null; // пустой объект — специальное значение
console.log(typeof null); // object
let u; // значение не присвоено
console.log(typeof u); // undefined
let z=Symbol(); // или Symbol.for(‘key’)
console.log(typeof z); // symbol
«`В JavaScript три вида строк:
«`run-js
‘use strict’;
console.log(‘строка1\nстрока2’);
console.log(«строка в \»кавычках\»»);
let x=1;
console.log(`Текст на нескольких
строках
со вставками выражений $ и $`);
«`Преобразования из строки в число и обратно (попробуйте альтернативные варианты и неправильные значения):
«`run-js
‘use strict’;
let x=15;
let y=x.toString(); // другой вариант String(x)
console.log(y, typeof y);
let s=’10’;
let n=Number(s); // другие варианты: +s parseInt(s) parseFloat(s)
console.log(n, typeof n);
«`Область видимости (scoping) переменной ограничена блоком в <> от места объявления. Глобальные переменные доступны везде после выполнения оператора объявления.
«`run-js
‘use strict’;
let x=30;
let x=10;
console.log(x);
console.log(y);
let y=20;
>
console.log(x);
console.log(y);
«`Ранее переменные объявлялись с помощью [var](https://learn.javascript.ru/var), при этом областью видимости является вся функция, в которой объявлена переменная, включая код до объявления за счет поднятия (hoisting).
Кроме того, можно объявить переменную несколько раз (симптом ошибки программиста).
Арифметические [операции](https://learn.javascript.ru/operators)
такие же как в С. Перед выполнением операнды-строки преобразуются в числа, исключение — операция +. Для возведения в степень можно использовать «**«.
«`run-js
‘use strict’;
console.log(1/3);
console.log(2**0.5); // корень из 2
console.log(’12’/’3′);
console.log(1+’2′);
console.log(‘1’+2);
«`Операции [сравнения](https://learn.javascript.ru/comparison) тоже аналогичные, но добавляется строгое равенство «===«:
«`run-js
‘use strict’;
console.log(1==’1.0′);
console.log(1===’1′);
console.log(0==false);
console.log(0===false);
«`Основные операторыОсновные операторы: if, while, for, switch — такие же как в Java или C.
Оператор «if« вычисляет выражение в скобках и преобразует результат к логическому типу.
Число 0, пустая строка «»»«, «null«, «undefined« и «NaN« считаются ложными, остальные — истинными.«`run-js
let a=100;
if(a <100)
console.log(‘Less’);
else if(a>100)
console.log(‘Great’);
else
console.log(‘Equal’);
«`Переменная в «switch« проверяется на строгое равенство первому значению, затем второму и так далее.
«`run-js
let browser=’Firefox’;
switch (browser) case ‘Edge’:
console.log(‘OK’);
break;
case ‘Chrome’:
case ‘Firefox’:
case ‘Safari’:
console.log(‘Cool’);
break;
default:
console.log(‘Change your browser!’);
>
«`Есть операторы «break« (прервать выполнение цикла) и «continue« (перейти к следующей итерации).
*Задание 1:* напишите код, который выводит квадраты чисел от 1 до 10.
Функции«`run-js
‘use strict’;
function add(x,y) return x+y;
>
console.log(add(3,5));
«`Для таких объявлений действует поднятие — можно обращаться к функции, определяемой ниже.
«`run-js
‘use strict’;
function printsum() console.log(add(3,5));
>
function add(x,y) return x+y;
>
printsum();
«`Чаще всего в JavaScript используются [анонимные функции и стрелочные функции](https://learn.javascript.ru/function-expressions-arrows):
«`run-js
‘use strict’;
let add1=function(x,y) < return x+y; >
let add2=(x,y) => x+y;
let factorial=function rec(x) < return x==0?1:x*rec(x-1); >
console.log(add1(3,5));
console.log(add2(30,50));
console.log(factorial(5));
console.log(typeof factorial);
«`Особенности: у стрелочных функций нет скрытого аргумента «this«.
Для параметров можно указать значения по умолчанию:
См. также [остаточные параметры и ключевые параметры](https://learn.javascript.ru/destructuring-assignment)
[Замыкание](https://learn.javascript.ru/closure): Для имен в определении функции, не являющихся параметрами функции,
используются переменные из области видимости в момент определения функции со значениями в момент вызова.«`run-js
‘use strict’;
let x=1, y=2;
let func1;
let x=3;
func1=()=>x+y;
x=4;
>
console.log(func1());
let func2=()=>x+y;
console.log(func2());
«`*Задание 2*: напишите функцию `hypot(x,y)`, которая вычисляет длину гипотенузы по двум катетам.
*Задание 3*«*«: напишите функцию `»integr»(f,a,b,n)`, которая вычисляет интеграл функции `f` методом прямоугольников, разбивая отрезок `[a,b]` на `n` кусочков и вычисляя площадь прямоугольников под графиком функции.
Коллекции: массивы, объекты и классы[Массив](https://learn.javascript.ru/array) — последовательность значений, нумеруется с 0:
«`run-js
‘use strict’;
let arr=[10,1,20]; // массив создается перечислением элементов в []
console.log(typeof arr); // массив это объект класса Array
console.log(arr); // отладочная печать всего объекта
let arr2=[]; // пустой массив
// обычный способ, с возможностью изменения порядка
for(let i=0;i
// по всем элементам слева направо
for(let x of arr)
console.log(x);
arr.forEach((x)=>console.log(x)); // функциональный подход
«`Добавление и удаление значений в массив:
«`run-js
‘use strict’;
let arr=[10,1,20];
delete arr[1]; // удаляем элемент
arr[6]=25;
console.log(‘существующие ключи’);
for(let k in arr)
console.log(k,arr[k]);
console.log(‘все элементы’);
for(let x of arr)
console.log(x);
console.log(‘уменьшаем размер до 2’);
arr.length=2;
for(let x of arr)
console.log(x);
«`[Другие методы](https://learn.javascript.ru/array-methods) для работы с массивом, включают вставку и вырезание части массива, выделение подмассива, преобразования и сортировку.
*Задание 4*: Напишите функцию `»imax»(a)`, которая находит индекс минимального элемента в массиве `a`.
*Задание 5*: Напишите функцию `»conc»(a)`, которая сцепляет все строки в массиве `a` в одну строку. Пример: «conc([‘ab’,’cd’,’e’])« должен вернуть строку «’abcde’«.
[Объект](https://learn.javascript.ru/object) — ассоциативный массив, в котором ключом могут быть только строки или символы (для скрытых элементов).
«`run-js
‘use strict’;
// создание объекта
let mykey=’year salary’;
let hidden=Symbol();
let person=< name: "John", age: 30, [mykey]: 100500, [hidden]: 'secret' >;
console.log(typeof person); // это объект класса Object
console.log(person); // отладочная печать всего объекта
// обращение к элементу
console.log(person.name);
console.log(person[‘name’]);
console.log(person[hidden]);
person.animal=’dog’; // добавление элемента
delete person.animal; // удаление элемента
if(person.animal) // у персоны есть поле animal?
console.log(person.animal);
for(let key in person) // проход по ключам
console.log(`person.$=$`);
«`*Задание 6*: Создайте объект «engdict« с англо-русским словарем. Напишите функцию `»translate»(a)`, которая заменяет английские слова в массиве `a` на их русский перевод, если они есть в словаре.
Есть ассоциативные коллекции [Map, Set](https://learn.javascript.ru/map-set),
[WeakMap, WeakSet](https://learn.javascript.ru/weakmap-weakset), в которых ключом могут значения любого типа.[Классы](https://learn.javascript.ru/class) фактически реализуются на основе объектов.
[Наследование](https://learn.javascript.ru/class-inheritance) — только одиночное:
«`run-js
‘use strict’;
class Person constructor(name,age) < // конструктор
this.age=age;
this.name = name;
>
sayHi() < console.log(`Hi, $`); > // метод
>
class Manager extends Person sayHi() < console.log(`Hello, $`); > // переопределение метода
>
let person1=new Person(«John»,30); // создание объекта
person1.sayHi(); // вызов метода
console.log(person1.age); // обращение к полю
let person2=new Manager(«Charles»,50); // создание объекта
person2.sayHi(); // вызов метода
«`Можно реализовать поля с проверкой при присваивании и вычисляемые поля.
«`run-js
‘use strict’;
class Person constructor(name,age) <
this.age=age; // поле без контроля доступа
this.name = name; // поле с проверкой — вызываем setter
>
sayHi() < console.log(`Hi, $`); >
get name() < return this._name; >// чтение поля с проверкой
set name(value) < // запись поля с проверкой
if (value.length > 10) <
console.log(«Name too long.»);
return;
>
this._name = value; // значение хранится в поле _name
>
get days() < return this.age*365; >// вычисляемое поле
>
let person = new Person(«John»,30);
person.name=person.name+» Frankenstein»; // используем getter и setter
console.log(person.days);
person.age++;
console.log(person.days);
person.animal=’dog’; // можем добавлять новые элементы в объект
console.log(typeof person);
console.log(person instanceof Person); // проверка на принадлежность классу
// поля объекта их значения
for(let key in person)
console.log(`person.$=$`);
// методы хранятся в специальном объекте-прототипе, общем для всех экземпляров класса
for(let name of Object.getOwnPropertyNames(Object.getPrototypeOf(person)))
console.log(`Person.prototype.$`);
«`*Задание 7*: Определите класс Склад, в который можно положить или забрать некоторое количество товара (наименование, количество единиц). Определите вычисляемое поле «суммарное количество единиц хранения».
3.1. Основы JavaScript
JavaScript создавался как скриптовый язык для браузеров Netscape. Компания Microsoft также признала его потенциал и включила под именем JScript в Internet Explorer 3, обеспечив частичную поддержку стандартов языка, что привело в итоге к неразберихе со стандартами и версиями JavaScript. Поэтому Netscape, Microsoft и другие заинтересованные компании обратились в организацию ECMA (Европейская ассоциация производителей компьютеров), где была одобрена первая спецификация языка ECMA-262. В связи с тем, что название «JavaScript» являлось зарегистрированным товарным знаком, для нового стандарта было решено использовать ECMAScript (или сокращенно ES). ECMAScript изначально был разработан для использования в качестве языка сценариев, но позже стал широко использоваться в качестве языка программирования общего назначения.
В основу создания JavaScript была положена идея динамического управления объектами HTML-документов без перезагрузки текущей страницы (так называемые бессерверные сценарии). Со временем возможности языка расширились:
- С помощью JavaScript можно запускать одностраничные приложения на стороне клиента;
- JavaScript используется на стороне сервера с такими технологиями, как Node.js;
- JavaScript помогает создавать настольные приложения с Electron и может использоваться для работы с одноплатными компьютерами типа Raspberry Pi;
- Также, JavaScript используется для обучения моделей машинного обучения в браузере с помощью технологии TensorFlow.js.
Что такое JavaScript?
1) JavaScript — язык сценариев, или скриптов. Скрипт представляет собой программный код — набор инструкций, который не требует предварительной обработки (например, компиляции) перед запуском. Код JavaScript интерпретируется движком браузера во время загрузки веб-страницы. Интерпретатор браузера выполняет построчный анализ, обработку и выполнение исходной программы или запроса.
2) JavaScript — объектно-ориентированный язык с прототипным наследованием. Он поддерживает несколько встроенных объектов, а также позволяет создавать или удалять свои собственные (пользовательские) объекты. Объекты могут наследовать свойства непосредственно друг от друга, образуя цепочку объект-прототип.
JavaScript на веб-страницах
- Содержание:
- 1. Подключение сценариев к html-документу
- 2. Типы данных и переменные в JavaScript
- 2.1. Переменные в JavaScript
- 2.2. Типы данных переменных
- 2.3. Глобальные и локальные переменные
- 3. Ключевые слова JavaScript
- 4. Оформление имен переменных и функций в коде JavaScript
1. Подключение сценариев к html-документу
Сценарии JavaScript бывают встроенные, т.е. их содержимое является частью документа, и внешние, хранящиеся в отдельном файле с расширением .js . Сценарии можно внедрить в html-документ следующими способами:
1.1. В виде гиперссылки
Для этого нужно разместить код в отдельном файле и включить ссылку на файл в заголовок
или тело страницы.
Этот способ обычно применяется для сценариев большого размера или сценариев, многократно используемых на разных веб-страницах.
1.2. В виде обработчика события
Каждый html-элемент имеет JavaScript-события, которые срабатывают в определенный момент. Нужно добавить необходимое событие в html-элемент как атрибут, а в качестве значения этого атрибута указать требуемую функцию. Функция, вызываемая в ответ на срабатывание события, является обработчиком события. В результате срабатывания события исполнится связанный с ним код. Этот способ применяется в основном для коротких сценариев, например, можно установить смену цвета фона при нажатии на кнопку:
1.3. Внутрь элемента
Элемент может вставляться в любое место документа. Внутри тега располагается код, который выполняется сразу после прочтения браузером, или содержит описание функции, которая выполняется в момент ее вызова. Описание функции можно располагать в любом месте, главное, чтобы к моменту ее вызова код функции уже был загружен.
Обычно код JavaScript размещается в заголовке документа (элемент ) или после открывающего тега . Если скрипт используется после загрузки страницы, например, код счетчика, то его лучше разместить в конце документа:
