【读书笔记】JavaScript权威指南 --前言&第一章 javascript概述

前言


本书内容：JavaScript + JavaScript API


1.JS语言
2.客户端JS：HTML5,JS API, web brower API
3.JS语言核心参考手册
4.客户端JS参考手册


Plus:ECMAScript5,HTML5


示例代码：http://oreilly.com/catalog/9780596805531




第一章 JavaScript概述


面向web的编程语言
高端、动态、弱类型  适合面向对象和函数式的编程风格


Netscape公司创建 -> ECMAScript


JS有很少的API，输入输出功能由web浏览器提供
JS解释器 -> web浏览器
调试插件：Firebug、开发者工具、web控制台
调试方法：JavaScript控制台，console.log(),alert()


1.1 JavaScript语言核心


变量赋值 var x= ...
类型 整数、实数、"..."、'...'、bool、null、undefined


数据类型 对象&数组
对象
定义：
var book={
topic:"JavaScript",
fat:true
}
访问：
book.topic
book["fat"]
book.author="..." //创建新属性
book.contents={}  //空对象
数组
var p=[1,2,3,5]
p[0]              //访问元素
p.length          //数组元素个数
p[4]=55           //添加新元素
p[4]=66           //修改元素值
var empty=[]      //空数组
数组和对象之间可以相互包含！
初始化表达式：对象{},数组[]


运算符：+ - * / ++ -- += *=
+可用于加法/字符串连接
关系运算符： == != < <= > >=
"tw"=="three"     //字符串相等比较
"two" > "three"   // true 字母表索引     ？？？
逻辑运算符：&& || ！


语句
短语是表达式 -> 语句 以分号结束
表达式：计算出一个值，不作任何操作，不改变程序状态
语句：改变程序运行状态


函数
带有名称和参数的JavaScript代码段
一次定义，多次调用
function plus1(x){
return x*x;
}
plus1(x)


var square = function(x){
return x*x;
};                  //分号标记赋值语句的结束！！！
square(plus1(x))
当函数赋值给对象的属性 -> “方法”！
var a=[];
a.push(1,2,3);
a.reverse();
定义自己的方法 this是对定义方法的对象的引用
var points=[]
points.dist=function(){
var p1=this[0];       //通过this获取对当前数组的引用！
var p2=this[1];
var a=p1.x-p2.x;
var b=p1.y-p2.y;
return Math.sqrt(a*a+b*b);
}


控制语句
条件 判断 循环
if(...){
...
}
else{
...
}


while(...){
...
}


for(i=0; i<=n;i++){
...
}


分支中只有一条语句，{}可以省略


面向对象编程
function Point(x,y){ //定义构造函数，初始化新的Point对象；
this.x=x; //构造函数多以大写字母开始
this.y=y; //this指代初始化的实例！！
} //将函数参数存储为对象的属性，不需要return
var p=new Point(1,1);
Point.prototype.r=function(){
return Math.sqrt(this.x*this.x+this.y*this.y);  //this指代调用方法的对象！！
};
p.r();




1.2 客户端JavaScript


通过<script>标签将JS代码嵌入到html中
<script>
function moveon(){
var answer=confirm("Are you ready?");
if(answer) window.location="http://taobao.com";
}
setTimeout(moveon,600);
</script>
一点小感受：
最开始比较别扭，感觉只是定义了一个函数，并没有像C++或者python一样调用库，就实现了交互……
后来想js解释器就是浏览器，这样就适应了很多，另外，对于常见的全局函数需要多熟悉一些~
confirm(),window.location,setTimeout()


用脚本操纵html文档内容，选取特定元素，设置属性，修改元素内容，给文档添加新节点
document.getElementById,document.createElement,innerHTMl,appendChild


修改html元素的style和class属性
e.style.display,e.style.visibility,e.className


通过事件处理程序定义文档的行为  
事件处理程序：在浏览器中注册的js函数
当特定类型的事件发生时，便调用这个函数
事件类型：鼠标点击事件/键盘按键事件/浏览器完成文档的加载/用户改变窗口大小/用户向表单加入数据
<button onclick="...">...</button>
load事件只有在文档加载完成后才会触发
通常需要等待load事件发生后再执行js代码
image.addEventListener


jQuery定义了一套API，用于操控文档内容、样式和行为
$


web应用
将web浏览器当做应用平台，支持客户端web应用的的现代浏览器API->定义了全新的跨平台的应用环境


1.3 示例：一个JavaScript贷款计算器