Дэвид Флэнаган - JavaScript. Подробное руководство, 6-е издание

var ad = document.getElementById("lenders”);

if (!ad) return; // Выйти, если элемент отсутствует

// Преобразовать ввод пользователя в параметры запроса в строке URL

var url = "getLenders.php" + // Адрес URL службы плюс

"?amt=" + encodeURIComponent(amount) + // данные пользователя

"&apr=" + encodeURIComponent(apr) + //в строке запроса

"&yrs=" + encodeURIComponent(years) +

"&zip=" + encodeURIComponent(zipcode);

// Получить содержимое по заданному адресу URL с помощью XMLHttpRequest

var req = new XMLHttpRequest(); // Создать новый запрос

req.open("GET", url); // Указать тип запроса HTTP GET для url

req.send(null); // Отправить запрос без тела

// Перед возвратом зарегистрировать обработчик события, который будет вызываться

// при получении HTTP-ответа от сервера. Такой прием асинхронного программирования

// является довольно обычным в клиентском JavaScript,

req.onreadystatechange = function() {

if (req.readyState == 4 && req.status == 200) {

// Если мы попали сюда, следовательно, был получен корректный НТТР-ответ

var response = req.responseText; // HTTP-ответ в виде строки

var lenders = JSON.parse(response); // Преобразовать в JS-массив

// Преобразовать массив объектов lender в HTML-строку

var list = "";

for(var і = 0; і < lenders.length; i++) {

list += "

• "+
  
  

  lenders[i].name + "";

  }

  // Отобразить полученную HTML-строку в элементе,

  // ссылка на который была получена выше.

  ad.innerHTML = "

  " + list + "
  ";
  
  

  }

  }

  }

  // График помесячного изменения остатка по кредиту, а также графики сумм,

  // выплачиваемых в погашение кредита и по процентам в HTML-элементе

  .
  
  

  // Если вызывается без аргументов, просто очищает ранее нарисованные графики,

  function chart(principal, interest, monthly, payments) {

  var graph = document.getElementById("graph"); // Ссылка на тег

  
  
  

  graph.width = graph.width; // Магия очистки элемента canvas

  // Если функция вызвана без аргументов или броузер не поддерживает

  // элемент

  , то просто вернуть управление,
  
  

  if (arguments.length == 0 || !graph.getContext) return;

  // Получить объект "контекста" для элемента

  ,
  
  

  // который определяет набор методов рисования

  var g = graph.getContext("2d"); // Рисование выполняется с помощью этого объекта

  var width = graph.width, height = graph.height; // Получить размер холста

  // Следующие функции преобразуют количество месячных платежей

  // и денежные суммы в пикселы

  function paymentToX(n) { return n * width/payments; }

  function amountToY(a) { return height-(a*height/(monthly*payments*1.05));}

  // Платежи - прямая линия из точки (0,0) в точку (payments,monthly*payments)

  g.moveTo(paymentToX(0), amountToY(0)); // Из нижнего левого угла

  g.lineTo(paymentToX(payments), // В правый верхний

  amountToY(monthly*payments));

  g.lineTo(paymentToX(payments), amountToY(0)); // В правый нижний

  g.closePath(); // И обратно в начало

  g.fillStyle = "#f88"; // Светло-красный

  g.fill(); // Залить треугольник

  g.font = "bold 12px sans-serif"; // Определить шрифт

  g.fillText("Total Interest Payments", 20,20); // Вывести текст в легенде

  // Кривая накопленной суммы погашения кредита не является линейной

  // и вывод ее реализуется немного сложнее

  var equity = 0;

  g.beginPath(); // Новая фигура

  g.moveTo(paymentToX(0), amountToY(O)); // из левого нижнего угла

  for(var р = 1; р <= payments; р++) {

  // Для каждого платежа выяснить долю выплат по процентам

  var thisMonthsInterest = (principal-equity)*interest;

  equity += (monthly - thisMonthsInterest); // Остаток - погашение кред.

  g.lineTo(paymentToX(p),amountToY(equity)); // Линию до этой точки

  }

  g.lineTo(paymentToX(payments), amountToY(O)); // Линию до оси X

  g.closePath(); // И опять в нач. точку

  g.fillStyle = "green"; // Зеленый цвет

  g.fill(); // Залить обл. под кривой

  g.fillText("Total Equity", 20,35); // Надпись зеленым цветом

  // Повторить цикл, как выше, но нарисовать график остатка по кредиту

  var bal = principal;

  g.beginPath();

  g.moveTo(paymentToX(O),amountToY(bal));

  for(var p = 1; p <= payments; p++) {

  var thisMonthsInterest = bal*interest;

  bal -= (monthly - thisMonthsInterest) //Остаток от погаш. по кредиту

  g.lineTo(paymentToX(p),amountToY(bal)); // Линию до этой точки

  }

  g.LineWidth = 3; //Жирная линия

  g.stroke; //Нарисовать кривую графика

  g.fillStle="black"; //Черный цвет для текста

  g.fillText("Loan Balabce", 20, 50); //Элемент легенды

  //Нарисовать отметки лет на оси Х

  g.textAling="center"; //Текст меток по центру

  var y = amounToY(0); //Координата Y на оси X

  for (var year=1;year*12 <= payments; year++) { //Для каждого года

  var x=paymentToX(year*12); //Вычислить позицию метки

  g.fillRect(x-0.5, y-3, 1, 3); //Нарисовать метку

  if (year == 1) g.fillText("Year", x, y-5); // Подписать ось

  if (year % 5 == 0 && year*12 !== payments) // Числа через каждые 5 лет

  g.fillText(String(year), x, y-5);

  }

  //Суммы платежей у правой границы

  g.textAling="right"; //Текст по правому краю

  g.textBaseLine="middle"; //Центрировать по вертикали

  var ticks = [monthly*payments, principal]; //Вывести две суммы