JavaScript学习

表达式的结果类型能够是 string , number, boolean ,对象.. array.
case 后面能够是常量，能够是变量.
若是case后没有break,那么当程序执行某个case块，时，就会一直执行，直到碰到一个break语句，才会跳出switch
defual语句能够放在swith任何位置，当一个条件都匹配不到，就会执行default,直到碰到一个break语句，或者switch执行完毕.
switch 和 if else if 的区别. 若是是针对几个固定条件的判断，则使用switch ,若是范围的判断，咱们使用 if ....else if....

/*请编写一个程序,能够接收一个字符串，好比: a,b,c,d,e,f,g a表示星期一，b表示星期二 … 根据用户的输入显示相依的信息.要求使用

switch 语句完成

//string,number,boolean, 对象,array

//var str=1; //true->1 2 (1,2->true)

//var obj=new Object();

//var obj2=obj;

var arr1=new Array("1","2");

var arr2=arr1;

switch(arr1){

case arr2:

document.write("星期一，猴子穿新衣");

break;

case false:

document.write("星期二，猴子当小二");

break;

default:

document.write("猴子休息...");

break;

}

5、js的循环控制语句

1. for语句

for(初始化变量;循环条件的判断;步长的变化){

//语句

}

while

while(循环条件){

//语句

//步长的变化

}

do..while

do{

//语句

//步长

}while(循环条件)

需求:(为何须要循环语句)

->使用循环控制的语句来处理循环的需求

for 的基本用法

for(初始化; 条件判断; 控制变量变化){

//for循环语句;

}

☞ 1. 初始化条件能够放在for 代码前.

2. 条件判断能够是组合的 (i>10 && i<50 ...)

3. 控制变量变化的部分能够放在 for循环体.

快速入门:

编写一个程序, 能够打印9000000句

"你好，我是刘德华同志!"。请你们想一想怎么作?

代码：

for(var i=0;i<10;i++){

document.write("hello,wrold!"+i+"<br/>");

}

2. while循环控制

基本用法:

while(循环条件){

//循环的代码

}

快速入门案例:

咱们用 while来实现输出10句 hello,world

var i=0;

while(i<10){

document.write("hello,world"+i);

i++;

}

流程图：

3. do..while循环控制

基本用法:

do{

//语句..

//....

}while(循环条件);

说明: 1. 语句部分能够是多条.

2. 循环条件能够是一个组合条件好比: i>10 && i<30

快速入门:

把上面的要求用do...while循环一把.

实际运用一下for来输出一个金字塔

提示：若是未来难题?

思路简化:输出一半的金字塔

<html>

<head>

//输出一半金字塔

* 1->一个*

** 2->2个*

***

****

*****

* 1->1* (1-1)*2+1=1 空格 2 总层数-当前层数=3-1=2

*** 2->3* (2-1)*2+1=3 空格 1 总层数-当前层数=3-2=1

***** 3->5* (3-1)*2+1=5 空格 0 总层数-当前层数=3-3=0

空心分析

* 第一层输出*

* * 中间层: 只输出两边的*,空间输出空格思路---->代码

***** 最后一层输出输出*

菱形

***

*****

***

//n变量表示层数

var n=10;

for(var i=1;i<=n;i++){

//输出空格

for(var k=1;k<=n-i;k++){

document.write(" ");

}

for(var j=1;j<=(i-1)*2+1;j++){

//这里须要思考，何时输出*,何时输出空格

if(i==1 || i==n){

document.write("*");

}else{

//中间层..

if(j==1 || j==(i-1)*2+1){

document.write("*");

}else{

document.write(" ")

}

document.write("<br/>");

}

</script>

</head>

<html>

上课课堂练习:

1.请使用

while

do..while 来改写

输出金字塔的案例:

2.接收一个整数，能够输出对应的菱形. , 再看看能不能输出空心菱形

6、如何调试 js代码

ie中如何调试js, ie 8 中自带调试工具

调式步骤:

先打开开发人员工具->脚本
下断点 –》点击启动调试
刷新页面，进入调试状态

f11->一行一行执行

f10-> 跳过一个函数继续执行(至关于把一个函数当作一个语句执行)

shift+f11->跳出函数

经过逐行调试，咱们能够看到局部变量变化状况.

注意: 取消断点

最原始的方法 ,经过 window.alert(信息); document.write("信息");

如何处理js的bug

js 代码发生错误，如何定位其错误呢?

能够经过程序员的经验来判断
window.alert() 来输出信息
使用firebug 的调式用具 [cy--5,浏览器对象模型BOM]

7、函数

1. 为何须要函数

看一个实际的需求:

输入两个数,再输入一个运算符(+,-,*,/)，获得结果.

<html>

<head>

var num1=window.prompt("请输入一个数");

var num2=window.prompt("请输入2个数");

var oper=window.prompt("输入运算符号");

//把num1, num2转成float

num1=parseFloat(num1);

num2=parseFloat(num2);

var res=0;

switch(oper){

case "+":

res=num1+num2;

break;

case "-":

res=num1-num2;

break;

case "*":

res=num1*num2;

break;

case "/":

res=num1/num2;

break;

default:

window.alert("输入的运算符号错误");

}

window.alert("res="+res);

</script>

</html>

若是咱们在a.html, b.html, c.html咱们都须要作这个计算.

用代码来实现，上面的分析:

写一个js文件,在该文件中封装函数
在须要的地方引入js文件便可.

好比在a.html中使用

代码:

funs.js码

//必然须要传入参数[num1,num2,oper]

function jiSuan(num1,num2,oper){

//把num1, num2转成float

num1=parseFloat(num1);

num2=parseFloat(num2);

var res=0;

switch(oper){

case "+":

res=num1+num2;

break;

case "-":

res=num1-num2;

break;

case "*":

res=num1*num2;

break;

case "/":

res=num1/num2;

break;

default:

window.alert("输入的运算符号错误");

}

//return 语句表示返回? 返回给哪一个!(谁调用就返回给谁)

return res;

}

a.html:

<html>

<head>

var num1=window.prompt("请输入一个数");

var num2=window.prompt("请输入2个数");

var oper=window.prompt("输入运算符号");

window.alert("res="+jiSuan(num1,num2,oper));

</script>

</html>

js函数的分类

2.1 自定义函数

基本用法是:

function 函数名(参数列表){

//语句

//return 语句

}

说明:

函数的规范问题, 能够用字母开头, 不要用数字开头. 能够包括字母/数字/_/$
参数列表能够多个(js支持可变参数)
return 语句能够有，也能够没有. 最多只能有一个return

2.2 系统函数(js语句自己提供)

函数的调用方式

3.1 函数名(参数值); (经过函数名调用)

function test(val){

window.alert(val);

}

test("hello");

3.2 经过函数指针去调用

基本用法

var 变量=函数名; 变量(参数列表);

代码

function test(num1,num2){

return num1+num2;

}

//window.alert(test);

//下面的话，至关于把test的函数指针，赋给了my这个变量.

//所以my也执行test函数的代码

var my=test;

window.alert(my); //直接把这个函数的代码打印出来啦

var res=my(67,90);

window.alert("00"+res);

特别说明:

若是一个函数有返回值，你能够接收后再使用,也能够直接使用.
若是一个函数没有返回值，可是你却使用，则会提示 undefined错误;

js的函数调用过程

4.1 基本调用原则:

一个测试题，加深你们对函数调用机制理解

function abc(num1){

if(num1>3){

abc(--num1);

}

document.writeln(num1);

}

abc(5);

执行的结果是:

3 3 4

分析图是:

4.2函数调用:

使用递归的方法来计算 n!

//非递归

function test1(n){

var res=1;

for(var i=1;i<=n;i++){

res*=i;

}

//递归-》递归的条件

function test2(n){

if(n==1){

return 1;

}else{

return test2(n-1)*n;

}

使用递归的方法计算 f(n)=2*f(n-1)+3 , 已知 f(1)=1;

f(3000)

编写一个函数，接收n,计算其值.

function fun1(n){

if(n==1){

return 1;

}else{

return 2*fun1(n-1)+3;

}

4.3 js使用小结

①函数的参数列表能够是多个

参数列表能够是多个,而且数据类型能够是任意的类型
js函数支持可变参数
在js 中 arguments.length,能够访问全部传入函数的值

代码:

function test4(){

//window.alert(arguments.length);

var res=0;

for(var i=0;i<arguments.length;i++){ //遍历全部传入函数的参数的值

//document.write(arguments[i]+"--");

res+=arguments[i];

}

return res;

}

//需求我但愿test4函数能够计算我给出的数的结果和(可是我给的参数个数不肯定)

document.write(test4(45,89,90,78.8));

经过这段代码，咱们能够得出这样的结论：在同一个做用域(在同一个页面) js函数是不能有重复名字, 同时咱们也知道 js 函数不支持函数的重载.

8、js的数组的介绍

1. 为何须要数组?

问题:

王大爷有6只乌龟，它们的体重分别是3kg,5kg,1kg,

3.4kg,2kg,50kg 。请问这六只乌龟的整体重是少? 平均体重是多少? 请你用如今掌握的技术编一个程序解决

<script>

var weight1=3;

var weight2=5;

....

...

var total=weight1+weight2+...+weight6;

var average=total/6;

</script>

咱们须要这样一种数据类型,它能够帮助咱们管理一组数据.->数组.

2.快速入门的案例: 用数组的方法来完成王大爷养乌龟的问题:

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<script type="text/javascript">

//建立一个数组

var arr1=[3,5,10,34.8,50,10];

//说明，数组的下标是从[0]

//window.alert(typeof arr1);

//经过对象名.constructor 能够显示该对象的构造方法是什么?

//window.alert(arr1.constructor);

//遍历咱们的数组

var total_weight=0;

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

//document.write("<br/>"+arr1[i]);

total_weight+=arr1[i];

}

document.write("整体重是="+total_weight+" 平均体重="+(total_weight/arr1.length).toFixed(2));

// toFixed(2) 能够指定保留小数后几位数字，当前是保留2位

</script>

</html>

3.数组的基本使用

如何建立数组

方法1

var arr=[元素1,元素2......] 其实也能够这样建立空数组 var arr=[];

元素的个数能够任意，元素的类型能够任意，

方法2.

var arr=new Array();

3.2 如何访问数组的数据

指定访问某个元素

数组名[下标号], 下标号默认是从0 开始编号.

遍历数组

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

数组[i];

}

for(var key in 数组){

数组[key];

}

☞ 若是下标越界会怎样?

报 undefine

☞ js的数组是否可以动态的增加

var a=[2,3];

a[2]=56;

alert(a[2]);

说明js的数组能够动态增加.

3.3 数组在内存中怎样存在..

php程序中，经过一个函数传递数组，是值传递，仍是引用传递?

结论是默认是值传递(拷贝.)

js代码中，经过一个函数传递数组，是引用传递

function test2(val){

//val[0] 访问第一个元素.

val[0]=900;

}

arr=[1,2,3];

//调用函数

test2(arr);

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

document.write("*****"+arr[i]);

}

输出是 900*****2****3

画图说明;

经过下面的代码，咱们来讲明js的数组是怎样存在内存的:

function test2(val){

//val[0] 访问第一个元素.

val[0]=900;

}

arr=[1,2,3];【1】

//调用函数

test2(arr);

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

document.write("*****"+arr[i]);

}

分析图:

3.4 数组的经常使用的属性和函数

length 属性能够返回该数组的大小(遍历)
split 函数，能够拆分字符串.

var str="abc hello boy";

var arr=str.split(" ");

document.write(arr+ arr.length);

3.5 数组小结:

①数组可存听任意类型的数据

数组大小没必要事先指定,能够动态增加
数组名能够理解为指向数组首地址的引用.
数组元素默认从0开始编号的.

9、js的二维数组

var arr1=[元素1，元素2..]

若是咱们的元素又是一个数组，则这个一维数组就成了二维数组.

1.建立二维数组

举例

var arr=[[1,4,90],[4,'hello']];

//如何遍历咱们的二维数组

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

var ele=arr[i];

//window.alert(ele.constructor);

//对ele进行遍历

for(var j=0;j<ele.length;j++){

window.alert(ele[j]);

}

2.二维数组的理解和指定访问某个变量

测试题:

0 0 0 0 0 0

0 0 1 0 0 0

0 2 0 3 0 0

0 0 0 0 0 0

//定义二维数组

var arr2=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];

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

var size=arr2[i].length;

for(var j=0;j<size;j++){

document.write(arr2[i][j]+" ");

}

document.write("<br/>");

}

var arr=new Array();

arr[0][0]=1;

思考题:

请编写一个函数，能够接收一个数组，而后要求把这个二维数组转置:

,所谓转置就是行列数据互换

课堂练习

function reverse(arr1){

//...

}

js的排序

咱们这里只介绍一下冒泡排序法:[其它方法能够参考 php 的排序章节]

代码:

<html>

<head>

var arr=[0,-1,90,-18,900,90,78];

var flag=false; //定义标志位

var temp=0;

for(var i=0;i<arr.length-1;i++)

{

//定小循环

for(var j=0;j<arr.length-1-i;j++){

if(arr[j]>arr[j+1]){

//交换

temp=arr[j];

arr[j]=arr[j+1];

arr[j+1]=temp;

flag=true;

}

if(flag){

flag = false;

}else{

break;

}

//输出数组

document.write(arr);

</script>

</html>

11、js的查找

1.顺序查找

一个一个的比较，若是是则查找到.

var arr=[3,5,90,12,-23];

var findVal=90;

var flag=false;

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

if(arr[i]= = findVal){

document.write("找到了这个数下标是"+i);

flag=true;

}

if(!flag){

document.write("一个都没有找到");

}

2.二分查找

面试题: 必定掌握!

//二分查找[递归]

//二分查找要保证咱们的数组是一个有序的.

//思想是

//首先把数组的中间这个数找出，而后和你要查询的数比较

//① 你要查询的数比中间的数大. 则说明咱们应当该数组的右边[后边]查询

//② 你要查询的数比中间的数小 .则说明咱们应当该数组的左边[前边]查询

//③ 你要查询的数等于中间的数, 说明找到

var arr=[1,90,100,123,4000];

//该函数的参数列表为：须要查找的值、被查找的数组、数组的起始下标，结束下标

function binarySearch(findVal,arr,leftIndex,rightIndex){

//退出条件，若是左边下标 > 右边下标

if(rightIndex<leftIndex){

document.write("查询没有结果");

return;

}

//代码:

//找到中间数的下标

var midIndex=Math.floor((leftIndex+rightIndex)/2);

if(arr[midIndex]<findVal){

//在右边进行查找

binarySearch(findVal,arr,midIndex+1,rightIndex);

}else if(arr[midIndex]>findVal){

//在左边进行查找

binarySearch(findVal,arr,leftIndex,midIndex-1);

}else{

//若是找到，则输出该数下标，并结束函数

document.write("找到下标是"+midIndex);

return;

}

//调用的格式

binarySearch(100,arr,0,arr.length-1);

12、面向对象

1.js的面对对象编程的介绍

js是一种支持面向对象编程的脚本语句, 它有继承，封装，多态的特色

基于对象编程和面向对象编程叫法区分

js 中咱们能够认为这个叫法一致.

课程中基于对象= =面向对象类==原型对象

2.面向对象编程的引入

一个问题?

张老太养了两只猫猫:一只名字叫小白,今年3岁,白色。

还有一只叫小花,今年10岁,花色。请编写一个程序，

当用户输入小猫的名字时，就显示该猫的名字，年龄，

颜色。若是用户输入的小猫名错误，则显示张老太没

有这只猫猫。

3.js面向对象编程的快速入门

<html>

<head>

//定义了一个猫类

function Cat(){

}

//建立一只猫 [js对象的属性能够动态增长]

var cat1=new Cat(); //cat1就是一个对象实例

cat1.name="小白"; //

cat1.age=3;

cat1.color="白色"

document.write(cat1.name+"--"+cat1.age+"--"+cat1.color);

//特别说明

// var cat1=new Cat(); //当作类（原型对象使用），这时cat1就是一个对象（实例）

// Cat(); //当作函数

</script>

</html>

对象公开属性的访问方式有

对象名.属性名;

对象名['属性名'];

4.js中自定义类(原型对象)的五种方法

4.1工厂方法

var obj=new Object();

obj.属性="aa";

obj.show=function (){

};

4.2经过构造函数来定义类(最多)

function 类名/函数名(){

}

var p=new 类名/函数名(); //

函数名();

4.3经过prototype 来定义

4.4 构造函数及原型混合方式

4.5 动态原型方式

5.动态的添加方法和属性.

构造函数和 prototype混合
动态建立对象模式

6.js中一切都是对象

基本对象/系统内置对象(Number,String,Boolean..)

var i=0;

window.alert(i.constructor);

function Person(){

}

var p1=new Person();

window.alert(p1.constructor);

window.alert(Person.constructor);

window.alert(Function.constructor);

可用经过 instanceof 来判断某个对象实例是否是某个类的对象实例,

案例:

//如何判断一个对象实例是否是某个类(原型对象)

if(p1 instanceof Dog){

window.alert("p1是Person一个对象实例");

}else{

window.alert("p1是Dog一个对象实例");

}

7.js的对象在内存中是怎样存在?

var a=new Person();

a.age=10;

a.name="小明";

var b=a;

8.js的对象回收机制!!!

在js中维护一张对象对用表:

GC 如何去判断某个对象是垃圾对象.

当对象的地址被引用的次数，变成0, 则gc 就会认为该对象是垃圾，就会回收.

js中还提供了一种主动销毁对象属性的方法

基本语法是

delete 对象名.属性名; // 不能直接 delete 对象;

原理能够主动的销毁某个对象的属性

9.this

9.1提出问题?

咱们在编程中，可能须要当咱们建立一个对象后，这个对象就自动的有某些属性，怎么?

能够这样作:

function Person(){

//下面这句话表示，每建立一个Person实例,实例就会自动有一个属性

//name,而且是公开

this.name="小童";

}

若是你但愿name是建立对象实例的时候指定，能够经过参数传入:

function Person(name){

//下面这句话表示，每建立一个Person实例,实例就会自动有一个属性

//name,而且是公开

this.name=name;

}

使用的时候:

$p4=new Person("顺平");

$p4.name;

9.2深刻认识this的含义

//下面的代码讲解私有属性的怎样访问

function Person(){

var name="abc"; //私有的，只能在内部使用

var age=900; //私有的，只能在内部使用

//感觉(至关于你是经过内部函数来访问私有的变量.)

//如何理解: 说有一个属性 show 由于前面有this

//说明 show属性是公开. 该属性是指向一个函数地址属性.

//则经过 show去调用该函数.

this.show=function(){ //若是你必定要访问私有属性，则须要定义一个公开的方法（特权方法）

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

}

function show2(){//这是Person类的一个私有方法，只能在Person类的内部使用

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

}

var p1=new Person();

//window.alert(p1.name+" "+p1.age);//错误

p1.show();

p1.show2(); //这里会报错！

9.3对this的再认识:

<html>

<head>

//****案例以下****

function test1(){

alert(this.v);

}

var v=190;

test1(); //输出什么 <==> window.test1();

window.test1();

</script>

</html>

this 只能在类定义的内部使用:

//说明this 只能在类定义的内部使用

function Dog(){

this.name="小明";

}

var dog1=new Dog();

window.alert(this.name); //报空, 由于这样使用，至关于去访问window对象的name属性，可是你没有写.

9.5 ☞ 补充讲解一个 var 的知识点:(还有说..)

//表示全局变量

var t=90;

function test(){

t=890;

}

test();

window.alert(t);

说明: var 变量：表示该变量是全局的, 若是你其余函数中，使用变量是，前面没有带 var , 则表示要使用全局变量. 若是你在函数中使用变量时候，带了 var 则说明你要使用全新的变量.

10.js面向对象的成员函数

若是咱们但愿某个对象建立后，自动有方法使用，能够在定义类的时候，直接指定成员函数.(细节...)

说明：函数调用，只看函数名称、不看函数的参数

10.1第一种方法：动态的给某个对象指定函数

function Person(name,age){

this.name=name;

this.age=age;

}

//第一种方法,动态添加

function speak(){

document.write("我是"+this.name);

}

//建立一个对象实例

var p1=new Person("大黄",90);

p1.fun1=speak; //至关于动态的给p1对象分配一个fun1属性(函数);

你能够理解， fun1 是 speak函数别名

window.alert(p1.fun1);

p1.fun1();

speak(); //window

第一种方法还有一种体现形式

//建立一个对象实例

var p1=new Person("大黄",90);

p1.fun1=function speak(){

document.write("我是"+this.name);

}; //至关于动态的给p1对象分配一个fun1属性(函数);

10.2第二种方法: 让全部的Person对象实例都有某个成员函数

//给全部对象分配函数

function Person(name,age){

this.name=name;

this.age=age;

this.speak=function (){

document.write(this.name+"hello");

}

var p1=new Person("小孩",9);

p1.speak();

var p2=new Person("大明",30);

p2.speak();

☞ 关于给对象指定成员函数说明:

若是添加的内部函数,该函数也称为特权函数, 所谓特权指的是能够访问对象的私有属性.

若是添加的是外部函数(给某个对象指定的函数),则这样指定函数，只能访问对象的公开属性，不能访问私有属性.

function Person(name,age,salary){

this.name=name;//公开

this.age=age;//公开

var salary=salary;//私有

}

var p1=new Person("宋江",34,1000);

function showInfo(){

document.write(this.name+this.age+salary);//这里salary是私有

}

p1.showInfo=showInfo;

p1.showInfo();

一个类中能够有公开的函数

this.属性=funciton (){};

10.3一个类中也能够有私有的函数

代码:

function Person(){

this.name="abc";

var salary=900;

this.fun1=function (){

//代码

sayHello();

}

this.fun2=function(){

sayHello();

}

this.fun3=function(){

sayHello();

}

function sayHello(){

document.write("hello,资源打开"+this.name+" "+salary);

}

var p1=new Person();

p1.fun2();

小结: 经过代码咱们能够看出.私有函数能够被该类的其它方法(公开)调用，同时私有函数能够去访问该对象的公开或者私有的属性.

10.4第三种方式给全部的对象实例添加方法(原型法)[推荐..]

function Dog(){

/* this.shout=function (){

document.write("小狗汪汪叫");

}*/

}

