Переменную можно представить в виде "контейнера", в который мы поместили какую-либо информацию. Рассмотрим конкретный пример: необходимо вычислить площадь стены. В математике такая задача решается просто: ширину умножаем на высоту и получаем площадь. Однако в случае с JS все немного сложнее. Скриптовый язык программирования это не искусственный интеллект и ему сложно произвести в уме простейшие расчеты (точнее говоря он вообще не сможет этого сделать). Поэтому при написании сценария компьютер должен получить четкий алгоритм для решения поставленной задачи. В нашем случае он выглядит так:
- Запомнить значение ширины.
- Запомнить значение высоты.
- Умножить значение ширины на значение высоты и получить площадь.
- Вернуть пользователю значение, полученное на этапе 3.
Обратите особое внимание на слово "запомнить" в пунктах 1 и 2. Без переменных и "помещенных" в них значений мы бы не смогли справиться с поставленной задачей.
Теперь поговорим о том как объявляются переменные.
Как это ни странно, но прежде чем использовать переменную необходимо ее объявить (т.е. дать понять интерпретатору что Вы хотите ею воспользоваться).
Переменная начинается с ключевого слова var, затем переменной присваивается имя (оно может начинаться с буквы, знака доллара или нижнего подчеркивания, но только не с цифры). Если имя переменной состоит из нескольких слов то оно записывается в так называемом горбатом регистре, т.е. первое слово пишется с маленький буквы, а все остальные с большой.
Отлично! Переменная создана, теперь необходимо присвоить ей какое-то значение. В случае с переменной height это будет выглядеть вот так:
Теперь постараемся соединить все вместе:
В итоге у нас получилась переменная height значение которой равно 5. Обратите внимание на знак препинания в конце. Я пока не акцентирую на нем внимание но его тоже необходимо учитывать. Если говорить совсем просто то ключевое слово var это начало переменной, а точка с запятой - ее конец.
К статье прикрепляется код к разобранному ранее примеру (не забываем при этом связать js-файл с html-страницей).
HTML:
<div id="content">
<div id="cost">Здесь будет записано значение площади стены.</div>
</div>
JS:
var height; //1-я переменная - высота
var width; //2-я переменная - ширина
var square; //3-я переменная - площадь
height=6; //присваиваем значение первой переменной
width=4; //присваиваем значение второй переменной
square=height*width; //умножаем высоту на ширину
var el=document.getElementById("cost"); //находим элемент с атрибутом cost
el.textContent=square+" кв. см"; //заменяем исходный контент на значение площади
Спасибо за внимание!
Появились вопросы? Что-то не получилось? Пишите в комментариях. Вместе мы сможем со всем разобраться)
Если статья оказалась полезной предлагаю подписаться на канал.
