JS复习

JavaScript
1、JavaScript简介
webhek.com codecombat.cn runjs.cn jq22.com chinaz.com
1.1、什么是JavaScript
JavaScript简称JS，是应用于客户端的基于对象和事件驱动的编程语言。
 基于对象：提供了很多对象，可以直接拿来使用；
 事件驱动：html做静态网页效果，js做动态网页效果；
 客户端：指用户使用的浏览器；
1.2、JavaScript的特点
交互性：信息动态交互；
安全性：js不能访问本地磁盘文件；
跨平台性：只要是支持JavaScript语言的浏览器，都可以运行；
1.3、JavaScript和Java的区别
两者没有任何联系
 JavaScript是网景公司的，Java是Oracle公司的；
 JavaScript是基于对象的，Java是面向对象的；
 JavaScript是弱类型语言，Java是强类型语言；
例如：Java中的变量声明 int a = 10; String str = “hello”;
在JavaScript中的变量声明 var I = 10 ; var str = “hello”;
 Java是先编译在执行，JavaScript可以直接运行在浏览器中；
1.4、JavaScript的组成
JavaScript是由三部分组成：
 ECMAScript：欧洲计算机制造商协会，由该协会制定了JavaScript的语法和标准；
 BOM：browser object model 浏览器对象模型；
 DOM：document object model 文档对象模型（html、xml）；
2、JavaScript用法
2.1、js和html的结合方式
 在html中使用script标签直接编写js代码：

//js代码

 在html头标签中使用script标签引入外部js文件：

在使用script标签引入外部js文件时，标签内就不能再写js代码。

2.2、JavaScript输出
使用window.alert(“”)弹出提示框；
使用document.write(“”)将内容写到html文档中；
使用innerHTML写入到HTML元素；
使用console.log()写入到浏览器的控制台；
2.3、JavaScript语法
 在JavaScript中可以使用字面常，字符串使用双引号或单引号；
 在JavaScript中使用var关键字来声明变量；
 JavaScript中具有和Java几乎类似的运算符；
 JavaScript的标识符可以使用大小写字母、数字、下划线、美元符号，不能以数字开头，不能使用js关键字；
 使用//表示单行注释，使用/**/表示多行注释；
 JavaScript是弱类型语言，原始数据类型有：number / string / boolean / null / undifined；
 JavaScript中使用function来声明函数；
 JavaScript对大小写敏感；
2.4、JavaScript数据类型
 JavaScript的数据类型有：
String 字符串，可以使用双引号或单引号；
Number 数字，可以表示小数和整数；
Boolean 布尔，表示逻辑判断，值为true和false；
Array 数组，数组有三种声明方式，可参考数组章节；
Object 对象，使用大括号分割，在大括号中以键值对的形式存在；
var p = {
name:”tom”,
age:20,
car:true
}
alert(p.age);
Null 空，表示空对象引用，可以使用null来清空变量，例如 person = null ；
Undefined 未定义，当变量声明后未赋值，默认值为undefined；
 Null和Undefined的区别：
unll和undefined的值相等，但是类型不同：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
unll和undefined都可以用来清空对象，但清空的对象类型不同：
var person = null; // 值为 null(空), 但类型为对象
var person = undefined; // 值为 undefined, 类型为 undefined

2.5、JavaScript变量
 在JavaScript中使用var来声明变量，var a = “”; var I = 10;
 可以使用一条语句声明多个变量， var a,b,c;
 当声明的变量没有赋值时，默认值为undifined；
 可以使用typeof()来查看变量的类型，typeof(变量名);
2.6、运算符
JavaScript中的运算符可以参考Java。
 算术运算符

 赋值运算符

 比较运算符

 逻辑运算符

 条件运算符
voteable=(age<18)?”年龄太小”:”年龄已达到”;
 在ja中不区分整数和小数，例如：
var i = 123;
alert(i/1000*1000); //在Java中结果为0，在js中结果为123
 字符串的+ 和 - ：
var s = “123”;
alert(s+1); //结果是1231，+表示字符串拼接
alert(s-1); //结果是122，-表示减法运算
var s = “abc”;
alert(s-1); //结果为NaN，表示不是数字
 Boolean类型的加法和减法：
var f1 = true;
alert(f1+1); //值为true时，等于1，结果为2
var f2 = false;
alert(f1+1); //值为false时，等于0，结果为1
 == 和 === 的区别：
都是做判断
== 只比较的是值，与类型无关；
=== 比较的是值和类型；
2.7、JavaScript的流程控制
分支语句：if-else、switch-case；
循环语句：while、do-while、for；

3、JavaScript数组
3.1、数组的声明
 常规方式：
