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

Javascript第一天学习之路

前言:
       今天是第一天正式学javascript.. 也是有好些语言基础的底子下
        其实早就看不二老湿的html5了, 只是跟着文字版敲完了html css 没有跟着学javascript...
        当然主要因为是懒....本来以为我不会接触太多这些前端..然后沉迷上了python爬虫
        也间接学了很多html 和 很多网络知识..{:10_243:}发现爬虫想解掉js加密反爬 得要牢固一下js
        爬虫还是得懂很多前端知识...和数据库知识数据库还好 以前有接触 感觉冥冥之中向全栈工程师靠近了{:10_266:}

第一天嘛..都是学些javascript历史,,和一些基本用法..

        (1)var类型 定义变量为任何类型
                如:
                        注意的是 赋值得用分号 代表语句结束. 也许很常见 但是javascript不像c++ java..它也并不是每条句子都用分号..但是赋值一般会用分号.(也就是说没意义的可以不加分号)
                        var a = "string";
                        var b = 1;
                        var c = 1.0;
                        var d = ;
                        var e = {
                                type:"对象",
                                topic:"哈哈哈"
                                };
                       
                        通过花括号定义的为对象,,,对象是名/值对的集合, 基本跟python的字典类型一模一样....
                       
        (2)对象属性
                如:
                        e.topic 或 e.type 可以直接访问已有属性

                        也可以创建一个新的属性并赋初值:e.author = "咸鱼"; e = "咸鱼";
                        它的属性也可以是对象...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.url + "'>" +
                                                                        lenders.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 = ; // 我们将要用到的两个点
                                var rightEdge = paymentToX(payments);
                                for(var i = 0; i < ticks.length; i++){
                                        // 对每两个点做循环
                                        var y = amountToY(ticks); // 计算每个标记的Y坐标
                                        g.fillRect(rightEdge - 3, y - 0.5, 3, 1); // 绘制标记
                                        g.fillText(String(ticks.toFixed(0)), rightEdge - 5, y);
                                }
                       
                        }
                       
                       
                </script>
        </body>

</html>
                       
没错..300左右行代码..
今天写完这个的时候 还是很多粗心错误..
还好会用web调试器.
调完成功.. canvas数据线也相应出来 大功告成{:10_297:}

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

很棒呦,建议发在web区,学习笔记
页: [1]
查看完整版本: Javascript第一天学习之路