JavaScript的方法和技巧

这篇介绍javascript方面的日志，我在是Clang上看到的。作者介绍挺全面的，所以转载过来让感兴趣的朋友看一下。呵呵～～～

有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，
趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～

适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人
基础知识：HTML

JavaScript就这么回事1：基础知识

1 创建脚本块

< script language = ”JavaScript” >
       JavaScript code goes here
</ script >  

 2 隐藏脚本代码

 

1 :  < script language = ”JavaScript” >
2 :  <!--
3 : document.write(“Hello”);
4 :  //  -->
5 :  </ script >  

在不支持JavaScript的浏览器中将不执行相关代码

3 浏览器不支持的时候显示

1 :  < noscript >
2 : Hello to the non - JavaScript browser.
3 :  </ noscript >  

4 链接外部脚本文件

1 :  < script language = ”JavaScript” src = " /”filename.js " ” ></ script >  

5 注释脚本

1 :  //  This is a comment
2 : document.write(“Hello”);  //  This is a comment
3 :  /**/ /*
4: All of this
5: is a comment
6: */  

6 输出到浏览器

1 : document.write(“ < strong > Hello </ strong > ”); 

7 定义变量

1 :  var  myVariable  =  “some value”; 

8 字符串相加

1 :  var  myString  =  “String1”  +  “String2”; 

9 字符串搜索

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  myVariable  =  “Hello there”;
4 :  var  therePlace  =  myVariable.search(“there”);
5 : document.write(therePlace);
6 :  //  -->
7 :  </ script >  

10 字符串替换

1 : thisVar.replace(“Monday”,”Friday”); 

11 格式化字串

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  myVariable  =  “Hello there”;
4 : document.write(myVariable.big()  +  “ < br /> ”);
5 : document.write(myVariable.blink()  +  “ < br /> ”);
6 : document.write(myVariable.bold()  +  “ < br /> ”);
7 : document.write(myVariable.fixed()  +  “ < br /> ”);
8 : document.write(myVariable.fontcolor(“red”)  +  “ < br /> ”);
9 : document.write(myVariable.fontsize(“18pt”)  +  “ < br /> ”);
10 : document.write(myVariable.italics()  +  “ < br /> ”);
11 : document.write(myVariable.small()  +  “ < br /> ”);
12 : document.write(myVariable.strike()  +  “ < br /> ”);
13 : document.write(myVariable.sub()  +  “ < br /> ”);
14 : document.write(myVariable.sup()  +  “ < br /> ”);
15 : document.write(myVariable.toLowerCase()  +  “ < br /> ”);
16 : document.write(myVariable.toUpperCase()  +  “ < br /> ”);
17 : 
18 :  var  firstString  =  “My String”;
19 :  var  finalString  =  firstString.bold().toLowerCase().fontcolor(“red”);
20 :  //  -->
21 :  </ script >  

12 创建数组

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  myArray  =   new  Array( 5 );
4 : myArray[ 0 ]  =  “First Entry”;
5 : myArray[ 1 ]  =  “Second Entry”;
6 : myArray[ 2 ]  =  “Third Entry”;
7 : myArray[ 3 ]  =  “Fourth Entry”;
8 : myArray[ 4 ]  =  “Fifth Entry”;
9 :  var  anotherArray  =   new  Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);
10 :  //  -->
11 :  </ script >  

13 数组排序

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  myArray  =   new  Array( 5 );
4 : myArray[ 0 ]  =  “z”;
5 : myArray[ 1 ]  =  “c”;
6 : myArray[ 2 ]  =  “d”;
7 : myArray[ 3 ]  =  “a”;
8 : myArray[ 4 ]  =  “q”;
9 : document.write(myArray.sort());
10 :  //  -->
11 :  </ script >  

14 分割字符串

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  myVariable  =  “a,b,c,d”;
4 :  var  stringArray  =  myVariable.split(“,”);
5 : document.write(stringArray[ 0 ]);
6 : document.write(stringArray[ 1 ]);
7 : document.write(stringArray[ 2 ]);
8 : document.write(stringArray[ 3 ]);
9 :  //  -->
10 :  </ script >  

15 弹出警告信息