var arr = new Array(5);
arr[0] = 1;
arr[1] = “hello”;
arr[2] = true;
arr[3] = 3.14;
arr[5] = ‘world’;
 简介方式：
var arr = new Array(1,3.14,”hello”);
 字面方式：
var arr = [1,”hello”,3.14];
3.2、常用属性
length属性：返回数组中元素的个数；
constructor属性：返回创建数组的构造函数；
3.3、常用方法
concat()：连接数组；
join()：打印数组是，数组的每个元素使用指定字符分割数组，arr.join(“-“);
push()：向数组的末尾添加一个或更多的元素，并返回新的长度
unshift()：向数组的开头添加一个或更多元素，并返回新的长度
pop()：删除并返回数组的最后一个元素
shift()：删除并返回数组的第一个元素
reverse()：倒置数组元素
sort()：对数组元素进行排序
toString()：把数组转为字符串，并返回结果
4、函数
4.1、函数的声明
 方法一
function method(){
alert(“hello”);
}
method();
 方法二
var method = function(){
alert(“hello”);
}
method();
 方法三
var str1 = “x,y”;//参数列表
var str2 = “var sum; sum = x+y; return sum”;//方法体
var method = new Function(str1,str2);
alert(method(4,5));
4.2、方法重载
 在JavaScript中没有方法重载的概念，如果有多个重名的方法，会调用最后一个；
 方法接收到的参数会被保存到arguments的数组中，可以使用该数组来实现方法的重载：
function add(){
var sum = 0;
for(var i = 0 ; i < arguments.length ; i++){
sum += arguments[i];
}
document.write(sum+”
”);
}
add(1,2);
add(1,2,3);
add(2);
4.3、闭包
概念：一个拥有许多变量和绑定了这些变量的环境表示式（通常是一个函数），因而这些变量也是该表达式的一部分。
解释：JavaScript允许使用内部函数，即函数定义和函数表达式位于另一个函数的函数体内。而且这些内部函数可以访问它们所在的外部函数中声明的局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
4.4、回调函数
function a(x){
alert(x+” hello”);
}
function b(hello){
hello();
}
b(function(){a(“test”);});
在上面的示例中，a函数就是回调函数，b函数就是调用函数，把a函数的引用作为参数传入b函数中，实现在b函数中调用a函数。
5、JavaScript事件
5.1、鼠标事件
onclick：鼠标单击事件
ondblclick：鼠标双击事件
onmousedown：鼠标按钮被按下
onmouseup：鼠标按钮被释放
onmousemove：鼠标被移动
onmouseover：鼠标移动到某元素之上（事件冒泡）
onmouseout：鼠标从某元素移开
onmouseenter：鼠标移动到某元素之上
onmouseleave：鼠标离开某元素
clientX：当事件触发时，鼠标指针的水平坐标
clientY：当事件触发时，鼠标指针的垂直坐标
5.2、键盘事件
onkeyup：键盘输入某键后
5.3、表单事件
onblur：元素失去焦点时
onfocus：元素获得焦点时
oninput：元素获得用户输入时
onrest：表单重置时
onsubmit：表单提交时
5.4、剪贴板事件
oncopy：拷贝元素时触发
oncut：剪切元素时触发
onpaste：粘贴元素时触发
6、JavaScript对象
6.1、创建对象
 方法一：
var person = {
name:”tom”,
age:10,
car:true,
hobby:[“篮球”,”游戏”,”看书”]
}
document.write(person.name+”
”);
document.write(typeof(person.car)+”
”);
document.write(person.hobby.length);
 方法二：
var person = new Object();
person.name = “jack”;
person.age = 20;
person.car = true;
person.hobby = [“篮球”,”足球”,”羽毛球”];
document.write(person.name);
document.write(person.hobby);
 方法三：
//对象的构造器
function person(name,age,car,hobby){
this.name = name;
this.age = age;
this.car = car;
this.hobby = hobby;

//对象中声明函数
this.print = print;
function print(){ //对象中声明函数
    document.write(name+"今年"+age+"岁");
}

}

//实例化对象
var myPerson = new person(“tom”,30,false,[“a”,”b”,”c”]);
//调用对象中的方法
myPerson.print();
6.2、String对象
 创建对象：
var str = “hello”;
var str2 = new String(“world”);

document.write(str+”
”);
document.write(str2);
 属性：
length：字符串的长度；
prototype：向对象中添加新的属性和方法；
 方法：
concat()：连接字符串 str1.concat(str2);
charAt()：返回指定位置的字符串，当字符位置不存在，返回空字符串
indexOf()：返回字符串位置，当字符不存在时返回-1
split()：把字符串分割为数组
replace()：替换字符串
substring(n,m)：从第n为开始，到第m位结束（不包含m位）
substr(n,m)：从第n位开始,向后截取m个字符
 html相关方法：
