Javascript第一天学习之路

auyhin丶 · 发表于 2018-4-18 10:28:09

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

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数据线也相应出来大功告成

不二如是 · 发表于 2018-4-18 11:09:01

很棒呦，建议发在web区，学习笔记

账号		自动登录	找回密码
密码			立即注册

[学习笔记] Javascript第一天学习之路

马上注册，结交更多好友，享用更多功能^_^