Учебник по JS

ГЛАВНАЯ JS Введение JS Куда Вывод JS Заявления JS JS-синтаксис JS-комментарии JS-переменные JS Пусть Константа JS JS-операторы JS-арифметика Назначение JS JS-типы данных JS-функции JS-объекты JS-события JS-строки Строковые методы JS Поиск строки JS Шаблоны строк JS JS-номера Методы номеров JS JS-массивы Методы массива JS Сортировка массива JS Итерация массива JS Константа массива JS JS-даты Форматы даты JS Методы получения даты JS Методы установки даты JS JS-математика JS Случайный JS Булевы значения Сравнение JS JS-условия JS-переключатель JS цикл для Цикл JS для входа Цикл JS для Цикл JS во время Перерыв JS JS-итерации JS-наборы JS-карты JS Typeof Преобразование типов JS JS побитовый JS регулярное выражение JS-ошибки Область JS JS-подъем Строгий режим JS JS это ключевое слово Функция стрелки JS JS-классы JS JSON JS-отладка Руководство по стилю JS Лучшие практики JS JS-ошибки JS-производительность Зарезервированные слова JS

JS-версии

JS-версии JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE/пограничный История JS

JS-объекты

Определения объектов Свойства объекта Методы объекта Отображение объекта Средства доступа к объектам Конструкторы объектов Прототипы объектов Итерации объектов Наборы объектов Карты объектов Ссылка на объект

JS-функции

Определения функций Параметры функции Вызов функции Вызов функции Функция Применить Закрытие функций

JS-классы

Введение в класс Наследование классов Статический класс

JS асинхронный

Обратные вызовы JS JS асинхронный JS-обещания JS асинхронный/ожидание

JS HTML DOM

Дом Введение DOM-методы Документ DOM DOM-элементы DOM HTML DOM-формы ДОМ CSS DOM-анимации События ДОМ Слушатель событий DOM DOM-навигация DOM-узлы Коллекции DOM Списки узлов DOM

Спецификация браузера JS

JS-окно JS-экран Местоположение JS История JS JS-навигатор Всплывающее оповещение JS JS Тайминг JS-куки

JS-веб-API

Введение в веб-API API веб-форм API истории веб-поиска API веб-хранилища API веб-работника API веб-выборки API веб-геолокации

JS АЯКС

Введение в АЯКС AJAX XMLHttp АЯКС-запрос AJAX-ответ XML-файл AJAX АЯКС PHP АЯКС АСП База данных AJAX AJAX-приложения Примеры AJAX

JS JSON

Введение в JSON Синтаксис JSON JSON против XML Типы данных JSON Анализ JSON Строковая JSON JSON-объекты JSON-массивы JSON-сервер JSON PHP JSON HTML JSON JSONP

JS против JQuery

Селекторы jQuery JQuery HTML jQuery CSS JQuery DOM

JS-графика

JS-графика JS Холст JS сюжет JS Chart.js JS Google Диаграмма JS D3.js

JS-примеры

JS-примеры JS HTML DOM JS HTML-ввод HTML-объекты JS HTML-события JS JS-браузер JS-редактор JS-упражнения JS-викторина JS-сертификат

JS-ссылки

Объекты JavaScript HTML DOM-объекты


Переменные JavaScript

4 способа объявить переменную JavaScript:

  • С использованием var
  • С использованием let
  • С использованием const
  • Ничего не используя

Что такое переменные?

Переменные — это контейнеры для хранения данных (хранения значений данных).

В этом примере , x, yи z, являются переменными, объявленными с помощью varключевого слова:

Пример

var x = 5;
var y = 6;
var z = x + y;

В этом примере , x, yи z, являются переменными, объявленными с помощью letключевого слова:

Пример

let x = 5;
let y = 6;
let z = x + y;

В этом примере , x, yи z, являются необъявленными переменными:

Пример

x = 5;
y = 6;
z = x + y;

Из всех приведенных выше примеров вы можете догадаться:

  • х хранит значение 5
  • у хранит значение 6
  • z хранит значение 11

Когда использовать JavaScript var?

Всегда объявляйте переменные JavaScript с помощью var, letили const.

Ключевое varслово используется во всем коде JavaScript с 1995 по 2015 год.

letКлючевые слова и constбыли добавлены в JavaScript в 2015 году .

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


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

Если вам нужно общее правило: всегда объявляйте переменные с расширением const.

Если вы считаете, что значение переменной может измениться, используйте let.

В этом примере , price1, price2и total, являются переменными:

Пример

const price1 = 5;
const price2 = 6;
let total = price1 + price2;

Две переменные price1и price2 объявляются с помощью constключевого слова.