bold()：文字加粗
fontcolor()：设置文字颜色
fontsize()：设置文字尺寸
link()：将字符串显示为链接
sub()：把字符串显示为上标
sup()：把字符串显示为下标

6.3、Date对象
 创建对象：
使用以下四种方法可以创建时间日期对象
var d = new Date();
var d = new Date(milliseconds);
var d = new Date(dateString);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
 方法：
getFullYear()：获得当前的年
getMonth()：获得当前的月份，月份值是0-11
getDay()：获得星期，值为0-6
getDate()：获得当前的日，值为1-31
getHours()：小时，值为0-23
getMinutes()：分钟，值为0-59
getSeconds()：秒，值为0-59
getMilliseconds()：毫秒，值为0-999
getTime()：时间戳，毫秒为单位
toLocaleString()：把Date对象转为本地格式字符串
toLocaleDateString()：把Date对象中的日期部分转为本地格式字符串
toLocaleTimeString()：把Date对象中的时间部分转为本地格式字符串
6.4、Math对象
用于执行数学运算，该对象中都是静态函数，没有构造函数Math()。
 属性：
PI：返回圆周率，约等于3,14159；
 方法：
ceil()：对一个数向上舍入
floor()：对一个数向下舍入
round()：把一个数四舍五入为最接近的整数
random()：伪随机数，返回0.0-1.0之间的随机数
获得0-9的随机数： Math.floor(Math.random()*10);
pow(x,y)：x的y次方
6.5、Number对象
 创建对象：
var i = new Number(1);
 属性：
NaN：非数字值；
MAX_VALUE：可表示的最大值；
MIN_VALUE：可表示的最小值；
 方法：
toFixed(x)：把数字转为字符串，结果的小数点后面有指定位数的数字；
toPrecision(x)：把数字格式化为指定的长度；
toString()：把数字格式化为字符串；
6.6、JavaScript全局函数
 属性：
NaN：指示某个值是不是数字；
undefined：指示未定义的值；
 方法：
parseFloat()：解析字符串，并返回浮点数；
parseInt()：解析字符串，并返回整数；
eval()：如果字符串是一个js代码，可以使用该方法直接执行
var str = “alert(‘1234’)”;
eval(str);
encodeURI()：对字符进行编码
decodeURI()：对字符进行解码
isNaN()：检查某个值是否为数字，不是数字返回true，是数字返回false
Number()：把对象的值转为数字；
String()：把对象的值转为字符串；
7、Browser对象
7.1、Window对象
该对象表示当前浏览器窗口，是JavaScript中的顶层对象，所有的bom对象都在window对象中操作，调用时可以省略window。
 属性
opener：返回创建此窗口的窗口的引用；
 方法
alert()：警告弹出框
confirm()：确认框，点击确认返回true，取消返回false
prompt()：弹出用户输入对话框
open(url,name,”窗口特征”)：打开一个新的窗口
close()：关闭窗口
setInterval(“js代码”,毫秒数) 指定周期（毫秒）来调用js代码，重复执行
setTimeout(“js代码”,毫秒数) 在指定的毫秒数之后调用js代码，只执行一次
clearInterval() 取消有setInterval()设置的timeout，参数为timeout的id
clearTimeout() 取消由setTimeout()设置的timeout，参数为timeout的id
7.2、Navigator对象
该对象包含了客户端浏览器的信息。
 属性
appName：返回浏览器名称
7.3、Screen对象
该对象包含了客户端显示屏幕的信息。
 属性
availHeight：返回屏幕的高度（不包含window任务栏）
availWidth：返回屏幕的宽度（不包含window任务栏）
height：返回屏幕的高度
width：返回屏幕的宽度
7.4、History对象
该对象包含用户在浏览器窗口中访问过的URL。
 属性
length：返回历史列表中的网址数
 方法
back()：加载浏览记录的前一个url
forward()：加载浏览记录的下一个url
go()：加载浏览记录中的具体页面，负数表示上一步，整数代表下一步，0代表当前页面
7.5、Location对象
该对象包含了url信息。
 属性
href：获得当前的url完整地址，设置跳转
 方法
assign()：载入一个新的文档（可返回）
replace()：用新的文档替换当前文档（不可返回）
reload()：重新加载当前文档（用于刷新当前页面）
8、DOM对象
8.1、DOM简介
文档对象模型（document object model）
 文档：是指超文本标记文档，html、xml；
 对象：提供了属性和方法；
 模型：使用属性和方法来操作超文本标记文档；
