JavaScript
来源：互联网 发布：linux考试认证 编辑：程序博客网 时间：2024/06/05 07:23
JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4. JS是弱类型，Java是强类型。
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1. 变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。
例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5如果两条语句写在同一行，就需要分号隔开。
1）关键字：几乎跟Java一样
2）标识符,分隔符：和Java一样
3）注释：用了Java当中的这两种： // 和 /* */
4）数据类型：number类型、string类型、boolean类型、undefined(当变量声明但没有赋值)
5）变量：var (弱类型,类似于Java当中的Object)
6）在js当中，单引号和双引号是一样的，封装的都是字符串（但同时有两个引号封装的，内部的要用单引号）
7）全局变量和局部变量
全局变量----只要不是函数内部声明的，都是。并且不会以大括号来区分，也不会以<script>来区分
a、只要不在函数内部声明，那么一个变量即使在导入的.js文件中声明，在页面脚本中同样是有效的。
b、Java当中的变量的作用域是以大括号来区分，而JS不是。
局部变量----函数内部声明的和形参
函数内部的形参也是局部的，里面更改的值只能在内部有效，函数返回之后就无效了
例：
<html><head><title>javascript语言学习</title></head><body><script type="text/javascript">//1 标识符,关键字,分隔符---几乎和Java一样 //2 注释：只支持 //单行 和 /*多行*/ //3 变量：弱类型 ， 所有的变量都是用var来声明---本质上就是Java当中的Object类型 var x=3; var y="abc"; //alert(x+","+y); x="xyz"; //alert(x); x=true;//js当中的布尔类型和C一样，有0 和 非0 的概念 x+=1; //alert(x); a=3.14;//因为浏览器有兼容性，所以一个变量不声明类型也可以直接对期赋值(但不要去读),因为是弱类型，都是var，写不写一样 //alert(a); //alert(aa);//由于变量aa没有声明也没有赋值，所以这里是出错的，没有输出 a='aa'; //alert(a);//js当中，单引号和双引号是一样的，对应的变量都是字符串---js当中没有字符类型--包含在字符串当中 //a=33223232323232332322323232323456; //alert(a); //alert(typeof(a));//number //由于浏览器有兼容性，一条语句的末尾不加分号，也可以正常执行，但这样写不规范，建议还是加上。 //另外，同一行当中的多条语句之间的分号不能省，否则不能正常执行 var m=1; var n=2; //alert(m+n);</script><script type="text/javascript">//4 基本数据类型//alert( typeof("aaaa") );//string //alert( typeof('0') );//string //alert( typeof(false) );//boolean //alert( typeof(100) );//number //alert( typeof(1.23) );//number //alert( typeof('0')=="string" );//true //alert (typeof(x)=='number');//true --使用单引号和双引号，效果是一样的 //alert( typeof('0')=="String" );//false----※※※大小写敏感※※※ //alert( typeof(x) ); //前面片段中定义的变量，在这里仍然是有效的 //alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x</script></body></html>2. 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1， var x = 3120/1000*1000; x = 3120;而不是3000。
2， var x = 2.4+3.6 ; x = 6;而不是6.0
3， var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;
加号对于字符串是连接符
4， && || 是逻辑运算符 & |是位运算符。
5， 也支持三元运算符
6， 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
var x = 3;
var y = “123”;
var z = false;
typeof(x); //number
typeof(y); //string
typeof(z); //boolean
例：
<html><head><title>javascript语言学习</title></head><body><script type="text/javascript">//5 运算符：算术、赋值、比较、位运算、三元运算 //5.1算术运算 var a=3710; //alert("a="+a/1000); //alert("a="+a/1000*1000); var b=2.3; var c=5.7; //alert(b+c);//8 //alert(11+23);//34 //alert("23"+11);//2311---string---加号为字符串连接 //alert("23"-11);//12 ---字符串遇到减号，自动会转换成数值型进行运算 //alert(true);//true 和数值进行运算时，true为1，flase为0 //alert(true+1);//2 //alert(false+1);//1 //alert(100%3);//1 //alert(100%-3);//1 //alert(-100%3);//-1 如果有负数，结果和前面那个数同符号。---和Java是一样的 //5.2 赋值运算: = += -= *= /= %= var n=3,m; m=n++;//用法同Java //alert("m="+m+",n="+n);//m=3,n=4 var n=3,m;//和Java不同的是，变量可以重复声明 m = ++n;//用法同Java //alert("m="+m+",n="+n);//m=4,n=4 var n; //alert(n);//4---这里没有对该变量重新赋值，所以用的还是前面的那个，不重新开内存 var i=3; i +=3;//其它的如：-= *= /= %= ，同理 //alert("i="+i); //5.3 比较运算符 var j=10; //alert( j>5 ); //其它如 ：< >= <= == != 等，同理 //alert( j==10 ); //alert( j!=10 ); //5.4 逻辑运算符 && || ! var k=4; //alert(k>3 && k<10); //true //alert( !(k>3) ); //false //alert( !k );//k是“非0”，再非一下则是flase---0 //5.5 位运算符 & | ^ >> << >>>(无符号右移) ---和Java一样 var c = 6; //6: 110 //3: 011 //alert( c&3 );// 010 --2 //alert(c^100^100); //c---6---一个数与两个相同的数进行异或运算结果仍然等于原数 //alert(c>>>1);//3 //5.6 三元运算符---?号表达式 ----和java一样 //alert(3>0?100:300); var xxyy; //alert(xxyy); //undefined---如果一个变量声明之后没有赋值，那么就是该值 alert(xxyy==undefined);//true ----这个undefined代表的是和true,false等一样的，是一个值，因此不要用引号 alert(xxyy=="undefined");//false</script></body></html>3. 语句(与Java语句格式相同)
1. 判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2. 选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
3. 循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
例：<html><head><title>javascript语言学习</title></head><body><script type="text/javascript">/*//if语句var x=3;if (x>0){alert("yes");} else {alert("no");}if (x-4) {//非0 即是 true,除了0以外的数都是非零的数，即为truealert("yes2");} else {alert("no2");}if (x=4) {//一个“=”号是赋值，赋的值是4，该值同时也作为整个表达式的值---非0， 即是 truealert("yes3");} else {alert("no3");//如果把上面的4改为0，则输出: no3}//根据上面的结果，建议如果是判断某变量是否等于某值，写成如下方式(把数字放在前面)if (4==x) {//这种方式能够避免漏写“=”号的bugalert("yes4");} else {alert("no4");}var b=(3,4+5);//逗号表达式中的最后一个式子的值作为整个的结果alert(b);var c=5;if(c>1){ alert("a");}else if(c>2){ alert("b");}else if(c>3){ alert("c");}else{ alert("d");}//结果：a*/</script><script type="text/javascript">//Java语言：switch表达式支持的类型：byte,int等整数,char，jdk1.7之后增加了String类型 //JavaScript语言：支持所有类型，即所有类型的数据都能用于选择 var x="x"; switch(x){ default:alert("c"); case "aa":alert("a");break; case "abc":alert("b"); }//常规的写法就不说了，说说这种的，这种的显示结果是c和a，因为在default处进入之后并没有break所以会进入到case "aa"里面去</script></body></html><html><head><title>javascript语言学习</title><link rel="stylesheet" href=table.css></head><body><script type="text/javascript">a:for (var x=0;x<3;x++){for (var y=0;y<4;y++){document.write("x="+x+" ");break a;}document.write("<br/>");}</script><hr/><h2>九九乘法表</h2><script type="text/javascript">for (var x=1;x<=9;x++){for (var y=1;y<=x;y++){document.write(y+"*"+x+"="+x*y+" ");}document.write("<br/>");}</script><br/><h2>九九乘法表</h2><script type="text/javascript">document.write("<table>");for (var x=1;x<=9;x++){document.write("<tr>");for (var y=1;y<=x;y++){document.write("<td>"+y+"*"+x+"="+x*y+"</td>");}document.write("</tr>");}document.write("</table>");</script></body></html>想要将其他代码融入到Html中，都是以标签的形式。
1、 JS代码存放在标签对<script> js code．．．</script>中。
2、当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签早期有一个属性language,而现在使用type属性。
<html><head></head><body><!-- js脚本片段可以写任意个,位置也是任意的，只是要注意浏览器的解析顺序 --> <!-- js的写法1 --> <script type="text/javascript"> alert("HelloWorld"); </script> <!-- js的写法2 --> <script type="text/javascript" src="a.js"> </script> <!-- js的写法3,注意，这种方式不行--包含在标签内的js代码无效 --> <script type="text/javascript" src="a.js"> alert("kkkk");//无效代码，被上面一行的导入方式屏蔽掉了!!!并且上面一行的a.js的内容也能够显示但是此行不能 </script> </body><script type="text/javascript">alert("kkkk2");//这里是可行的</script></html>1、Js中的数组的长度是可以自动增长的
2、Js中的数组的功能相当于Java中的数组和集合的综合
3、var arr=[3,2,-4,78,10];//正确，注意，Java赋初值用的是大括号，而Js用的是中括号
var arr[]=[3,2,-4,78,10];//错误的，不能声明成arr[]----声明时不能带中括号
4、遍历数组
5、Js中的数组当中可以存储不同数据类型的数据
<script type="text/javascript"> //数组定义的方式1: 定义时直接赋初值 var arr =[12,34,2,-3,90,12]; //alert(typeof(arr)); //object //alert("len:"+arr.length); //遍历数组 for(var x=0;x<arr.length;x++){ document.write("arr["+x+"]="+ arr[x]+" "); } document.write("<br/>"); arr[0]=-1000; arr[7]=666;//数组可以自动增长，且arr[6]没有赋值则是undefined for(var x=0;x<arr.length;x++){ document.write("arr["+x+"]="+ arr[x]+" "); } document.write("<br/>"); var arr2=[]; //alert(arr2.length);//0 arr2[1]=10; for(var x=0;x<arr2.length;x++){ document.write("arr2["+x+"]="+ arr2[x]+" "); } document.write("<br/>"); //※※错误的声明方式--数组 //int[] arr3 ={1,2,3}; //var[] arr3 = [1,2,3];//错的，[]代表的是数组类型，而js中，所有数据类型只有一个var声明，不存在“var[]”这种类型 var arr4=[1,2,3,100]; arr4[0]="abc"; arr4[1]=true; for(var x=0;x<arr4.length;x++){ document.write("arr4["+x+"]="+ arr4[x]+" "); } document.write("<br/>"); //※※综上,js数组的两个特点： //1,长度是可变的 //2,元素的类型是任意的 </script>6、Js中数组的另一种定义方式：使用js当中的Array对象
注：用Array对象定义数组时，参数为1时，是指数组的长度；若大于1时，直接就是数组中的元素初值
var arr2 = new Array(5); //定义长度为5的数组----参数为1时，是长度
var arr3 = new Array(5, 6, 7); //参数大于1时，就是元素的初值
7、Js中Array对象中的方法
1）concat 方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
2）join 方法：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
3）reverse 方法:返回一个元素顺序被反转的 Array 对象。
4）shift 方法: 移除数组中的第一个元素并返回该元素。-----removeFirst()
5）slice 方法 (Array): 返回一个数组的一段。-----类似String中的substring()
6）sort 方法: 返回一个元素已经进行了排序的 Array 对象。
7）splice 方法: 替换。从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
8）unshift 方法：将指定的元素插入数组开始位置。返回值为新数组的长度----addFirst()
例：
<html> <head> <title>Array对象使用方法演示</title> </head> <body> <script type="text/javascript" src="out.js"> </script> <script type="text/javascript"> var arr=["aaa","bbb","ccc","ddd"]; println(arr); var arr2=["111","222","333","okok"]; var newArr = arr.concat(arr2); println(newArr); println(newArr.join("-")); println("<hr/>"); //pop() : 移除数组中的最后一个元素并返回该元素。 println( newArr.pop() ); println(newArr); //push() : 将新元素添加到一个数组中，并返回数组的新长度值。 arr.push("x1","x2"); println(arr); //arr.push("y1",arr2,"z1");//注意1，arr2在arr当中是一个元素---即arr变成二维数组。注意2，push方法会改变原来的数组。arr长度为：9 arr=arr.concat("y1",arr2,"z1");//注意1，该方法会把数组arr2当中的每个元素取出来，分别添加到arr当中---arr还是一维数组。注意2，concat方法不会改变原来的数组，连接结果以新数组的形式返回。旧arr的长度还是6，新arr的长度是12 println(arr); println(arr.length); arr.sort(); println(arr); arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始，删掉3个元素，并且在删除的位置插入:"u1","u2","u3","u4","u5" println(arr); //※※※做栈和队列的提示 //unshift---addFirst concat--addLast() shift---removeFirst() pop---removeLast() //Array.prototype.addFirst=unshift; </script> <script type="text/javascript" src="arraytools.js"> </script> <script type="text/javascript"> var arr=["aaa","bbb","ccc","ddd"]; var max = arr.getMax(); println(max); println(arr); </script> </body></html>其中用到的工具
arraytools.js//给原型对象添加一个getMax()方法Array.prototype.getMax = function() {var temp=0;for(var x=1;x<this.length;x++){if(this[x]>this[temp]){temp = x;}}return this[temp];};Array.prototype.toString = function() {return "["+this.join("")+"]";};out.jsfunction println(param){document.write(param+"<br/>");}function print(param){document.write(param);}函数
1、一般函数
格式：
function 函数名(形式参数...)
{
执行语句；
return 返回值；
}
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一
个数组中。
例：
function demo(){<span style="font-family: 宋体;">//定义函数。</span>alert(arguments.length);}demo(“hello”,123,true);//调用函数。那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++){alert(arguments[x]);}为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。//那么该函数也可以通过show()的方式运行。
<script type="text/javascript"> function getValue(){ <span style="white-space:pre"></span>alert("aa"); return 100;<span style="white-space:pre"></span>}//var v = getValue();//alert("v="+v); var v2=getValue; //相当于getValue把引用值传给v2，因此v2也是一个“function对象”----getValue和v2都是引用变量 //alert("v2="+v2 );//其实是输出v2对象的toString() //alert("v2="+v2() ); //调用v2这个函数对象---调用函数</script>
函数虽然定义时是声明成两个参数，但调用时却是可以传入任意个
<span style="font-weight: normal;"><span style="font-size:12px;">function show(x,y){ alert(x+","+y);}//show(23,22);//23,22//show(23); //23,undefined//show(); //undefined,undefined//show(23,22,11);//23,22 后面的一个参数函数接收了但没有用</span></span>每个函数中，存在一个 默认的数组arguments ,里面存储着本次调用时传入的所有实参
//函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的，我们可以访问到这个数组对象function show2(x,y){ arguments[0]=1000;//可以把形参x的值改掉 document.write(x+","+y+"<br/>"); for(var i=0;i<arguments.length;i++){ <span style="white-space:pre"></span>document.write(arguments[i]+","); <span style="white-space:pre"></span>}}show2(11,22,33,44); //※综上，函数的技术细节：//1, js中的函数是没有重载，只以函数名来识别的---其实函数名就是一个function对象的引用的名字//2, js函数中有一个内部维护的arguments数组来接收与保存形参技术细节：1、js中函数没有重载，只以函数名来识别，函数名就是function对象的引用名
2、函数的参数全是js内部用一个arguments的数组来接收与存放的------该对象是js内部隐含帮我们做的，而且我们可以访问，也可以更改值
2、函数的参数全是js内部用一个arguments的数组来接收与存放的------该对象是js内部隐含帮我们做的，而且我们可以访问，也可以更改值
2、动态函数
通过Js的内置对象Function实现。
例：
<script type="text/javascript">//把函数的形参用第1个参数传入，函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体，因此非常灵活，该思想类似Java当中的类反射。<span style="white-space:pre"></span>var add = new Function("a,b","var s = a+b; return s; ");//alert( add(12,11));</script>如同：function demo(x,y){alert(x+y);}demo(4,6);不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
3、 匿名函数
格式：function(){...}
例：
var demo = function(){...}demo();通常在定义事件属性的行为时较为常用。
例：
function test(){alert(“load ok”);}window.onload = test;可以写成匿名函数的形式：
window.onload = function(){alert(“load ok”);}匿名函数就是一种简写格式。
函数定义与调用例子：
<html> <head> <title>javascript数组与函数练习</title> </head> <body> <script type="text/javascript"> //写一个获取数组中元素最大值的函数 function getMax(arr){ var max=0;//最大值的下标 for(var x=1;x<arr.length;x++){ if(arr[x]>arr[max]){ max = x; } } return arr[max]; } //调用 var arr=[23,-3,45,0,-100,47,22]; var v = getMax(arr); //alert("v="+v); //数组排序 function sortArray(arr){ for(var x=0;x<arr.length-1;x++){ for( var y=x+1;y<arr.length;y++){ if(arr[x]>arr[y]){ swap(arr,x,y); } } } } function swap(arr,x,y){ var temp = arr[x]; arr[x] = arr[y]; arr[y] = temp; } //alert(arr); //document.write(arr+"<br/>"); // sortArray(arr); //alert(arr); //document.write(arr+"<br/>"); //我们的输出函数---把内容输出到页面且换行 function println(str){ document.write(str+"<br/>"); } println(arr); sortArray(arr); println(arr); //到数组当中查找元素 function searchElement(arr,key){ for(var x=0;x<arr.length;x++){ if(arr[x]==key){ return x; } } return -1; } println( searchElement(arr,0) ); println( searchElement(arr,123) ); </script> <script type="text/javascript"> //二分查找 function binarySearch(arr,key){ var max,min,mid; min=0; max=arr.length-1; while(min<=max){ mid = (max+min)>>1; if(key>arr[mid]){//落在右边 min = mid+1; }else if(key<arr[mid]){//落在左边 max = mid-1; }else{ return mid; } } return -1; } println( binarySearch(arr,0) ); println( binarySearch(arr,123) ); //数组反转 function reverseArray(arr){ for(var start=0,end=arr.length-1; start<end; start++,end--){ swap(arr,start,end); } } reverseArray(arr); println("反转之后:"+arr); </script> </body></html>注：下文中用到的println()方法都是另外导入的out.js方法中写的
out.js：
function print(param){document.write(param);}function println(param){document.write(param+"<br/>");}在with语句块中，可以省去对象名的引用
- var dd2 = new Date();
- with(dd2){//在with语句块中，可以省去对象名“dd2”的引用
- var year = getFullYear(); //dd2.getFullYear()
- var month= getMonth(); //从0开始的月份数
- var day = getDate();//返回月份中的第几天
- println(year+"年"+month+"月"+day+"日 ");
- }
一、Object对象
<html><head><title>Object对象的用法演示</title></head><body><script type="text/javascript">/*toString()将对象转换成字符串*/function show(){alert("show......");}//alert(show);//默认调用toString()//alert(show.toLocaleString());//alert(show.toString());var arr=[1,2,3,8];//alert(arr.toString());//alert(arr);//默认调的toString()/*valueOf(): 返回指定对象的原始值 *///alert(arr.valueOf());//结果和toString()一样//alert(show.valueOf());//结果和toString()一样</script></body></html>二、String 对象
1、创建String对象的两种方式
1）var str = new String("abc123");
2）var str2 = "abcd1234";
2、String对象当中的属性
str.length：字符串长度
3、String对象当中的方法
bold()：加粗
fontcolor("red")：设置颜色
link("http://www.hncu.net")：设置为超链接
substring(1, 5)：取子串[1,5)，Java一样，左包含，右不包含
substr(1,5)：取子串：从1位置开始，取5个字符
三、Date 对象
1、Date对象的构造
- var date = new Date();
- println(date); //GMT格式输出
- println(date.toLocaleString());//转成本地系统的日期时间格式输出。
- println(date.toLocaleDateString()); //只有日期，没有时间
2、从对象中解析出相应的日期元素
- //var year = date.getYear();//过时了，尽量不用 。它是返回从1900到当前日期所经过的年份
- var year = date.getFullYear();
- println(year);
- var month= date.getMonth(); //从0开始的月份数
- println(month);
- var day1 = date.getDay(); //返回星期中的第几天,0为星期天
- println(day1);
- var day2 = date.getDate();//返回月份中的第几天
- println(day2);
3、要求显示出某个日期的“星期几”
- function getWeekDay( num ){
- var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
- return weeks[num];
- }
- var weekDay = getWeekDay( date.getDay() );
- println(weekDay);
4、日期对象和毫秒值之间的转换
- var date2 = new Date();
- var time = date2.getTime();//日期对象-->毫秒值
- println("time:"+time);
- var date3 = new Date(time);
- println(date3.toLocaleDateString());
5、日期对象和字符串之间进行转换
- //日期对象-->字符串：toLocaleString() 和 toLocaleDateString()
- //字符串-->日期
- //var strDate="9/27/15";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
- var strDate="9/27/2015 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
- var time = Date.parse(strDate);//返回的是毫秒数
- var d = new Date(time);
- println(d.toLocaleString());
6、日期解析错误时，抛异常
- <script type="text/javascript">
- Date.prototype.parse2 =function(str){
- throw new Exception();
- };
- try{
- var strDate2="9/27/2ewewwe15 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
- var time2 = Date.parse2(strDate2);//返回的是毫秒数
- }catch(e){
- alert("日期解析错误....我给的提示....");
- }
- </script>
四、Math 对象
Math.ceil(12.34);//向上进位
Math.floor(12.34);//向下进位
Math.round(12.54);//四舍五入
Math.pow(5,6);//5的6次方
//生成10个[0,10]范围内的随机整数for (var x=0;x<10;x++){//var n=Math.floor(Math.random()*11);//法1//var n=Math.round(Math.random()*10);//法2var n=parseInt(Math.random()*11);//法3println(x+": "+n);}五、Global对象
Global对象中的方法是全局方法，调用时可以省略Global，直接写方法名
1、parseInt()中的基数用法----进制转换
1）将指定进制格式的字符串转换成-->10进制数
- //var num = parseInt("110",10); //110
- //var num = parseInt("110",2); //6
- var num = parseInt("0x3c",16); //60
2）10进制转换成--->非10进制
- var num2 = new Number(6);
- println( "num2="+ num2.toString(2) );
- var num3 = 60;
- println( "num3="+ num3.toString(16) );
2、for(in)语句的用法
1）格式：
for(变量 in 对象){
...//对对象中的元素进行遍历操作
}
2）例：
<script type="text/javascript">/* <span style="white-space:pre"></span>for( 变量名 in 对象 ){ ...//分别对对象中的元素(属性)进行遍历操作 <span style="white-space:pre"></span>} <span style="white-space:pre"></span>*/ <span style="white-space:pre"></span>//数组对象 <span style="white-space:pre"></span>var arr=[12,13,22,-1,56,0,9]; <span style="white-space:pre"></span>for (x in arr){//注意，对于数组，这里的x是下标即是0,1,2,3,... <span style="white-space:pre"></span>println(x+": "+arr[x]);<span style="white-space:pre"></span>} <span style="white-space:pre"></span>print("<hr/>");//用for...in语句操作自定义对象for (x in p2){//x是函数中的成员变量与成员方法的名称println(x+"------"+p2[x]);// p2[x]就是valeOf(x)}</script>六、自定义对象
对js来描述对象--Person
1、方法1:本质上，有点类似于Java当中的直接new一个空参对象，然后往里面直接添加变量
- <script type="text/javascript">
- function Person(){
- //alert("Person...");
- println("Person...");
- }
- var p = new Person();
- //要为Person对象p添加变量，直接使用：p.对象名=...
- p.name = "Jack";
- p.age = 24;
- //alert(p.name+"---"+p.age);
- //要为Person对象p添加方法，直接使用：p.方法名=...
- p.show = function(){
- println(p.name+"---"+p.age);
- };
- p.show();//调方法
- var obj = new Object();
- obj.name = "God";
- obj.age =10000;
- obj.show = function(){
- println(obj.name+"::::"+obj.age);
- };
- obj.show();
- </script>
2、方法2:更接近于Java当中的面向对象的方式----类的封装
- <script type="text/javascript">
- //方式2:更接近于Java当中的面向对象的方式----类的封装
- function Person(name,age){
- this.name = name; //这里的this.表示给当前对象添加一个变量
- this.age = age;
- this.setName= function(name){
- this.name = name;
- };
- this.getName= function(){
- return this.name;
- };
- this.show= function(){
- return "name:"+this.name+",age:"+this.age;
- };
- }
- var p = new Person("Tom",22);
- println(p.name+"==="+p.age);
- p.setName("Rose");
- println(p.show());
- for(x in p){ //x为自定义对象当中的变量名
- println(x+":"+p[x]); //p[x]为自定义对象当中的变量值(如果是函数，为它的字节码)
- }
- </script>
3、方式3: map方式, key:value ----类似于java当中的数据封装，把数据封装到Map集合当中<span style="font-weight: normal;"><script type="text/javascript"> //对象调用成员有两种方式：对象.属性名 和 对象["属性名"] //1) 对象.属性名的方式应该注意: 如果属性名不符合标识符的命名规则，那么不能采用这种方式调用，如下面例子当中的不能采用map[8]的方式 //2) 对象["属性名"]的方式应该注意:如果属性名符合标识符的命名规则，那么访问时属性名应该要加引号，如下面例子当中的map[name]要写成pp["name"]的形式才行 var pp = { //"name":"张三","age":"23", //key:value name:"张三",age:"23", //这句和上面一句等效---key的名称可以省略引号 "getName": function(){ return this.name; } }; println(pp.name+"===" + pp.age); println(pp.getName()); println( pp["name"] ); //用 pp[name]是不行的 //map集合的定义 var map={ 8:"张三" , 3:"李四", 5:"Jack" }; var val = map[8];//8是数字，不是变量名，因此引号省略照样能解析出来 println("val:"+val); //var val2 = map.8; //不行，因为8不是变量的形式 //println(val2); </script> </span>
4、map数据封装的进一步扩展
- <script type="text/javascript">
- //属性值是数组
- var myMap = {
- names:["Jack1","Jack2","Jack4"],
- ages:[25,22,18]
- };
- //取出Jack2的姓名和年龄
- println("name:"+ myMap.names[1]);
- println("age:"+ myMap.ages[1]);
- var myMap2 = {
- names:[{name:"Jack1"},{name:"Jack2"},{name:"Jack4"}]
- };
- //取出Jack1
- println("name:"+ myMap2.names[0].name);//或者println( myMap2.names[0]["name"]);
- </script>
5、对象的prototype属性
要给对象添加新功能时，直接采用“对象.prototype.新内容”的形式就可以。这内容可以是变量，也可以是函数。
1）为String对象添加一个自定义函数trim：剪去字符串两端的空格
- <script type="text/javascript">
- function trim(str){
- var start, end;
- start=0;
- end=str.length-1;
- while(start<=end && str.charAt(start)==' '){
- start++;
- }
- while(start<=end && str.charAt(end)==' '){
- end--;
- }
- return str.substring(start,end+1);
- }
- //测试
- var s=" dsk dsds ";
- //alert("#"+s+"#");
- //alert("#"+ trim(s) + "#" );
- </script>
2）添加变量
- String.prototype.aa = 200;
- println("abc123".aa);
3）添加函数
- String.prototype.trim = trim;
- println("<hr>");
- println("aa3".trim(" abc123 "));
（这里的trim就是上面（1）里面自定义属性中的trim）
注：这里通过“aa3”.trim(" abc123 ")处理的是别的字符串并不是自己
4）通过对象直接调用的函数（注意，一定要把前一版本当中的参数str改成this）
- <script type="text/javascript">
- String.prototype.trim = function(){
- var start, end;
- start=0;
- end=this.length-1;
- while(start<=end && this.charAt(start)==' '){
- start++;
- }
- while(start<=end && this.charAt(end)==' '){
- end--;
- }
- return this.substring(start,end+1);
- };
- println(" aa3 ".trim() );
- var str2 =" 76jh dssdds ";
- println( str2.trim() );
- </script>
注：这里是对自己进行处理
6、对象原型修改练习
1）给String对象添加一个toCharArray()方法
2）给String对象添加一个reverse方法：将字符串反转
3）JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
- <script type="text/javascript">
- String.prototype.toCharArray= function(){
- var chs=[];
- for(var x=0; x<this.length; x++){
- chs[x] = this.charAt(x);
- }
- return chs;
- };
- //给String对象添加一个reverse方法：将字符串反转
- String.prototype.reverse=function(){
- //JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
- //辅助函数，用于交换数组中的两个元素
- function swap(arr,x,y){
- var temp = arr[x];
- arr[x] = arr[y];
- arr[y] = temp;
- }
- var arr = this.toCharArray();
- for(var x=0,y=arr.length-1; x<y; x++,y--){
- swap(arr,x,y);
- }
- return arr.join("-");
- };
- /*
- //辅助函数，用于交换数组中的两个元素
- function swap(arr,x,y){
- var temp = arr[x];
- arr[x] = arr[y];
- arr[y] = temp;
- }
- */
- //测试
- var str = "dsjk2323jkjkewio";
- println( str.reverse() );
- //测试：在外部能否调用函数reverse内部的swap函数
- //测试结果：不行的。其实它和局部变量是一个道理。
- //因此，以后在写某个函数内部的辅助功能函数时，最好写在内部
- /*
- var arr =[23,45,7,9];
- swap(arr,1,2);
- println("kkk");
- println(arr);
- */
- </script>
BOM------浏览器对象模型
主要讲window对象：代表浏览器中一个打开的窗口
一、BOM功能
提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法
二、window中的事件
3个load事件（ 浏览器的生命周期）：onload, onunload, onbeforeunload（但从字面也能看出意思吧，还有其他的事件，自己可以查看帮助文档）
- <!DOCTYPE html>
- <html>
- <head>
- <title>bom_window_event.html</title>
- </head>
- <body>
- <script type="text/javascript">
- //事件注册
- onload=function(){
- //alert("onload...");
- window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
- }
- /*
- onunload=function(){
- alert("onunload...");
- }
- onbeforeunload=function(){
- alert("onbeforeunload...");
- }
- */
- </script>
- </body>
- </html>
三、window中的方法
- <!DOCTYPE html>
- <html>
- <head>
- <title>bom_window_method.html</title>
- </head>
- <body>
- <script type="text/javascript" src="print.js">
- </script>
- <script type="text/javascript">
- //window中的方法
- function f1(){
- var b = confirm("你确定要执行吗？");
- alert("b="+b);
- }
- var id1,id2;
- function f2(){
- // id1 = setTimeout("alert('time out...')" , 3000);//经过指定毫秒值后计算一个表达式----定时器
- id2 = setInterval("alert('time out...')" , 3000);//每经过指定毫秒值后计算一个表达式----定时器
- }
- function f3(){
- //clearTimeout(id1);
- clearInterval(id2);//清除定时器
- }
- function f4(){
- //moveBy(10,10);//浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素)
- //moveTo(40,40);
- //窗口抖动
- for(var x=0;x<10;x++){
- moveBy(20,0);
- moveBy(0,20);
- moveBy(-20,0);
- moveBy(0,-20);
- }
- }
- </script>
- <input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/>
- <input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/>
- <input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/>
- <input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/>
- </body>
- </html>
四、window中的对象
1、window中的navigator对象----浏览器信息
- function windowNavigatorShow(){
- var name = window.navigator.appName;
- //var version = window.navigator.appVersion;
- var version = navigator.appVersion;//window对象是默认的，可以省略不写
- println("name:"+name+",version:"+version);
- }
2、window中的location对象----浏览器地址栏<span style="font-weight: normal;">function windowObj4(){ //获取属性 var pro = window.location.protocol; //window可省略 //alert(pro); var text = location.href; alert(text); location.href="http://www.baidu.com.cn";//1 location.href ="5a.html";//2 //上两句1和2处可以对目前所处的地址进行更改，这就是在浏览器中浏览到某些东西时突然会跳到其他页面去的原理，如1会自动跳转到百度}</span>5a.html
<html> <head> <title>aa</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> function windowObjDemo(){history.back();} </script> <input type="button" value="演示window中的对象" onclick="windowObjDemo()" /> </body></html>3、window中的history对象----浏览器已浏览的url信息
其中的方法：
back从历史列表中装入前一个 URL。forward从历史列表中装入下一个 URL。go从历史列表中装入 URL。- <input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />
DOM -----Document Object Model
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操
作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用
Java Applet 或 ActiveX 等复杂的组件， 现在基于 DOM 规范， 在支持 DOM 的浏览器环境中，Web开发人员可以很快捷、 安全地创建多样化、 功能强大的Web应用程序。 这里只讨论
HTML DOM。
一、DOM概述
1、文档对象模型定义了 JavaScript 可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：
1）核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等）
2）与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）
3）浏览器对象（window、location、history、navigator 等）
4）文档对象（document、images、form 等）
2、JavaScript 中两种主要的对象模型
1）浏览器对象模型 （BOM）
提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法。（见前一篇）
2）文档对象模型 （DOM）
提供了访问浏览器窗口内容，如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。
在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。
二、主要作用
主要用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。
文档：标记型文档----标签、文本、属性等
对象： 封装了属性和方法，可以调用里面的属性和方法。
模型：所有标记型文档都具备一些共性特征的体现。
三、一些重要的概念（主要DOM树）
1、DOM树模型：
DOM解析将按照标签的层次体现出标签的所属，形成一个树状结构---DOM树。
标签、属性和文本内容称为节点(node)，节点也称为对象，标签通常也称为页面中的元素(element)
1）DOM技术的核心内容：
把标记文档变成对象树，通过对树中的对象进行操作，实现对文档内容的操纵。
2）DOM解析的方式：
将标记文档解析成一棵DOM对象树，并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成
3）DOM解析的好处：
可以对树中的节点进行任意的操作：增删改查
4）DOM解析的弊端：
这种解析需要将整个标记型文档加载进内存，因此，如果标记型文档很，耗内存。
2、DHTML：动态的HTML，它不是一门语言，是多项技术综合体的简称。
以HTML+CSS的方式做的是静态网页，要想变成动态的，必须在此基础上加入JS和DOM技术。因此，DHTML包含：HTML+CSS+JS+DOM
3、HTML:提供标签，封装数据
4、CSS：提供样式属性，对数据的显示样式进行定义
5、DOM: 把标记型文档封装成对象，供JS操纵
6、JS: 提供程序设计语言，通过DOM来操纵文档内容和显示样式
四、 DOM中获取节点的方法
节点都具备三个必备属性：节点名称(nodeName)、节点类型(nodeType)、节点值(nodeValue)。
节点的类型： 标签节点的类型值为1，属性节点的类型值为2，文本节点的类型值为3
节点值：标签型节点是null,没有值的。只有属性和文本节点才可以有值。
1、getElementById() :通过节点的id获取该节点对象
- function getNodeDemo1(){
- //获取id为divid1的节点
- //var divNode= document.getElementById("divid1");
- var divNode= document.getElementById("divid2");
- //alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
- //获取div节点中的文本 innerHTML innerText 属性
- var txtHTML = divNode.innerHTML;
- var txt = divNode.innerText;
- alert(txtHTML+","+txt);
- //更改div节点中的文本内容
- //divNode.innerHTML="我把它改成湖南城市学院了....";
- divNode.innerHTML="我把它改成湖南城市学院了....".fontcolor("red");
- }
2、getElementsByName() :通过节点的name属性获取节点集合----注意，是集合
- function getNodeDemo2(){
- var node = document.getElementsByName("userName");
- //alert(node.nodeName);//undefined
- //alert(node);//因为是数组，所以是集合
- //alert(node[0].nodeName);//INPUT
- //alert(node.length);//1
- //alert(node[0].nodeType);//1
- alert(node[0].nodeValue);//标签型节点的value都是null
- //alert(node[0].getAttribute("value"));
- }
3、getElementsByTagName() :通过节点的标签名字获取节点集合
1）获取document下的所有
- function getNodeDemo3(){
- var nodes = document.getElementsByTagName("a");
- //alert(nodes.length);//5
- //alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容：城市首页
- //给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时，若属性不存在则是添加，若存在则是修改
- for(var x=0; x<nodes.length; x++){
- //alert(nodes[x].innerHTML);
- nodes[x].target = "_blank";
- }
- }
- function getNodeDemo4(){
- var divNode = document.getElementById("mylink");
- var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点
- for(var x=0; x<nodes.length; x++){
- nodes[x].target = "_blank";
- }
- }
五、利用节点的层次关系(level)获取节点的方法
父节点：parentNode属性
子节点：childNodes集合, firstChild() , lastChild()
上一个兄弟节点：previousSibling属性
下一个兄弟节点：nextSibling属性
1、获取父节点
- var tabNode = document.getElementById("tableid1");
- var node = tabNode.parentNode;
2、获取子节点
获取到的子节点是集合
- var nodes = tabNode.childNodes;
注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过-----不光是<table>节点，其它节点也一样
2）表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体
3、获取兄弟节点
- var node = tabNode.previousSibling.previousSibling;//上一个兄弟
- alert(node.nodeName);//div
- var node = tabNode.nextSibling.nextSibling;//上一个兄弟
- alert(node.nodeName);//dl
六、DOM中的一些操作
1、创建文本对象
- function createAndAdd1(){
- //1利用createTextNode()创建一个文本对象
- var oTextNode = document.createTextNode("新的文本！");
- //2获取div对象
- var divNode = document.getElementById("div1");
- //3把oTextNode添加成div对象的孩子
- divNode.appendChild(oTextNode);
- }
2、创建标签对象
- function createAndAdd2(){
- //1利用createElement()创建一个标签对象
- var oBtnNode = document.createElement("input");
- oBtnNode.type="button";
- oBtnNode.value="新建的按钮";
- //2获取div对象
- var divNode = document.getElementById("div1");
- //3把oTextNode添加成div对象的孩子
- divNode.appendChild(oBtnNode);
- }
3、直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作
<span style="font-weight: normal;">function createAndAdd3(){//获取div1节点var oDivNode1=document.getElementById("div1");//添加按钮oDivNode1.innerHTML="<input type='button' value='按钮a'>";//oDivNode1.innerHTML+="<input type='button' value='按钮a'>";oDivNode1.innerHTML+="<a href='http://www.baidu.com' target='_blank'>百度一下</a>";}</span>使用innerHTML属性时若不使用“+”号，原来的文本内容会被覆盖
4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点，后者删自己----不建议使用
- function deleteNode(){
- var oDivNode = document.getElementById("div2");
- //自杀式----不建议
- //oDivNode.removeNode();//默认false,不删除子节点集合
- //oDivNode.removeNode(true);//true,删除子节点集合
- //通过父节点去删除它的孩子
- oDivNode.parentNode.removeChild(oDivNode); //建议使用父节点这种方法
- }
5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点，后者替换自己----不建议使用
- function updateNode(){
- var oDivNode = document.getElementById("div2");
- var oDivNode4 = document.getElementById("div4");
- //自杀式----不建议
- //oDivNode.replaceNode(oDivNode4);
- //通过父节点去替换它的孩子：用oDivNode4去替换oDivNode
- oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);
- }
6、替换节点(克隆替换)
- function updateNode2(){
- var oDivNode = document.getElementById("div2");
- var oDivNode4 = document.getElementById("div4");
- var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆
- //通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode
- oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);
- }
0 0
- Javascript
- JavaScript
- javascript
- javascript
- javascript
- javascript
- javascript
- JavaScript
- javascript
- JavaScript
- Javascript
- javascript
- javascript
- JavaScript
- javascript
- javascript
- JavaScript
- javascript
- 【心态】:阳光心态，健康生活
- 38. Count and Say [easy] (Python)
- 解决fastjson循环引用问题（死循环）
- 圆角按钮--继承自JButton
- 创建文件系统常用命令
- JavaScript
- 批量显示/隐藏
- 一个IT工薪族的4年奋斗成果
- 深入理解SELinux SEAndroid 第一部分
- poi上传excel
- Android中Activity的启动模式
- 深入理解SELinux SEAndroid 第二部分
- jsp九大隐式对象
- Java反射（六）----- 通过反射了解集合泛型的本质