1 :  < script language = ”JavaScript” >
2 :  <!--
3 : window.alert(“Hello”);
4 :  //  -->
5 :  </ script >  

 16 弹出确认框

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  var  result  =  window.confirm(“Click OK to  continue ”);
4 :  //  -->
5 :  </ script >  

17 定义函数

1 :  < script language = ”JavaScript” >
2 :  <!--
3 :  function  multiple(number1,number2)  ... { 
4: var result = number1 * number2;
5: return result;
6: }
7 :  //  -->
8 :  </ script >  

18 调用JS函数

1:  < a  href =”#”  onClick =”functionName()” > Link text </ a >
2:  < a  href ="/”javascript:functionName" ()” > Link text </ a >  

19 在页面加载完成后执行函数

1:  < body  onLoad =”functionName();” >
2: Body of the page
3:  </ body >  

20 条件判断

1 :  < script >
2 :  <!--
3 :  var  userChoice  =  window.confirm(“Choose OK or Cancel”);
4 :  var  result  =  (userChoice  ==   true )  ?  “OK” : “Cancel”;
5 : document.write(result);
6 :  //  -->
7 :  </ script >  

 21 指定次数循环

1 :  < script >
2 :  <!--
3 :  var  myArray  =   new  Array( 3 );
4 : myArray[ 0 ]  =  “Item  0 ”;
5 : myArray[ 1 ]  =  “Item  1 ”;
6 : myArray[ 2 ]  =  “Item  2 ”;
7 :  for  (i  =   0 ; i  <  myArray.length; i ++ )  ... { 
8: document.write(myArray[i] + “<br/>”);
9: }
10 :  //  -->
11 :  </ script >  

22 设定将来执行

1 :  < script >
2 :  <!--
3 :  function  hello()  ... { 
4: window.alert(“Hello”);
5: }
6 : window.setTimeout(“hello()”, 5000 );
7 :  //  -->
8 :  </ script >  

23 定时执行函数

1 :  < script >
2 :  <!--
3 :  function  hello()  ... { 
4: window.alert(“Hello”);
5: window.setTimeout(“hello()”,5000);
6: }
7 : window.setTimeout(“hello()”, 5000 );
8 :  //  -->
9 :  </ script >  

24 取消定时执行

1 :  < script >
2 :  <!--
3 :  function  hello()  ... { 
4: window.alert(“Hello”);
5: }
6 :  var  myTimeout  =  window.setTimeout(“hello()”, 5000 );
7 : window.clearTimeout(myTimeout);
8 :  //  -->
9 :  </ script >  

25 在页面卸载时候执行函数

1:  < body  onUnload =”functionName();” >
2: Body of the page
3:  </ body >  

JavaScript就这么回事2：浏览器输出

26 访问document对象

1 :  < script language = ”JavaScript” >
2 :  var  myURL  =  document.URL;
3 : window.alert(myURL);
4 :  </ script >  

 27 动态输出HTML

1 :  < script language = ”JavaScript” >
2 : document.write(“ < p > Here’s some information about  this  document: </ p > ”);
3 : document.write(“ < ul > ”);
4 : document.write(“ < li > Referring Document: “  +  document.referrer  +  “ </ li > ”);
5 : document.write(“ < li > Domain: “  +  document.domain  +  “ </ li > ”);
6 : document.write(“ < li > URL: “  +  document.URL  +  “ </ li > ”);
7 : document.write(“ </ ul > ”);
8 :  </ script >  

28 输出换行

1 : document.writeln(“ < strong > a </ strong > ”);
2 : document.writeln(“b”); 

29 输出日期

1 :  < script language = ”JavaScript” >
2 :  var  thisDate  =   new  Date();
3 : document.write(thisDate.toString());
4 :  </ script >  

30 指定日期的时区

1 :  < script language = ”JavaScript” >
2 :  var  myOffset  =   - 2 ;
3 :  var  currentDate  =   new  Date();
4 :  var  userOffset  =  currentDate.getTimezoneOffset() / 60 ;
5 :  var  timeZoneDifference  =  userOffset  -  myOffset;
6 : currentDate.setHours(currentDate.getHours()  +  timeZoneDifference);
7 : document.write(“The time and date  in  Central Europe is: “  +  currentDate.toLocaleString());
8 :  </ script >  

