§02. Переменные. Типы данных.

Учимся программировать вместе с JavaScript
Глава I. Обо всём понемногу.

§02. Переменные. Типы данных.

Что такое переменная. Правила для формирования имён переменных. Список зарезервированных слов. Информация, которая может содержаться в переменной. Числа. Арифметические операции. Строки.

Что такое переменная. 

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

С другой стороны, когда программист пишет код, то на этот момент переменной является сочетание символов, которому можно присвоить определённое значение или использовать уже присвоенное. 

Опишем, как это всё происходит на практике. 

Первым делом программист в коде своей программы объявляет переменную: 

 

var i; 

 

Слово var служит для объявления переменных. Буква i в данном случае – имя переменной. Символ «;», как вы уже знаете, – разделитель операций. 

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

После того, как переменная объявлена ею можно пользоваться, т.е. присваивать и извлекать значения. Пример: 

 

i = 1; 

 

В данном примере мы присвоили переменной i значение 1 с помощью оператора присваивания =. Не сопоставляйте оператор присваивания в JavaScript со знаком равно в математике, это разные вещи. Оператор присваивания присваивает переменой, находящейся с лева от него, какое либо значение, находящееся справа от него. (Отсюда и название.) 

Примечание: оператором в программировании называется простейшая элементарная операция, составляющая основу языка.  

 

В следующем примере мы выведем значение нашей переменной в окно браузера: 

 

document.write(i); 

 

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

 Теперь соберём всё в один код: 

 

<script> 

var i; 

i = 1; 

document.write(i); 

</script> 

 

 

Правила для формирования имён переменных. 

Для формирования имён переменных существуют следующие правила: 

  • можно использовать только латинские буквы, символ подчёркивания «_» и символ доллар «$», а так же любые цифры; 

  • в самом начале имени может находиться только буква или символ подчёркивания «_». Так же допускается символ «$», однако это не рекомендуется, т.к. существует библиотека jQuery, где используется этот символ. И когда другой разработчик увидит этот символ в вашем коде, то первое, что он подумает - это библиотека jQuery; 

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

 

Список зарезервированных слов: 

 

break do if switch typeof case else in this var catch false instanceof throw void continue finally new true while default for null try with delete function return  

 

abstract double goto native static Boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile debugger 

 

arguments encodeURI Infinity Object String Array Error isFinite parseFloat SyntaxError Boolean escape isNaN parseInt TypeError Date eval Math RangeError undefined decodeURI EvalError NaN ReferenceError unescape decodeURIcomponent Function Number RegExp URIError 

 

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

 

Примечание: существуют так же негласные правила формирования имён переменных, соблюдать которые необязательно. Тем не менее, их соблюдение сделает ваш код «читабельным» и понятным не только для вас, но и для других. Эти правила называют «Венгерской» и «Верблюжьей» нотациями. Подробно о них вы можете почитать в Интернете, однако на данном этапе в этом нет необходимости. 

Так же, забегая вперёд, стоит сказать о том, что в программистской литературе вы можете встретить термин идентификатор. Так вот, что бы было понятно, имя переменной так же является идентификатором. 

 

Далее примеры имён переменных: 

 

variable_1 

variable_2 

_age 

string_1 

string_2 

i 

 

Если вы переведёте слова на русский язык, то будет понятно, что в примере есть переменная «один», переменная «два», переменная содержащая возраст и две переменные содержащие строки. Так же есть переменная i, с которой у вас может возникнуть вопрос. i – первая буква слова integer, что в переводе с английского означает целое число. Соответственно в этой переменной содержится целое число, которое можно использовать для определённых действий. 

 

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

 

var variable_1; //переменная один 

var variable_2; //переменная два 

var _age;       //возраст 

var string_1    //строка один 

var string_2    //строка два 

var i;          //целое число 

 

 

Информация, которая может содержаться в переменной. 

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

 

Числа. 

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

Примечание для тех, кто не знает, что такое вещественное число. В математике существуют множества чисел, такие как: Натуральные числа; Целые числа; Рациональные числа; Действительные (вещественные) числа и Комплексные числа. Не вдаваясь в подробности, можно сказать, что действительное (вещественное) число – это любое число только не комплексное. В математике такое число, как правило, называется действительным, а в программировании – вещественным. 

Примечание для тех, кто не знает, что такое шестнадцатеричное число. Шестнадцатеричное число – это число в шестнадцатеричной системе исчисления. Системы исчисления бывают разные. Различаются они тем, что в десятке находится различное количество чисел. Например, в десятеричной системе, которой мы все привыкли пользоваться, в десятке десять чисел (0,1,2,3,4,5,6,7,8,9). В двоичной системе – всего два числа (0,1). В шестнадцатеричной – шестнадцать (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). Если вы уже знаете HTML и CSS, то вы должны знать, что цвета в этих языках можно задавать как раз шестнадцатеричными числами.  

 

