JavaScript笔记及总结

前言：

网页中HTML为内容，CSS做展现（修饰内容），Js为行为（交互）。

Js属于基于对象型的脚本语言，在学习时当作编程语言（如java，c#）学习更好理解。

javascript是实现网页动态效果，也是ajax/jquery/extjs（后话）等框架的基础。

三个篇目：基础篇，面向对象篇，DOM篇。

重点DOM编程，面向对象编程稍次之。

Author:ymm1874

2012-12-08

Ⅰ 基础篇

一，JS属于脚本语言，往往不独立使用，一般嵌套在html/asp/jsp/php等页面中；

如：

<html>

<head>

alert(“Hello World!”);

</script>

</head>

<body>

</body>

</html>

注意点： JS语句必须放在<script></script>标签里面，标签位置随意。

二，变量

1, 变量定义：

(1) Js无论定义什么类型都用var定义，var也可以不写;

(2) Js中的数据类型是由自身引擎来决定的；

例：

<html>

<head>

<title>javascript的变量说明</title>

/*(1) Js无论定义什么类型都用var定义，var也可以不写*/

var num1=456;

num2=226;

/* (2) Js中的数据类型是由自身引擎来决定的；*/

var name=”shopping”; //js引擎知道name是字符串

name=22; //这时name自动变成了数

var kk=2; //kk是整数

var y; //y是undefined类型

/* (3)创建数组：var数组名=[元素值，元素值，```]*/

var a=[“shopping”,123,1.1,4.5,true]

/* (4)二维数组：*/

var a=[[1,2,3],[“hello”,”world”,”ddl”]]

</script>

</head>

<body>

</body>

</html>

2, 变量类型(了解常用的)：

Number(数值类型)：

2 整型常量（整数123）

2 实型常量（小数123.45等）

2 特殊数值（不常用）：NaN(not is a number)、Infinity、isNaN()、isFinite()

Boolean(布尔类型)：true和false；

String 字符串： “this is a book”；

复合数据类型：数组，对象;

特殊数据类型：null,undefined(未定义)；

3，函数（方法）

<html>

<head>

<title>javascript的变量说明</title>

/*不带参数*/

function sayHello(){

alert("Hello!!");

}

/*带参数*/

function sayName(name){

alert(name);

}

sayHello(); //调用

sayName("张三");

</script>

</head>

</html>

注意点：函数没有返回值类型。形参数不写具体的类型。

4，控制语句：

