javascript权威指南学习笔记1

时间:2022-08-27 08:05:35

打开这本书,进入到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)对象:键值对(名==值)有属性,通过“.”或者“[]”来访问,就像各种检索目录一样,一级级的往下寻找。例如:

 1 var book={//等于号莫忘记
 2     author:"fanfan",
 3     name:"javascript",//不同属性之间用“,”分隔
 4     buy:false  
 5 };
 6 console.log(book.author);//获取book的author属性=》fanfan
 7 console.log(book["name"]);//中括号里面的属性名称要加双引号
 8 book.topic="study";//若book属性原本没有topic属性,这时候相当于添加了一个topic属性,并且值为study。
 9 console.log(book.topic);
10 book.content={};//设置一个空的属性
11 console.log(book.content);

  (5)函数:是带有名称和参数的javascript代码段,可以多次调用

1 var square=function(x){
2     return x*x;
3 };
4 square(4);

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

 1 var a=[];
 2 a.push(1,2,3);//数组赋值push方法
 3 a.reverse();//数组倒序
 4 //我们也可以定义自己的方法,this关键字就是对定义方法的对象的引用
 5 var points=[
 6 {x:0,y:0},
 7 {x:1,y:1}];
 8 points.dist=function(){
 9   var p1=this[0];
10   var p2=this[1];
11   var a=p2.x-p1.x;
12   var b=p2.y-p1.y;
13 return  Math.sqrt(a*a+b*b); 
14 }
15 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);
  • 如何将数据存储在浏览器中  
    1 save(amount.value, apr.value, years.value, zipcode.value);
    2 function save(amount, apr, years, zipcode) {
    3         if (window.localStorage) { // Only do this if the browser supports it
    4             localStorage.loan_amount = amount;
    5             localStorage.loan_apr = apr;
    6             localStorage.loan_years = years;
    7             localStorage.loan_zipcode = zipcode;
    8         }
    9     }
  • 如何使用脚本发送http请求 
     1 function getLenders(amount, apr, years, zipcode) {
     2         // If the browser does not support the XMLHttpRequest object, do nothing
     3         if (!window.XMLHttpRequest) return;
     4 
     5         // Find the element to display the list of lenders in
     6         var ad = document.getElementById("lenders");
     7         if (!ad) return; // Quit if no spot for output 
     8 
     9         // Encode the user's input as query parameters in a URL
    10         var url = "getLenders.php" + // Service url plus
    11             "?amt=" + encodeURIComponent(amount) + // user data in query string
    12             "&apr=" + encodeURIComponent(apr) +
    13             "&yrs=" + encodeURIComponent(years) +
    14             "&zip=" + encodeURIComponent(zipcode);
    15 
    16         // Fetch the contents of that URL using the XMLHttpRequest object
    17         var req = new XMLHttpRequest(); // Begin a new request
    18         req.open("GET", url); // An HTTP GET request for the url
    19         req.send(null); // Send the request with no body
    20 
    21         // Before returning, register an event handler function that will be called
    22         // at some later time when the HTTP server's response arrives. This kind of 
    23         // asynchronous programming is very common in client-side JavaScript.
    24         req.onreadystatechange = function() {
    25             if (req.readyState == 4 && req.status == 200) {
    26                 // If we get here, we got a complete valid HTTP response
    27                 var response = req.responseText; // HTTP response as a string
    28                 var lenders = JSON.parse(response); // Parse it to a JS array
    29 
    30                 // Convert the array of lender objects to a string of HTML
    31                 var list = "";
    32                 for (var i = 0; i < lenders.length; i++) {
    33                     list += "<li><a href='" + lenders[i].url + "'>" +
    34                         lenders[i].name + "</a>";
    35                 }
    36 
    37                 // Display the HTML in the element from above.
    38                 ad.innerHTML = "<ul>" + list + "</ul>";
    39             }
    40         }
    41     }

     

  • 如何利用<canvas>元素绘图   
     1 var g = graph.getContext("2d");
     2 g.moveTo(paymentToX(0), amountToY(0)); // Start at lower left
     3         g.lineTo(paymentToX(payments), // Draw to upper right
     4             amountToY(monthly * payments));
     5         g.lineTo(paymentToX(payments), amountToY(0)); // Down to lower right
     6         g.closePath(); // And back to start
     7         g.fillStyle = "#f88"; // Light red
     8         g.fill(); // Fill the triangle
     9         g.font = "bold 12px sans-serif"; // Define a font
    10         g.fillText("Total Interest Payments", 20, 20); 

     

     

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