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

Необходимые навыки: Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.
Цель: Ознакомиться с основами переменных в JavaScript.

Инструменты, которые вам нужны

Всюду по этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание содержимого. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. What are browser developer tools для получения дополнительной информации о том, как получить доступ к этому инструменту).

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

 

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

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

<button>Нажми меня</button>
var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('Как вас зовут?');
  alert('Привет, ' + name + ', рады тебя видеть!');
}

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

Чтобы понять, почему это полезно, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:

var name = prompt('Как вас зовут?');

if (name === 'Адам') {
  alert('Привет, Адам, рады тебя видеть!');
} else if (name === 'Алан') {
  alert('Привет, Алан, рады тебя видеть!');
} else if (name === 'Бэлла') {
  alert('Привет, Бэлла, рады тебя видеть!');
} else if (name === 'Бьянка') {
  alert('Привет, Бьянка, рады тебя видеть!');
} else if (name === 'Крис') {
  alert('Привет, Крис, рады тебя видеть!');
}

// ... и так далее ...

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

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

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

Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.

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

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

var myName;
var myAge;

Здесь мы создаем две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (вы можете открыть эту консоль в отдельной вкладке или окне, если хотите). После этого попробуйте создать переменную (или две) с вашими собственными именами.

Заметка: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.

Вы можете проверить, существуют ли эти значения в среде выполнения, введя только имя переменной, например.

myName;
myAge;

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

scoobyDoo;

Заметка: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.

Присвоение значение переменной

Как только вы объявили переменную, вы можете присвоить ей значение. Вы делаете это, набирая имя переменной, за которым следует знак равенства (=), за которым следует значение, которое вы хотите присвоить. Например:

myName = 'Chris';
myAge = 37;

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

myName;
myAge;

Вы можете объявить переменную и задать ей значение одновременно, например:

var myName = 'Chris';

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

Заметка: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задает значение) переменную, вы можете объявить ее после ее инициализации, и она все равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется hosting - прочитайте var hoisting для более подробной информации по этому вопросу.

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

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

myName = 'Bob';
myAge = 40;

Правила именования переменных

Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчеркивания.

  • Вы не должны использовать других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
  • Не используйте символы подчеркивания в начале имен переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей, поэтому можно запутаться.
  • Не используйте числа в начале переменных. Это недопустимо и приведет к ошибке.
  • Общепринято придерживаться так называемый "lower camel case", где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имен переменных в этой статье.
  • Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
  • Переменные чувствительны к регистру, так что myage и myAge - разные переменные.
  • Один последний момент - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имен переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа varfunctionlet, и for для имен переменных. Браузеры распознают их как разные элементы кода, и поэтому вы получите ошибки.

Заметка: Вы можете найти довольно полный список зарезервированных ключевых слов по ссылке: Lexical grammar — keywords.

Примеры хороших имен переменных:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Примеры плохих имен переменных:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Примеры имен переменных, которые вызовут ошибки:

var
Document

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

Типы переменных

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

До сих пор мы использовали первые два, но есть и другие.

Числа (Numbers)

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

var myAge = 17;

Строки ('Strings')

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

var dolphinGoodbye = 'So long and thanks for all the fish';

Логические (Booleans)

Booleans - это истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:

var iAmAlive = true;

В действительности вы чаще будете использовать этот тип переменных так:

var test = 6 < 3;

Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. Как и следовало ожидать, он вернет false, потому что 6 не меньше 3! В дальнейшем вы узнаете гораздо больше о таких операторах.

Массивы (Arrays)

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

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

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

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.

В следующей статье вы узнаете гораздо больше о массивах.

Объекты (Objects)

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

Попробуйте ввести следующую строку в консоль:

var dog = { name : 'Spot', breed : 'Dalmatian' };

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

dog.name

Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.

Свободная типизация

JavaScript - это «свободно типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).

Например, если вы объявите переменную и присвоите ей значение, заключенное в кавычки, браузер будет обрабатывать переменную как строку:

var myString = 'Привет';

Он все равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:

var myNumber = '500'; // упс, это все еще строка (string)
typeof(myNumber);
myNumber = 500; // так-то лучше, теперь это число (number)
typeof(myNumber);

Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию typeof()  - она возвращает тип данных переменной, которую вы передаете в нее. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная myNumber содержит строку '500'. Посмотрите, что она вернет во второй раз, когда вы ее вызовите.

Подведение итогов

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

Метки документа и участники

Внесли вклад в эту страницу: Froris, AliyevHrn, slychai85, AndrewSamofalov, laion220995, HaukIce
Обновлялась последний раз: Froris,