和大部分编程语言(java，c#，c…)一样，if…else，for, while, do…while

不多说。

Ⅱ Js面向（基于）对象编程

小节前言：

网页开发中只使用JS获取HTML元素，修改元素的属性，验证等，使用面向对象的知识可能不多，但是编写大数据量的JS代码，或者大型网站就非常需要了（一名师说的）！

个人学了觉得这东西用的时候真不多，可以先大概的学学。

1，js中没有类class,但是它取了一个新的名字叫原型对象，因此，类==原型对象

2， Js中一切皆是对象（有点废话）；

1 类==对象原型：

（1），引入（什么是类就不多说）：

张老太养了两只猫：一只名字叫小白，今年3岁，白色；还有一只叫小黑，今年5岁，黑色。如何用JS表示？

传统的方法：

var cat1_name="小白";

var cat1_age=3;

var cat1_color="白色";

var cat2_name="小黑";

var cat2_age=3;

var cat2_color="黑色";

引入类的概念：

function cat(){ //创建一个cat类

}

var cat1 = new cat() //实例化小白

cat1.name="小白"; //为小白添加属性

cat1.age=3;

cat1.color="白色";

var cat2 = new cat() //实例化小黑

cat1.name="小黑"; //为小黑添加属性

cat1.age=3;

cat1.color="黑色";

注意点：类的创建和函数创建一样，属性可以在实例化对象时就拥有，后面讲！

（2） 属性：

创建一个对象后,就希望该对象自动的拥有某些属性。比如:当我们创建一个Person对象后,就希望该对象自动拥有name和age属性,这又怎么办?

◇使用this 来解决：

function Person(){

this.name="abc";

this.age=30;

}

var p1 = new Person();

p1.name="zhangsan"; //修改属性

var p2 = new Person();

/*访问属性的方式：对象名.属性名（p1.name）

或者对像名[“属性名”]（p1[“name”]）,一般使用前一个*/

window.alert(p1.name+" "+p2.name);

window.alert(p1["name"]+" "+p2["name"]);

注意点：以上类中的‘abc’,30如同属性的初始值，实例化的对象拥有该属性，可以通过对象名.属性名（p1.name）或者对像名[“属性名”]（p1[“name”]）修改；

构造赋值：

function Person(name,age){

this.name=name;

this.age=age;

}

var p1 = new Person("zhangsan",20);

var p2 = new Person("lisi",30);

window.alert(p1.name+" "+p1.age);

window.alert(p2.name+" "+p2.age);

对this的理解：那个对象实例调用this，this就代表哪个对象实例（和java，c#差不多），如果this放在类外面就代表window（window对象后面DOM编程会讲）调用。

（3）方法（函数）：

①函数写在类里面

function Person(){

this.name="abc";

this.age=30;

this.show=function (){

window.alert("name:"+this.name+" "+"age:"+this.age);

}

var p1 = new Person();

p1.show();

②函数写在类外面

function Person(){

this.name="abc";

this.age=30;

}

function show1(){

window.alert("name:"+this.name+" "+"age:"+this.age);

}

var p2 = new Person();

p2.show=show1; //赋值，记住不要加括号

p2.show(); //记住是p2.show()，而不是p2.show1()或者show1()

③所有对象共享一个函数（prototype关键字）

上面两种方法有一个问题，对象独占函数代码，这样如果对象过多，则会影响效率，js设计者，给我们提供了别一个方法，原型法：这样多个对象可以共享函数代码：

function Person(){

this.name="abc";

this.age=30;

}

//使用prototype去绑定一个函数Person类

Person.prototype.show=function(){

window.alert("name:"+this.name+" "+"age:"+this.age);

}

var p1 = new Person();

p1.show();

var p2 = new Person();

p2.show();

3，类的继承（什么是继承之类的就不多说了，学过面向对象都知道）

① 对象冒充法：

function Father() //父类

{

this.money =1000; //父亲有一千元

this.sayHello = function()

{

alert("父类的sayHello()!!");

}

function Child() //子类

{

//下面三行代码是最关键的代码,完成继承

this.method = Father;

this.method();

deletethis.method;

this.sayWorld = function()

{

alert("子类的sayWorld()!!");

}

var child = new Child();

child.sayHello(); //子类调用父类的方法

child.sayWorld(); //子类调用自己的方法

alert(child.money); //子类从父类继承而来的钱

三行关键代码说明（如果不能理解记着就行了）：

this.method = Father; 子类定义一个属性指向父类；

this.method(); 将父类执行一遍，执行的时候父类里面的this就代表子类，执行完成子类就拥有了父类的属性；

delete this.method; 完成继承后删除指向；

② call方法方式,Function对象中的方法

这个不难理解！只需将上一个例子的三行关键代码改变！

function Father() //父类

{

this.money =1000; //父亲有一千元

this.sayHello = function()

{

alert("父类的sayHello()!!");

}

function Child() //子类

{

//下面一行代码是最关键的代码,完成继承

//如果有参数，把参数放在this后面

Father.call(this);

this.sayWorld = function()

{

alert("子类的sayWorld()!!");

}

var child = new Child();

child.sayHello(); //子类调用父类的方法

child.sayWorld(); //子类调用自己的方法

alert(child.money); //子类从父类继承而来的钱

ⅢDOM编程（重点中的重点）

小节前言：

JS主要完成页面的互动，但是学完入门篇和OOP好像没能体会到如何让页面与用户互动等，JS的DOM编程主要作用就是完成互动，所以十分重要。

1 概述

JS将浏览器、页面文档、页面文档中的元素都用DOM（文档对象模型）表示，编程人员通过访问DOM操作对象（元素）.

2 对象介绍

2.1 Window对象：

（1）表示这个浏览器窗口，全局对象，直接使用。

（2）调用此对象的方法可以省去window.，如window.alert()直接写成alert();

（3）常用方法：

① alert(): 弹出对话框；

② confirm(): 弹出确认框（如跳转新页面的时候给出提示：是否跳转）;

③ setInterval(): 指定浏览器在多长时间就执行某个函数中的内容（循环）;

//指浏览器每隔5000毫秒打印出一个对话框

function aa(){

alert('aa');

}

window.setInterval(aa,5000);

④ setTimeout(): 设置浏览器过多长时间以后去执行某个操作,执行一次；

//指浏览器5000毫秒后打印出一个对话框

function aa(){

alert('aa');

}

window.setTimeout(aa,5000);

⑤ clearInterval(): 取消setInterval方法设置的效果

还有很多，查看文档。

2.2 History对象

作用：该对象包含了客户端访问过的URL信息

2.3Location对象

作用：Location 包含了当前 URL 的信息。

2.4Screen对象

作用：包含客服机显示屏幕的信息，如：屏幕高度，宽度（按像素）

2.5Navigator对象

作用：包含浏览器的各种信息。

2.6Event对象（事件驱动机制）

（1）概述

Js通过事件驱动响应用户的请求，如鼠标点击按钮、文本框等执行的操作称为事件。

一个事件过程有三部分组成：事件源，事件对象，事件处理程序。

事件源：按钮，文本框等HTML元素；

事件对象：鼠标单击，页面加载，鼠标移动等；

事件处理程序：一般是一个函数；

（2）入门实例：点击按钮弹出对话框

<html>

<head>

<title>javascript的变量说明</title>

function myClick() {

alert("我被点击了！");

}

</script>

</head>

<body>

</body>

</html>

说明：案例中，事件源：button；事件对象：鼠标点击button；事件处理函数myClick（）；

通过onclick=myClick()将事件源与函数绑定，当点击元素就触发事件。

Onclick 为HTML元素自身提供，详见W3C。

（3）给HTML元素绑定事件

①直接绑定：

如：<inputtype="button" value="点击我"onclick=" myClick ()"/>

② 获取到元素后，再绑定监听

如：

document.getElementById("but1").onclick= myClick;

</script>

③ DOM 2级事件绑定（IE和非IE不一样）

标准浏览器:

ele.addEventListener(evntType,fnHandler,boolean) 绑定

ele.removeEventListenter(evntType,fnHandler,boolean) 移除绑定

参数说明：事件类型，处理函数，最后一个（不怎么懂）：为真是表示在捕获阶段处理，为假表示在冒泡阶段处理，一般情况就设置false。

IE浏览器：

loEle.attachEvent(eventType,fnHandler)

loEle.detachEvent(eventType,fnHandler);

实例：

<html>

<head>

function test(){

alert("绑定成功test（）处理函数！");

//解除事件绑定

document.getElementById("but1").detachEvent("onclick",test);

}

</script>

</head>

<body>

//事件绑定document.getElementById("but1").attachEvent("onclick",test);

</script>

</body>

</html>

2.7 Document对象（重点）

（1）概述：Document 对象代表整个html文档，因此可以通过Document访问到文档中的各个对象（元素），也可以增删改。

最好的方法将一个HTML页面以树状图在心中形成，Document就是根节点，然后通过父节点访问子节点；

（2）访问页面中的元素（对象）:

① getElementById()方法:得到单个对象（元素）

<html>

<head>

function test(){

var myhref = document.getElementById("a1"); //根据得到HTML元素，打印出text值

window.alert(myhref.innerText);

}

</script>

</head>

<body>

<a id="a1"href="http://www.sohu.com">连接到搜狐</a><br/>

</body>

</html>

注意点：

A, HTML中的id号要唯一，如果不唯一，则只取第一元素。

B, HTML元素的id属性可用name替代，如果name不唯一，也只取第一元素。

C, 最好用name替代id, 如用了id，需要用CSS美化元素，id选择器就会冲突。所以超链接元素最好写为：

<a name="a1" href="http://www.sohu.com">连接到搜狐</a><br/>

② getElementByName()方法：通过元素的name，得到对象的集合。

<html>

<head>

function test(){

var as=document.getElementsByName("a1"); //得到name为a1的集合

//window.alert(as.length);

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

window.alert("name为a1超链接文本值有： "+as[i].innerText);

}

</script>

</head>

<body>

<a name="a1" href="http://www.sohu.com">连接到搜狐</a><br/>

<a name="a1" href="http://www.sina.com">连接到新浪</a><br/>

</body>

</html>

③getElementsByTagName()方法：通过标签名来获取对象集合。

<html>

<head>

function test(){

var as=document.getElementsByTagName("a"); //得到超链接的对象集合

//window.alert(as.length);

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

window.alert("超链接文本值： "+as[i].innerText);

}

</script>

</head>

<body>

<a name="a1" href="http://www.sohu.com">连接到搜狐</a><br/>

<a name="a1" href="http://www.sina.com">连接到新浪</a><br/>

</body>

</html>

④ 通过document.的方式访问（此方法作者不熟，知道这方法就行）

<html>

<head>

function test(){

window.alert("frm表单里面文本框的值： "+document.frm.myText.value);

}

</script>

</head>

<body>

</form>

</body>

</html>

//访问form里面的超链接的值就失败，此处未完待续。。。

（3）增删改HTML元素。

①创建：

实例：在页面中创建超链接，在DIV中添加元素。

<html>

<head>

function test(){ //在页面中创建一个超链接。

varmyElement=document.createElement("a");//a为html元素标名

//给新的元素添加必要的信息。

myElement.href="http://www.sina.com";

myElement.innerText="到新浪";

myElement.style.left="400";

myElement.style.top="500";

myElement.style.position="absolute";

//添加到document.body上面去

document.body.appendChild(myElement);

}

function test1(){ //在DIV1中创建一个文本框。

var myElement=document.createElement("input");

myElement.type="button";

myElement.value="我是button";

myElement.id="id1";

//将元素添加到div

document.getElementById("div1").appendChild(myElement);

}

</script>

<body>

</body>

</html>

② 删除：删除一个元素有前提：必须获得父元素。

实例：删除DIV中的BUTTON。

<html>

<head>

function test1(){ //在DIV1中创建一个文本框。

var myElement=document.createElement("input");

myElement.type="button";

myElement.value="我是button";

myElement.id="id1";

//将元素添加到div

document.getElementById("div1").appendChild(myElement);

}

function test2(){ document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));

}

</script>

<body>

</body>

</html>

说明：删除方法test2里面的语句解释：

document.getElementById("id1").parentNode得到要删除元素的父元素；括号里的document.getElementById("id1")得到要删除的元素；

父元素调用removeChild（要删除对象）方法执行删除。

③ 修改：

实例：点击修改DIV的背景颜色。

<html>

<head>

function test3(){ //修改DIV的属性。

document.getElementById("div1").style.background = "blue";

}

</script>

<body>

</body>

</html>

说明：style属于Style对象，下一行会谈到。

2.8 Style对象

未完，待续。。。。还有form，table,body等常见对象。。。。