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

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

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

Ну а сегодня мы, наконец-то, начнем программировать. И темой сегодняшнего урока будут Переменные.

Урок 3. Переменные.

Что такое переменные? Если коротко, то переменные - это основной инструмент программирования. Это сущности, которыми манипулируют при создании кода. Ни один код не обходится без переменных. Они везде и создать рабочий код без использования переменных практически невозможно.
Теперь представьте коробочку. Маленькую. В нее можно положить вещь. Закрыть. И, когда нужно (время от времени) открывать коробочку и использовать эту вещь. Переменную в JavaScript можно сравнить с такой коробочкой. Просто существовать она и вещь внутри нее будут только в коде.

Давайте вернемся к нашим файлам, которые мы создавали в первом уроке и рассмотрим переменные подробнее.

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

var box;

Что мы сделали? Мы создали ту самую коробочку и назвали ее «box». Для того чтобы создать эту коробочку нам пришлось воспользоваться ключевым словом «var». Это ключевое слово можно сравнить с русским - «создать». Т.е. дословно запись вверху мы можем перевести как команду «создать коробочку с именем “box”».
Однако, наша коробочка на данный момент пустая. Нет той самой вещи, которую мы должны будем время от времени доставать и использовать. Давайте положим ее в нашу «коробочку».
Но сначала ответим на вопрос – а какую именно вещь мы можем положить в нашу коробочку?

Мы можем положить:

1. Число.
2. Строку.
3. Истину или ложь.
4. Объект.
5. Специфическое значение.

Число - это любые целые числа, такие как: 1, 2, 3 и т.д., а также любые десятичные числа, такие как 0.1, 1.23, 7.9856 и т.д.

Строка - это любое слово или сочетание слов, заключенные в одинарные или двойные кавычки. Например, 'имя', 'меня зовут переменная', "а я строка в двойных кавычках".

Истина или ложь - это логическая «вещь» и она может быть только в двух состояниях. Состояние правды – true и состояние лжи – false.

Объект - это сложносоставная «вещь», ее мы рассмотрим немного позже.

Специфическое значение - это созданные специально для JavaScript «вещи» их мы тоже рассмотрим позже.

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

var box = "привет JavaScript!";

Теперь наша коробочка уже не пустая. Внутри лежит очень нужная нам вещь – строка. И мы можем в любой момент открыть нашу коробочку и воспользоваться этой строкой. Давайте посмотрим так ли это на самом деле.
Для этого откроем наш index.html (урок 1) в браузере. А в core.js добавим уже знакомую нам по первому уроку конструкцию:

var box = "привет JavaScript!";
alert(box);

Обновим окно браузера, в котором открыт наш index.html и увидим чудо!

Браузер выдаст нам сообщение со строкой, которая лежит в нашей коробочке.

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

Давайте теперь добавим немного теории. Итак, переменная...

var box = "привет JavaScript!";

...имеет имя – «box» и значение – «привет JavaScript!». Это видимые свойства переменной. Имя – это обязательное свойство. Значение – не обязательное. Наша самая первая запись ...

var box;

...наглядно это подтверждает.

Попробуйте стереть значение переменной «box» так чтобы ваш код выглядел следующим образом…

… и снова обновите окно с index.html. Вы увидите сообщение:

При этом код выполнился и ничего у нас не сломалось. Но на месте где раньше красовалась нужная нам строка «привет JavaScript!» теперь вывелся какой-то «undefined».
Undefined – это специфическое значение переменной, относящееся к 5 пункту списка того, что мы можем положить в переменную.

Дословно его можно воспринимать как «неопределенное» или «неизвестное».
То есть при исполнении кода сама коробочка «box» была найдена. А так как мы ничего ей не присвоили, то и лежит там что-то «неизвестное», о чем нам с Вами и сообщили.

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

…то Вы так же, как и в предыдущем примере получите «undefined» при обновлении окна браузера.

Почему так?
Дело в том, что код в JavaScript исполняется сверху вниз, слева на право. И конкретно в этом примере код попробует открыть коробочку, которую создаст на 1 строку позже. Т.е. он попытается открыть то, чего по сути еще нет. А так как ее еще нет, то он и сообщит Вам: «Вы просите меня открыть что-то неопределенное. Что-то, что для меня - undefined».
Ну и напоследок давайте поймем почему переменные, называются именно «переменные». Тут все тривиально. Их название и есть их суть. Переменные значит, что они могут меняться.
В процессе работ Вам часто придется менять значение переменных.
Пример:

var box = "привет JavaScript!";
       box = "привет Голосовчане!";
       alert(box);

Что мы здесь видим?
На первой строке использовали ключевое слово «var» и создали переменную с именем «box», которой присвоили значение «привет JavaScript!»
На третьей строке мы решили изменить значение переменной «box» с «привет JavaScript!» на «привет Голосовчане!».

Обратите внимание, что ключевое слово «var» мы уже не используем. Т.е. мы используем его только тогда, когда нам надо создать переменную, а уже потом мы этой созданной переменной можем оперировать без этого ключевого слова.

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

Т.е. первоначальное значение переменной «box» переменилось на последующее, которое и вывелось на экран.

Задача

1. Создайте переменную «number». Присвойте ей значение «2».
2. Выведите на экран используя конструкцию «alert».
3. Измените значение переменной «number» на «22».
4. Убедитесь, что значение действительно было изменено. Используйте для этого конструкцию «alert»

Продолжение следует…