javascript权威指南学习笔记1

2022-10-20 11:46:31

打开这本书，进入到javascript的世界。以前都是看各种视频，感觉什么收获也没有，反而弄得脑袋混乱，希望能够按照这本书的节奏掌握javascript这门语言，为我的前端学习打下基础。

学习前准备：web浏览器（F12用来唤醒和关闭firebug界面，ctrl+shift+j用来唤醒错误工作台，console.log()调试辅助）

本书分为4个部分：Javascript语言核心；客户端Javascript；Javascript核心参考；客户端Javascript参考。今天主要学了第一部分。主要收获简述:

前言

1： javascript语言核心和客户端javascript的简述

　　和以往相比，这本书在最开始向我介绍了：

　　（1）注释方法： //所有在双斜杠后面的内容都属于注释

　　（2）变量：var x=0;//变量是表示值的一个符号名字，用var关键字表示，通过等号赋值

　　（3）数据类型：number bool object undefined null 等

　　（4）对象：键值对（名==值）有属性，通过“.”或者“[]”来访问，就像各种检索目录一样，一级级的往下寻找。例如:

 var book={//等于号莫忘记

     author:"fanfan",

     name:"javascript",//不同属性之间用“,”分隔

     buy:false

 };

 console.log(book.author);//获取book的author属性=》fanfan

 console.log(book["name"]);//中括号里面的属性名称要加双引号

 book.topic="study";//若book属性原本没有topic属性，这时候相当于添加了一个topic属性，并且值为study。

 console.log(book.topic);

 book.content={};//设置一个空的属性

 console.log(book.content);

　　（5）函数：是带有名称和参数的javascript代码段，可以多次调用

 var square=function(x){

     return x*x;

 };

 square(4);

　　（6）方法：当函数和对象合在一起的时候，就变成了方法。即当函数赋值给对象的属性，即为方法，所有的javascript对象都含有方法。

 var a=[];

 a.push(1,2,3);//数组赋值push方法

 a.reverse();//数组倒序

 //我们也可以定义自己的方法，this关键字就是对定义方法的对象的引用

 var points=[

 {x:0,y:0},

 {x:1,y:1}];

 points.dist=function(){

   var p1=this[0];

   var p2=this[1];

   var a=p2.x-p1.x;

   var b=p2.y-p1.y;

 return  Math.sqrt(a*a+b*b);

 }

 points.dist();

　　(7)控制语句：条件判断和循环

　　(8)面向对象：构造--》实例化--》附加方法--》继承

//构造函数，无return，初始化一个新的Point

function  Point(x,y){

    this.x=x;

    this.y=y;

}

//new一个Point点实例

var p=new Point(1,1);

//给Point附上一个r方法

Point.prototype.r=function(){

    return Math.sqrt(this.x*this.x+this.y*this.y);

};

//调用p的r方法，继承

p.r();

　　（9）客户端的javascript。主要是操作dom等。

　　　　示例：基于javascript的贷款计算器。（代码下载：http://yun.baidu.com/share/link?shareid=538259612&uk=3811305747）

如何在文档中查找元素 var amount=document.getElementById("amount");
如何通过表单input元素来获取用户的输入数据 var principal = parseFloat(amount.value);
如何通过文档元素来设置html内容 payment.innerHTML = monthly.toFixed(2);

如何将数据存储在浏览器中

 save(amount.value, apr.value, years.value, zipcode.value);

 function save(amount, apr, years, zipcode) {

         if (window.localStorage) { // Only do this if the browser supports it

             localStorage.loan_amount = amount;

             localStorage.loan_apr = apr;

             localStorage.loan_years = years;

             localStorage.loan_zipcode = zipcode;

         }

     }

如何使用脚本发送http请求

 function getLenders(amount, apr, years, zipcode) {

         // If the browser does not support the XMLHttpRequest object, do nothing

         if (!window.XMLHttpRequest) return;

         // Find the element to display the list of lenders in

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

         if (!ad) return; // Quit if no spot for output 

         // Encode the user's input as query parameters in a URL

         var url = "getLenders.php" + // Service url plus

             "?amt=" + encodeURIComponent(amount) + // user data in query string

             "&apr=" + encodeURIComponent(apr) +

             "&yrs=" + encodeURIComponent(years) +

             "&zip=" + encodeURIComponent(zipcode);

         // Fetch the contents of that URL using the XMLHttpRequest object

         var req = new XMLHttpRequest(); // Begin a new request

         req.open("GET", url); // An HTTP GET request for the url

         req.send(null); // Send the request with no body

         // Before returning, register an event handler function that will be called

         // at some later time when the HTTP server's response arrives. This kind of

         // asynchronous programming is very common in client-side JavaScript.

         req.onreadystatechange = function() {

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

                 // If we get here, we got a complete valid HTTP response

                 var response = req.responseText; // HTTP response as a string

                 var lenders = JSON.parse(response); // Parse it to a JS array

                 // Convert the array of lender objects to a string of HTML

                 var list = "";

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

                     list += "<li><a href='" + lenders[i].url + "'>" +

                         lenders[i].name + "</a>";

                 }

                 // Display the HTML in the element from above.

                 ad.innerHTML = "<ul>" + list + "</ul>";

             }

         }

     }

如何利用<canvas>元素绘图　　　

 var g = graph.getContext("2d");

 g.moveTo(paymentToX(0), amountToY(0)); // Start at lower left

         g.lineTo(paymentToX(payments), // Draw to upper right

             amountToY(monthly * payments));

         g.lineTo(paymentToX(payments), amountToY(0)); // Down to lower right

         g.closePath(); // And back to start

         g.fillStyle = "#f88"; // Light red

         g.fill(); // Fill the triangle

         g.font = "bold 12px sans-serif"; // Define a font

         g.fillText("Total Interest Payments", 20, 20);

总结：要清楚的明白对象、函数、方法三者之间的关系。客户端的例子基本能看懂，但是自己写不出来。主要是localStorage和http请求无法自己独立完成。以后会回来复习默写的。

码农公寓

相关文章