PS-Studio.info

Веб и веб-технологии

ABC 28.02.2020 в 14:01

Переменные: изменение значений переменных и использование их на практике

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

Создать (или объявить) переменную можно так:

let имяПеременной = присвоенное значение;

например:

Код
let myAge = 33;


чтобы в переменной просто заменить присвоенное значение на другое:

Код
myAge = 50;


как видите, в этом случае ключевое слово let уже не пишется, его пишут только один раз при объявлении переменной.
Это был краткий экскурс по ранее рассмотренному материалу.

Операции для математических действий над переменными

Очень часто в программной логике требуется сохранить прежнее значение переменной, но при этом, к примеру, прибавить к нему какое-то число.
Как это делается? Создадим переменную mileage, в ней будет отражаться, например, пробег автомобиля в километрах.
Допустим, первоначальный пробег автомобиля равен 5 километрам.

Код
let mileage = 5;


За день мы проехали, например, 10 километров. Как прибавить это значение к первоначальному? Просто используйте имя переменной как одно из слагаемых, а результат сохраняйте по-прежнему в ту же переменную.

Код
mileage = mileage + 10;


Как это понимать? Очень просто: берётся значение переменной mileage(5) и к нему прибавляется 10, сумма же(5 + 10 = 15), запишется как новое значение в переменную mileage, заменив старое. И теперь переменная mileage имеет значение не 5, а 15.

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

Код
mileage += 10;


что означает такая запись, дословно: складывает значение, стоящее после знака "=" с переменной, находящейся слева от знака "+", то есть эта запись полностью заменяет предыдущий код.

По аналогии используются другие математические операции для действий над переменными (вычитание, умножение и деление):

Код
mileage = mileage - 10;

mileage = mileage * 2;

mileage = mileage / 2;


для этих операций также есть короткие формы записи, которые заменяют собой код выше:

Код
mileage -= 10;

mileage *= 10;

mileage /= 10;


Короткая форма записи применима и в случае соединения строки и переменной. Допустим, есть переменная name с присвоенным значением(строкой) "Пётр", и переменная message с присвоенным значением(строкой) "Привет"

Код
let name = "Пётр", message = "Привет";


новое значение переменной message можно получить так:

Код
message = message + " " + name;


что эта запись означает? взять то, что сейчас хранится в переменной message (строку "Привет"), добавить к ней пробел и добавить то, что хранится в переменной name (строку "Пётр"), то есть фактически:

Код
message = "Привет" + " " + "Пётр";


короткая форма записи при этом будет выглядеть так:

Код
message += " " + name;


Практикум 1. Используем переменную, чтобы вывести сообщение на страницу

Откройте свой любимый редактор кода, создайте новый файл и сохраните его под именем index.html. Код внутри этого файла базовый:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Используем переменную, чтобы вывести сообщение на страницу</title>
</head>
<body>
   
</body>
</html>


если сейчас открыть этот файл в браузере, то у вас откроется совершенно чистая страница без какой-либо информации.

Добавьте перед закрывающим тегом head парные теги script:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Используем переменную, чтобы вывести сообщение на страницу</title>
  <script>
  Здесь мы будем писать наш код
  </script>
</head>
<body>
   
</body>
</html>


В них мы и будем писать наш JavaScript-код.
Для начала, создадим две переменные, в которых сохраним имя и фамилию какого-то абстрактного человека:

Код
let firstName = "Иван", lastName = "Петров";


Нам нужно объединить значения этих двух переменных и вывести на странице "Иван Петров". Как вы помните (а если забыли, то я вам напоминаю), информацию на странице можно вывести с помощью команды document.write(), поместив в круглые скобки то, что нужно вывести на странице сайта. А в круглых скобках у нас будет обычное объединение строк, которое вам уже должно быть знакомо. Поэтому, следующие строки нашего кода:

Код

document.write(firstName + ' ' + lastName);


Если сейчас вы откроете страницу в браузере, то увидите заветное "Иван Петров". Изменим немного наш код, добавив в качестве строк html-теги абзаца, открывающий тег это одна строка, закрывающий - ещё одна строка:

Код

document.write('<p>' + firstName + ' ' + lastName + '</p>');


в результате команда document.write() выведет в том числе строки тегов абзаца на страницу, как будто вы их написали в html-коде:

Код
<p>Иван Петров</p>


если вы сейчас добавите перед парными тегами script парные теги style и в них поместите какие-то css-стили для оформления абзаца, то они применятся к нашему абзацу, сформированному скриптом:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Используем переменную, чтобы вывести сообщение на страницу</title>
  <style>
  p {
  background-color: #ebebeb;
  padding: 10px;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.56;
  }
  </style>
  <script>
  let firstName = "Иван", lastName = "Петров";
  document.write('<p>' + firstName + ' ' + lastName + '</p>');
  </script>
</head>
<body>
   
</body>
</html>


Откроем страницу в браузере и полюбуемся результатом:



Практикум 2. Запрашиваем информацию у пользователя и выводим результат на страницу

Надеюсь, вы помните о такой команде для сбора данных от пользователя, как prompt(). Данные, введённые в всплывающем модальном окне пользователем, возвращаются в виде строки.
Мы можем использовать эти данные, чтобы отобразить информацию на странице сайта.

Создадим в редакторе кода еще один html-файл с базовым кодом:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Запрашиваем информацию у пользователя и выводим результат на страницу</title>
  <script>
   
  </script>
</head>
<body>
  <script>
   
  </script>
</body>
</html>


при этом, обратите внимание, первая пара тегов script расположена в секции head, другая между тегами body тела страницы.

В первой паре тегов script размещаем запрос к пользователю, используя команду prompt():

Код
let userName = prompt('Как вас зовут?', ' ');


Если сейчас открыть страницу в браузере, то вы увидите модальное окно с вопросом "Как вас зовут?".



Пустое поле для ввода ответа создаётся той самой пустой строкой, что мы прописываем в круглых скобках после строки с вопросом.
Тот ответ, что вы введёте в поле модального окна, сохранится в переменную userName в виде строки, на странице же сайта вы сейчас ничего не увидите.

А чтобы на странице сайта вывести полученную от пользователя введённую информацию, во вторых парных тегах script, которые находятся между тегами body, воспользуемся уже известной вам командой document.write():

Код

document.write('<p>Добро пожаловать, ' + userName + '</p>');


внутри круглых скобок у нас получилась конкатенация трёх строк: первая строка содержит открывающий тег абзаца и текст "Добро пожаловать", с пробелом в конце, вторая строка - это значение переменной userName: возвращённая строка с введёнными пользователем данными, и третья строка содержит закрывающий тег абзаца.

Если теперь вы откроете страницу в браузере и введёте ответ в текстовом поле, то на странице сайта появится результат:





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

Добавлять комментарии могут только зарегистрированные пользователи.