Стать программистом. Часть 3. Основы JavaScript для абсолютных новичков!
Доброго времени суток, друзья!
В предыдущем уроке мы познакомились с некоторыми синтаксическими нюансами JavaScript.
Будучи голой информацией, эти правила возможно вызвали у Вас некоторые вопросы. Не волнуйтесь, мы еще не раз вернемся к ним в процессе обучения и все станет понятным.
Ну а сегодня мы, наконец-то, начнем программировать. И темой сегодняшнего урока будут Переменные.
Урок 3. Переменные.
Что такое переменные? Если коротко, то переменные - это основной инструмент программирования. Это сущности, которыми манипулируют при создании кода. Ни один код не обходится без переменных. Они везде и создать рабочий код без использования переменных практически невозможно.
Теперь представьте коробочку. Маленькую. В нее можно положить вещь. Закрыть. И, когда нужно (время от времени) открывать коробочку и использовать эту вещь. Переменную в JavaScript можно сравнить с такой коробочкой. Просто существовать она и вещь внутри нее будут только в коде.
Давайте вернемся к нашим файлам, которые мы создавали в первом уроке и рассмотрим переменные подробнее.
Очистим наш core.js от предыдущей записи и напишем следующую конструкцию
var box;
Что мы сделали? Мы создали ту самую коробочку и назвали ее «box». Для того чтобы создать эту коробочку нам пришлось воспользоваться ключевым словом «var». Это ключевое слово можно сравнить с русским - «создать». Т.е. дословно запись вверху мы можем перевести как команду «создать коробочку с именем “box”».
Однако, наша коробочка на данный момент пустая. Нет той самой вещи, которую мы должны будем время от времени доставать и использовать. Давайте положим ее в нашу «коробочку».
Но сначала ответим на вопрос – а какую именно вещь мы можем положить в нашу коробочку?
Мы можем положить:
- Число.
- Строку.
- Истину или ложь.
- Объект.
- Специфическое значение.
Число - это любые целые числа, такие как: 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» переменилось на последующее, которое и вывелось на экран.
Задача
- Создайте переменную «number». Присвойте ей значение «2».
- Выведите на экран используя конструкцию «alert».
- Измените значение переменной «number» на «22».
- Убедитесь, что значение действительно было изменено. Используйте для этого конструкцию «alert»
Продолжение следует…