PS-Studio.info

Раздел "Практикум"

ABC 05.04.2020 в 02:44

Практикум №1

Описание задания вы всегда можете посмотреть под спойлером.



Алгоритм действий

1. На своём компьютере создайте рабочую папку с именем task1, в ней создайте папку js

2. Откройте в редакторе кода, которым вы пользуетесь, папку task1 и в ней (в корневой директории папки) создайте файл index.html
Содержимое файла index.html базовое:

Код

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   
</body>
</html>


Перед закрывающим тегом body подключите файл скрипта script.js:

Код
<script src = 'js/script.js'></script>


3. В папке js создайте файл с именем script.js. Далее все действия выполняем в этом файле.

4. Объявляем переменную money и в качестве значения присваиваем ей диалог с помощью команды prompt(). Перед командой prompt() поставим унарный плюс, чтобы полученное от пользователя значение (а по умолчанию это будет строка) сделать числом:

Код

let money = +prompt('Ваш бюджет на месяц?', '');


5. Объявляем переменную time, её значением также будет диалог, но с другим вопросом для пользователя:

Код

let time = prompt('Введите дату в формате YYYY-MM-DD', '');


Теперь, если вы откроете в браузере файл index.html, у вас последовательно будут открываться модальные окна, одно с вопросом "Ваш бюджет на месяц?" и второе с вопросом "Введите дату в формате YYYY-MM-DD".
Та информация, которую вы введёте в этих окнах, сохранится в переменные money и time соответственно.

Проверить это можно, набрав в консоли браузера команды:

Код

console.log(money);
console.log(time);


6. Переходим к созданию объекта appData, свойства объекта, как вы знаете, это пары "ключ: значение". Свойства между собой не забываем разделять запятыми.

Первой парой мы задаём бюджет (budget) и его значение, которое берём из переменной money

Код

let appData = {
  budget: money,
}


далее задаём время (timeData), значение которого берём из переменной time:

Код

let appData = {
  budget: money,
  timeData: time,
}


следующими свойствами нашего объекта будут два других объекта, expenses (в нём будут обязательные расходы) и optionalExpenses (в нём будут необязательные расходы), их значения пока оставляем пустыми, а также массив income, в котором будут храниться дополнительные доходы.
Массив также пока оставляем пустым.

Эти объекты и массив мы оставили пустыми по одной простой причине: нам пока что неоткуда брать данные для их заполнения.

Код

let appData = {
  budget: money,
  timeData: time,
  expenses: {},
  optionalExpenses: {},
  income: [],
}


И последним записываем свойство savings со значением false:

Код

let appData = {
  budget: money,
  timeData: time,
  expenses: {},
  optionalExpenses: {},
  income: [],
  savings: false
}


7. Далее нам нужно задать пользователю два разных вопроса: "Введите обязательную статью расходов в этом месяце" и "Во сколько обойдется?", по два раза каждый вопрос. Итого, нам нужно задать пользователю 2 х 2 = 4 вопроса.
Используем для этого 4 разных переменных answer. Для этого объявляем их, и в качестве значений присваиваем диалог prompt();

Код

let answer1 = prompt('Введите обязательную статью расходов в этом месяце', ''),
  answer2 = prompt('Во сколько обойдется?', ''),
  answer3 = prompt('Введите обязательную статью расходов в этом месяце', ''),
  answer4 = prompt('Во сколько обойдется?', '');


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

8. Как вы помните, в нашем большом объекте appData наряду с другими свойствами есть объект expenses. Сейчас он пуст, но мы можем добавить в него свойства (пары "ключ: значение"), используя метод добавления свойств в объект.

Заключается он в использовании точки, либо квадратных скобок. Применимо к нашему заданию, нам нужно "взять объект appData, внутри него взять объект expenses и добавить в объект expenses две пары "ключ: значение" (два новых свойства объекта)."

При этом в качестве ключей у нас будут значения из переменных answer1 и answer3, а значениями будут переменные answer2 и answer4.

Добавляем наши свойства в объект expenses:

Код

appData.expenses.answer1 = answer2;
appData.expenses.answer3 = answer4;


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

Код

appData.expenses[answer1] = answer2;
appData.expenses[answer3] = answer4;


Теперь информация из переменных answer1 - answer4, получаемая от пользователя, будет использована для добавления свойств в объект expenses.
И в этом можно убедиться, открыв файл index.html в браузере и набрав в консоли браузера команду (предварительно, естественно, нужно ответить на вопросы в дилоговых окнах).

Код
console.log(appData);


Что мы сделали? Фактически, объект expenses теперь будет выглядеть так:

Код

expenses: {
  answer1: 'answer2',
  answer3: 'answer4'
}


9. И нам осталось теперь в модальное окно вывести дневной бюджет пользователя, исходя из полученных от него данных (переменная money) и числа дней в месяце (30).

Так как свойство money находится внутри объекта appData, то обратиться к нему можно, воспользовавшись тем же синтаксисом с точкой, что и при добавлении свойств в объект:

Код
alert(appData.budget / 30);


Демо-страница урока

Итоговый код скрипта этого урока:

Код

let money = +prompt('Ваш бюджет на месяц?', '');
let time = prompt('Введите дату в формате YYYY-MM-DD', '');

let appData = {
  budget: money,
  timeData: time,
  expenses: {},
  optionalExpenses: {},
  income: [],
  savings: false
}

let answer1 = prompt('Введите обязательную статью расходов в этом месяце', ''),
  answer2 = prompt('Во сколько обойдется?', ''),
  answer3 = prompt('Введите обязательную статью расходов в этом месяце', ''),
  answer4 = prompt('Во сколько обойдется?', '');

appData.expenses.answer1 = answer2;
appData.expenses.answer3 = answer4;

alert(appData.budget / 30);

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