//原型法

Dog.prototype.shout=function (){

document.write("小狗叫");

}

var dog1=new Dog();

dog1.shout();

对咱们原型法的一个实际运用:

请思考给 js 的 Array 对象扩展一个find(val) 方法

，当一个Array对象调用该方法的时候，若是能找

到val则返回其下标，不然返回-1

Array.prototype.find=function(val){

//顺序查找

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

if(val==this[i]){

flag=true;

return i;

}

return -1;

}

var arr=[4,590,-1,890];

window.alert(arr.find(890));

10.5自定类的工厂方法(了解便可)

当你编写 js 代码时，当你需要一个对象时,能够经过new Object 来建立一个对象，而后再动态的给该对象添加属性和方法.

//工厂法建立对象

var obj=new Object();

obj.name="大明";

obj.show=function (val){

window.alert("ok"+val);

}

obj.show("hello");

10.6课堂小练习

Number类

var i=90;

var res=i.add(78).add(90).add(900).add(9000)

window.alert(res);

10.7 成员函数小结

***成员函数的细节？

成员函数的参数能够是多个：
例如：
function 函数名(参数1 、参数2 、…….)
成员函数能够有返回值，也能够没有返回值，可是有的话，最多只能有一个返回值。
js 中不支持函数的重载，具体案例以下：
.         function Person(){
        }
        var person = new Person();
        window.alert(person.constructor);

        function test(a,b)
        {
            window.alert("hello world");
        }
        function test(a)
        {
            window.alert(a);
        }
        function test(a,b)
        {
            window.alert(a + " " +ｂ);
        }
        //test(23)
            window.test(3,"hello");
