javascript权威指南学习笔记1
2016-03-13 01:21
525 查看
打开这本书,进入到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)对象:键值对(名==值)有属性,通过“.”或者“[]”来访问,就像各种检索目录一样,一级级的往下寻找。例如:
(5)函数:是带有名称和参数的javascript代码段,可以多次调用
(6)方法:当函数和对象合在一起的时候,就变成了方法。即当函数赋值给对象的属性,即为方法,所有的javascript对象都含有方法。
(7)控制语句:条件判断和循环
(8)面向对象:构造--》实例化--》附加方法--》继承
(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);
如何将数据存储在浏览器中
如何使用脚本发送http请求
如何利用<canvas>元素绘图
总结:要清楚的明白对象、函数、方法三者之间的关系。客户端的例子基本能看懂,但是自己写不出来。主要是localStorage和http请求无法自己独立完成。以后会回来复习默写的。
学习前准备: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请求无法自己独立完成。以后会回来复习默写的。
相关文章推荐
- JS关键字详解
- 详解JavaScript中数组和字符串的lastIndexOf()方法使用
- 简单谈谈json跨域
- Javascript数组Array基础介绍
- GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
- JS中创建函数的三种方式及区别
- 教你优雅地运用JS模块化编程
- 常用排序算法js实现
- JavaScript绑定事件
- 学习 JavaScript 最难点之一 -- 理解prototype(原型)
- js中!!的作用
- JavaScript高级程序设计(第三版)学习笔记11、12、17章
- 基于JS的DOM 编程基础和Json语法及JS下的AJAX基础
- JavaScriptCore框架在iOS7中的对象交互和管理
- [JSOI2007] [BZOJ1031] 字符加密Cipher - 后缀数组
- chart.js绘图,如何显示图例?
- [JSOI2008] [BZOJ1013] 球形空间产生器sphere - 高斯消元
- JavaScript 中的 prototype
- [JSOI2008] [BZOJ1012] 最大数maxnumber - 单调栈
- javascript 数组