Лекция
Привет, сегодня поговорим про переменные в javascript, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое переменные в javascript , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).
varВ зависимости от того, для чего вы делаете скрипт, понадобится работать с информацией.
Если это электронный магазин - то это товары, корзина. Если чат - посетители, сообщения и так далее.
Чтобы хранить информацию, используются переменные.
Переменная состоит из имени и выделенной области памяти, которая ему соответствует.
Для объявления или, другими словами, создания переменной используется ключевое слово var:
var message; |
После объявления, можно записать в переменную данные:
var message; |
message = 'Привет'; // сохраним в переменной строку |
Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:
1 |
var message; |
2 |
message = 'Привет'; |
3 |
4 |
alert(message); // выведет содержимое переменной |
Для краткости можно совместить объявление переменной и запись данных:
var message = 'Привет'; |
Проще всего понять переменную, если представить ее как «коробку» для данных, с уникальным именем.
Например, переменная message - это коробка, в которой хранится значение "Привет":
В коробку можно положить любое значение, а позже - поменять его. Значение в переменной можно изменять сколько угодно раз:
1 |
var message; |
2 |
3 |
message = 'Привет'; |
4 |
5 |
message = 'Мир'; // заменили значение |
6 |
7 |
alert(message); |
При изменении значения старое содержимое переменной удаляется.
Существуют функциональные языки программирования, в которых значение переменной менять нельзя.
В таких языках положил один раз значение в коробку - и оно хранится там вечно, ни удалить ни изменить. А нужно что-то другое сохранить - изволь создать новую коробку (объявить новую переменную), повторное использование невозможно.
С виду - не очень удобно, но, как ни странно, и на таких языках вполне можно успешно программировать. Изучение какого-нибудь функционального языка рекомендуется для расширения кругозора. Отличный кандидат для этого — язык Erlang .
Переменные в JavaScript могут хранить не только строки, но и другие данные, например, числа.
Объявим две переменные, положим в одну - строку, а в другую - число.
Как вы можете видеть, переменной без разницы, что хранить:
var num = 100500; |
var message = 'Привет'; |
Значение можно копировать из одной переменной в другую.
1 |
var num = 100500; |
2 |
var message = 'Привет'; |
3 |
4 |
message = num; |
num перезаписывает текущее в message.
В «коробке» message меняется значение:
После этого присваивания в обеих коробках num и message находится одно и то же значение 100500.
varВ JavaScript вы можете создать переменную и без var, достаточно просто присвоить ей значение:
x = "value"; // переменная создана, если ее не было |
Технически, это не вызовет ошибки, но делать так все-таки не стоит.
Всегда определяйте переменные через var. Об этом говорит сайт https://intellect.icu . Это хороший тон в программировании и помогает избежать ошибок.
Откройте пример в IE в новом окне:
01 |
<html> |
02 |
<head> |
03 |
<meta http-equiv="X-UA-Compatible" content="IE=8"> |
04 |
</head> |
05 |
<body> |
06 |
<div id="test"></div> |
07 |
08 |
<script> |
09 |
test = 5; |
10 |
alert(test); |
11 |
</script> |
12 |
13 |
</body> |
14 |
</html> |
Значение не выведется, будет ошибка. Если в IE включена отладка или открыта панель разработки - вы увидите ее.
Дело в том, что почти все современные браузеры создают переменные для элементов, у которых естьid.
Переменная test в них в любом случае существует, запустите, к примеру:
1 |
<div id="test"></div> |
2 |
3 |
<script> |
4 |
alert(test); // выведет элемент |
5 |
</script> |
..Но в IE<9 такую переменную изменять нельзя.
Все будет хорошо, если объявить test, используя var:
Правильный код:
01 |
<html> |
02 |
<body> |
03 |
<div id="test"></div> |
04 |
05 |
<script> |
06 |
var test = 5; |
07 |
alert(test); |
08 |
</script> |
09 |
10 |
</body> |
11 |
</html> |
Самое «забавное» — то, что, эта ошибка будет только в IE<9, и только если на странице присутствует элемент с совпадающим id.
Такие ошибки особенно весело исправлять и отлаживать.
Есть и еще ситуации, когда отсутствие var может привести к ошибкам. Надеюсь, вы убедились в необходимости всегда ставить var.
Константа — это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчеркивание. Например:
1 |
var COLOR_RED = "#F00"; |
2 |
var COLOR_GREEN = "#0F0"; |
3 |
var COLOR_BLUE = "#00F"; |
4 |
var COLOR_ORANGE = "#FF7F00"; |
5 |
6 |
alert(COLOR_RED); // #F00 |
Технически, константа является обычной переменной, то есть ее можно изменить. Но мы договариваемся этого не делать.
Зачем нужны константы? Почему бы просто не использовать "#F00" или "#0F0"?
"#FF7F00".Константы используют вместо строк и цифр, чтобы сделать программу понятнее и избежать ошибок.
К сожалению, в одной статье не просто дать все знания про переменные в javascript. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое переменные в javascript и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Из статьи мы узнали кратко, но содержательно про переменные в javascript
Комментарии
Оставить комментарий
Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)
Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)