javaScript高级

来源：互联网发布：windows tv box 编辑：程序博客网时间：2024/05/18 01:05

Js对象

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
/* function say(name,age){
alert(name+"今年"+age+"岁了");
}
say("张三",3); */

var sayFunc=new Function("name","age","alert(name+'今年'+age+'岁了')");
sayFunc("李四",4);

</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var sayFunc=new Function("name","age","alert(name+'今年'+age+'岁了')");
// sayFunc("李四",4);//js的方法是对象，对象作为参数
alert("sayFunc方法对象的方法参数个数："+sayFunc.length);//基于原型老祖宗是object

</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var sayFunc=new Function("name","age","alert(name+'今年'+age+'岁了')");
// sayFunc("李四",4);
// alert("sayFunc方法对象的方法参数个数："+sayFunc.length);
alert(sayFunc.toString());//输出源码
alert(sayFunc.valueOf());//输出源码
</script>
</body>
</html>

1 js函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// test();
function test(){
alert('this is a test');
}
// test();
//函数名称严格区分大小写
function TEST(){
alert("hello king");
}
// TEST();
//函数名称重复会产生覆盖
// test();
function test(){
alert('hello maizi');
}
// test();
function test1(){
alert('this is test1 function');
}
// alert(test1());
function test2(){
return null;
return undefined;
return;
return true;
return 'this is king';
return 1.2;
alert('this is a test');
return 1;
}
// alert(test2());
function calc(num1,num2){
return num1+num2;
}
// alert(calc(1,2));
// alert(window.calc(3,5));
// alert(calc(1,2,3,4,5,6));
// function calc1(num1=1,num=2){
// return num1+num2;
// }
function calc1(num1,num2){
num1=num1||1;
num2=num2||2;
return num1+num2;
}
alert(calc1(3,6));
</script>
</body>
</html>

2 默认参数的形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//实现默认参数的形式
// function calc(x,y){
// x=x||0;
// y=y||0;
// return x+y;
// }
// function calc(x,y){
// if(x===undefined){
// x=0;
// }
// y=y===undefined?0:y;
// return x+y;
// }
// alert(calc());
// alert(calc(1,3));
function calc(x,y){
// return arguments;
// alert(arguments[0]);
// alert(arguments[1]);
x=arguments[0]?arguments[0]:0;
y=arguments[1]?arguments[1]:0;
return x+y;
}
// alert(calc());
// alert(calc(1,2));
//可变参数形式的函数
function test(){
var paramsNum=arguments.length;//得到传入参数的个数
var sum=0;
for(var i=0;i<paramsNum;++i){
sum+=arguments[i];
}
return sum;
}
// alert(test(1,2,3,4,5,6,123,344,43,3));
function test1(){
var paramsNum=arguments.length;
var max=0;
for(var i=0;i<=paramsNum-1;i++){
if(arguments[i]>max){
max=arguments[i];
}
}
return max;
}
alert(test1(123,3432,23456,445643));
</script>
</body>
</html>

3 变量作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//变量作用域
var x=1;
function test(){
document.write('函数体内x的值为:'+x+'<br/>');
x=19;
document.write('函数体内对x重新赋值，此时x的值为：'+x+'<br/>');
}
document.write('函数体外x的值为：'+x+'<br/>');
test();
document.write('x的值为：'+x+'<br/>');
document.write('<hr color="red"/>');

</script>
</body>
</html>

4 全局变量与局部变量的区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//全局变量和局部变量的区别
// function test(){
// var x=1;
// alert(x);
// }
// test();
// alert(x);
// function test1(){
// y=5;
// alert(y);
// }
// test1();
// alert(y);
var x=1,y=2;
function calc(x,y){
document.write('a的值为'+a+'<br/>');//undefined
document.write('函数体内x的值为：'+x+'<br/>');
document.write('函数体内y的值为：'+y+'<br/>');
var x=0,y=6;
z=x+y;
x=x+y;
var a=198;
document.write('a的值为：'+a+'<br/>');
document.write('x的值为：'+x+'<br/>');
return z;
}
// alert(calc(x,y));
// alert(x+'-'+y+'-'+z);
var a=1,b=2;
function test1(){
var a=5,b=10;
return a+b;

}
function test2(){
var a=11,b=22;
return a+b;
}
alert(test1());
alert(test2());
alert(a+'--'+b);

</script>
</body>
</html>

5 全局函数的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//全局函数的例子
document.write('默认情况的结果<br/>');
document.write(parseInt('32')+'<br/>');
document.write(parseInt('032')+'<br/>');
document.write(parseInt('0x32')+'<br/>');
document.write(parseInt('true')+'<br/>');
document.write(parseInt('3king')+'<br/>');
document.write(parseInt(' 5abc ')+'<br/>');
document.write(parseInt(' 88 99 00')+'<br/>');
document.write('<hr color="red"/>');
document.write('转换成二进制的结果<br/>');
document.write(parseInt('32',2)+'<br/>');
document.write(parseInt('032',2)+'<br/>');
document.write(parseInt('0x32',2)+'<br/>');
document.write('<hr/>');
document.write('转换成八进制的结果<br/>');
document.write(parseInt('32',8)+'<br/>');
document.write(parseInt('032',8)+'<br/>');
document.write(parseInt('0x32',8)+'<br/>');
document.write('<hr/>');
document.write('转换成八进制的结果<br/>');
document.write(parseInt('32',16)+'<br/>');
document.write(parseInt('032',16)+'<br/>');
document.write(parseInt('0x32',16)+'<br/>');
//二进制转换成其他进制
document.write('<hr/>');
document.write('二进制转换成其他进制的结果<br/>');
document.write(parseInt('11001010',2)+'<br/>');
document.write(parseInt('11001010',8)+'<br/>');
document.write(parseInt('11001010',10)+'<br/>');
document.write(parseInt('11001010',16)+'<br/>');
document.write(parseInt('202',2)+'<br/>');

//转换成浮点型
document.write('<hr/>');
document.write(parseFloat('2.6')+'<br/>');
document.write(parseFloat('323')+'<br/>');
document.write(parseFloat('2e2')+'<br/>');
document.write(parseFloat('123abc')+'<br/>');
document.write(parseFloat(' 2.6 ')+'<br/>');
document.write(parseFloat('a2.6')+'<br/>');

//通过isFinite()检测是否是无穷值
var x=123;
x=Infinity;
x=-Infinity;
x=0/0;
x=0;
x=false;
// alert(isFinite(x));
x=NaN;
x=123;
x=false;
x=parseInt('king3');
alert(isNaN(x));

</script>

</body>
</html>

6 url函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//测试编码URI的函数
var url="http://www.phpfamily.org/test.php?search= this is a test&sum=1+2";
var res=encodeURI(url);
document.write(res);
var res1=decodeURI(res);
document.write('<br/>'+res1+'<br/>');
url="http://www.phpfamily.org/test.php?search= this is a test&sum=1+2&test1=!.()*~";
res=encodeURIComponent(url);
document.write(res+'<br/>');
res1=decodeURIComponent(res);
document.write('<br/>'+res1+'<br/>');
document.write('<hr color="red"/>');
var str1='你好hello maizi http://maiziedu.com?search=javascript&test=this is a test&test1=-_*?';
var result=escape(str1);
document.write(result);
document.write('<br/>');
var result1=unescape(result);
document.write(result1);
document.write('<hr/>');
eval('var i=12;');
// alert(i);
document.write('<hr color="red"/>');
var var1=new Boolean(123);
// alert(var1);
var1=false;
var1='3king';
var1=34;
var1=345.67;
var1='3';
var1=undefined;
var1=null;
var1=NaN;
var1=new Date();
// alert(Number(var1));
var var2=true;
var2=false;
var2=23;
var2=12.3;
var2=null;
var2=undefined;
var2=NaN;
var2='king';
alert(String(var2));

</script>
</body>
</html>

7 函数类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var test=function calc(a,b){
return a+b;
};
// alert(typeof test);
// alert(test(1,2));
// var test1=test;
// alert(typeof test1);
// alert(test1(3,4));
var test1=function(x,y){return x*y;};
123;
'king';
var test2=function(x,y){return x*y;};
// alert(test2(5,4));
var test3=test2;
alert(test3(3,4));

</script>
</body>
</html>

8 回调函数例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//回调函数的例子
function calc(x,y){
return x()+y();
}
function test1(){
return 3;
}
function test2(){
return 5;
}

// alert(calc(test1,test2));
alert(calc(function(){return 5;},function(){return 10;}));

</script>
</body>
</html>

9 数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// function cheng2(a,b,c){
// var i,arr=[];
// for(i=0;i<3;i++){
// arr[i]=arguments[i]*2;
// }
// return arr;
// }
// function jia1(a){
// return a+1;
// }
//
// var arr1=[];
// arr1=cheng2(10,20,30);
// alert(arr1);
// for(var i=0;i<3;i++){
// arr1[i]=jia1(arr1[i]);
// }
// alert(arr1);
function addOne(a){
return a+1;
}
function test(a,b,c,callback){
var i,arr=[];
for(i=0;i<3;i++){
arr[i]=callback(arguments[i]*2);
}
return arr;
}
// alert(test(5,6,7,addOne));
// alert(test(5,6,7,function(a){return a+2}));
function test1(a,b){
return a*b;
}
// alert(test1.call(test1,5,10));
var params=[3,4];
// alert(test1.apply(test1,params));
//自调用函数的形式
(
function(){
alert('this is a test');
}
)();

(
function(a,b){
alert(a+b);
}
)(3,5);

</script>
</body>
</html>

jsp闭包

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var a=22;

function func(){
alert(a);
}

func();//可以读取a，a是全局变量
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function func(){
// var a=22;
a=22;
}

func();
alert(a);//方法内是局部变量取不到 a=22是全局变量了

</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function func(){
var a=22;

function func2(){
return a;//从外部读取内部的局部变量从外面访问私有，闭包通过内部方法可以获取父方法的所有的私有属性。函数内部和函数外部连接起来的一座桥梁
}

return func2;//方法也是对象可以返回对象没有括号

var result=func();
alert("访问func的私有局部变量a:"+result());//闭包函数中变量都保存到内存中，

</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var name="The Window";
var object={//定义对象键值对的形式
name:"My object",//属性name值object fun
getNameFunc:function(){//属性getNameFunc 值一个对象
var name="object func";
return function(){
return name;
};
}
};
alert(object.name);//my Object
alert(object.getNameFunc()());//闭包调用function（）相当于执行function
//不返回function局部变量外面取不到的
</script>
</body>
</html>

1 打印笑脸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
var icon ="\u263a";
document.write(icon);
</script>
</head>
<body>

</body>
</html>

2 引用类型
Object
判断变量的类型有两种方式：
1. 采用typeof(): 打印的是所有类型的toString方法(所有类型的小写)
2. 采用instanceof关键字判断：是判断变量是不是由某种类型new出来的
<script>
var a ;
a = 10 ;
a = "abc" ;
a = true;
a = function(){
alert("aaa");
}
alert(typeof(a)) ;

a = 10 ;
a = new Number(10) ;
//alert(a instanceof Number) ;

//alert(typeof(a) == "number") ;
</script>
3 类型转化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
<script type="text/javascript">

</script>
</head>
<body>
年龄:<input type="text" name="" id = "age">
<input type="button" value="弹出年龄" onclick="fun()">
</body>
</html>

4 JS跳转页面
a.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>history对象</title>
</head>
<script type="text/javascript">

</script>
<body>
aaaaaaaaaaaaaaaaaaaaaaaaaaa
<a href = "b.html">b.html</a>
<input type="button" value="前进" onclick="fun()">
</body>
</html>

b.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">

</script>
<body>
bbbbbbbbbbbbbbbbbb
<a href = "c.html">c.html</a>
<input type="button" value="前进" onclick="fun()">
<input type="button" value="后退" onclick="fun1()">
<input type="button" value="直接去d页面" onclick="fun2()">
</body>
</html>
c.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">

</script>
<body>
ccccccccccccccc
<a href = "d.html">d.html</a>

<input type="button" value="前进" onclick="fun()">
<input type="button" value="后退" onclick="fun1()">
<input type="button" value="直接去a页面" onclick="fun2()">
</body></html>

d.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<script type="text/javascript">

</script>
<body>
ddddddddddddddddd
<input type="button" value="后退" onclick="fun1()">
<input type="button" value="直接去a页面" onclick="fun2()">
</body>
</html>

5 Javascript函数的定义
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

6 函数劫持
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

7 全局函数

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>全局函数</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>
8 Array对象
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Array对象</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

9 array对象常用方法
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>array对象的方法</title>
</head>
<body>
<script type="text/javascript">

</script>
</body>
</html>

10 标题栏滚动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>北京传智播客黑马训练营</title>
</head>
<body onload = "init()">
<script type="text/javascript">

</script>
</body>
</html>

js面向对象

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
var marry={//自定义对象
name:"marry",
age:2,
shout:function(){
alert("我是："+this.name+",今年："+this.age);
},
action:function(){
alert("会吃");
}
};

alert(marry.name);//直接new对象
alert(marry.age);
marry.shout();
marry.action();

function Dog(name,age){//构造方法
this.name=name;
this.age=age;
this.shout=function(){
alert("我是："+this.name+",今年："+this.age);
};
this.action=function(){
alert("会吃");
};
}

var jack=new Dog("jack",1);//构造方法，jack对象
alert(jack.name);
alert(jack.age);
jack.shout();
jack.action();
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function C(){
this.objPro="对象属性";
C.prototype.objPro2="对象属性2";
var privatePro="私有属性";//私有属性取不出用闭包
}
C.classPro="类属性";//static

alert(C.classPro);
var c=new C();
alert(c.objPro);
alert(c.objPro2);
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function C(){
var privateFunc=function(){
alert("私有方法");
};
privateFunc();
this.objFunc=function(){
alert("对象方法");
};
C.prototype.objFunc2=function(){
alert("对象方法2");
};
}
C.classFunc=function(){
alert("类方法");
};

C.classFunc();
var c=new C();
c.objFunc();
c.objFunc2();
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function Animal(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("我是："+this.name+",今年："+this.age);
};
this.action=function(){
alert("会吃");
};
}

function Dog(name,age){
Animal.apply(this, [name,age]);//实现继承父类属性和方法仅仅单纯属性继承
}

var jack=new Dog("jack",1);
alert(jack.name);
alert(jack.age);
jack.shout();
jack.action();
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function Animal(name,age){
this.name=name;
this.age=age;
this.shout=function(){
alert("我是："+this.name+",今年："+this.age);
};
this.action=function(){
alert("会吃");
};
}

function Dog(name,age){
Animal.apply(this, [name,age]);
}
Dog.prototype=new Animal();//类型的继承，jack类型是Animal

var jack=new Dog("jack",1);
alert(jack.name);
alert(jack.age);
jack.shout();
jack.action();
</script>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function Animal(){
this.say=function(){
alert("我是动物");
};
}

function Dog(){
this.say=function(){
alert("我是狗");
};
}
Dog.prototype=new Animal();

function Cat(){
this.say=function(){
alert("我是猫");
};
}
Cat.prototype=new Animal();

function say(animal){
if(animal instanceof Animal){//安全判断是否是Animal实例
animal.say();
}
}

