首页 > 代码库 > JavaScript笔记及总结
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>
<script type="text/javascript">
alert(“Hello World!”);
</script>
</head>
<body>
</body>
</html>
注意点： JS语句必须放在<script></script>标签里面，标签位置随意。
二，变量
1, 变量定义：
(1) Js无论定义什么类型都用var定义，var也可以不写;
(2) Js中的数据类型是由自身引擎来决定的；
例：
<html>
<head>
<title>javascript的变量说明</title>
<script type="text/javascript">
/*(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>
<script type="text/javascript">
/*不带参数*/
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>
<script type="text/javascript">
function myClick() {
alert("我被点击了！");
}
</script>
</head>
<body>
<input type="button" onclick=myClick() value=http://www.mamicode.com/"点击我"/>
</body>
</html>
说明：案例中，事件源：button；事件对象：鼠标点击button；事件处理函数myClick（）；
通过onclick=myClick()将事件源与函数绑定，当点击元素就触发事件。
Onclick 为HTML元素自身提供，详见W3C。
（3）给HTML元素绑定事件
①直接绑定：
如：<inputtype="button" value="http://www.mamicode.com/点击我"onclick=" myClick ()"/>
② 获取到元素后，再绑定监听
如：
<input type="button" id="but1"value=http://www.mamicode.com/"点击我" />
<script language="javascript"type="text/javascript">
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>
<title></title>
<script language="javascript" type="text/javascript">
function test(){
alert("绑定成功test（）处理函数！");
//解除事件绑定
document.getElementById("but1").detachEvent("onclick",test);
}
</script>
</head>
<body>
<input type="button" id="but1"value=http://www.mamicode.com/"点击我" />
<script language="javascript" type="text/javascript">
//事件绑定document.getElementById("but1").attachEvent("onclick",test);
</script>
</body>
</html>
2.7 Document对象（重点）
（1）概述：Document 对象代表整个html文档，因此可以通过Document访问到文档中的各个对象（元素），也可以增删改。
最好的方法将一个HTML页面以树状图在心中形成，Document就是根节点，然后通过父节点访问子节点；
（2）访问页面中的元素（对象）:
① getElementById()方法:得到单个对象（元素）
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test(){
var myhref = http://www.mamicode.com/document.getElementById("a1"); //根据得到HTML元素，打印出text值
window.alert(myhref.innerText);
}
</script>
</head>
<body>
<a id="a1"href=http://www.mamicode.com/"http://www.sohu.com">连接到搜狐</a><br/>
<input type="button" value=http://www.mamicode.com/"testing"onclick="test()"/>
</body>
</html>
注意点：
A, HTML中的id号要唯一，如果不唯一，则只取第一元素。
B, HTML元素的id属性可用name替代，如果name不唯一，也只取第一元素。
C, 最好用name替代id, 如用了id，需要用CSS美化元素，id选择器就会冲突。所以超链接元素最好写为：
<a name="a1" href=http://www.mamicode.com/"http://www.sohu.com">连接到搜狐</a><br/>
② getElementByName()方法：通过元素的name，得到对象的集合。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
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.mamicode.com/"http://www.sohu.com">连接到搜狐</a><br/>
<a name="a1" href=http://www.mamicode.com/"http://www.sina.com">连接到新浪</a><br/>
<a name="a1" href=http://www.mamicode.com/"http://www.163.com">连接到163</a><br/>
<input type="button" value=http://www.mamicode.com/"testing"onclick="test()"/>
</body>
</html>
③getElementsByTagName()方法：通过标签名来获取对象集合。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
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.mamicode.com/"http://www.sohu.com">连接到搜狐</a><br/>
<a name="a1" href=http://www.mamicode.com/"http://www.sina.com">连接到新浪</a><br/>
<a name="a1" href=http://www.mamicode.com/"http://www.163.com">连接到163</a><br/>
<input type="button" value=http://www.mamicode.com/"testing"onclick="test()"/>
</body>
</html>
④ 通过document.的方式访问（此方法作者不熟，知道这方法就行）
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test(){
window.alert("frm表单里面文本框的值 ： "+document.frm.myText.value);
}
</script>
</head>
<body>
<form name="frm">
<input name="myText" type="text" value=http://www.mamicode.com/"文本框"/>
</form>
<input type="button" value=http://www.mamicode.com/"testing"onclick="test()"/>
</body>
</html>
//访问form里面的超链接的值就失败，此处未完待续。。。
（3） 增删改HTML元素。
①创建：
实例：在页面中创建超链接，在DIV中添加元素。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
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="http://www.mamicode.com/我是button";
myElement.id="id1";
//将元素添加到div
document.getElementById("div1").appendChild(myElement);
}
</script>
<body>
<input type="button" value=http://www.mamicode.com/"动态的创建一个超链接" onclick="test()"/>
<input type="button" value=http://www.mamicode.com/"在DIV1中创建一个文本框" onclick="test1()"/>
<div id="div1" style="width:200px;height:400px; border:1px solid red;">div1</div>
</body>
</html>
② 删除：删除一个元素有前提：必须获得父元素。
实例：删除DIV中的BUTTON。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test1(){ //在DIV1中创建一个文本框。
var myElement=document.createElement("input");
myElement.type="button";
myElement.value="http://www.mamicode.com/我是button";
myElement.id="id1";
//将元素添加到div
document.getElementById("div1").appendChild(myElement);
}
function test2(){ document.getElementById("id1").parentNode.removeChild(document.getElementById("id1"));
}
</script>
<body>
<input type="button" value=http://www.mamicode.com/"在DIV1中创建一个文本框" onclick="test1()"/>
<input type="button" value=http://www.mamicode.com/"删除DIV中的button" onclick="test2()"/>
<div id="div1" style="width:200px;height:400px; border:1px solid red;">div1</div>
</body>
</html>
说明：删除方法test2里面的语句解释：
document.getElementById("id1").parentNode得到要删除元素的父元素； 括号里的document.getElementById("id1")得到要删除的元素；
父元素调用removeChild（要删除对象）方法执行删除。
③ 修改：
实例：点击修改DIV的背景颜色。
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test3(){ //修改DIV的属性。
document.getElementById("div1").style.background = "blue";
}
</script>
<body>
<input type="button" value=http://www.mamicode.com/"修改DIV的颜色" onclick="test3()"/>
<div id="div1" style="width:200px;height:400px; border:1px solid red;">div1</div>
</body>
</html>
说明：style属于Style对象，下一行会谈到。
2.8 Style对象
未完，待续。。。。还有form，table,body等常见对象。。。。
JavaScript笔记及总结