JavaScript 基于对象 和 事件驱动!!!
<!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> table{70%; border-collapse:collapse;} table th{ border:#0000FF 1px solid} </style> </head> <body> <script type="text/javascript"> var x = 3; //变量 x = x-1; alert(x); if(2==x) //if swith while for 控制语句 alert("Yes"); else alert("No"); var y = "abc"; switch(y) { case "abc": alert("abc"); break; case "def": alert("def"); break; default: alert("default"); } x = 1; while(x<3) { alert("x=" + x); x++; } var sum=""; for( var x=1; x<3; x++ ) { if(x==2) sum = sum + "x=" + x; else sum = sum + "x=" + x + ","; } alert(sum); document.write("<font color='red' size='10'>"+sum+"<font/>"); document.write("<table>"); for(var x=1; x<=9; x++) { document.write("<tr>"); for(var y=1; y<=x; y++) { document.write("<th>" + y + "*" + x + "=" + y*x + "</th>"); } document.write("</tr>"); } document.write("</table>"); var arr = new Array(); //数组 arr = ["abc", 1, true, 8.9]; arr[6] ="I'am 6"; for(var x=0; x<arr.length; x++) { alert(arr[x]); } var str=""; function printArray(arr) //函数 { for(var x=0; x<arr.length; x++) { if(x==arr.length-1) str += arr[x]; else str += arr[x] + " , "; } alert(str);s } printArray(arr); </script> </body> </html>
函数使用 一般函数 动态函数 匿名函数
<script type="text/javascript"> function show() { for(var i=0; i<arguments.length; i++) alert(arguments[i]); return arguments.length; } show(1,2,3,4); show("length: " + show(1,2,3)); //动态函数 var show2 = new Function("x", "y", "sum=x+y; return sum"); var sum = show2(2,3); alert(sum); //匿名函数 var show3 = function() { alert("匿名函数"); } show3(); //事件驱动 + 匿名函数 window.onload = function() { alert("事件驱动 + 匿名函数"); } //事件驱动 + 一般函数 function method() { alert("事件驱动 + 一般函数"); } window.onload = method; </script>
构造对象
<script type="text/javascript"> // 构造对象Person function Person(name, age) { this.name = name; this.age = age; } var p = new Person("kevin", 23); alert(p.name + "-----" + p.age); //构造对象,添加属性 和 方法 function Person2() { } var p2 = new Person2(); p2.name = "xiang"; p2.age = 24; p2.fun = function() { alert(this.name + "++++" + this.age); } p2.fun(); </script>
封装: 可以先将所需功能写到一个*.js文件中,然后在HTML中调用*.js文件,即可调用其中的方法和变量。例如:
jsDemo1.js
// JavaScript Document function ArrayTool(){}; var arrayTool = new ArrayTool(); function sortArray(arr) { var temp=0; for(var i=0; i<arr.length; i++) { for(var j=arr.length-1; j>i; j--) { if(arr[j]<arr[j-1]) { temp = arr[j]; arr[j] = arr[j-1]; arr[j-1] = temp; } } } return arr; } function showArray(arr) { var str = ""; for(var i=0; i<arr.length; i++) { if(i==arr.length-1) str += arr[i]; else str += arr[i] + " , "; } alert(str); } arrayTool.getSortArray = sortArray; arrayTool.showArray = showArray;
HTML调用文件
<script type="text/javascript" src="jsDemo1.js"> </script> <script type="text/javascript"> var arr = [6,5,4,3,2,1]; arrayTool.showArray(arr); arrayTool.getSortArray(arr); arrayTool.showArray(arr); </script>
with用于确定对象的作用范围
with(对象){可直接调用对象的属性和方法,不用加对象名}
for…in语句用于遍历对象或数组
for(变量)s in (学生对象)stu){alert(s)}此处打印出stu的属性,要获得属性值用stu[s]
for(x in array) alert(x)打印的是数组角标
<script type="text/javascript"> function Person(name, age) { this.name = name; this.age = age; } var p = new Person("kevin", 23); with(p) //with语句 { alert(name + "----" + age); } //for in 语句遍历对象 和 数组 //for 语句 for(s in p) { alert(s + "=" + p[s]); } var arr = [1, 2, 3, 4]; for(a in arr) { alert(arr[a]); } </script>