Стать программистом. Часть 5. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

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

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

Итак!

Урок 5. Операции с переменными одного типа.

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

Условно, все возможные операции с переменными можно разделить на два случая:

1. Операции с переменными с одинаковыми типами.
2. Операции с переменными с разными типами.

Давайте рассмотрим эти случаи по отдельности.

Операции с переменными с одинаковыми типами.

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

Приведем пример логичной и нелогичной операции для переменных одного типа, чтобы было понятно о чем идет речь.

Пример:
1 + 2 - логичная Операция. У нас есть два числа. Мы их складываем. И это Логично, потому что мы можем так сделать.
'привет' - 'голосовчане' - это Нелогичная и Недопустимая операция. Потому что мы пытаемся из слова 'привет' вычесть слово 'голосовчане'. И это Нелогично, потому что в обычной жизни мы так делать не можем.

Отсюда вытекают два негласных правила:

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

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

Сейчас мы рассмотрим их на практике, и все станет понятным.

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

По этому списку мы и будем двигаться. Если Вы еще не открыли наши index.html и core.js файлы - самое время это сделать.

Number (Число).

Операции, которые JavaScript позволяет выполнять с переменными типа "Number" идентичны операциям, которые мы все знаем из школьного курса математики. И согласно нашему правилу:

В случае операции между переменными типа "Number" мы получим новое значение этого же типа.

Давайте проверим на практике.

Очистим наш core.js и наберем следующий код:

var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = 5;

Ничего нового для Вас тут уже быть не должно. Мы создали пять переменных. Все они имеют значения от 1 до 5. И все эти переменный одного типа - "Number (Число)".
Добавим немного математики:

var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = 5;

var f = a + b;
var j = (a + b) - c;
var h = d * e / b;

На строках 7, 8 и 9 мы можем видеть новые переменные, значением которых станет результат исполнения элементарных математических операций.
Если подставить значения вместо названий переменных, то код сверху примет следующий вид:

var f = 1 + 2;
var j = (1 + 2) - 3;
var h = 4 * 5 / 2;

Если в уме подсчитать результат, то получится что:

var f = 3;
var j = 0;
var h = 10;

Таким образом мы получили три новых значения для переменных и тип этих переменных при этом сохранился как Number (Число). Не забываем, если остались сомнения на счет типа переменной, всегда можно проверить его, используя нашего помощника из предыдущего урока - typeof. Для этого добавим в наш код проверку для всех трех типов переменных:

var a = 1;
var b = 2;
var c = 3;
var d = 4;
var e = 5;

var f = a + b;
var j = (a + b) - c;
var h = d * e / b;

alert(typeof f);
alert(typeof j);
alert(typeof h);

Заглянем в браузер, где открыт наш index.html. Обновим окно и увидим, что все три переменных имеют тип "Number". Наше первое правило действует. Все операции выше логичны (т.е. мы можем свободно складывать, вычитать, делить и умножать) значение результата при этом осталось числом и тип этого результата тоже "Number".

А что же относительно Нелогичных или Недопустимых операций?
С одной такой математической операцией мы все хорошо знакомы. Звучит она как - "на ноль делить нельзя".

Но мы же с Вами любопытные, правда? Тем более что мы хотим проверить и второе правило тоже. Давайте, сделаем это и посмотрим, что получится.

var a = 1;
var f = a / 0;

alert(f);
alert(typeof f);

В данном примере мы в переменную "f" записываем результат от операции "a / 0", т.е "1 / 0". А затем при помощи конструкции alert();. На строке 5 мы выводим сначала само значение, которое записалось в переменную "f", а затем на строке 6 мы выводим тип переменной 'f', в которое попало это значение.

Откроем браузер и посмотрим, что выведут нам наши сообщения.

Первое сообщение выводит нам значение "Infinity (Бесконечность)", т.е. результатом деления числа на ноль в JavaScript будет "Infinity". Второе сообщение нам выведет тип "Number (Число)", т.е. переменная, которая получила значение "Infinity" вместе с ним получает и тип "Number (Число)".

Другими словами JavaScript достаточно умный язык программирования. И когда Вы заставляете его делать операцию, которую на первый взгляд делать неправильно или нелогично, он все-равно попробует справится с поставленной задачей. В данном примере мы попытались поделить на ноль. и JavaScript присвоил этой операции значение "Infinity", как бы указывая нам, что мы своими действиями вышли за логические рамки, и попали в бесконечность, в что-то что есть, но оно неизведанное и результат неясен. Ну а тип "Number (Число)" в данном случае вполне логичен, ведь бесконечность - тоже математическое понятие, и в каком-то роде это число, просто никогда не заканчивающееся.

String (Строка).

Операции со словами или строками (String) что нам ближе, менее обширные чем операции с числами, и поведение их запомнить намного проще.

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

Давайте посмотрим как это выглядит на практике.

Очистим наш core.js и напишем следующий код

var a = 'привет';
var b = ' ';
var c = 'голосовчане';

var d = a + b + c;

alert(d);

Мы создали три переменных. В первую положили значение "привет", во вторую проложили пробел, а в третью - "голосовчане". Провели логичную операцию по сложению (в данном контексте возможно уместнее использовать слово "соединению") этих переменных, а результат положили в переменную "d".

Давайте посмотрим в браузере, что у нас из этого получилось

А получился у нас вполне ожидаемый результат. Все строковые переменные были соединены в одну общую строку - "привет голосовчане". Тип у этой переменной при это не поменялся и равен "String (Строка)". Можете удостоверится через "typeof".

Что же касается нелогичных операций со строками, то тут тоже нет ничего сложного. Все остальные математические операции (вычитание, умножение, деление) со строками будет недопустимыми. Но так же как и в случае с "делением на ноль", JavaScript постарается такие операции выполнить и даже присвоит им какой-то результат. Давайте проверим какой именно. На примере, скажем, умножения двух строк.

var a = 'привет';
var c = 'голосовчане';

var d = a * c;

alert(d);
alert(typeof d);

Вот наш результат в браузере

JavaScript в данном случае, опять пытается справится с поставлено задачей. Он понимает, что у него идет математическая операция умножения. Но когда он смотри в перменные, то видит, что это строки. А умножить строки нельзя. Это нелогично и недопустимо. Поэтому в результат такой операции он кладет значение NaN, что расшифровывается как "Not a Number (Не число)". Т.е. JavaScript как бы говорит нам - "Кхм, я не знаю, что вы там себе думаете... но число у Вас, тут точно не получится...". И тем не менее, так как операция математическая, и результат видимо ожидался числом то значение NaN так же как и значение "Infinity" тоже имеет тип "Number".

Ссылки на предыдущие уроки:

1. Урок 1.
2. Урок 2.
3. Урок 3.
4. Урок 4.