结论：js在调用函数的时候，是根据函数名来调用的，若是有多个函数的函数名相同，则默认调用最后那个函数。（由于后面的函数会把前面函数名相同的函数给覆盖啦）
js 支持建立动态函数，这个用的比较少，了解便可！
直接定义一个函数或者变量，实际上这些函数和变量就是全局函数和全局变量（本质上他们是属于 window 对象的）

11.js的闭包

11.1js的变量做用域

代码:

<html>

<head>

var a=90; //定义一个全局变量

function test(){

a=123; //使用外层的 a变量

}

test();

document.write("a="+a);*/

/* var a=90; //定义一个全局变量

function test(){

var a=123; //定义一个局部变量

}

test();

document.write("a="+a);*/

/* a=90; //没有var ,就会试着去找(父函数的 a)，若是找不到就建立 a

function test(){

a=123; //没有var ,就会试着去找(父函数/外层的 a)，若是找不到就建立 a

}

test();

document.write("a="+a);*/

//测试一下，看看你们理解否?

a=20;

function test1(){

var a=700;

function test2(){

a=890;//若是没 var ,则会到父函数去，找a,找到就使用父函数的a,不然建立

}

return test2;

}

var var1=test1();

var1();

document.write(a);

</script>

</html>

var a=10;

function test(){

b=90;

}

window.alert(b);

</script>

☞

js容许函数中有函数
若是使用变量，若是该变量有var ,则表示建立全新的变量 ,若是该变量是直接写在页面，则咱们认为是全局变量，不然是局部变量, 若是没有带var关键字, 则js引擎会这样处理: 首先到父函数去找有没有该变量，若是有，则使用，若是没有则建立之.

function f1(){

　　　　//var n=999;//局部变量

n=999;//全局变量

　　}

f1();

alert(n);

上面的代码说明，若是在一个函数中，直接使用好比
n=900; 至关于建立了一个全局变量.

11.2js中如何解决从外部读取内部函数的局部变量->闭包

function test1(){

var n=90;//布局变量

}

alert(n) //错误

解决方法->闭包

function test1(){

var n=90;

//test1函数的内部函数,能够访问 var n

funciton test2(){

window.alert(n++);

}

//把内部函数test2返回外部调用者

return test2;

}

var res=test1();//调用test1 ,返回 test2函数

这时res就是test1内部函数 test2别名

res();

闭包: 你能够这样理解 : test2()实现闭包

11.3闭包的主要用处是

把局部变量保存在内存中，不让垃圾回收机制，将其回收.
让外部去访问内部函数的局部变量.

12.js中函数名不能重复

在不一样文件中，能够有相同的函数名.
在不一样父函数(类), 即便在同一个页面，能够有相同函数，好比下面代码

abc.html

function test(){}

