|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
前言:
今天是第一天正式学javascript.. 也是有好些语言基础的底子下
其实早就看不二老湿的html5了, 只是跟着文字版敲完了html css 没有跟着学javascript...
当然主要因为是懒....本来以为我不会接触太多这些前端..然后沉迷上了python爬虫
也间接学了很多html 和 很多网络知识.. 发现爬虫想解掉js加密反爬 得要牢固一下js
爬虫还是得懂很多前端知识...和数据库知识 数据库还好 以前有接触 感觉冥冥之中向全栈工程师靠近了
第一天嘛..都是学些javascript历史,,和一些基本用法..
(1)var类型 定义变量为任何类型
如:
注意的是 赋值得用分号 代表语句结束. 也许很常见 但是javascript不像c++ java..它也并不是每条句子都用分号..但是赋值一般会用分号.(也就是说没意义的可以不加分号)
var a = "string";
var b = 1;
var c = 1.0;
var d = [1,2,3,4];
var e = {
type:"对象"，
topic:"哈哈哈"
};
通过花括号定义的为对象,,,对象是名/值对的集合, 基本跟python的字典类型一模一样....
(2)对象属性
如:
e.topic 或 e.type 可以直接访问已有属性
也可以创建一个新的属性并赋初值: e.author = "咸鱼"; e[author] = "咸鱼";
它的属性也可以是对象...e.content = {}
学过python的字典的都知道字典的值可以为任意类型..这个用在javascript对象的值对里也是一个道理
(3)定义函数
如: 参数可选,这里不多作介绍..函数一个道理
function(){
.....
}
(4)对象方法:
如下列代码演示:
function Point(x,y){
this.x = x;
this.y = y;
}
var p = new Point(1,1);
// new method
Point.prototype.r = function(){
return Math.sqrt(this.x *this.x + this.y*this.y)
};
// method call
p.r()
其中prototype为定义函数方法.. r是函数名称
(算法运算不多作介绍 基本一致)
(5)内置方法:
var a = [];
a.push(1,2,3) //加入值
a.reverse(); //倒转
等等.....
(6)介绍客户端javascript
javascript一般都内嵌网页比较多吧..
所以这第一天的看写代码开始吧..
基于javascript实现的贷款计算器:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
/*这是一个css样式表: 定义了程序输出的样式*/
/* 计算结果定义为粗体 */
.output{
font-weight: bold;
}
/* 定义id="payment"的元素样式 下划线 */
#payment{
text-decoration: underline;
}
/* 图表有一个1像素的边框 */
#graph{
border: solid black 1px;
}
/* 表格单元格对齐方式为顶端对齐 */
th, td{
vertical-align: top;
}
</style>
</head>
<body>
<!--
这是一个HTML表格, 其中包含<input>元素可以用来输入数据.
程序将在<span>元素中显示计算结果,这些元素都具有类似"interset"和"years"的id.
这些id将在表格下面的javascript代码中用到.我们注意到,
有一些input元素定义了"onchange"或"onclick"事件处理程序,
以便用户在输入数据或者点击inputs时执行指定的javascript代码段.
-->
<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();">Calculator</button></td>
</tr>
<tr>
<td>Monthly payment:</td>
<td>$<span class="output" id="payment"></span></td>
</tr>
<tr>
<td>Total payment:</td>
<td>$<span class="output" id="total"></span></td>
</tr>
<tr>
<td>Total interest:</td>
<td>$<span class="output" id="totalinterest"></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>
<!--
随后是javascript代码, 这些代码内嵌在了一个<script>标签里
通常情况下, 这些代码代码应当放在<head>标签中
将javascript代码放在HTML代码之后仅仅是为了便于理解
-->
<script>
"use strict"; //如果浏览器支持 开启(javascript)ECMAScript 5的严格模式
/*
这里的代码定义caculate()函数, 在HTML代码中绑定事件处理程序时会调用它
这个函数从<input>元素中读取数据, 计算货款赔付信息, 并将结果显示在<span>元素中
同样, 这里还保存了用户数据、展示了放贷人链接并绘制出了图表
*/
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");
// 假设所有的输入都是合法的, 将从input元素中获取输入数据
// 将百分比格式转换为小数格式, 并从年利率转换为月利率
// 将年度赔付转换为月度赔付
var principal = parseFloat(amount.value);
var interset = parseFloat(apr.value) / 100 / 12;
var payments = parseFloat(years.value) * 12;
// 现在计算月度赔付的数据
var x = Math.pow(1 + interset, payments);
var monthly = (principal * x * interset) / (x - 1);
// 如果结果没有超过javascript能表示的数字范围, 且用户的输入也正确
// 这里所显示的结果就是合法的
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, year.value, zipcode.value);
}catch(e){}
// 最后, 用图表展示贷款余额、利息和资产收益
chart(principal, interset, monthly, payments);
}
else{
// 计算结果不是数字或者是无穷大, 意味着输入数据是非法或不完整的
// 清空之前的输出数据
payment.innerHTML = ""; // 清空元素的文本内容
total.innerHTML = "";
totalinterest.innerHTML = "";
chart(); // 不传参数的话就算清除图表
}
}
// 将用户的输入保存至localStorage对象的属性中
// 这些属性在再次访问时还会继续保持在原位置
// 如果你再浏览器中按照file://URL的方式直接打开本地文件,
// 则无法再某些浏览器中使用存储功能(如: firefox)
// 而通过HTTP打开文件是可行的
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 getLenders(amount, apr, years, zipcode){
// 如果浏览器不支持XMLHttpRequest对象, 则退出
if(!window.XMLHttpRequest) return;
// 找到要显示放贷人列表的元素
var ad = document.getElementById("lenders");
if(!ad) return; // 如果返回为空,则退出
// 将用户的输入数据进行URL编码, 并作为查询参数附加在URL里
// 处理数据的URL地址 使用查询串中的数据
var url = "getLenders.php" + "?amt=" + encodeURIComponent(amount) +
"&apr=" + encodeURIComponent(apr) + "&yrs=" + encodeURIComponent(years) +
"&zip=" + encodeURIComponent(zipcode);
// 通过XMLHttpRequest对象来提取返回数据
var req = new XMLHttpRequest(); // 发起一个新的请求
req.open("GET", url); // 通过URL发起一个HTTP GET请求
req.send(null); //不带任何正文发送这个请求
// 在返回数据之前, 注册一个事件处理函数, 这个处理函数
// 将会在服务器的响应返回至客户端的时候调用
// 这种异步编程模型在客户端javascript中是非常常见的
req.onreadystatechange = function(){
if(req.readyState == 4 && req.status == 200){
// 如果代码运行到这里, 说明我们得到了一个合法且完整的http响应
var response = req.responseText; // HTTP响应是以字符串的形式呈现的
var lenders = JSON.parse(response); // 将其解析为JS数组
// 将数组中的放贷人对象转换为HTML字符串形式
var list = "";
for(var i = 0; i < lenders.length; i++){
list += "<li><a href='" + lenders[i].url + "'>" +
lenders[i].name + "</a>";
}
// 将数据在HTML元素中呈现出来
ad.innerHTML = "<ul>" + list + "</ul>";
}
}
}
// 在HTML<canvas>元素中用图表展示月度贷款余额、利息和资产收益
// 如果不传入参数的话, 则清空之前的图表数据
function chart(principal, interest, monthly, payments){
var graph = document.getElementById("graph"); // 得到<canvas>标签
graph.width = graph.width; // 用一种巧妙的手法清楚并重置画布
// 如果不传入参数, 或者浏览器不支持画布, 则直接返回
if(arguments.length == 0 || !graph.getContext) return;
// 获得画布元素的"context"对象, 这个对象定义了一组绘画API
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(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)); // 将数据线绘制至x轴
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); // 图例文字
// 将年度数据在X轴做标记
g.textAlign = "center"; // 文字居中对齐
var y = amountToY(0); // Y坐标设为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]); // 计算每个标记的Y坐标
g.fillRect(rightEdge - 3, y - 0.5, 3, 1); // 绘制标记
g.fillText(String(ticks[i].toFixed(0)), rightEdge - 5, y);
}
}
</script>
</body>
</html>
没错..300左右行代码..
今天写完这个的时候 还是很多粗心错误..
还好会用web调试器.
调完成功.. canvas数据线也相应出来 大功告成 |
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-4-18 10:28:09
置顶卡
千斤顶
显身卡
发表于 2018-4-18 11:09:01