Практикум №3

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



В предыдущем уроке наш финальный код получился таким:

Код

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

while( isNaN(money) || money == null || money == '' ) {
  money = +prompt('Введите ваш бюджет на месяц', '');
}

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

for( let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if( typeof(a) != null && typeof(b) != null && a != '' && b != '' && a.length < 50) {
   
  appData.expenses[a] = b;  
  } else {
  i--;
  }
   
}

appData.moneyPerDay = appData.budget / 30;
alert(appData.budget / 30);

if(appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
} else if(appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
} else if(appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
} else {
  console.log('Что-то пошло не так');
}


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

Как вы помните (а если нет, то вы всегда можете освежить память здесь), код внутри тела функции(то что находится внутри фигурных скобок) выполняется только после вызова функции, а не сразу после её создания.

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

Код

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

while( isNaN(money) || money == null || money == '' ) {
  money = +prompt('Введите ваш бюджет на месяц', '');
}


и заключить его в функцию. Что это нам даст? А даст это нам то, что теперь модальные окна с вопросами будут возникать лишь в том случае, если мы этого захотим (если мы вызываем функцию).

Создадим функцию с именем start() и поместим в неё наш блок:

Код

let money, time;

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

  while( isNaN(money) || money == null || money == '' ) {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }
}
start();


Как вы заметили, объявление переменных money и time я вынес за пределы функции, чтобы сделать их глобальными, в противном случае, если объявить их внутри функции, они будут недоступны (а как вы помните, их значения используются в объекте appData).

Последней строкой кода мы вызвали функцию start(), и поэтому при загрузке нашей html-страницы модальные окна с вопросами к пользователю о бюджете по-прежнему будут появляться.
Если вызова функции не будет - окна не появятся.

Далее таким же образом мы заключим в функцию наш блок с выбором обязательных расходов. Берём наш блок:

Код

for( let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');

  if( typeof(a) != null && typeof(b) != null && a != '' && b != '' && a.length < 50) {
   
  appData.expenses[a] = b;  
  } else {
  i--;
  }
   
}


и помещаем его в функцию chooseExpenses() и также последней строкой вызываем эту функцию:

Код

function chooseExpenses() {
  for( let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');
   
  if( typeof(a) != null && typeof(b) != null && a != '' && b != '' && a.length < 50) {
   
  appData.expenses[a] = b;  
  } else {
  i--;
  }
   
  }
}
chooseExpenses();


В прошлом уроке мы написали формулу расчёта ежедневного бюджета (moneyPerDay) :

Код

appData.moneyPerDay = appData.budget / 30;


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

1666.6666666666667

с помощью метода toFixed() мы можем привести его в более презентабельный вид: если в скобках поставить цифру 2, то результат будет округлён до двух знаков после запятой:

Код

appData.moneyPerDay = ( appData.budget / 30 ).toFixed(2);
alert( appData.moneyPerDay );


давайте сразу код выше поместим также в функцию, назовём её detectDayBudget(), и последней строкой кода вызовем её:

Код

function detectDayBudget() {
  appData.moneyPerDay = ( appData.budget / 30 ).toFixed(2);
  alert( appData.moneyPerDay );
}
detectDayBudget();


P.S: метод toFixed() возвращает строковое значение!

По нашему листу заданий мы добрались до задания №4, в котором нам предлагается создать функцию, которая будет рассчитывать ежемесячный доход от накоплений пользователя, если таковые у него имеются.
В объекте appData есть свойство savings со значением false, мы используем его при создании нашей функции checkSavings():

Код

function checkSavings() {
  if (appData.savings == true) {
  let save = +prompt('Какова сумма накоплений?', ''),
  percent = +prompt('Под какой процент?', '');

  appData.monthIncome = save / 100 / 12 * percent;
  alert('Доход в месяц с вашего депозита: ' + appData.monthIncome);
  }
}
checkSavings();


Как работает наша функция? Если у свойства savings в объекте appData будет значение true, то при вызове функции появятся диалоговые окна с вопросами, пользователь отвечает на вопросы "Какова сумма накоплений?" и "Под какой процент?", его ответы сохраняются в переменные save и percent соответственно, а затем используются для расчёта ежемесячного дохода от депозита.

Причем, расчёт ежемесячного дохода от депозита мы сразу же добавляем как свойство monthIncome в объект appData, а его значением как раз и будет результат расчёта:

Код
appData.monthIncome = save / 100 / 12 * percent;


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

Если вы хотите протестировать, как отработает функция checkSavings(), в объекте appData поменяйте значение у свойства savings на true.

Далее мы блок определения уровня доходов пользователя:

Код

if(appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
} else if(appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
} else if(appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
} else {
  console.log('Что-то пошло не так');
}


также заключим в функцию, назовём её detectLevel():

Код

function detectLevel() {
  if(appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if(appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if(appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }
}
detectLevel();


И нам осталось написать функцию chooseOptExpenses(), определяющую необязательные расходы. Для того, чтобы функция задавала пользователю 3 раза один и тот же вопрос, мы воспользуемся циклом for:

Код

function chooseOptExpenses() {
  for (let i = 1; i <= 3; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  }
}


и теперь, если в консоли браузера набрать:

Код
console.log(appData.optionalExpenses);


то мы увидим объект такого вида:



Полный код скрипта этого урока:

Код

let money, time;

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

  while( isNaN(money) || money == null || money == '' ) {
  money = +prompt('Введите ваш бюджет на месяц', '');
  }
}
start();

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

function chooseExpenses() {
  for( let i = 0; i < 2; i++) {
  let a = prompt('Введите обязательную статью расходов в этом месяце', ''),
  b = prompt('Во сколько обойдётся?', '');
   
  if( typeof(a) != null && typeof(b) != null && a != '' && b != '' && a.length < 50) {
   
  appData.expenses[a] = b;  
  } else {
  i--;
  }
   
  }
}
chooseExpenses();

function detectDayBudget() {
  appData.moneyPerDay = ( appData.budget / 30 ).toFixed(2);
  alert( appData.moneyPerDay );
}
detectDayBudget();

function checkSavings() {
  if (appData.savings == true) {
  let save = +prompt('Какова сумма накоплений?', ''),
  percent = +prompt('Под какой процент?', '');

  appData.monthIncome = save / 100 / 12 * percent;
  alert('Доход в месяц с вашего депозита: ' + appData.monthIncome);
  }
}
checkSavings();

function detectLevel() {
  if(appData.moneyPerDay < 500) {
  console.log('Низкий уровень дохода');
  } else if(appData.moneyPerDay > 500 && appData.moneyPerDay < 1000) {
  console.log('Средний уровень дохода');
  } else if(appData.moneyPerDay > 1000) {
  console.log('Высокий уровень дохода');
  } else {
  console.log('Что-то пошло не так');
  }
}
detectLevel();

function chooseOptExpenses() {
  for (let i = 1; i <= 3; i++) {
  let questionOptExpenses = prompt('Статья необязательных расходов?', '');

  appData.optionalExpenses[i] = questionOptExpenses;
  console.log(appData.optionalExpenses);
  }
}
chooseOptExpenses();


Протестировать работу скрипта

Комментарии к материалу: