1.JavaScript与Java对比:
JavaScript出自Netspace公司
Java出自sun公司JS是基于对象的,Java是面向对象的
JS是弱类型(非严谨)语言,Java强类型(严谨)语言
只要浏览器中含有解析JS的引擎,便可执行,与平台无关
2.JS变量,语句,循环:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS_1</title> <link rel="stylesheet" type="text/css" href="CSS/table.css"> <script type="text/javascript"> /* //JS变量 var str="'abc'" var i=3250/1000*1000 var j alert(str)//弹出'abc',alert不是JS语句,而是dom编程中内容 alert(i) //3250(而不是3000) alert(j) //undefined(变量定义但未初始化,弹出提示) */ //JS语句 /* var x=3 if(3=x)//JS的0/null表示false,非0/非null为true //一般对于判断写成3==x避免错误 alert("yes") else alert("no") alert(true+1)//2 var y=true,z=false y=y&z //y&&z alert(y)//y&z(1&0)结果0,y&&z结果false */ //for循环 var sum=""; for(var x=0;x<5;++x) if(x!=4) sum=sum+"x="+x+","; else sum=sum+"x="+x; document.write(sum+"<br/>");//x=0,x=1,x=2,x=3,x=4 //九九乘法表 document.write("<table>"); for(var i=1;i<=9;++i){ document.write("<tr>") for(var j=1;j<=i;++j) document.write("<td>"+i+"*"+j+"="+(i*j)+"</td>"); document.write("</tr>") document.write("<br/>"); } document.write("</table>"); //数组 var arr=[4,5,6]; for(var i=0;i<arr.length;++i) document.write("arr["+i+"]="+arr[i]+"<br/>"); var arr2=[1.2,"abc",3]//类似于Java中的集合,不存在越界 document.write(arr2[5]);//如果元素为被初始化,undefined var arr3=new Array();//未指定初始值 arr3[1]="efg"; document.write("<br/>"+arr3[1]); </script> </head> <body> </body> </html>table用到的简单的样式:table.css
@charset "utf-8"; table{ border-collapse:collapse; border-width:60px; } tr td{ border:#00F 2px solid; padding:10px; }
3.JS函数:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> JS函数 </title> <script type="text/javascript"> //函数 //无参函数 show(); function show(){ alert("无参函数"+arguments.length);//传入的实参会被封装到数组arguments中 } show(3,4,5);//show()依然会被调用,也就说JS不存在重载,纯粹按名调用 //有参函数 show2("abc",12) function show2(x,y){ document.write(x+" "+y+"<br/>");//abc 12 } //全局变量与局部变量 var x=10;//全局变量 function show3(x){ x=4;//局部变量x被改变 } show3(x); document.write("x="+x+"<br/>");//x=10 //函数返回值 function show4(){ return "123"; } document.write(show4());//123 //在JS中函数本身就是一个对象,而函数名就是对象的名字 function show5(){//show5指向该函数对象 return "函数对象"; } var x=show5;//将show5指向的对象的地址赋值给x,那么x也指向该对象alert(x);//将弹出整个函数 //动态函数,参数和函数体都可以作为变量传递 var dynamic=new Function("x","y","return x+y;"); document.write("<br/>"+dynamic(3,4));//7 //匿名函数 var anonymity=function(){ document.write("<br/>匿名函数被调用"); } anonymity(); </script> </head> <body> </body> </html>
4.JS中自定义对象:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JS中自定义对象</title> <script type="text/javascript" src="animal.js"></script> <script type="text/javascript"> //第一种初始化方式 function Person(){ document.write("进行初始化动作<br/>"); } var p=new Person();//会调用上面函数 p.name="zhangsan";//成员初始化 p.age=10; p.getName=function(){//相当于定义成员函数 return p.name; } document.write(p.getName()+"<br/>");//zhangsan //第二种初始化方式 /* function Animal(name,sex){//特别类似Java构造函数 this.name=name; this.sex=sex; } var animal=new Animal("lion","male"); document.write(animal["name"]+" "+animal.sex);//两种方式都能取到成员属性值 */ //把对象封装到JS文件中 document.write(animal.getName()); </script> </head> <body> </body> </html>animal.js:
/*JavaScript*/ function Animal(name,sex){ this.name=name; this.sex=sex; } var animal=new Animal("lion","male"); animal.getName=function(){ return animal.name; }
5.JS的with语句与in语句
ArrayTool.js
/*JavaScript*/ function ArrayTool(){ } var ArrayTool=new ArrayTool(); ArrayTool.getMax=function(arr){//getMax相当于ArrayTool对象的成员方法 var max=arr[0]; for(var i=1;i<arr.length;++i) if(arr[i]>max) max=arr[i]; return max; } ArrayTool.getMin=function(arr){//同上 var min=arr[0]; for(var i=1;i<arr.length;++i) if(arr[i]<min) min=arr[i]; return min; }<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 简单封装与特有语句 </title> <script type="text/javascript" src="ArrayTool.js"></script> <script type="text/javascript"> //使用ArrayTool.js中的方法 var arr=[3,5,1,4,7]; document.write("max="+ArrayTool.getMax(arr) +",min="+ArrayTool.getMin(arr)+"<br/>"); //with语句 function Student(name,sex){ this.name=name; this.sex=sex; } var stu=new Student("lisi","M"); with(stu){//当属性和方法特别多时,也可以采用这种方式调用 //with确定对象作用范围 document.write(name+"...."+sex+"<br/>"); } //JS类似Java增强for循环语句 for(s in stu){ //document.write(s+"<br/>");//s依次取出stu对象中的属性 document.write(s+"="+stu[s]+"<br/>")//stu[s]取出对象stu中属性相应的值 } for(index in arr){ document.write(arr[index]+" "); } </script> </head> <body> </body> </html>
6.JS内部固有对象:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> 内部已定义好的对象 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> </head> <script type="text/javascript"> //1.String对象 var str="abcdef" document.write(str.charAt(2)+" " +str.link("http://www.baidu.com")+" " +str.substr(2,9)+" "+str.substring(2,4)+"<br/>"); //c abcdef(超链接) cdef cd //2.Math对象 for(var i=0;i<6;++i){ document.write(parseInt(Math.random()*10+1)+" "); //需要得到整数,可以使用Global对象中的pareInt方法 } //3.R进制<-->十进制 var toHex=18; document.write("<br/>"+parseInt("12",16)+" "+toHex.toString(16))//18 12 //4.获取日期 var date=new Date(); var week=["日","一","二","三","四","五","六"]; with(date){ var month=getMonth()+1;//month也是从0开始 month=month>9?month:("0"+month);//01,02...12 document.write("<br/>"+getFullYear()+"年"+month+"月"+getDate()+"日 星期"+week[getDay()]); } //5.prototype(原型),也可以封装到.js文件使用,自定义对象没有prototype /* function getMax(arr){ var max=arr[0]; for(var i=1;i<arr.length;++i) if(arr[i]>max) max=arr[i]; return max; } */ Array.prototype.getZD=getMax;//Array.prototype 返回对象类型原型的引用。 //Array.prototype.getZD=getMax;相当于向数组对象中 //添加一个成员方法getZD var arr=[4,1,7,9]; //document.write("<br/>"+"max="+arr.getZD(arr));//max=9 //改进getMax方法 function getMax(){ var max=this[0]; for(var i=1;i<this.length;++i) if(this[i]>max) max=this[i]; return max; } document.write("<br/>"+"max="+arr.getZD()); //向String中添加一个字符串变色方法 function myColor(color){ return "<font color='"+color+"'>"+this+"</font>"; } String.prototype.stringColor=myColor; document.write("<br/>abc".stringColor("red")); //6.回顾一下,去除String两端空格 var str=" a b "; var start=0,end=str.length-1; for( ;(start<=end)&& (str[start]==' '||str[end]==' '); ){ if(str[start]==' ') ++start; if(str[end]==' ') --end; } document.write("<br/>"+"--"+str.substring(start,end+1)+"--");//--a b-- </script> <body> </body> </html>