Это постоянные значения и не могут быть изменены.

Переменная totalобъявляется с letключевым словом.

Это значение, которое можно изменить.


Так же, как алгебра

Как и в алгебре, переменные содержат значения:

let x = 5;
let y = 6;

Как и в алгебре, в выражениях используются переменные:

let z = x + y;

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

Примечание

Переменные — это контейнеры для хранения значений.



Идентификаторы JavaScript

Все переменные JavaScript должны быть идентифицированы уникальными именами .

Эти уникальные имена называются идентификаторами .

Идентификаторы могут быть короткими именами (например, x и y) или более описательными именами (возраст, сумма, общий объем).

Общие правила построения имен переменных (уникальных идентификаторов) таковы:

  • Имена могут содержать буквы, цифры, символы подчеркивания и знаки доллара.
  • Имена должны начинаться с буквы
  • Имена также могут начинаться с $ и _ (но мы не будем использовать это в этом уроке).
  • Имена чувствительны к регистру (y и Y — разные переменные)
  • Зарезервированные слова (например, ключевые слова JavaScript) нельзя использовать в качестве имен.

Примечание

Идентификаторы JavaScript чувствительны к регистру.


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

В JavaScript знак равенства ( =) является оператором «присваивания», а не оператором «равно».

Это отличается от алгебры. Следующее не имеет смысла в алгебре:

x = x + 5

Однако в JavaScript это имеет смысл: он присваивает x значение x + 5.

(Он вычисляет значение x + 5 и помещает результат в x. Значение x увеличивается на 5.)

Примечание

Оператор «равно» написан как ==в JavaScript.


Типы данных JavaScript

Переменные JavaScript могут содержать числа, такие как 100, и текстовые значения, такие как «Джон Доу».

В программировании текстовые значения называются текстовыми строками.

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

Строки записываются в двойных или одинарных кавычках. Цифры пишутся без кавычек.

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

Пример

const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';

Объявление переменной JavaScript

Создание переменной в JavaScript называется «объявлением» переменной.

Вы объявляете переменную JavaScript с varпомощью letключевого слова или:

var carName;
или:
let carName;

После объявления переменная не имеет значения (технически это undefined).

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

carName = "Volvo";

Вы также можете присвоить значение переменной при ее объявлении:

let carName = "Volvo";

В приведенном ниже примере мы создаем переменную с именем carNameи присваиваем ей значение «Volvo».

Затем мы «выводим» значение внутри абзаца HTML с id="demo":

Пример

<p id="demo"></p>

<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>

Примечание

Хорошей практикой программирования является объявление всех переменных в начале скрипта.


Одно заявление, много переменных

Вы можете объявить много переменных в одном операторе.

Начните оператор с varи разделите переменные запятой :

Пример

let person = "John Doe", carName = "Volvo", price = 200;

Объявление может занимать несколько строк:

Пример

let person = "John Doe",
carName = "Volvo",
price = 200;

Значение = не определено

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

Переменная, объявленная без значения, будет иметь значение undefined.

Переменная carName будет иметь значение undefinedпосле выполнения этого оператора:

Пример

let carName;

Повторное объявление переменных JavaScript

Если вы повторно объявите переменную JavaScript, объявленную с помощью var, она не потеряет своего значения.

Переменная carNameпо-прежнему будет иметь значение «Volvo» после выполнения этих операторов:

Пример

var carName = "Volvo";
var carName;

Примечание

Вы не можете повторно объявить переменную, объявленную с помощью letили const.

Так не пойдет:

let carName = "Volvo";
let carName;

JavaScript-арифметика

Как и в случае с алгеброй, вы можете выполнять арифметические действия с переменными JavaScript, используя такие операторы, как =и +:

Пример

let x = 5 + 2 + 3;

Вы также можете добавить строки, но строки будут объединены:

Пример

let x = "John" + " " + "Doe";

Также попробуйте это:

Пример

let x = "5" + 2 + 3;

Примечание

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

Теперь попробуйте следующее:

Пример

let x = 2 + 3 + "5";

Знак доллара JavaScript $

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

Пример

let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;

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

Например, в библиотеке JavaScript jQuery функция main $используется для выбора элементов HTML. В jQuery $("p");означает «выбрать все элементы p».


Подчеркивание JavaScript (_)

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

Пример

let _lastName = "Johnson";
let _x = 2;
let _100 = 5;

Использование подчеркивания не очень распространено в JavaScript, но среди профессиональных программистов принято использовать его в качестве псевдонима для «частных (скрытых)» переменных.


Проверьте себя с помощью упражнений

Упражнение:

Создайте переменную с именем carNameи присвойте Volvoей значение.

var  = "";