Урок 3. Javascript. Переменные и константы.
Изучив правила и нюансы лексической структуры JavaScript, можно переходить непосредственно к «буквам» - константам языка и его переменным. И сегодня речь пойдет о:
Переменные в JavaScript
Переменные в JavaScript играют роль контейнеров, иными словами в них можно помещать какую-либо информацию, а затем также извлекать ее обратно. При создании переменных необходимо всегда придерживаться 4-х правил:
- Каждой переменной должно быть присвоено свое уникальное имя;
- Именем переменной не могут выступать зарезервированные слова (см. урок №1);
- Имя переменной не может начинаться с цифр. Допускаются только латинские буквы или символ "_" («num» и «_num» - верно, «1num» - неверно).
- Из-за чувствительности языка JavaScript к регистру, переменные написанные одними и теми же символами, но в разном регистре будут распознаваться, как разные (например, num, Num и NUM – 3 разных переменных).
Примечание: JavaScript допускает использование русских букв при присвоении имени переменной, однако, во избежание ошибок, рекомендуется использовать лишь английский алфавит.
Создание, удаление и переопределение переменных
Создание
Создание переменных в JavaScript называется объявлением переменных и выполняется при помощи ключевого слова var:
<script>
var a //- в вашем скрипте появилась новая переменная «а».
</script>
Однако данная переменная будет пустой, ведь мы не присвоили ей никакого значения. Чтобы программа понимала, что данная переменная относится, например, к типу числовых и имеет конкретное значение, необходимо загрузить в нее данную информацию при помощи оператора «=».
<script>
var a = 3 // - переменная «а» объявлена числовой и равна 3.
</script>
Для лучшего понимания разницы рассмотрим простейший пример:
<html>
<script language="JavaScript">
var a; // создадим переменную а.
var b = 5; // создадим переменную b и присвоим ей значение 5.
document.write(a + "<br>" + b); //на первой строчке выведем значение переменной а, на второй - значение переменной b.
</script>
</html>
В данном случае мы получим следующий результат:
Поскольку мы лишь обозначили переменную а, но не присвоили ей никакого значения, программа отнесла ее к простейшему типу «undefined», т.е. не доступных для записывания, перечисления и настройки. В случае переменной b мы получили то значение, которое ей присвоили (5).
Переопределение
Что делать, когда одной и той же переменной в разных частях программы необходимо придать разные значения? Что случится, если по ошибке использовал одну и ту же переменную в разных значениях? В обоих случаях имеет место переопределение – присваивание переменной новой информации, однако вариантов развития ситуации здесь может быть несколько. Рассмотрим наглядно:
|
|
Пример 1 |
Пример 2 |
Пример 3 |
|
Исходный код |
<html> <script> var a=123; var a; document.write(a); </script> </html> |
<html> <script> var a=123; document.write(a + '<br />'); var a=321; document.write(a); </script> </html> |
<html> <script> var a=123; var a=321; document.write(a); // Выведет 123 </script> </html> |
|
Результат |
123 |
123 321 |
321 |
Как видите, переопределение переменных не удаляет предыдущие значения, что были им назначены, а лишь временно заменяет их (при необходимости) на иные.
Удаление
Удаление переменной напрямую зависит от способа ее назначения.
- Если переменная была объявлена без помощи var, достаточно будет прописать функцию delete
Пример:
var b = 321;
a = 123;
delete a;
document.write(b + '<br />');
document.write(a); //- в режиме отладчика данная строчка будет выдаваться как ошибочная, поскольку на момент ее выполнения переменной a уже не будет существовать.
</script>
</html>
- Если переменная была объявлена при помощи var, то удалить ее традиционным путем невозможно, единственный вариант - присвоить ей значение null или undefined.
Пример:
<html>
<script>
var b = 321;
var a = 123;
a = null; // или a = undefined
document.write(b + '<br />'); // - выведет значение b
document.write(b + '<br />'); // выведедет на первой строчке значение переменной b,
document.write(a+ '<br />'); // а на второй значение переменной а
document.write(b + a); // - выведет сумму переменных а и b
</script>
</html>
Роль var в определении переменных
Как уже упоминалось ранее, объявлять переменные можно как при помощи var, так и без него:
var а = 123; // - новая переменная, созданная с помощью var;
b = 321; // - новая переменная, созданная без помощи var;
На первый взгляд разница отсутствует, однако на самом деле она весьма значительна. Директива var делает переменную локальной, т. е. видимой только внутри текущей функции. При ее отсутствии переменная становится глобальной. Мы уже касались данного вопроса в предыдущем уроке и даже разбирали пример, связанный именно с var, поэтому сейчас подробно останавливаться на нем не будем.
Примечание: чтобы не подстраиваться под разные виды браузеров и снизить вероятность появления ошибок, также, как и в случае с «;», dctulf описывайте переменные явно – с помощью var.
Типы переменных
Хотя сам язык JavaScript относится к безтиповым (где переменная определяется в зависимости от контекста и может менять свое значение неоднократно), каждая переменная в нем будет относиться к одному из 6 типов. Рассмотрим каждый из них отдельно.
- Number – числовой тип, используемый для обозначения как целых, так и дробных чисел.
- String – текстовый тип, используемый для обозначения текста. При этом сам текст обязательно должен быть помещен в одинарные/двойные кавычки.
- Boolean – булевый (логический) тип, применяемый для обозначения данных, которые могут принимать всего 2 значения: true (истина) и false (ложь).
- Null – специальный тип, использующий лишь одно значение null - «ничего» или «значение неизвестно».
- Undefined - специальный тип, использующий лишь одно значение undefined - «значение не присвоено».
- Object – особый тип, применяемый для коллекций данных или объявления более сложных сущностей с помощью фигурных скобок {...}
Это лишь краткая информация о типах переменных. Более подробно мы разберем их позднее.
Примечание: в новом стандарте ECMAScript 6 был введен новый тип переменных Symbol, благодаря чему имя свойства, которое раньше было строкой, теперь может быть как строкой, так и символом. Однако данный стандарт был введен совсем недавно и еще не успел стабилизироваться, поэтому в виду возможных последующих изменений синтаксиса, разбирать его мы не будем.
Небольшая памятка
var a = 1; // - числовое значение
var b = 1.5; // - также число
var c = "текст";// - строка
var d = 'И это тоже текст'; // - вновь строка
var e = true; // - логический тип данных
var f = null; // - переменной присвоено значение null (ничего)
var g; // - значение переменной не присвоено
Если вы не уверены, что правильно объявили переменную, то всегда можете проверить себя с помощью директивы typeof, которая возвращает строку, содержащую информацию о типе значения. Попробуйте:
<html>
<script>
var l = 1; // - числовое значение
var b = 1.5; // - также число
var c = "текст";// - строка
var d = 'И это тоже текст'; // - вновь строка
var e = true; // - логический тип данных
var f = null; // - переменной присвоено значение null (ничего)
var g; // - значение переменной не присвоено
var k = Symbol('текст');
document.write("l: " + typeof l + "<br> b: " + typeof b + "<br> c: " + typeof c+ "<br> d: " + typeof d+ "<br> e: " + typeof e+ "<br> f: " + typeof f + "<br> g: " + typeof g + "<br> k: " + typeof k);
</script>
</html>
Константы
Если говорить о константах в контексте переменных, то здесь ими выступают некоторые устойчивые математические значения. Для наглядности представим их в виде таблицы:
|
Константа |
Описание |
|
Оператор Math |
|
|
E |
Основание натурального логарифма (число Эйлера) |
|
LN2 |
Натуральный логарифм от 2. |
|
LN10 |
Натуральный логарифм от 10. |
|
LOG2E |
Логарифм по основанию 2 от e. |
|
LOG10E |
Логарифм по основанию 10 от e. |
|
PI |
Число Пи. |
|
SQRT1_2 |
Квадратный корень из 0,5 или единица, деленная на квадратный корень из 2. |
|
SQRT2 |
Квадратный корень из 2. |
|
Оператор global |
|
|
Infinity |
Превышение наибольшего числа с плавающей запятой. Отрицательная бесконечность (-Infinity) меньше наименьшего число с плавающей запятой. |
|
NaN (глобальный) |
Параметр, указывающий, что выражение не является числом. |
|
null |
Обозначение переменной, не указывающей на допустимые данные. |
|
Undefined |
Значение не присвоено |
|
Оператор Number |
|
|
MAX_VALUE |
Наибольшее число, которое может быть представлено в JavaScript. |
|
MIN_VALUE |
Число, наиболее близкое к нулю, которое может быть представлено в JavaScript. |
|
NaN |
арифметическое выражение возвращает значение, не являющееся числом. |
|
NEGATIVE_INFINITY |
Значение, которое меньше наименьшего числа с плавающей запятой. |
|
POSITIVE_INFINITY |
Значение, которое больше наибольшего число с плавающей запятой. |
Для чего они нужны? Рассмотрим на примере числа ПИ, а точнее , на примере вычисления площади круга.
Как уже описывалось выше, в JavaScript используются переменные лишь шести типов. Поэтому, если мы захотим рассчитать формулу круга (ПИ * r2, где r – радиус круга), без использования констант это (в самом простом виде) будет выглядеть примерно так:
<html>
<script>
var r = 2; //- любое значение радиуса
var PI = 3.14;
alert(r*r*PI) ;
</script>
</html>
Однако здесь бесконечное число ПИ ограничено лишь 2 знаками после запятой. А если их потребуется 20 или 100? Вносить их от руки – бессмысленный труд. Поэтому куда лучше данная программа будет смотреться в следующем виде:
<html>
<head>
<title>Пример от Shneider Host</title>
<script>
<!--
function s(x)
{
return Math.PI*x*x;
}
//-->
</script>
</head>
<body bgcolor=#DFF0D5 text=black>
<H2>Вычисляем площадь круга</H2>
Введите значение R и нажмите "Рассчитать"
<form>
R=<INPUT type=text name=R value=1 size=20>
<INPUT type=button value="Рассчитать" onclick=
"this.form.S.value=s(this.form.R.value)">
<INPUT type=text name=S value="" size=20>
</form>
</body>
</html>
Попробуйте поэкспериментировать, например, заменив PI другой константой из таблицы, скажем, E.
Примечание: Все описанное ниже является экспериментальной технологией (частью стандарта Harmony (ECMAScript 6) реализованного в июне 2015 г), спецификация которой еще окончательно не стабилизирована. Поэтому часть синтаксиса может не поддерживаться в устаревших версиях браузеров и впоследствии быть изменена в соответствии с изменениями в спецификации.
В глобальном смысле под константами в JavaScript принято понимать переменные, которые доступны лишь для чтения, т . е. задаются единожды и не могут быть изменены. Объявляются они при помощи директивы const:
const a = 1;
Заданная единожды константа будет автоматически применяться для всех нижестоящих вставок кода JavaScript. Для наглядности рассмотрим на примере:
|
|
Пример 1 |
Пример 2 |
Пример 3 |
|
Исходный код |
<html> <body> просто html-текст <script> var a = 2 function go() { alert(a) } go() alert(a) </script> еще html-текст <script> var a = 3 alert(a) </script> </body> </html> |
<html> <body> просто html-текст <script> const a = 2 function go() { alert(a) } go() alert(a) </script> еще html-текст <script> var a = 3 alert(a) </script> </body> </html> |
<html> <body> просто html-текст <script> const a = 2 alert(a) </script> <p>еще html текст</p> <script> var a = 3 alert(a) function go() { var a = 3 alert(a) } go() </script> <p>еще текст</p> <script> var a = 3 alert(a) </script> </body> </html> |
|
Результат |
Два дополнительных окна с «2» и одно с «3» |
Три дополнительных окна с «2» |
Два дополнительных окна с «2», затем одно с «3», затем еще одно с «2» |
Пояснения:
В первом примере мы не использовали констант, и, как показывает результат, при обнаружении в коде нового var программа заменяла значение «а» на новое (сначала было 2, потом 3).
Во втором примере мы изначально обозначили, что а = 2 – это константа. Таким образом, при обнаружении нового var (а = 3), программа оный успешно игнорировала и осуществляла все действия с параметром а = 2.
В третьем примере мы немного усложнили задачу. Условие «а = 2» так и осталось константой, однако var а = 3 было внедрено не только как новый скрипт, но и как часть функции [function go() {var a = 3; alert(a)} go()]. В этой ситуации мы получили следующий результат: все команды, выполняемые вне функции использовали значение а = 2, а та команда, что была внутри нее – а = 3.
На этом мы завершаем тему констант и переменных и переходим к следующей.
