第一章 JavaScript概述

来源：互联网发布：域名大全编辑：程序博客网时间：2024/05/20 13:16
1.JS是一门高端的、动态的、弱类型的编程语言。
2.JS除了与JAVA语法类似外，是完全不同的两种编程语言。
3.在基于JavaScript实现的贷款计算器案例中，接触到了以下的HTML5元素或者新的属性：
Canvas
window.localStorage
在原书中的案例中有一处错了，具体在代码里面
<pre name="code" class="html"><!doctype html><html><head><meta charset="utf-8"><title>基于Javascript实现的贷款计算器</title><style>.output {font-weight: bold;}#payment {text-decoration: underline;}#graph {border: solid black 1px;}th, td {vertical-align: top;}</style></head><body><table>  <tr>    <th>Enter Loan Data:</th>    <td></td>    <th>Loan Balance, Cumulative Equity, and Interest Payments</th>  </tr>  <tr>    <td>Amount of the loan ($):</td>    <td><input id="amount" onChange="calculate();"></td>    <td rowspan="8"><canvas id="graph" width="400" height="250"></canvas></td>  </tr>  <tr>    <td>Annual interest (%)</td>    <td><input id="apr" onChange="calculate();"></td>  </tr>  <tr>    <td>Repayment period (years) :</td>    <td><input id="years" onChange="calculate();"></td>  </tr>  <tr>    <td>Zipcode (to find lenders) :</td>    <td><input id="zipcode" onChange="calculate();"></td>  </tr>  <tr>    <th>Approximate Payments:</th>    <td><button onClick="calculate();">Calculate</button></td>  </tr>  <tr>    <td>Monthly Payments:</td>    <td>$<span id="payment" class="output"></span></td>  </tr>  <tr>    <td>Total Payments:</td>    <td>$<span id="total" class="output"></span></td>  </tr>  <tr>    <td>Total interest:</td>    <td>$<span id="totalinterest" class="output"></span></td>  </tr>  <tr>    <th>Sponsors:</th>    <td colspan="2"> Apply for your loan with one of these fine lenders: <div id="lenders">      </div></td>  </tr></table><script>"use strict"function calculate(){var amount=document.getElementById("amount");var apr=document.getElementById("apr");var years=document.getElementById("years");var zipcode=document.getElementById("zipcode");var payment=document.getElementById("payment");var total=document.getElementById("total");var totalinterest=document.getElementById("totalinterest");var principal=parseFloat(amount.value);  //parseFloat() 函数可解析一个字符串，并返回一个浮点数var interest=parseFloat(apr.value) / 100 / 12;var payments=parseFloat(years.value) * 12;//原书是这样的var monthly = (principal*x*interest)/(x-1);//我认为是错误的，这是计算每个月的利息，后来我在官方的勘误表，也有人发现这个错误//http://www.oreilly.com/catalog/errataunconfirmed.csp?isbn=9780596805531var x=Math.pow(1+interest, payments);var monthly=(principal*x) / payments;   if(isFinite(monthly)){payment.innerHTML=monthly.toFixed(2);total.innerHTML=(monthly*payments).toFixed(2);totalinterest.innerHTML=((monthly*payments)-principal).toFixed(2);save(amount.value, apr.value, years.value, zipcode.value);try{getLenders(amount.value, apr.value, years.value, zipcode.value);}catch(e){}chart(principal, interest, monthly, payments);}else{payment.innerHTML="";total.innerHTML="";totalinterest.innerHTML="";chart();}function save(amount, apr, years, zipcode){if(window.localStorage){localStorage.loan_amount=amount;localStorage.loan_apr=apr;localStorage.loan_years=years;localStorage.loan_zipcode=zipcode;}}window.onload=function(){if(window.localStorage && localStorage.loan_amount){document.getElementById("amount").value=localStorage.loan_amount;document.getElementById("apr").value=localStorage.loan_apr;document.getElementById("years").value=localStorage.loan_years;document.getElementById("zipcode").value=localStorage.loan_zipcode;}};function chart(principal, interest, monthly, payments){var graph=document.getElementById("graph");graph.width=graph.width;//用一种巧妙的手法清除并重置画布var g=graph.getContext("2d");var width=graph.width;var height=graph.height;function paymentToX(n){return n*width/payments;}function amountToY(a){return height-(a*height/(monthly*payments*1.05));}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(0));         for(var p = 1; p <= payments; p++) {var thisMonthsInterest = (principal-equity)*interest;equity += (monthly - thisMonthsInterest);  g.lineTo(paymentToX(p),amountToY(equity)); }g.lineTo(paymentToX(payments), amountToY(0));  g.closePath();                               g.fillStyle = "green";                         g.fill();                                    g.fillText("Total Equity", 20,35);             var bal = principal;g.beginPath();g.moveTo(paymentToX(0),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.fillStyle = "black";                         g.fillText("Loan Balance", 20,50);            g.textAlign="center";                          var y = amountToY(0);                         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) g.fillText(String(year), x, y-5);}g.textAlign = "right";                         g.textBaseline = "middle";                     var ticks = [monthly*payments, principal];     var rightEdge = paymentToX(payments);          for(var i = 0; i < ticks.length; i++) {        var y = amountToY(ticks[i]);               g.fillRect(rightEdge-3, y-0.5, 3,1);      g.fillText(String(ticks[i].toFixed(0)),      rightEdge-5, y);}}}</script></body></html>
0 0