var dog=new Dog();
var cat=new Cat();
say(dog);//调用子类方法实现多态
say(cat);
</script>
</body>
</html>
1 window对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
javascript组成部分：
EMCAScript（基本语法）
BOM( Browser Object MOdel) 浏览器对象模型.
浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要
操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

window 代表了一个新开的窗口
location 代表了地址栏对象。
screen 代表了整个屏幕的对象

window对象常用的方法：

open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveBy() 相对于原来的窗口移动指定的x、y值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。

setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定的代码一次。

注意：使用window对象的任何属性与方法都可以省略window对象不写的。

*/

function showAd(){
open("ad.html","_blank","height=400px,width=400px,toolbar=no,location=no,top=200px");
}

setTimeout("showAd()",2000);

//var id = window.setInterval("showAd()",2000);

function small(){
resizeTo(300,200); //相对于原本窗口改变指定的大小。
}

function move(){
for(var i = 0 ; i<100 ; i++){
window.moveBy(50,0); // 相对于原来的窗口移动指定的x、y值。
moveBy(0,50);
window.moveBy(-50,0);
window.moveBy(0,-50);
}
}

function move2(){
window.moveTo(500,200);
}

/*
function clearTest(){
window.clearInterval(id);
}
*/

</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="showAd()" value="下载电影"/>
<input type="button" onclick="small()" value="变小"/>
<input type="button" onclick="move()" value="moveBy"/>
<input type="button" onclick="move2()" value="moveTo"/>
<input type="button" onclick="clearTest()" value="取消定时任务"/>

</body>
</html>

2 事件的注册

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
事件：
注册事件的方式：

方式一：直接在html元素上注册
<body onload="ready()">

function ready(){
alert("body的元素被加载完毕了..");
}


方式二：可以js代码向找到对应的对象再注册。推荐使用。

var bodyNode = document.getElementById("body");

bodyNode.onload = function(){
alert("body的元素被加载完毕");
}
*/

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body id="body">

</body>

</html>

3 常用的事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
常用的事件：

鼠标点击相关：
onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：
onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：
onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他：
onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。
*/

function clickTest(){
alert("单击..");
}

function dbClick(){
alert("双击..");
}

function showTime(){
var timeSpan = document.getElementById("timeSpan");
var date = new Date().toLocaleString();
timeSpan.innerHTML = date.fontcolor("red");
}

function hideTime(){
var timeSpan = document.getElementById("timeSpan");
timeSpan.innerHTML = "";
}

function showInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "用户名是由6位的英文与数字组成".fontcolor("green");
}

function hideInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "";
}

function change(){
alert("城市改变了..");
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="clickTest()" value="单击" />
<input type="button" ondblclick="dbClick()" value="双击"/>
<span onmousemove="showTime()" onmouseout="hideTime()" >查看当前系统时间：</span><span id="timeSpan"></span>
用户名<input type="text" onfocus="showInfo()" onblur="hideInfo()" /> <span id="userName"></span>

<select onchange="change()" >
<option>广州</option>
<option>深圳</option>
<option>上海</option>
</select>

</body>
</html>

4 显示地址栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
地址栏对象(Location)

*/
function showURL(){
alert(location.url);
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="showURL()" value="显示地址栏"/>

</body>
</html>
5 location对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
地址栏对象(Location)

*/
function showURL(){
alert(location.url);
}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<input type="button" onclick="showURL()" value="显示地址栏"/>

</body>
</html>

6 屏幕对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
Screen(屏幕)对象

availHeight 获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth 获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。
width 获取屏幕的水平分辨率。
*/

document.write("获取系统屏幕的工作区域高度："+screen.availHeight+"<br/>");
document.write("获取系统屏幕的工作区域宽度："+screen.availWidth+"<br/>");
document.write("获取屏幕的垂直分辨率："+screen.height+"<br/>");
document.write("获取屏幕的水平分辨率："+screen.width+"<br/>");

</script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

阅读全文

0 0