31 设置日期输出格式

1 :  < script language = ”JavaScript” >
2 :  var  thisDate  =   new  Date();
3 :  var  thisTimeString  =  thisDate.getHours()  +  “:”  +  thisDate.getMinutes();
4 :  var  thisDateString  =  thisDate.getFullYear()  +  “ / ”  +  thisDate.getMonth()  +  “ / ”  +  thisDate.getDate();
5 : document.write(thisTimeString  +  “ on “  +  thisDateString);
6 :  </ script >  

32 读取URL参数

1 :  < script language = ”JavaScript” >
2 :  var  urlParts  =  document.URL.split(“ ? ”);
3 :  var  parameterParts  =  urlParts[ 1 ].split(“ & ”);
4 :  for  (i  =   0 ; i  <  parameterParts.length; i ++ )  ... { 
5: var pairParts = parameterParts[i].split(“=”);
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
8: document.write(pairName + “ ：“ +pairValue );
9: }
10 :  </ script >  

你还以为HTML是无状态的么？

33 打开一个新的document对象

1 :  < script language = ”JavaScript” >
2 :  function  newDocument()  ... { 
3: document.open();
4: document.write(“<p>This is a New Document.</p>”);
5: document.close();
6: }
7 :  </ script >  

34 页面跳转

1 :  < script language = ”JavaScript” >
2 : window.location  =  “http: // www.liu21st.com/”;
3 :  </ script >  

35 添加网页加载进度窗口

1:  < html >
2:  < head >
3:  < script  language ='javaScript' > ...
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
5:  </ script >
6:  < title > The Main Page </ title >
7:  </ head >
8:  < body  onLoad ='placeHolder.close()' >
9:  < p > This is the main page </ p >
10:  </ body >
11:  </ html >  

 JavaScript就这么回事3：图像



36 读取图像属性

1:  < img  src ="/”image1.jpg" ” name =”myImage” >
2:  < a  href =”#  ” onClick =”window.alert(document.myImage.width)” > Width </ a >

37 动态加载图像

1 :  < script language = ”JavaScript” >
2 : myImage  =   new  Image;
3 : myImage.src  =  “Tellers1.jpg”;
4 :  </ script >  

38 简单的图像替换

1 :  < script language = ”JavaScript” >
2 : rollImage  =   new  Image;
3 : rollImage.src  =  “rollImage1.jpg”;
4 : defaultImage  =   new  Image;
5 : defaultImage.src  =  “image1.jpg”;
6 :  </ script >
7 :  < a href = " /”myUrl " ” onMouseOver = ”document.myImage.src  =  rollImage.src;”
8 : onMouseOut = ”document.myImage.src  =  defaultImage.src;” >
9 :  < img src = " /”image1.jpg " ” name = ”myImage” width = 100  height = 100  border = 0 >  

39 随机显示图像

1 :  < script language = ”JavaScript” >
2 :  var  imageList  =   new  Array;
3 : imageList[ 0 ]  =  “image1.jpg”;
4 : imageList[ 1 ]  =  “image2.jpg”;
5 : imageList[ 2 ]  =  “image3.jpg”;
6 : imageList[ 3 ]  =  “image4.jpg”;
7 :  var  imageChoice  =  Math.floor(Math.random()  *  imageList.length);
8 : document.write(‘ < img src = ”’  +  imageList[imageChoice]  +  ‘“ > ’);
9 :  </ script >  

40 函数实现的图像替换

1 :  < script language = ”JavaScript” >
2 :  var  source  =   0 ;
3 :  var  replacement  =   1 ;
4 :  function  createRollOver(originalImage,replacementImage)  ... {
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12 :  var  rollImage1  =  createRollOver(“image1.jpg”,”rollImage1.jpg”);
13 :  </ script >
14 :  < a href = ”#” onMouseOver = ”document.myImage1.src  =  rollImage1[replacement].src;”
15 : onMouseOut = ”document.myImage1.src  =  rollImage1[source].src;” >
16 :  < img src = " /”image1.jpg " ” width = 100  name = ”myImage1” border = 0 >
17 :  </ a >  

41 创建幻灯片

1:  < script  language =”JavaScript” > ...
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg”;
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg”;
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg”;
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg”;
11: function slideShow(imageNumber) ......{
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) ......{
15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);
16: }
17: }
18:  </ script >
19:  </ head >
20:  < body  onLoad =”slideShow(0)” >
21:  < img  src ="/”image1.jpg" ” width =100  name =”slideShow” >  

