САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

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 Заявления if...else JS Заявление switch JS Цикл for JS Цикл while JS Заявление break... JS Преобразование... JS Битовые... JS Регулярные выражения JS Ошибки JS Область JS Подъемный JS Строгий JS Ключевое слово this JS Ключевое слово let JS Константы JS Функция стрелки JS Классы JS Отладчик JS Руководство стиля JS Практика JS Распространенные ошибки JS Эффективность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS Версия 2016 JS Версия 2017 JS JSON

JS Формы

JS Формы JS Формы API

JS Объекты

Определение объекта Свойства объекта Методы объекта Отображение объекта Доступ к объекту Конструкторы объекта Прототипы объекта ES5 Методы объекта

JS Функции

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

JS Прочее

Классы введение Наследование класса Статические методы... JS Обратный вызов JS Асинхронный JS Обещания JS Асинхронный синтаксис

JS HTML DOM

DOM Введение DOM Методы DOM Документы DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Прослушиватель событий DOM Навигация DOM Узлы DOM Коллекция DOM Список узлов

JS Браузера BOM

JS Window JS Экран JS Расположение JS История JS Навигатор JS Предупреждение JS Синхронизация JS Cookies

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос на сервер AJAX Ответ с сервера AJAX XML Файл AJAX PHP Файл AJAX ASP Файл AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON или XML JSON Типы данных JSON Парсинг JSON Строки JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS Веб API

API - Введение API - История API - Хранилище API - Работник API - Извлечь файл API - Геолокации

JS или jQuery

jQuery HTML Селекторы jQuery HTML Элементы jQuery CSS Стили jQuery HTML DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Ввода JS HTML Объекты JS HTML События JS Браузер JS Редактор JS Упражнения JS Викторина JS Сертификат

JS Справочник

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


JavaScript Переменные



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

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

Пример

var x = 5;
var y = 6;
var z = x + y;
Попробуйте сами »

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

  • x сохраняет значение 5
  • y сохраняет значение 6
  • z сохраняет значение 11

Использование let и const (2015)

До 2015 года использование var ключевого слова было единственным способом объявить переменную JavaScript.

Версия JavaScript 2015 года (ES6 - ECMAScript 2015) позволяет использовать const ключевое слово для определения переменной, которую нельзя переназначить, и let ключевое слово для определения переменной с ограниченной областью действия.

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

Safari 10 и Edge 14 были первыми браузерами, полностью поддерживающими ES6:

Chrome 58 Edge 14 Firefox 54 Safari 10 Opera 55
Январь 2017 Август 2016 Март 2017 Июль 2016 Август 2018

Во многом как алгебра

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

Пример

var price1 = 5;
var price2 = 6;
var total = price1 + price2;
Попробуйте сами »

В программировании, как и в алгебре, мы используем переменные (например, price1) для хранения значений.

В программировании, как и в алгебре, мы используем переменные в выражениях (total = price1 + price2).

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

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



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

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

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

Идентификаторы могут быть короткими именами (например, x и y) или более описательными именами (age, sum, totalVolume).

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

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

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


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

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

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

x = x + 5

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

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

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


Типы данных JavaScript

Переменные JavaScript могут содержать числа, такие как 100, и текстовые значения, такие как "Щипунов Андрей".

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

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

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

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

Пример

var pi = 3.14;
var person = "Щипунов Андрей";
var answer = 'Да это я!';
Попробуйте сами »

Объявление (создание) переменных JavaScript

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

Вы объявляете переменную JavaScript с var ключевым словом:

var carName;

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

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

carName = "Вольво";

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

var carName = "Вольво";

В приведенном ниже примере мы создаем переменную с именем carName присваиваем ей значение "Вольво".

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

Пример

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

<script>
var carName = "Вольво";
document.getElementById("demo").innerHTML = carName;
</script>
Попробуйте сами »

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


Одно утверждение, много переменных

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

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

var person = "Щипунов Андрей", carName = "Вольво", price = 200;
Попробуйте сами »

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

var person = "Щипунов Андрей",
carName = "Вольво",
price = 200;
Попробуйте сами »

Значение = undefined

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

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

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

Пример

var carName;
Попробуйте сами »

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

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

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

Пример

var carName = "Вольво";
var carName;
Попробуйте сами »

Арифметика JavaScript

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

Пример

var x = 5 + 2 + 3;
Попробуйте сами »

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

Пример

var x = "Щипунов" + " " + "Андрей";
Попробуйте сами »

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

Пример

var x = "5" + 2 + 3;
Попробуйте сами »

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

А теперь попробуйте это:

Пример

var x = 2 + 3 + "5";
Попробуйте сами »

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

Помните, что идентификаторы (имена) JavaScript должны начинаться с:

  • Буква (AZ или az)
  • Знак доллара ($)
  • Или подчеркивание (_)

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

Пример

var $$$ = "Привет, мир";
var $ = 2;
var $myMoney = 5;
Попробуйте сами »

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

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


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

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

Пример

var _lastName = "Щипунов";
var _x = 2;
var _100 = 5;
Попробуйте сами »

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


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

Упражнение:

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

var  = "";

Старт