可以使用JavaScript的dom对象中提供的对象和方法，使用这些属性和方法，对标记型文档进行操作。想要对标记型文档进行操作，首先需要把标记型文档里的所有内容封装为对象，然后解析标记型文档。例如，把html里面的标签、属性、文本内容都封装为对象。
8.2、解析HTML文档
 解析过程：
根据HTML的层级结构，在内存中分配一个树形结构，需要把HTML中的每部分都封装成对象。
document对象：表示整个HTML文档；
element对象：表示标签对象；
属性对象；
文本对象；
Node节点对象：该对象是HTML文档中所有元素的父对象。
8.3、DHTML介绍
动态的HTML，它不是一门语言，是多项技术综合体的简称，包括：html、css、dom、JavaScript。
四种语言的职责：
 html：负责提供标签，封装数据，这样便于操作数据；
 css：负责提供样式，对标签中的数据进行样式定义，使用属性和属性值来设置样式；
 dom：负责将标签及其内容解析，封装成对象，对象中具有属性和行为，操作html；
 JavaScript：负责提供程序设计语言，对页面中的对象进行逻辑操作，主要指ECMAScript，js的语法语句。
8.4、document对象
每个载入浏览器的HTML文档都会成为document对象。
 属性
forms[]：返回对文档中所有的form对象引用
body：提供对元素的直接访问
images：返回文档中所有的imgage对象的引用
links：返回文档中所有的Area和Link对象
 常用方法
getElementById()：返回对拥有指定id的第一个对象的引用
getElementsByName()：返回带有指定名称的对象集合（数组）
getElementsByTagName()：返回带有指定标签名的对象集合
write()：向页面输出变量值或html代码
createElement()：创建元素节点
createTextNode()：创建文本节点
createAttribute()：创建一个属性节点
8.5、Element元素对象
在HTML中所有的元素都是元素节点，所有的属性都是属性节点，所有的文本都是文本节点，所有的注释都是注释节点。
 操作Element对象的属性（首先要获取到element）
 获取属性：getAttribute(name)方法
 设置属性：setAttribute(name,value)方法
 删除属性：removeAttribute(name)方法，不能删除value属性
 在Element对象中查找Element对象
在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementByTagName()方法，该方法返回的是一个集合。
 属性
attributes：返回一个元素的属性数组
id：设置或返回元素的id
childNodes：返回元素的一个子节点的数组（兼容性差）
classlist：返回元素的类名
className：设置或返回元素的class属性
firstChild：返回元素的第一个子节点，可以用于获取文本节点
lastChild：返回元素的最后一个子节点，可以用于获取文本节点
innerHTML：设置或返回元素的内容

 方法
addEventListener(“事件名”,function() )：向指定的元素添加事件
appendChild()：为元素添加一个新的子元素
removeChild()：删除一个子节点
focus()：设置文档或元素获取焦点
getAttribute()：返回指定元素的属性值
setAttribute()：设置或改变指定属性并指定值
getAttributeNode()：返回指定属性节点
getElementByClassName()：返回文档中所有指定类名的元素集合
 创建标签的步骤
a) 创建标签对象
b) 创建文本对象
c) 把文本添加到标签下面
8.6、Node对象
Node对象属性一
 属性
nodeName：节点名称
nodeType：节点类型
nodeValue：节点值
 各元素对象的值
标签节点对应的值：
nodeType：1
nodeName：大写标签名称
nodeValue：null
属性节点对应的值：
nodeType：2
nodeName：属性的名称
nodeValue：属性的值
文本节点对应的值：
nodeType：3
nodeName：#text
nodeValue：文本内容
Node对象属性二
 属性
父节点
 parentNode：返回父节点，返回的始终是一个元素节点，document节点没有父节点。
子节点
 childNodes：获取指定节点的所有子节点的集合
 firstChild：获取指定节点的第一个子节点
 lastChild：获取指定节点的最后一个子节点
同辈节点
 nextSibling：返回一个给定节点的下一个兄弟节点
 previousSibling：返回一个给定节点的上一个兄弟节点
8.7、操作dom树
 方法
appendChild()：添加子节点到末尾，实现剪切黏贴的效果
insertBefore(newNode,oldNode)：在某个节点之前插入一个新的节点，newNode表示要插入的节点，oldNode表示在谁之前插入
removeChild()：通过父节点删除子节点，不能自己删除自己
replaceChild(newNode,oldNode)：替换节点
cloneNode(boolean)：复制节点，参数是判断是否复制节点
移动节点，有下面三种方法组合完成：
查找节点
getElementById() 通过id属性查找
getElementByName() 通过name属性查找
getElementByTagName() 通过节点名称查找
插入节点
insertBefore() 在某个节点之前插入
appendChild() 在末尾添加
替换节点
replaceChild()