42 随机广告图片

1 :  < script language = ”JavaScript” >
2 :  var  imageList  =   new  Array;
3 : imageList[ 0 ]  =  “image1.jpg”;
4 : imageList[ 1 ]  =  “image2.jpg”;
5 : imageList[ 2 ]  =  “image3.jpg”;
6 : imageList[ 3 ]  =  “image4.jpg”;
7 :  var  urlList  =   new  Array;
8 : urlList[ 0 ]  =  “http: // some.host/”;
9 : urlList[ 1 ]  =  “http: // another.host/”;
10 : urlList[ 2 ]  =  “http: // somewhere.else/”;
11 : urlList[ 3 ]  =  “http: // right.here/”;
12 :  var  imageChoice  =  Math.floor(Math.random()  *  imageList.length);
13 : document.write(‘ < a href = ”’  +  urlList[imageChoice]  +  ‘“ >< img src = ”’  +  imageList[imageChoice]  +  ‘“ ></ a > ’);
14 :  </ script >  

JavaScript就这么回事4：表单


还是先继续写完JS就这么回事系列吧～
43 表单构成

1:  < form  method =”post”  action =”target.html”  name =”thisForm” >
2:  < input  type =”text”  name =”myText” >
3:  < select  name =”mySelect” >
4:  < option  value =”1” > First Choice </ option >
5:  < option  value =”2” > Second Choice </ option >
6:  </ select >
7:  < br />
8:  < input  type =”submit”  value =”Submit  Me” >
9:  </ form >  

44 访问表单中的文本框内容

1:  < form  name =”myForm” >
2:  < input  type =”text”  name =”myText” >
3:  </ form >
4:  < a  href ='#'  onClick ='window.alert(document.myForm.myText.value);' > Check Text Field </ a >  

45 动态复制文本框内容

1:  < form  name =”myForm” >
2: Enter some Text:  < input  type =”text”  name =”myText” >< br />
3: Copy Text:  < input  type =”text”  name =”copyText” >
4:  </ form >
5:  < a  href =”#”  onClick =”document.myForm.copyText.value =
6:  document.myForm.myText.value;” > Copy Text Field </ a >  

46 侦测文本框的变化

1:  < form  name =”myForm” >
2: Enter some Text:  < input  type =”text”  name =”myText”  onChange =”alert(this.value);” >
3:  </ form >  

47 访问选中的Select

1 :  < form name = ”myForm” >
2 :  < select name = ”mySelect” >
3 :  < option value = ”First Choice” > 1 </ option >
4 :  < option value = ”Second Choice” > 2 </ option >
5 :  < option value = ”Third Choice” > 3 </ option >
6 :  </ select >
7 :  </ form >
8 :  < a href = ' # '  onClick = ' alert(document.myForm.mySelect.value); ' > Check Selection List </ a >  

48 动态增加Select项

1:  < form  name =”myForm” >
2:  < select  name =”mySelect” >
3:  < option  value =”First  Choice” > 1 </ option >
4:  < option  value =”Second  Choice” > 2 </ option >
5:  </ select >
6:  </ form >
7:  < script  language =”JavaScript” > ...
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
11:  </ script >  

49 验证表单字段

1:  < script  language =”JavaScript” > ...
2: function checkField(field) ...{
3: if (field.value == “”) ...{
4: window.alert(“You must enter a value in the field”);
5: field.focus();
6: }
7: }
8:  </ script >
9:  < form  name =”myForm”  action =”target.html” >
10: Text Field:  < input  type =”text”  name =”myField”onBlur=”checkField(this)” >
11:  < br />< input  type =”submit” >
12:  </ form >  

50 验证Select项

1 :  function  checkList(selection)  ... {
2: if (selection.length == 0) ...{
3: window.alert(“You must make a selection from the list.”);
4: return false;
5: }
6: return true;
7: }