functino test2(){

function sayhello(){

}

function test3(){

function sayhello(){

}

abc2.html

function test(){}

13.面向对象做业评讲

① 设计计算机类,要求以下:

属性：品牌,颜色,cpu型号,内存容量,硬盘大小,价格,工做状态

方法: 打开,关闭,休眠,建立一个计算机对象，调用打开，关闭方法

<html>

<head>

/*设计计算机类,要求以下:

属性：品牌,颜色,cpu型号,内存容量,硬盘大小,价格,工做状态

方法: 打开,关闭,休眠,建立一个计算机对象，调用打开，关闭方法*、

//定义计算机类

function Computer(){

this.brand;

this.color;

this.cpu;

this.memeorysize;

this.disksize;

this.price;

this.state;

this.open=function open(){

document.write("计算机打开..");

}

this.close=function close(){

document.write("关闭计算机...");

}

this.sleep=function sleep(){

document.write("休眠中....");

}

var computer=new Computer();

computer.open();

computer.sleep();

computer.close();

</script>

</html>

用面向对象的思想，编写小游戏.

14.js面向对象的再说明

对于比较简单的对象，咱们也能够这样定义

var dog={name: "小明"};

window.alert(dog['name']);

var dog1={name:'小红',sayHello:function(a,b){window.alert(a+b);}};

dog1.sayHello(45,55);

在某些状况下，咱们须要去改变某个函数的this指向，咱们能够经过 call/apply 来实现

基本用法:

函数名.call(对象); // 这时函数的this就是对象

for ... in的另外用法

能够对数组遍历

能够对象遍历

//json

var dog={name:"xm",age:34,color:"red"};

//遍历对象

/*for(var key in dog){

window.alert(dog[key]);

}*/

//你的浏览器window对象支持的属性有那些

for(var key in window){

document.write("<br/>"+key+"="+window[key]);

}

能够经过delete 对象名.属性来手动的删除某个属性值.

15.js的面向对象的三大特征

15.1封装性

所谓封装，就是把咱们抽象出的属性和对属性的操做写到类的定义中，称为封装.

js 中实现封装主要有两种封装( 公开，私有)

function Person(name,sal){

this.name=name; //公开属性

var sal=sal;//私有属性

this.show=function(){ //公开方法（特权方法），若是咱们但愿操做私有属性，则能够用公开方法实现

window.alert(this.name+" "+sal);

}

show2(){ //把函数私有化.，能够访问对象的属性

window.alert("你好"+this.name+" "+sal)

}

var p1= new Person('张三',3000);

window.alert(p1.name); //在类外能够直接访问公开的属性

p1.show();//这个能够调用

p1.show2();//这个不能够调用，由于私有方法不能够在类的外部被调用

15.2经过构造函数添加成员方法和经过原型法添加成员方法的区别

经过原型法分配的函数是全部对象共享的.
经过原型法分配的属性是独立.(若是你不修改属性，他们是共享)
建议，若是咱们但愿全部的对象使用同一一个函数，最好使用原型法添加函数，这样比较节省内存.
经过prototype 能够给全部的对象添加方法，可是在这种方式下，不能访问类的私有变量和方法

//构造函数法

function Dog(){

this.shout=function(){

}

//原型法

Dog.prototype.shout=function (){

window.alert("小狗尖叫"+this.name);

}

//经过原型也能够给每一个对象，分配属性

Dog.prototype.color="red";

var dog1=new Dog("aa");

var dog2=new Dog("bb");

if(dog1.shout==dog2.shout){

window.alert("dog1.shout==dog2.shout");

}

dog1.color="黑色";

window.alert(dog1.color+" "+dog2.color);

请你们看一个题:

function Person()

{

this.name="abc";

var age = 90;

this.abc=function()

{

window.alert("abc()");

}

Person.prototype.fun1=function()

{

window.alert(this.name); //能够访问

this.abc();

window.alert(age); //不能访问私有属性,会报错

}

var p1 = new Person();

p1.fun1();

结论是类.prototype.函数=function (){};

称为后置绑定.

15.3js面相对象的继承

看一段代码->问题是什么?

①对象冒充

代码以下:

<html>

<head>

//中学生

/* function MidStu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

this.pay=function(fee){

window.alert("你的学费是"+fee*0.8);

}

//小学生

function Pupil(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

this.pay=function(fee){

window.alert("你的学费是"+fee*0.5);

}

}*/

//代码的复用性不高.

//修改以下:

//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu

function Stu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

//2.经过对象冒充来继承父类的属性的方法

function MidStu(name,age){

this.stu=Stu; //这里至关于把Stu构造函数(类)赋值给咱们的属性this.stu

//调用this.stu方法

this.stu(name,age); //这个表示初始化MidStu,至关于执行Stu(name,age),这句话必须有，不然没法实现集成的效果

//能够写MidStu本身的方法.

this.pay=function(fee){

window.alert("你的学费是"+fee*0.8);

}

function Pupil(name,age){

this.stu=Stu;//这里只是把码继承.

//初始化一把

this.stu(name,age);

//能够写Pupil本身的方法.

this.pay=function(fee){

window.alert("你的学费是"+fee*0.5);

}

//测试

var midstu=new MidStu("贾宝玉",15);

var pupil=new Pupil("贾环",12);

midstu.show();

midstu.pay(100);

pupil.show();

pupil.pay(100);

</script>

</html>

②经过call 或者apply来实现

<html>

<head>

//中学生

/* function MidStu(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

this.pay=function(fee){

window.alert("你的学费是"+fee*0.8);

}

//小学生

function Pupil(name,age){

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

this.pay=function(fee){

window.alert("你的学费是"+fee*0.5);

}

}*/

//代码的复用性不高.

//修改以下:

//1. 把子类中共有的属性和方法抽取出，定义一个父类Stu

function Stu(name,age){

window.alert("确实被调用.");

this.name=name;

this.age=age;

this.show=function(){

window.alert(this.name+"年龄是="+this.age);

}

//2.经过对象冒充来继承父类的属性的方法

function MidStu(name,age){

//这里这样理解: 经过call修改了Stu构造函数的this指向,

//让它指向了调用者自己.

Stu.call(this,name,age);

//若是用apply实现，则能够

//Stu.apply(this,[name,age]); //说明传入的参数是数组方式

//能够写MidStu本身的方法.

this.pay=function(fee){

window.alert("你的学费是"+fee*0.8);

}

function Pupil(name,age){

Stu.call(this,name,age);//当咱们建立Pupil对象实例,Stu的构造函数会被执行,当执行后，咱们Pupil对象就获取从 Stu封装的属性和方法

//能够写Pupil本身的方法.

this.pay=function(fee){

window.alert("你的学费是"+fee*0.5);

}

//测试

var midstu=new MidStu("孙悟空",15);

var pupil=new Pupil("猪八戒",12);

midstu.show();

midstu.pay(100);

pupil.show();

pupil.pay(100);

</script>

</html>

js的继承小结

js对象能够经过对象冒充，实现多重继承
Object 类是全部js类的基类

15.4多态的特性

js的函数的重载文件

js默认不支持重载，咱们能够经过，判断参数的个数来实现重载

<html>

<head>

//*****************说明js不支持重载*****

/*function Person(){

this.test1=function (a,b){

window.alert('function (a,b)');

}

this.test1=function (a){

window.alert('function (a)');

}

var p1=new Person();

//js中不支持重载.

p1.test1("a","b");

p1.test1("a");*/

//js怎么实现重载.经过判断参数的个数来实现重载

function Person(){

this.test1=function (){

if(arguments.length==1){

this.show1(arguments[0]);

}else if(arguments.length==2){

this.show2(arguments[0],arguments[1]);

}else if(arguments.length==3){

this.show3(arguments[0],arguments[1],arguments[2]);

}

this.show1=function(a){

window.alert("show1()被调用"+a);

}

this.show2=function(a,b){

window.alert("show2()被调用"+"--"+a+"--"+b);

}

function show3(a,b,c){

window.alert("show3()被调用");

}

var p1=new Person();

//js中不支持重载.

p1.test1("a","b");

p1.test1("a");

</script>

</html>

覆盖

当子类有一个方法和父类同样,则咱们称子类的方法覆盖了父类的方法。

//父类

function Stu(){

this.show=function(){

window.alert("stu show");

}

//子类

function MidStu(){

this.stu=Stu;

this.stu();

//必定要放在类定义的后面

this.show=function(){

window.alert("midstu show");

}

var midstu=new MidStu();

midstu.show();

☞ 要实现覆盖，须要把子类的方法，防止类定义的后面.

----------------------------------------------------------------------------------------------

多态的基本概念

所谓多态，咱们能够简单的理解就是一个引用类型 (对象/变量) 在不一样状况下的多种状态
js 自己是无态,js天生就支持多态.

js的多态的一个案例:

//人类

function Person(){

this.test1=function (){

window.alert("Person test1");

}

//猫类

function Cat(){

this.test1=function(){

window.alert("Cat test1()");

}

var v=new Person();

var p=v //防止后面v被猫类替代后，v表明person这个类被垃圾回收机制回收。

v.test1();

//v的类型

if(v instanceof Person){

window.alert("23 行 v变量是人类");

}

v=new Cat();

v.test1();

if(v instanceof Cat){

window.alert("30 行 v变量是猫类");

}//在这里，v是猫类，而同时，其之前表明的人类被回收机制给收走了。若是要让其恢复，只要按上面的红色加背景文字处理便可，定义var p=v

</script>

js的多态的经典案例

// Master类

function Master(name){

this.nam=name;

//方法[给动物喂食物]

}

//原型法添加成员函数

Master.prototype.feed=function (animal,food){

window.alert("给"+animal.name+" 喂"+ food.name);

}

function Food(name){

this.name=name;

}

//鱼类

function Fish(name){

this.food=Food;

this.food(name);

}

//骨头

function Bone(name){

this.food=Food;

this.food(name);

}

function Peach(name){

this.food=Food;

this.food(name);

}

//动物类

function Animal(name){

this.name=name;

}

//猫猫

function Cat(name){

this.animal=Animal;

this.animal(name);

}

//狗狗

function Dog(name){

this.animal=Animal;

this.animal(name);

}

//猴子

function Monkey(name){

this.animal=Animal;

this.animal(name);

}

var cat=new Cat("大花猫");

var fish=new Fish("黄花鱼");

var dog=new Dog("大花狗");

var bone=new Bone("猪骨头");

//建立一个主人

var master=new Master("韩顺平");

master.feed(dog,bone);

//扩展

var monkey=new Monkey("金丝猴");

var peach=new Peach("仙桃");

master.feed(monkey,peach);

</script>

总结：多态有利于代码的维护和扩展，这里咱们能够考虑，若是食物加入

桃子，动物加入猴子，能够看到，Master的feed函数不须要的变化。

十3、js的内部类

概述： js的设计者，为了让咱们开发方便，事先提供了一下内部类(Array,Number,String,Date,Math....) , 咱们能够直接使用。

再次说明：js的类又叫原型对象

1.js内部类的分类以下图：

安装使用内部类的属性和方法的不一样，咱们主要分红两种,

动态类先建立一个对象实例，而后再使用其属性和方法

Array, String ..

var arr=new Array(); //var arr=[1,45,90];

调用方法是 arr.push()...;

调用属性 arr.length;

静态类经过类名，就可使用其属性和方法(Math)

Math.random(); //php 静态方法类名::静态方法名

两种调用方式都有

Number类

var num=new Number("12.3456");

//要四舍五入

alert(num.toFixed(2));

alert(Number.MIN_VALUE);

</script>

2.Math类

Math是静态类，提供了经常使用的数学函数和常数,我这给你们介绍几个最经常使用的函数，其它的请你们参考javascript帮助文档。

abs(x) 返回数的绝对值

ceil(x) 对一个数进行上舍入

floor(x) 对一个数进行下舍入

max(x,y) 求x,y中较大的数

min(x,y) 求x,y中较小的数

round(x) 对 x进行四舍五入

random() 一个大于0小于1的16位小数位的数字（含0可是不含1）

var a=90.1;

//ceil 向上取整

// window.alert(Math.ceil(a)); //91

//floor 向下取整

// window.alert(Math.floor(45.99)); //45

window.alert(Math.round(Math.random()*100)); //返回在[0,100) 之间的随机数

</script>

3.Date类（动态类）

Date() 返回当前日期和时间

getDate() 从Date对象返回一个月中的某一天

getDay() 从Date对象返回一周中的某一天

getMonth() 从Date对象返回月份

getYear() 从Date对象返回年

getHours() 从Date对象返回小时数

getMinutes() 从Date对象返回分钟

getSeconds() 从Date对象返回秒数

toLocaleString()

//获取当前日期

var mydate=new Date();

window.alert(mydate.toLocaleString()); //js dom

window.alert(mydate.getMonth()+1);

</script>

4.String类（动态类）

indexOf() 返回某个字符串值在该字符串中首次出现的位置，找不到就返回-1

split() 把字符串分割为字符串数组

substr() 提取取从start下标开始的指定数目的字符

substring() 提取字符串中介于两个指定下标之间的子串（包头不包尾）

charAt() 返回指定位置的字符

length 属性,能够获得字符串的长度

toString() js中全部内部对象的成员方法,做用是将对象中的数据转成某个格式的字符串，咱们在实际运用中在详细介绍

match()/replace()/search() 用的不少，可是涉及到正则表达式，这三个函数放在正则表达式章节中介绍

var txt="h韩llo中国";

//document.write(txt.indexOf("worldr"));

// var arr=txt.split("");

// document.write(arr);

//substri(start,length) 从start开始取，取出lenght个字符,若是不够取，则尽可能的取

// var sub=txt.substr(3,3);

//stringObject.substring(start,stop) 从start开始取，取到stop-1

//var sub=txt.substring(0,2);

//charAt(index) 表示取出第几个字符

//var sub=txt.charAt(3);

//window.alert(sub);

//练习输入文件全路径获取文件名和后缀?

var file_path="c:/abc/abc北京/helo/顺平.exe";

//思路

var last_index=file_path.lastIndexOf("/");

window.alert(file_path.substr(last_index+1));

</script>

会遇到问题，是由于你基础没有扎实。

5.Array类（动态类）

Array提供了对数组的操做，使用Array对象能够轻松的建立数组，

并对数组进行删除、排序和合并等操做。

concat() 链接两个或更多的数组，并返回结果。

sort() 对数组的元素进行排序

toString() 把数组转换为字符串，并返回结果

pop() 删除并返回数组的最后一个元素

push() 向数组的末尾添加一个或更多元素,并返回新的长度

splice() 方法用于插入、删除或替换数组的元素

length 属性

//数组的建立

var arr=new Array();

//静态设置数据

arr[0]=23;

arr[1]="顺平";

arr[2]=567;

//动态的添加

/* for(var i=0;i<3;i++){

arr[i]=window.prompt("请输入第"+(i+1)+"数");

}*/

//如何删除数组的某个元素

//删除第2个元素->下标为1

//arr.splice(1,1); //第一个1 表示删除第几个元素, 第二个1表示删除1个

//修改第二个 "顺平"-> "小明"

//arr.splice(1,1,"小明");//更新

//把一个新的数据"北京"，添加到第1元素后面

//arr.splice(1,0,"北京");

//遍历数组

document.write("***********<br/>");

for(var key in arr){

document.write(arr[key]+"<br/>");

}

</script>

上面这种遍历的经典案例是查看window下的全部函数：

for(var key in window)

document.write("<br/>"+key)

</script>

这里咱们须要注意: splice() 函数，他把删除，修改，添加均可以完成,根据传入的参数的个数和值，不一样来决定进行怎样的操做.

深刻探讨：对象数组. //用的挺多.

[坦克大战 ]

//**********对象数组的使用*************

function Person(name,age){

this.name=name;

this.age=age;

}

/* var p1=new Person("曹操",45);

var p2=new Person("刘备",40);

var p3=new Person("孙权",30);

var arr=new Array();

p2.name="赵云";

arr[0]=p1;

arr[1]=p2;

arr[2]=p2;

//遍历

for(var key in arr){

var p=arr[key];

window.alert(p.name);

}*/

结果显示是：曹操赵云赵云

原理图：

另外一个例子：

var arr=new Array();

function addHero(){

for(var i=0;i<3;i++){

var name=window.prompt("请输入英雄的名字");

var age=window.prompt("请输入英雄的年龄");

var p=new Person("","");

p.name=name;

p.age=age;

arr[i]=p;

}

addHero();

//遍历数组

for(var key in arr){

var p=arr[key];

document.write("<br/>"+p.name);

}

☞ js的函数间传递数据时候，按照什么来传递

基本数据类型 number boolean string 是按照值传递

数组和对象是引用传递.

案例以下：

php比较一下: 传递数组的时候有一点区别 php默认是值传递,对象是引用传递.

总结就是，在php中，只有对象是引用传递，其余的（number boolean string、数组）都是值传递。

6.Boolean类

了解便可

7.Number类（动态类）

案例 number1.htm

1. 请输出23的二进制字符串和16进制的字符串

2. 计算7/3的结果，并保留到小数点后两位(四舍五入)

/*案例 number1.htm

1. 请输出23的二进制字符串和16进制的字符串

2. 计算7/3的结果，并保留到小数点后两位(四舍五入) */

var n1=23;//<==> var n1=new Number(23);

window.alert(typeof(n1));

window.alert(n1.toString(10));

//toFixed();把一个数四舍五入到小数点的某一个位置.

var n=7/3;

window.alert(n.toFixed(4));

十4、系统函数

说 js的函数分为三个大的部分

① 自定义函数 (程序员本身根据编程的须要写的函数 [对象的成员函数，普通函数])

内部类中的函数
系统函数 (全局函数),能够本身使用.

具体介绍

encodeURI --编码

decodeURI --解码

function sendInfo(){

var name=encodeURI("韩顺平 abcd");

window.location.href="getInfo.php?address=beijing&name="+name;

}

//js 去请求一个php页面

window.location.href=""

看看为何须要

从案例演示咱们看到,在使用js提交数据时，若是浏览器版本低，就可能出现乱码，或者错误状况.

eval函数的使用

该函数能够把一个字符串当作脚原本执行. 当根据输入的状况显示相应内容时候，能够用eval函数。

// var str="window.alert('hello')";

// eval(str);

function test1(val){

window.alert("我是test1函数"+ val);

}

function test2(val){

window.alert("我是test2函数"+val);

}

var input=window.prompt("请输入你但愿执行哪一个函数名");

var val=window.prompt("请输入值");

var str=input+"('"+val+"')";

eval(str);

URL：Uniform Resource Locator，统一资源定位符；

URI：Universal Resource Identifier，通用资源标识符。

URI含义更普遍，URL是URI的一个部分，一般指网址

在必定程度上，你能够认为URI =URL

http://www.sohu.com:80/shareinfo/image1.jpg

网页提交信息的三种方法：

1.经过表单[get/post]；

2.经过超连接<a href="getInfo.php?name=zs"></a>；

3.经过js来提交数据；

不管上面三种哪种提交，若是是用js来接受，那么其拿到的都是字符串。要讲字符串转成相应的类型，在进行处理。

十5、js的事件

概述 : js是采用事件驱动的机制来响应用户操做的，也就是说当用户对某个html元素进行某个操做时，会产生一个事件,该事件会驱动某些函数来处理,原理图：

Js最好是看手册，可是参考手册js事件里面的属性并不能进一步点进去深刻了解。因此咱们要经过dom event事件进行了解。该方法里面的属性能够点击后进一步了解。

快速入门案例:

//事件处理函数

function test1(event){

window.alert("ok");

window.alert(event.clientX);

}

</script>

这里咱们有几个新的名词，须要理解:

事件源: 就是产生事件的地方(html元素)

事件: 点击/鼠标移动/键按下..

事件对象: 当某个事件发生时，可能会产生一个事件对象，这个事件对象会封装该事件的信息(好比点击的x,y. keycode),传递给事件处理程序

事件处理程序: 响应用户的事件.

快速入门：

function show_coords(event) {

x=event.clientX;

y=event.clientY;

alert(event+"X coords: " + x + ", Y coords: " + y)

}

</script>

</head>

<p>Click in the document. An alert box will alert the x and y coordinates of the mouse pointer.</p>

</body>

</html>

1.事件的分类

鼠标事件
键盘事件

onkeydown onkeyup onkeypress

我想知道用户按下什么键!

<html> <head>
<script type="text/javascript">

    function showkey(event){
        if(event.keyCode==65){
            window.alert("a被按下");
        }else if(event.keyCode==66){
            window.alert("b被按下");
        }
    }
</script>
</head>

<body onkeydown="showkey(event)">

</body>
</html>
html事件
其它事件

案例：经过红色和蓝色按钮切换红色和蓝色。

    function mychange(val){
        var div1=document.getElementById("div1");
        if(val.value=='red'){
            //经过js获取div这个对象

            //window.alert(div1.style.width);
            div1.style.backgroundColor="red";
        }else if(val.value=="black"){
            //经过js获取div这个对象

            //window.alert(div1.style.width);
            div1.style.backgroundColor="black";
        }
    }

    function sayHello(){
        window.alert("red按钮被按下");
    }

</script>
</head>

<body>

    <div id="div1" style="width:400px;height:300px;background-color:red">
    </div>
    <input type="button" value="red" onclick="mychange(this),sayHello()"/>
    <input type="button" value="black" onclick="mychange(this)"/>

</body>

2.不一样的浏览器事件种类不同
如何区分当前浏览器的内核是什么?(区分出ie6/7/8/ 火狐等)

代码以下：

<script language="javascript">
if(window.XMLHttpRequest)
{ //Mozilla, Safari, IE7,IE8
         if(!window.ActiveXObject)
            {     // Mozilla, Safari,
        alert('Mozilla, Safari');
        }
Else
{
        alert('IE7 .8');
        }
     }
else
{
    alert('IE6');
    }
</script>
3.案例：防止用户经过点击鼠标右键菜单拷贝网页内容
    <script type="text/javascript">

        function test(){
        //window.alert("没有菜单");
        return false;
    }
    function test2(){
        //window.alert("全选不行");
        return false;
    }

</script>
</head>

<body oncontextmenu="return test();" onselectstart="return test2();">
个人内容!是大幅度
</body>
十6、dom编程的介绍
Javascript 精彩网页特效实例精粹韩老师没有发给我，记得找他要。

dom的必要性

实际上js更重要的做用是可让用户对网页元素进行交互操做，这才是学习js的精华之所在。

(1)贪吃蛇 (2)推箱子(3)坦克大战 ,这些都需呀用的dom编程，当咱们学习完这一章节后，你们能够很轻松的写出相似的项目了。

dom编程,也是咱们学习ajax技术的基础,因此咱们必须掌握好dom编程。前端(html+css+js[dom编程]) | 后台

dom的介绍

dom的来源:

让弹出窗口变小：

window.resizeTo(300,200);

</script>

1.dom对象

前面说过,js把浏览器,网页文档和网页文档中的html 元素都用相应的内置对象(看文档)来表示，这些对象与对象间的层次关系构成dom,针对网页(html,jsp,php,aspx.net)的dom就是html dom。咱们这讲的就是html dom

这里有几个特别重要的概念要给你们说清楚:

①上面说的内置对象就是dom 对象,准确的说是html dom对象。

②由于我目前讲的是 html dom 编程，因此我提到的dom 编程,dom

对象都是说的 html dom 编程和 html dom对象，请你们不要犯迷糊。

③dom 编程时，会把html文档看作是一颗dom 树(对照乌龟抓鸡来的代码来讲明dom编程.(首先要画出html dom图[参看资料文件夹，已经画好])

dom 编程的核心就是各个dom 对象,下一章节会详细讲解.

2.html dom 树

在进行 html dom 编程时，咱们把html文件当作是一个dom树，该dom树在内存中有层级关系，经过操做 dom树，就能够改变 html 页面的显示效果

从上图能够得出：从 html dom 的角度看，每一个html文件的元素都会被当作一个Node节点对象来看待,就可使用它的方法,同时对于 html dom说，由于元素自己可能就是img/button/form同时能够当作 Button Img Form 内置对象

html文件

var myimg=document.getElementById("myimg");

</script>

xml 文件

<class>

顺平

</stu>

</class>

var mystu=document.getElementById("mystu");

这是 mystu就是 Node对象

3.html dom编程的实例

js面向对象的方式来编写.

w ->上

a->左

s->下

d->右

课后练习: 对乌龟游戏添加新的功能:

当乌龟碰到边界时，不能再移动
让鸡能够自由的移动
能够经过上下左右的按钮控制乌龟移动
乌龟上下左右移动的时候能够换成相应的图片.

乌龟抓鸡代码

<html>

<head>

//定义两个类

function Tortoise(x,y){

this.x=x;

this.y=y;

this.speed=10;//移动一个像素

this.Catch=function(){

if((this.x>=cock.x-80)

&&(this.x<=cock.x+80)

&&(this.y>=cock.y-60)

&&(this.y<=cock.y+60)){

alert("抓到！");

}

//向上移动

this.move_up=function(){

this.y-=this.speed;

//同时修改乌龟的top的值

//dom编程体现

//先获得这个乌龟的图片

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向下移动

this.move_down=function(){

this.y+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

}

//向左移动

this.move_left=function(){

this.x-=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

//向右移动

this.move_right=function(){

this.x+=this.speed;

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

function Cock(x,y){

this.x=x;

this.y=y;

this.speed=1;//移动一个像素 setInterval(定时器)

}

//建立全局的乌龟和公鸡对象

var tortoise=new Tortoise(100,200);

var cock=new Cock(200,200);

//响应用户的操做

function move(obj){

switch(obj.value){

case "向上走":

tortoise.move_up();

tortoise.Catch();

break;

case "向下走":

tortoise.move_down();

tortoise.Catch();

break;

case "向左走":

tortoise.move_left();

tortoise.Catch();

break;

case "向右走":

tortoise.move_right();

tortoise.Catch();

break;

}

//响应用户的操做

function move2(event){

switch(event.keyCode){

case 87:

tortoise.move_up();

tortoise.Catch();

break;

case 83:

tortoise.move_down();

tortoise.Catch();

break;

case 65:

tortoise.move_left();

tortoise.Catch();

break;

case 68:

tortoise.move_right();

tortoise.Catch();

break;

default:

break;

}

</script>

</head>

<tr>

<td>shunping</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

</html>

4.bom

bom 的全称是浏览器对象模型 (bowser object model)., 它规定全部的浏览器在设计时，要考虑支持 bom提出的规范,这样才能正常浏览网页.

dom 和 bom 的关系

bom一个纲领性，dom 就是具体的.( dom 对象、属性、方法.)

bom 包括浏览器全部对象

dom (document object model)主要是 bom(document对象的扩展)

5.dom的层级关系

☞ 在进行dom编程时，每一个html的元素被当作一个Node节点(对象),你若是要看具体信息，到 xml dom 的 Node章节查看.

6.window对象

经常使用的函数和属性.

6.1 confirm:

var res=window.confirm("确认安装该软件吗?");

if(res){

window.alert("安装ok");

}else{

window.alert("安装ok");

}

6.2 setInterval("函数名()",调用该函数的间隔时间) 和 clearInterval

简单时钟

<html>

<head>

</head>

<body>

当前时间是,

</body>

var i=0;

var myspan=document.getElementById("myspan");

function abc(){

//window.alert(++i);

var mytime=new Date() ;

//对象.innterText表示在该对象对应标签的中间放入文本

myspan.innerText=mytime.toLocaleString();

if(++i==10){

window.clearInterval(mytime2);

window.alert("hello,world,不走了");

}

//作了一个定时器

var mytime2=window.setInterval("abc()",1000);

</script>

</html>

小游戏

<html>

<head>

</head>

<body>

</body>

var boy=document.getElementById("boy");

var img_no=0;

function start(){

var no=((img_no++)%8);

boy.src=no+".png";

}

function stop(){

window.clearInterval(time1);

}

//每隔一秒切换一次图片

var time1="";

function sendCommand(obj){

switch(obj.value){

case "开始":

time1=setInterval("start()",100);

break;

case "中止":

stop();

break;

}

</script>

</html>

课堂练习时，请你们把小孩的加速和减速作了.

6.3 setTimeout / clearTimeout

该函数也能够作定时器，可是它只调用函数一次，就结束了

function abc(){

window.alert("hello");

}

//启用一个定时器

var time1=window.setTimeout("abc()",3000);

window.clearTimeout(time1);

6.4 moveTo moveBy resizeTo resizeBy

window.moveTo(200,200);//以当前的屏幕的左上角为原点，进行移动

function abc(){

//window.moveBy(20,20);//这是以当前的窗口的左上角为原点，进行移动

window.resizeBy(20,20);//在当前窗口大小的前提下，调整大小

}

window.resizeTo(100,300);//将当前这个窗口的大小，调整为指定的大小（同时调整以后的窗口左上角与屏幕左上角重合）

</script>

6.5 open 函数该函数用于打开一个新窗口

function test(){

//第二个参数能够指定，是替换本窗口(_self)，仍是开窗口(_blank 默认)

//第三个参数能够指定新窗口的样式.

window.open("newwindow.html","_blank","width=300,height=300,toolbar=yes,titlebar=yes,status=yes,location=yes,resizable=yes");//开新窗口

}

</script>

关于两个html页面相互通讯的案例

opener 属性 子窗口引用父窗口信息

A页面：

var newwindow="";

function test(){

//open函数自己就会返回子窗口的引用

newwindow=window.open("b.html");

}

function test2(){

//取出用户但愿发送给子窗口的信息

var my_text=document.getElementById("myinfo");

//newwindow.document 实际上b.html页面的文档

var chlid_text=newwindow.document.getElementById("myinfo");

chlid_text.value=my_text.value;

}

</script>

B页面

function send(){

var chlid_text=document.getElementById("myinfo2");

//opener表示该页面的父窗口

opener.document.getElementById('myinfo').value=chlid_text.value;

}

</script>

<h1>我是b.html页面</h1>

7.history对象

history对象记录用户访问的url

go back forward

入门案例:

<html>

<head>

function myback(){

//window.alert('ok');

//window.history.back();

window.alert(history.length);

window.history.go(-1);

}

</script>

</head>

</html>

8.location对象

location对象包含当前url的信息

reload方法

从新加载本页面(刷新本页面)

function myfresh(){

window.location.reload(); // ajax局部刷新

}

//每隔十秒刷新页面

window.setInterval("myfresh()",10000);

</script>

href属性

经过该属性能够指定载入新的页面

window.location.href="url" //url能够本网址，也能够另外一个网址

9.navigator

该对象包括浏览器的信息

想看该对象下的全部属性能够经过遍历得到。

for (var key in navigator )

{document.write("<br/>"+key+"="+navigator[key]);

}

</script>

10.screen对象

这个对象包括用户显示屏幕的信息

当用户的分辨率是不1024×768时，给出提示，请写出该程序!

if (screen.height!=768||screen.width!=1024)

{window.alert("请将您的浏览器分辨率调整到1024*768！")

}

</script>

11.Event对象(!!!!)

给某个html元素(控件), 绑定事件的三种方法

静态绑定

动态绑定

//获取某个对象再绑定

getElementById("htmlid").事件=方法

function test1(){

window.alert("test1");

//这句话的意思就是把but2 的onclick 和 test2函数绑定

//document.getElementById('but2').onclick=test2;//

//but2.onclick=test2;

$('but2').onclick=test2;

}

function $(id){

return document.getElementById(id);

}

function test2(){

window.alert("test2");

}

</script>

经过 attachEvent 和 detachEvent 方法来绑定事件和解除事件绑定

//第一个参数是事件名

but1.attachEvent("onclick",vote);

function vote(){

window.alert("你投了布什一票，之后不能再投");

//解除绑定

but1.detachEvent("onclick",vote);

}

</script>

js 中事件对象的获取 (IE和火狐不同)

在ie中有两种方法

//1.第一方法

function test(){

//经过 window.event.属性

window.alert(window.event.clientX);

}

//2.第二种方法

function test2(event){

//event

window.alert(event.clientX);

}

function abc(){

window.alert("窗口变化");

}

</script>

</body>

特别说明一下: 咱们的表单除了常规提交方式，还能够经过js来动态的提交

Event的一个案例：监测鼠标在页面中的移动位置：

function test()

{

showxy.innerText="x="+window.event.screenX+"y="+window.event.screenY;

}

</script>

<body>

</body>

event 的一个案例:

请在文本框中输入一个六位数，第一位不能为0，不能超过六位数，必须全是数字，如何实现？

<body>

请输入一个六位数 <input type="text" id="pageNow" onkeydown="return checkNum(this)"/>

</body>

<!--

var i=0;

function checkNum(obj){

//判断输入数字的长度是否超过六

if(i==6){

window.alert("输入的字符串>6");

return false;

}

//防止首位是0

if(i==0){

if(window.event.keyCode=='0'.charCodeAt(0)){

alert('首位不能是0');

return false;

}

//window.alert("用户输入了一个"+window.event.keyCode);

//若是咱们记不住 0->48 9->57,咱们能够这样作

if(window.event.keyCode<'0'.charCodeAt(0) || window.event.keyCode>'9'.charCodeAt(0)){

window.alert("你输入的不是数");

return false;

//window.event.returnValue=false;

}else{

//若是被接收

i++;

}

//-->

</script>

12.document对象

最重要的三个方法

getElementById [html php jsp] (若是页面中有多个相同的id,则返回第一个对象引用)

getElementsByName 经过html控件的名字返回对象集合多用于多选。

getElementsByTagName 经过html的标签名返回对象集合

案例：请选择你的爱好

//经过id获取对象

function test(){

var a1=document.getElementById("a1");

//若是要取出某个属性

window.alert(a1.id+" "+a1.href+" "+a1.innerText);

a1.innerText="链接到百度";

a1.href="http://www.baidu.com";

}

//经过name来获取.对象

function test2(){

//使用

var hobbies=document.getElementsByName("hobby");

//遍历这个集合

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

//判断

//window.alert(i+ " "+hobbies[i].checked);

if(hobbies[i].checked){

window.alert("你的爱好是"+hobbies[i].value);

}

//经过标签名

function test3(){

var inputs=document.getElementsByTagName("input");

window.alert(inputs.length);

}

</script>

<body>

<a id="a1" href="http://www.sina.com">链接到sina</a><br/>

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

<a id="a3" href="http://www.baidu.com">链接到baidu</a><br/>

请选择你的爱好:

<input type="checkbox" name="hobby" value="旅游">旅游

<input type="checkbox" name="hobby" value="音乐">音乐

<input type="checkbox" name="hobby" value="体育">体育

<input type="checkbox" name="hobby" value="电影">电影

</body>

咱们综合运用一下前面学习到的各类知识

动态的建立元素(节点)/添加元素(节点)/删除元素(节点)

注意用四个节点属性：

createElement() 方法建立新的元素节点：

appendChild() 方法向已存在的节点添加子节点。（发射子弹）

removeChild() 方法删除指定的节点。（子弹消失）

parentNode 属性可返回某节点的父节点。

function test1(){

//window.alert('ok');

//1建立 a 元素 createElment(标签名)，

var myhref=document.createElement("a"); //<a >???</a>

myhref.innerText="链接到sina";

myhref.href="http://www.baidu.com"

myhref.id="myhref";

//document.body.appendChild(myhref);

div1.appendChild(myhref);

}

function test2(){

//document.getElementById('div1').removeChild(document.getElementById('myhref'));

var node=document.getElementById('myhref');

node.parentNode.removeChild(node);

}

</script>

<body>

</body>

制做一个函数查询按键的keycode编码！

代码以下：

function test()

{

window.alert("我所按下的键的keycode的代码是"+window.event.keyCode);

}

</script>

<body>

</body>

思路很重要

响应用户按 j 键
让乌龟发子弹函数 fire内容多.

2.1 建立子弹

我认为子弹就是一个图片 / 也能够认为是一个div span

让子弹飞一会

用了一个this.move_bullet函数让它定时修改横坐标,产生移动的效果.

为何发送第二颗子弹，第一颗就中止?

请你们思考一个问题,怎样让子弹碰到边界后，就停下，而且消失

提示: window.alert("body的宽="+document.body.clientWidth);

//定义两个类

function Tortoise(x,y){

this.x=x;

this.y=y;

//var bullet_img="";//子弹

//子弹数组

var bullet_imgs=new Array();

var bullet_img_speed=2;

this.speed=1;//移动一个像素

var isStart=false;

this.move_up=function(){

this.y-=this.speed;

//同时修改乌龟的top值.

//dom编程体现

//1先获得这个乌龟图片 div

var wugui_div=document.getElementById("wugui");

wugui_div.style.top=this.y+"px";

//判断乌龟是否和公鸡碰撞.

//window.alert("乌龟当前的 x y"+this.x+" "+this.y);

//window.alert("公鸡当前的 x y"+cock.x+" "+cock.y);

}

//向右移动

this.move_right=function(){

this.x+=this.speed;

//同时修改乌龟的top值.

//dom编程体现

//1先获得这个乌龟图片 div

var wugui_div=document.getElementById("wugui");

wugui_div.style.left=this.x+"px";

}

//开火

this.fire=function(){

//window.alert("乌龟发子弹");

var bullet_img=document.createElement("img");

bullet_img.src="bullet.bmp";

//设置bullet_img的x,y

//定子弹的横坐标

bullet_img.style.left=(this.x+94)+"px";

bullet_img.style.top=(this.y+33)+"px";

//作出绝对定位

bullet_img.style.position="absolute";

document.body.appendChild(bullet_img);

//把这颗新子弹放入数组中,进行管理

bullet_imgs[bullet_imgs.length]=bullet_img;

//启动子弹[请注意一下,若是咱们调用是一个对象的成员方法]

//setInteval 应该这样去掉 window.setInteval("对象名.函数名()",时间);

//若是子弹数组中有子弹，就不要在调用

/* if(bullet_imgs.length==1){

window.setInterval("tortoise.move_bullet()",50);

} */

if(!isStart){

window.setInterval("tortoise.move_bullet()",10);

isStart=true;

}

//让子弹移动

this.move_bullet=function(){

//遍历子弹数组.看看每颗子弹是否已经到到边界,若是到了边界，则删除

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

//}

if(bullet_imgs.length==0){

//stop定时器.

//isStart=false;

}

//这里要求访问 bullet_img

//修改bullet_img 的 left便可 100px

//遍历子弹数组,让每颗子弹移动

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

//取出每颗子弹

var bullet_img=bullet_imgs[i];

var bullet_img_x=bullet_img.style.left.substring(0,bullet_img.style.left.indexOf("p"));

bullet_img.style.left=parseInt(bullet_img_x)+bullet_img_speed+"px";

//遍历子弹数组.看看每颗子弹是否已经到到边界,若是到了边界，则删除

if(parseInt(bullet_img_x)+17>=document.body.clientWidth){

//到达边界,就删除该子弹

bullet_imgs.splice(i,1); //3 2 1

//同时从html dom树种删除

bullet_img.parentNode.removeChild(bullet_img);

}

function Cock(x,y){

this.x=x;

this.y=y;

this.speed=1;//必定一个像素 setInterval(定时器)

}

//建立全局的乌龟对象和公鸡对象

var tortoise=new Tortoise(100,120);

var cock=new Cock(200,200);

//用于响应用户点击的操做

function move(obj){

switch(obj.value){

case "向上走":

tortoise.move_up();

break;

case "向右走":

tortoise.move_right();

break;

}

//用于响应用户按键的操做

function move2(event){

switch(event.keyCode){

case 65:

tortoise.move_left(); //乌龟向左

break;

case 68:

tortoise.move_right();

break;

case 83:

tortoise.move_down();

break;

case 87:

tortoise.move_up();

break;

//响应用户按j这个键

case 74:

//发送子弹的行为封装到fire

tortoise.fire();

break;

default:

break;

}

</script>

</head>

<tr>

<td>shunping</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

</html>

考虑加入:

让公鸡能够移动
若是子弹击中公鸡，公鸡消失 [作成爆炸效果.]
子弹能够向上下左右均可以发送.

12.1经常使用的dom 的每一个Node 节点属性和方法(增强篇)

(取到父节点、兄弟节点、子节点等 )

<head>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</div>

</body>

function test(){

//获得乌龟节点

var wugui=document.getElementById("wugui");

window.alert("类型"+wugui.nodeType);

window.alert("名字"+wugui.nodeName);

var wugui_parent=wugui.parentNode;

window.alert("父节点类型"+wugui_parent.nodeType);

window.alert("父节点名字"+wugui_parent.nodeName);

var wugui_next_borther=wugui.nextSibling;

window.alert("下一个兄弟类型"+wugui_next_borther.nodeType);

window.alert("下一个兄弟名字"+wugui_next_borther.nodeName);

var wugui_pre_borther=wugui.previousSibling;

window.alert("前一个兄弟类型"+wugui_pre_borther.nodeType);

window.alert("前一个兄弟名字"+wugui_pre_borther.nodeName);

//取出孩子节点

var wugui_chlid=wugui.firstChild;

window.alert("孩子类型"+wugui_chlid.nodeType);

window.alert("孩子名字"+wugui_chlid.nodeName+wugui_chlid.src);

}

function test1(){

document.bgColor="black";//背景色

document.fgColor="white";//前景色

window.alert(document.title+" "+document.URL);

}

</script>

</html>

13.body对象

body对象是document对象的一个成员属性,经过document.body来访问.

使用body对象，要求文档的主体建立后才能使用,也就是说不能在文档的body体尚未建立就去访问body,

Body经常使用属性：

appendChild() 添加元素

removeChild() 删除元素

getElementsByTagName() 经过html元素名称,获得对象数组.

bgColor 文档背景色

backgorund 文档背景图

innerText 某个元素间的文本

innerHtml 某个元素间的html代码

onload事件文档加载时触发

onunload事件文档关闭时触发

onbeforeunload事件文档关闭前触发

该对象是 document对象的属性.

innerText innerHTML

</head>

<body>

</body>

function test(){

//myspan.innerText="<a href='http://www.sohu.com'>链接到sohu</a>";

myspan.innerHTML="<a href='http://www.sohu.com'>链接到sohu</a>";

}

</script>

</html>

13.1Body案例：设置固定边栏广告！

<!--

function window_onscroll() {

//让这个超连接 top 和 left和滚动条，保持一个关系

myHref.style.top=document.body.scrollTop+20;

myHref.style.left=document.body.scrollLeft;

}

function document_onselectstart() {

return false;//返回false,这样就能够禁止用户选网页中的文本　，

//当用户选择文本时，会触发　onselectstart 事件，当返回false时，就不会选中

//你也能够在body加入 onselectstart="return false;"一样达到这个效果

}

//-->

</script>

<!--

//这样的写法等同于再 body上 onselectstart='return false'

window.alert('abc');

return document_onselectstart()

//-->

</script>

</head>

这个文本域足够大!

有着深远影响和价值的画，就是名画。

　　一方面所谓的价值体如今做者本人的绘画功底上，有价值的画其做者的绘画功底必定是精湛的，是超凡脱群的，最起码也要有本身的风格，跟别人不同凡响，这样才会受到关注。其次，光有精湛的水平也是不够的，还要在画面上体现一种精神，一种思想，也就是说要托画言志，用艺术的手法表现一种有高度的，更深一层的东西。好比说毕加索的格尔尼卡，它的价值就在于用新颖，深入，抽象的表现手法将残酷的战争诠释的淋淋尽致，把战争的发人深省剖析开来给人看，这种影响是能够穿越肤色，穿越种族，穿越时间和空间的，是有深入的历史高度的，同时画家自身的画技也不容忽视，因此说它是有价值的。再好比米勒的晚钟，虽然表现的是两位普普统统，穿着朴素，也许并无什么高学历的勤劳农民，可是他们脸上那种对于上帝的虔诚，那种对于平凡生活的热爱，被米勒用饱含着感情的笔触描绘出来，用其影响力和感染力诠释着价值的内在。

　　另外一方面有些做品之因此成为名画，是由于它所要表达的内涵是永恒的，虽然诞生在那个时代，可是也一样是生活在现代的咱们共同追求的大主题，配合着当时的时代背景，加上画家主观的表现提炼，这样创做出来的做品便被称为名画，所以它有着深远影响。

有着深远影响和价值的画，就是名画。

</TEXTAREA>

</body>

</html>

13.2案例：广告图片在网页中飘动，碰到网页边沿改变漂移方向

<html >

<head>

<title>广告图片在网页中飘动</title>

</head>

<!--

//向x方向移动速度

var divX=1;

//向y方向移动速度

var divY=1;

var posX=0;//div的x坐标

var posY=0;//div的y坐标

//window.alert(div1.offsetWidth+" "+div1.offsetHeight);

function move(){

//让div的横坐标增长 2*divX

posX+=2*divX;

//让div纵坐标增长 2*divX

posY+=2*divY;

div1.style.top=posY+"px";

div1.style.left=posX+"px";

//posX表示div碰到最左边

//posX+div1.offsetWidth>=document.body.clientWidth 碰到最右

// div本身的宽度

if(posX<=0||posX+div1.offsetWidth>=document.body.clientWidth){

divX=-divX;

}

//posY表示碰到最上

//posY+div1.offsetHeight>=document.body.clientHeight 碰到最上

if(posY<=0||posY+div1.offsetHeight>=document.body.clientHeight){

divY=-divY;

}

//启动一个定时器

setInterval("move()",10);

//-->

</script>

</body>

</html>

13.3随意拖拽窗口:用户用鼠标点中,浮动窗口,能够随意的拖拽该窗口。

<html>

<head>

</head>

var x = 0, y = 0, x1 = 0, y1 = 0;

var moveable = false;

var index = 20000;

//开始拖动

function startDrag(obj, evt) {

e = evt ? evt : window.event;

// if (true) {

if (!window.captureEvents) {

obj.setCapture();

} else {

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);

}

var win = obj.parentNode;//取得父窗体(父窗体就是该div得上一级div)

win.style.zIndex = ++index;//设置父窗体的Z轴值

x = e.clientX;//取得当前鼠标的X坐标

y = e.clientY;//取得当前鼠标的Y坐标

x1 = parseInt(win.style.left);//将父窗体的距浏览器左边界的距离转换为NUMBER

y1 = parseInt(win.style.top);//将父窗体的距浏览器上边界的距离转换为NUMBER

moveable = true;

// }

}

function drag(obj, evt) {

e = evt ? evt : window.event;

if (moveable) {

var win = obj.parentNode;

win.style.left = x1 + e.clientX - x;

win.style.top = y1 + e.clientY - y;

}

//中止拖动

function stopDrag(obj) {

if (moveable) {

if (!window.captureEvents) {

obj.releaseCapture();

} else {

window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);

}

moveable = false;

}

</script>

<body>

<div id="l1"

style="position: absolute; width: 200px; height: 200px; background-color: #99CCFF; z-index: 200; top: 100px; left: 154px;">

<div id="title" onMouseDown="startDrag(this,event);"

onMouseMove="drag(this,event);" onMouseUp="stopDrag(this);"

style="width: 200px; height: 20px; background-color: #330033; top: 0px; left: 0px; z-index: 200; position: absolute; font-size: 9pt; color: #FFFFFF; padding-top: 5px; padding-left: 5px;">浮动窗口</div>

</div>

</body>

</html>

14.style

style对象不是针对某一个html元素,而是对全部的html元素而言的,也就是说,咱们能够经过 document.getElementById("id").style.property="值",来控制网页文档的任何一个元素(对象)的样式,固然这个很重要的.

14.1web版坦克大战(1)

<html>

//面向对象

function Wall(){

}

function Bullet(){

}

function Water(){

}

function Hero(x,y){

this.x=x;

this.y=y;

this.speed=1;

this.direct=0;//0 -》上 1->右 2->下 3->左

this.move_up=function(){

this.y-=this.speed;

myhero.style.backgroundPositionY="0px";

myhero.style.top=this.y+"px";

}

this.move_down=function(){

this.y+=this.speed;

myhero.style.backgroundPositionY="80px";

myhero.style.top=this.y+"px";

}

this.move_left=function(){

//首先让坦克转向

this.x-=this.speed;

myhero.style.backgroundPositionY="40px";

myhero.style.left=this.x+"px";

}

this.move_right=function(){

this.x+=this.speed;

myhero.style.backgroundPositionY="120px";

myhero.style.left=this.x+"px";

}

//建立本身的坦克

var hero=new Hero(100,250);

function sendCommand(){

switch(window.event.keyCode){

case 65:

hero.move_left(); //本身坦克向左

break;

case 68:

hero.move_right();

break;

case 83:

hero.move_down();

break;

case 87:

hero.move_up();

break;

//响应用户按j这个键

case 74:

//发送子弹的行为封装到fire

hero.fire();

break;

default:

break;

}

</script>

</div>

</body>

</html>

Css复习主要是看这个很全面。

晚上:

让本身的坦克能够发送子弹.

子弹碰到边界，就消失

显示敌人的坦克(3个)

当本身发射的子弹击中敌人坦克后，敌人坦克就爆炸

14.2如何去作网页层切换效果

代码：

<html >

<head>

<!--

function change(obj,obj2){

//由于style在外边css,因此这样获取不到，可是设置后，就能够在本页获取了

//window.alert(content1.style.display);

//window.alert(obj.innerText.length+"="+"出国".length);

obj2.style.backgroundColor="#FFC63D";

if(obj=="zs"){

//window.alert('招生');

content1.style.display="block";

content2.style.display="none";

content3.style.display="none";

}else if(obj=="rz"){

//window.alert('热招');

content1.style.display="none";

content2.style.display="block";

content3.style.display="none";

}else if(obj=="cg"){

//window.alert('出国');

content1.style.display="none";

content2.style.display="none";

content3.style.display="block";

}

function change2(obj){

obj.style.backgroundColor="#E8E8E8";

}

//-->

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li><a href='#'>热招热招热招月!</a></li>

</ul>

</div>

<ul>

<li><a href='#'>出国出国出国月!</a></li>

</ul>

</div>

<ul>

<li><a href='#'>澳洲留学高中月!</a></li>

</ul>

</div>

</body>

</html>

My.css

body

{

font-size:12px;

margin:0;/*把body的边距清零*/

}

.div1{

width:132px;/*width:128px;*/

height:160px;

/*background-color:pink;*/

}

.navi{

height:160px;

width:22px;

/*background-color:green;*/

float:left;

}

.navi ul{

padding:0px;

margin-left:0px;

}

.navi ul li{

height:50px;

width:22px;

background-color:#E8E8E8;

float:left;

list-style-type :none;

margin-top:3px;

text-align:center;

padding-top:5px;

}

.content3,.content1,.content2{

height:160px;

width:104px;

margin-left:2px;

/*background-color:blue;*/

float:left;

}

.content2 ul,.content3 ul,.content1 ul{

padding:0px;

margin-left:4px;

margin-top:2px;

/*background-color:green;*/

}

.content2 ul li,.content3 ul li,.content1 ul li{

float:left;

list-style-type :none;

font-size:12px;

line-height:20px;

}

.content2{

display:none;

}

.content3{

display:none;

}

经过style对象，咱们能够去控制某个html元素的外观.

补充讲解:

14.3display 和 visiability 区别

这个属性均可以用于设置某个区域或者控件，显示不显示, display 设置 none; 它不显示同时让出本身占用的空间

visiability 这个属性设置成 hidden 就不显示, 可是它不让这个空间.

14.4style对象的案例:

<body>

<span id="myspan" onclick="test(this);" style="border: 3px solid red;cursor:hand;

">+</span> 个人家庭

</ul>

</body>

<!--

function test(obj){

//myspan

if(obj.innerText=="+"){

//显示成员

myul.style.display="block";

obj.innerText="-";

}else if(obj.innerText=="-"){

myul.style.display="none";

obj.innerText="+";

}

//-->

</script>

14.5style 的小案例- 简易购物车

<body>

<h1>请选择你喜欢的水果</h1>

</body>

<!--

var allPrice=0;

function shop(obj,price){

//遍历整个复选框，看看谁被选中.

/* var frutis=document.getElementsByName("fruits");

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

//if(frutis[i].checked){

// window.alert(frutis[i].value+"被选中"+" 该价格是"+frutis[i].price);

//}

if(frutis[i].checked){

allPrice+=parseInt(frutis[i].price);

}

}*/

//直接判断点击行为是选中，仍是取消,而后是决定对allPrice进行+,-

if(obj.checked){

//window.alert("中");

allPrice+=parseInt(obj.price);

}else{

//window.alert("取消");

allPrice-=parseInt(obj.price);

}

showres.innerText=allPrice;

}

//-->

</script>

forms对象集合和form对象

15.1案例一：

这里咱们说明form对象

form对象名.某控件名.

<body>

u:<input type="text" name="username" value="hello"/><br/>

p:<input type="password" name="password" value="xxx"/><br/>

</form>

u:<input type="text" name="username"/>

</form>

</body>

<!--

//window.alert(document.forms.item(1).action);

//取出第一个from

function mysubmit(){

var form1=document.forms.item(1);

//window.alert(form1.username.value);

//window.alert(form1.password.value);

form1.submit();

}

//-->

</script>

15.2案例2：验证用户注册

<html>

<head>

function check(){

//经过表单对象来回去用户的输入

var form = document.forms.item(0);

var name=form.username.value;

var passwd=form.passwd.value;

var passwd2=form.passwd2.value;

//window.alert(name+passwd+passwd2);

if(name.length<4 || name.length>6){

//window.alert("error");

error1.style.display="inline";

return false;

}

if(passwd!=passwd2){

error2.innerText="两次密码不一致";

error2.style.display="inline";

return false;

}

</script>

</head>

<body>

<tr><td>用户　名:</td><td class="style2"><input class="style1" type="text" id="username" name="username"/><span style="display: none;color: red;font-size: 10px" id="error1">用户名必须在4-6位间</span></td></tr>

</table>

</form>

</body>

</html>

15.3案例：文本框中自动设置鼠标光标！

<html>

<head>

</head>

<body>

<form>

name:<input type="text" id="text1" />

age: <input type="text" id="text2" />

<br />

</form>

</body>

document.getElementById("text1").focus();

</script>

</html>

16．table 对象是咱们的一个重点

概述，在咱们的网页中，每出现一次 table标签，就会有一个table对象产生.

table对象中的集合对象有两个

rows[] 还有一个 cells[]

rows[] 表示全部行的一个集合

cells[] 表示一行的全部列

16.1快速入门案例

要求，点击testing 按钮能够显示宋江的名字,可是不能经过id 获取 table对象来获取.

<html>

<head>

function test(){

//window.alert(document.getElementById('name').innerText);

var mytable=document.getElementById("mytab");//mytable就是一个table对象

window.alert(mytable.rows[2].cells[2].innerText);

//window.alert(typeof(mytable));

//请取出卢俊义的外号

}

function addHero(){

//建立一个

//document.createElement("<tr>");

//添加一行

var mytable=document.getElementById("mytab");

//3表示添加到表格的第几行

//tableRow表示一个新行，它的类型是TableRow

var tableRow=mytable.insertRow(3); //<tr></tr>

//经过tableRow添加新列 tableCell类型是 TableCell

var tableCell=tableRow.insertCell(0); //<tr><td></td></tr>

tableCell.innerHTML="3"; //<tr><td>3</td></tr>

var tableCell1=tableRow.insertCell(1);

tableCell1.innerHTML="吴用"; //<tr><td>3</td><td>吴用</td></tr>

var tableCell2=tableRow.insertCell(2);

tableCell2.innerHTML="智多星"; //<tr><td>3</td><td>吴用</td></tr>

}

function deleteHero(){

//删除一个英雄

var mytable=document.getElementById("mytab");

mytable.deleteRow(3);

}

function updateHero(){

//找到宋江的外号这个对象<td></td> TableCell

var mytable=document.getElementById("mytab");

mytable.rows[1].cells[2].innerHTML="黑三郎";

}

</script>

</head>

<body>

</table>

</body>

</html>

16.2Table对象的综合案例

实现两个功能：1.动态添加 2.若是有重复，弹出了跳窗有重复。

<html>

<head>

function addhero(){

//获取用户的输入信息

var no=document.getElementById('no').value;

var heroname=document.getElementById('heroname').value;

var nickname=document.getElementById('nickname').value;

var mytab=document.getElementById('mytab');

//window.alert(no+" "+heroname+" "+nickname);

//先判断，再添加

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

if(mytab.rows[i].cells[0].innerHTML==no){

window.alert("编号重复");

return false;

}

//在遍历的时候，要想办法肯定这个新的英雄，适当的位置.

}

//添加一行

//获取table对象

var tableRow=mytab.insertRow(mytab.rows.length);

tableRow.insertCell(0).innerHTML=no;

tableRow.insertCell(1).innerHTML=heroname;

tableRow.insertCell(2).innerHTML=nickname;

tableRow.insertCell(3).innerHTML="<a href='#' onclick='abc('"+no+"')'>删除用户</a>"

}

</script>

</head>

<body>

</table>

<h1>请输入英雄的信息</h1>

排名<input type="text" id="no" name="no"/><br/>

名字<input type="text" id="heroname" name="heroname" /><br/>

外号<input type="text" id="nickname" name="nickname" /><br/>

</body>

</html>

十7、js的正则表达式

为何要学习正则表达式?

好比身份证., 电话.. 邮件.. 。。

1.正则表达式介绍

正则表达式，其实是一个语法规则, 经过这个表达式,能够去匹配知足这个语法规则的字串. , 咱们能够经过建立 RegExp 对象来建立规范

RegExp (regular expression)

2.快速入门案例:

从一个字串中，寻找四个数字相互链接的案例：

<html>

<head>

var str="akdlfaklhello 1234klfdksalfd9000kalsj2345fd;lsa"

//建立一个正则对象 \d表示一个数 100数字相连

//var reg=/(\d){4}/gi; //reg表示一个语法 //gi [g表示全局][i表示是否区分大小写] \d 表示任意的数 (\d) 表示子表达式

var reg=new RegExp("(\\d){4}","gi");//显示建立

var res="";

while(res=reg.exec(str)){ //res 表示找到一个结果，该结果是一个数组. [0]->结果是什么若是正则表达式有子表达式，[1]->第一个子表达式的结果

//[2]->第2个子表达式的结果 ...

window.alert(res);

}

</script>

</head>

<body>

</body>

</html>

2.1找到四个数字，个位和仟位，十位和百位相同

<html>

<head>

var str="akdlfaklhello 1234klfd1441ksalfd9000kals8998j2345fd;lsa"

//建立一个正则对象 \d表示一个数 100数字相连

var reg=/(\d)(\d)\2\1/gi; //reg表示一个语法 //gi [g表示全局][i表示是否区分大小写] \d 表示任意的数 (\d) 表示子表达式

var res="";

while(res=reg.exec(str)){ //res 表示找到一个结果，该结果是一个数组. [0]->结果是什么若是正则表达式有子表达式，[1]->第一个子表达式的结果

//[2]->第2个子表达式的结果 ...

window.alert(res);

}

</script>

</head>

</html>

3.正则表达式详解

问正则表达式是什么?

答: 正则表达式是一个语法(句法)规则,经过该规则能够从一个大的字符串中去匹配知足该规则的子字符串.

4.正则表达式对象

建立方法

隐式建立

var reg=/pattern/gi 【g 表示全局, i表示在匹配的时候不区分大小写,m 表示多行匹配】

举例说明 gmi 的含义

代码 reg3.html

<html>

<head>

var str="aklfdjakabcadkflsakfabclABCsa";

//需求,使用正则找到 abc子串

var reg=/abc/gim;

//使用reg对象方法 exec null "" 0

//res 是一个数组 [0]->找到的子串 res[1]=> 是一个子表达式的内容 res[2]=>

var res="";

//执行正则表达式

while(res=reg.exec(str)){

window.alert(res[0]);

}

</script>

</head>

<body>

</body>

</html>

reg4.html:

var str="wwlkel123fklsd908wwlkk \r\nwwl";

//var myReg=/(\\d){3}/gi;

//new RegExp("^(Wwl)","igm"); 表示找到每行的开头的 wwl字符(不区分大小写)

var myReg=new RegExp("^(Wwl)","ig");//m就会找到两个wwl,若是没有m就会只找到一个wwl就是头一个，一般咱们使用gi

while(res=myReg.exec(str)){

window.alert(res[0]);

}

</script>

执行正则表达式的第二个方法:

var res2=str.match(reg); //该方法比较简单,会返回获得子串的数组

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

window.alert(res2[i]);

}

显式建立

var reg=new RegExp("pattern","选项gim");

3.方法

exec() 方法

test() 方法，能够检测一个字串中，是否含义知足正则规范的子串. 返回true,或者fasle

5.String对象的几个方法

match search replace split

代码:

<html>

<head>

var str="aklfabcdj1234akabcadkfl韩顺sakfabc5678lABCsa";

/*var reg=/韩顺平/gi;

if(reg.test(str)){

window.alert("含有");

}else{

window.alert("没有");

}*/

//如今咱们把abc子串转成北京

/* var reg=/abc/gi;

var newStr=str.replace(reg,"北京");

window.alert(newStr);*/

var reg=/(\d){4}/gi;

//按照正则表达式来分割

var newStr=str.split(reg);

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

window.alert(newStr[i]);

}

</script>

</head>

<body>

</body>

</html>

6.综合小案例:

代码:

function abc(){

//先获得用户输入

var inputcon=document.getElementById('myta').innerText; //value

//得打text1

var text1=document.getElementById('text1').value;

var test2=document.getElementById("text2").value;

var reg="/"+text1+"/gi"; //abc /abc/gi

window.alert("reg"+reg);

//str怎么当作对象.

var newString=inputcon.replace(eval(reg),test2);

//把新的串放入到第二个文本域

document.getElementById("myta2").innerText=newString;

}

</script>

<h1>替换小测试</h1>

hello

</textarea>

</textarea>

<br />

请输入你要查找的字符串:<input type="text" id="text1" /> <br /><br />

请输入你要替换成什么穿:<input type="text" id="text2" /><br />

7.正则表达式中重要的概念

子表达式

咱们能够用圆括号组成一个比较复杂的匹配模式，那么一个圆括号的

部分咱们能够看做是一个子表达式。

举例

var reg=/(\d)([a-z])/gi

(\d)就是第一个子表达式

([a-z]) 是第二个子表达式

捕获

多个子表达式所匹配到的内容按顺序出如今内存的缓冲区中，这个我

们称为捕获

反向引用

圆括号的内容被捕获后，能够在这个括号后被使用，从而写出一个比

较实用的匹配模式，这个咱们称为反向引用

var str="1adkk"

var reg=/(\d)([a-z])/gi

把 (\d)匹配到的结果 1 放入缓存区 =》引用 \1

把 ([a-z])匹配的内容 a 放入缓存区 => 引用\2

思考题:

请思考下面的问题:

请在字符串中检索商品编号,形式如:12321-333999111 这样的号码,要求知足前面是一个五位数,而后一个-号,而后是一个九位数,连续的每三位要相同

代码:

var str = "aaaaabbbb45678-678900034bv123hhh55555 88888 99999 12345-444555999777";

var reg=/(\d){5}-(\d)\2{2}(\d)\3{2}(\d)\4{2}/gi;

var regs=str.match(reg);

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

window.alert(regs[i]);

}

8.正则表达式语法的细节:

8.1经常使用的正则表达式

// var str="1111111";

//{n} n 是一个非负整数。匹配肯定的 n 次。

// var reg=/1{2}/gi;

//{n,m} 表示指定字符串出现次数大于等于n小于等于m m>=n

//使用贪婪匹配模式

// var reg=/1{3,5}/gi;

//+ 表示出现1次到任意屡次

//* 表示出现0次到任意屡次

// var reg=/1+/gi;

//? 表示出现0次到1次

// var reg=/a1?/gi;

//[a-z] 表示能够匹配a-z中任意一个字符

//[0-9] 表示能够匹配0-9中任意一个字符

//[a-zA-Z0-9] 表示能够匹配a-z或者 A-Z或者0-9中任意一个字符

// var str="hell.....o111";

// var reg=/[a-z]/gi;

//[^a-z] 表示能够匹配不是a-z中的任意一个字符

// var reg=/[^a-z]/gi;

//[abcd] 表示能够匹配abcd中的任意一个字符。

//[^abcd] 表示能够匹配不是abcd中的任意一个字符

// var reg=/[^abcd]/gi;

// . 匹配出 \n 以外的全部字符,若是要匹配.自己则须要使用 \.

// var reg=/\./gi;

//([\d\D])\1{2} 任意三个连续的字符

// var reg=/([\d\D])\1{2}/gi;

//xn的用法特殊的字符可使用\xn

// var reg=/\x21/gi;

//^ 匹配目标字符串的开始位置

// var str="hanjjkj hihihi han";

// var reg=/^han/gi;

//$ 匹配目标字符串的结束位置

// var reg=/han$/gi;

// \ 检索某些特殊字符的时候，须要用到转义符号，不然检索不到结果，

//须要用到转义符号的字符 . * + ( ) $ / \ ? [ ] ^ { }

// var reg=/\$/gi;

//选择匹配符号 | 既能够匹配这个，又能够匹配那个

var reg=/\$ | han/gi;

var res=str.match(reg);

window.alert(res+"发现位置"+RegExp.index);

</script>

8.2电子邮件的正则表达式

var str = "hashunping@sohu.com.";

/*只能有一个@，@前面是用户名,能够是a-z A-Z 0-9 _-字符 @后面是域名,能够是sohu.com 或者 tsinghua.org.cn 而且域名只能是英文字母163.com*/

// var reg= /[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z]/gi; //验证是不是电子邮件的reg

var reg=/^[a-zA-Z0-9_]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/gi;

if(reg.test(str)){

window.alert("格式ok");

}else{

window.alert("电子邮件的格式不ok");

}

</script>

8.3结巴程序:

var str = "我....我要....学学学学....编程程程程程程phppppppp";

//1.考虑把.去掉

var reg1=/\./gi;

var reg2=/(.)\1+/gi; //用于去捕获出现屡次的字符

var res1=str.replace(reg1,"").replace(reg2,"$1");

window.alert(res1);

</script>

JavaScript学习

1、js的基本介绍

1. js 技术用在什么地方?

2. js的基本介绍

3. 浏览器历史

如何理解js是事件驱动的脚本语言

js的变量类型

js的标识符的规范

2、js的基本数据类型

1.整数

实数

特殊的数值

布尔类型

字符型

js的复合数据类型

js的特殊数据类型

数据类型的强制转换

3、js的运算符

1.除法

2. ++ 和 – 运算

3. 关系运算符

4. 逻辑运算符

5．js的位运算和移位运算->面试题

4、js的流程控制

1 . 顺序控制

2. 分支控制

2.1 单分支

2.2双分支

2.3 多分支

2.4 多分支的switch

5、js的循环控制语句

1. for语句

2. while循环控制

3. do..while循环控制

实际运用一下for来输出一个金字塔

6、如何调试 js代码

7、函数

1. 为何须要函数

js函数的分类

2.1 自定义函数

2.2 系统函数(js语句自己提供)

函数的调用方式

3.1 函数名(参数值); (经过函数名调用)

3.2 经过函数指针去调用

js的函数调用过程

4.1 基本调用原则:

4.2函数调用:

4.3 js使用小结

8、js的数组的介绍

1. 为何须要数组?

2.快速入门的案例: 用数组的方法来完成 王大爷养乌龟的问题:

3.数组的基本使用

如何建立数组

3.2 如何访问数组的数据

3.3 数组在内存中怎样存在..

3.4 数组的经常使用的属性和函数

3.5 数组小结:

9、js的二维数组

1.建立二维数组

2.二维数组的理解和指定访问某个变量

js的排序

11、js的查找

1.顺序查找

2.二分查找

12、面向对象

1.js的面对对象编程的介绍

2.面向对象编程的引入

3.js面向对象编程的快速入门

4.js中自定义类(原型对象)的五种方法

4.1工厂方法

4.2经过构造函数来定义类(最多)

4.3经过prototype 来定义

4.4 构造函数及原型混合方式

4.5 动态原型方式

5.动态的添加方法和属性.

6.js中一切都是对象

7.js的对象在内存中是怎样存在?

8.js的对象回收机制!!!

9.this

9.1提出问题?

2.快速入门的案例: 用数组的方法来完成王大爷养乌龟的问题:

10.1第一种方法：动态的给某个对象指定函数

1.js内部类的分类以下图：