Целые числа в коде программы выглядят, как обычные целые числа. Пример: 

 

1 

25 

1000204 

 

Перед шестнадцатеричными числами ставится сочетание символов «Ox» или «OX». Пример: 

 

OxA3//Число 13 в шестнадцатеричном виде 

OX1D//Число 29 в шестнадцатеричном виде 

  

Для написания вещественных чисел используются следующие правила: 

Если число не сложное, то оно записывается как обычная десятичная дробь. Для разделения целой и дробной части используется точка. Пример: 

 

3.14 

   

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

 

1.2345е3 //1.2345 Х 103 или 1234.5 

1.234E-3 //1.234 Х 10-3 или 0.001234 

 

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

Плюсом ко всему стоит отметить, что для написания отрицательного числа достаточно перед ним поставить символ «-». Пример: 

 

-2.3 

 

Примечание: в отличие от других языков, в JavaScript все числа (даже целые) считаются вещественными и занимают в памяти компьютера 64 бита. Для примера, в языке Pascal есть такие типы, как: Byte (любое целое число от 0 до 255); ShortInt (любое целое число от -128 до +127); Integer (любое целое число от -32768 до +32767). Все эти типы данных отличаются друг от друга количеством занимаемой памяти и соответственно диапазоном возможных значений. Отсюда вытекает ряд проблем, связанных с выбором нужного типа данных. В JavaScript для всех чисел используется только один вещественный тип. Поэтому в этом отношении писать на JavaScript проще. Однако при этом есть один недостаток – данные программ занимают в памяти больше места. Т.к. сейчас компьютеры, в большинстве своём, достаточно производительные, то этот недостаток несущественен. 

 

 

 

Арифметические операции. 

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

 

+ //сложение 

- //вычитание 

* //умножение 

/ //деление 

 

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

Теперь пример, в котором продемонстрированы различные операции над переменными содержащими числа: 

 

<script> 

var r,i_1,i_2,result; 

r = 0.0000001; 

i_1 = 1; 

i_2 = 3; 

result = r/(i_1*-i_2); 

document.write(result); 

</script> 

 

 

Обратите внимание на следующие нюансы: 

- Все переменные в данном примере были объявлены в одной строке через запятую. Это вполне допустимо. 

- Как было уже сказано, переменная, начинающаяся с буквы i, должна (не обязательно) содержать в себе целое число. А вот переменная, начинающаяся с буквы r должна (не обязательно) содержать в себе вещественное число (r первая буква слова real). 

 

Примечание: в другой литературе по JavaScript вы можете встретить термин литерал. Говоря простым языком, литерал это то, как выглядит число в JavaScript коде. Либо как целое число, либо как простое вещественное, либо как вещественное с использованием буквы E. 

 

Строки. 

Ещё один тип данных это строка. Строка – это любая последовательность любых символов, заключённая в одинарные кавычки. Строки, как и числа, можно присваивать переменным. Пример: 

 

<script> 

var str;//переменная содержащая строку 

str = 'Привет всем!'; 

document.write(str); 

</script> 

 

 

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

  

Задачи. 

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

 

2. Решить с помощью JavaScript следующие примеры: 

 

; ; ; . 

 

Значения переменным произвольно присвоить в коде программы. Так же вывести на экран сам пример в том виде, как он выглядит в коде программы. 

Примечание: на данном этапе для возведения в степень можете переменную умножить саму на себя нужное количество раз. 

 

3. Создать две переменные. Присвоить им значения. Затем поменять значения местами. Результат работы вывести в окно браузера. 

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

 

Примеры решений. 

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

 

1. 

<script> 

var name_of_pupil; //Фамилия ученика 

var age_of_pupil;  //Возраст ученика 

name_of_pupil = 'Иванов'; 

age_of_pupil = 12; 

document.write('Фамилия ученика - '); 

document.write(name_of_pupil); 

document.write('<br>'); 

document.write('Возраст ученика - '); 

document.write(age_of_pupil); 

document.write(' лет'); 

</script> 

 

 

2. 

<script> 

var res;          //Результат 

var str_formula;  //Строка с формулой 

var A,B,C;        //Переменные A,B,С соответственно 

str_formula = '(5*A+B*B)*3*C'; 

A = 2; 

B = 45; 

C = 120; 

res = (5*A+B*B)*3*C; 

document.write(str_formula); 

document.write(' = '); 

document.write(res); 

</script> 

 

 

 

3. 

<script> 

var A; 

var B; 

var temp; 

A = 3; 

B = 45; 

document.write('A = '); 

document.write(A); 

document.write('  B = '); 

document.write(B); 

//Меняем местами значения переменных 

temp = A; 

A = B; 

B = temp; 

 

document.write('<br>После замены A = '); 

document.write(A); 

document.write('  B = '); 

document.write(B); 

</script>