教程：JavaScript就这么回事-优快云博客

有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～

趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～

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

基础知识：HTML

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

1创建脚本块

1:<scriptlanguage=”JavaScript”>

2:JavaScriptcodegoeshere

3:</script>

2隐藏脚本代码

1:<scriptlanguage=”JavaScript”>

2:<!–

3:document.write(“Hello”);

4://–>

5:</script>

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

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

1:<noscript>

2:Hellotothenon-JavaScriptbrowser.

3:</noscript>

4链接外部脚本文件

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

5注释脚本

1://Thisisacomment

2:document.write(“Hello”);//Thisisacomment

3:/*

4:Allofthis

5:isacomment

6:*/

6输出到浏览器

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

7定义变量

1:varmyVariable=“somevalue”;

8字符串相加

1:varmyString=“String1”+“String2”;

9字符串搜索

1:<scriptlanguage=”JavaScript”>

2:<!–

3:varmyVariable=“Hellothere”;

4:vartherePlace=myVariable.search(“there”);

5:document.write(therePlace);

6://–>

7:</script>

10字符串替换

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

11格式化字串

1:<scriptlanguage=”JavaScript”>

2:<!–

3:varmyVariable=“Hellothere”;

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:varfirstString=“MyString”;

19:varfinalString=firstString.bold().toLowerCase().fontcolor(“red”);

20://–>

21:</script>

12创建数组

1:<scriptlanguage=”JavaScript”>

2:<!–

3:varmyArray=newArray(5);

4:myArray[0]=“FirstEntry”;

5:myArray[1]=“SecondEntry”;

6:myArray[2]=“ThirdEntry”;

7:myArray[3]=“FourthEntry”;

8:myArray[4]=“FifthEntry”;

9:varanotherArray=newArray(“FirstEntry”,”SecondEntry”,”ThirdEntry”,”FourthEntry”,”FifthEntry”);

10://–>

11:</script>

13数组排序

1:<scriptlanguage=”JavaScript”>

2:<!–

3:varmyArray=newArray(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:<scriptlanguage=”JavaScript”>

2:<!–

3:varmyVariable=“a,b,c,d”;

4:varstringArray=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:<scriptlanguage=”JavaScript”>

2:<!–

3:window.alert(“Hello”);

4://–>

5:</script>

16弹出确认框

1:<scriptlanguage=”JavaScript”>

2:<!–

3:varresult=window.confirm(“ClickOKtocontinue”);

4://–>

5:</script>

17定义函数

1:<scriptlanguage=”JavaScript”>

2:<!–

3:functionmultiple(number1,number2){

4:varresult=number1*number2;

5:returnresult;

6:}

7://–>

8:</script>

18调用JS函数

1:<ahref=”#”onClick=”functionName()”>Linktext</a>

2:<ahref="/”javascript:functionName"()”>Linktext</a>

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

1:<bodyonLoad=”functionName();”>

2:Bodyofthepage

3:</body>

20条件判断

1:<script>

2:<!–

3:varuserChoice=window.confirm(“ChooseOKorCancel”);

4:varresult=(userChoice==true)?“OK”:“Cancel”;

5:document.write(result);

6://–>

7:</script>

21指定次数循环

1:<script>

2:<!–

3:varmyArray=newArray(3);

4:myArray[0]=“Item0”;

5:myArray[1]=“Item1”;

6:myArray[2]=“Item2”;

7:for(i=0;i<myArray.length;i++){

8:document.write(myArray[i]+“<br>”);

9:}

10://–>

11:</script>

22设定将来执行

1:<script>

2:<!–

3:functionhello(){

4:window.alert(“Hello”);

5:}

6:window.setTimeout(“hello()”,5000);

7://–>

8:</script>

23定时执行函数

1:<script>

2:<!–

3:functionhello(){

4:window.alert(“Hello”);

5:window.setTimeout(“hello()”,5000);

6:}

7:window.setTimeout(“hello()”,5000);

8://–>

9:</script>

24取消定时执行

1:<script>

2:<!–

3:functionhello(){

4:window.alert(“Hello”);

5:}

6:varmyTimeout=window.setTimeout(“hello()”,5000);

7:window.clearTimeout(myTimeout);

8://–>

9:</script>

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

1:<bodyonUnload=”functionName();”>

2:Bodyofthepage

3:</body>

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

26访问document对象

1:<scriptlanguage=”JavaScript”>

2:varmyURL=document.URL;

3:window.alert(myURL);

4:</script>

27动态输出HTML

1:<scriptlanguage=”JavaScript”>

2:document.write(“<p>Here’ssomeinformationaboutthisdocument:</p>”);

3:document.write(“<ul>”);

4:document.write(“<li>ReferringDocument:“+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:<scriptlanguage=”JavaScript”>

2:varthisDate=newDate();

3:document.write(thisDate.toString());

4:</script>

30指定日期的时区

1:<scriptlanguage=”JavaScript”>

2:varmyOffset=-2;

3:varcurrentDate=newDate();

4:varuserOffset=currentDate.getTimezoneOffset()/60;

5:vartimeZoneDifference=userOffset-myOffset;

6:currentDate.setHours(currentDate.getHours()+timeZoneDifference);

7:document.write(“ThetimeanddateinCentralEuropeis:“+currentDate.toLocaleString());

8:</script>

31设置日期输出格式

1:<scriptlanguage=”JavaScript”>

2:varthisDate=newDate();

3:varthisTimeString=thisDate.getHours()+“:”+thisDate.getMinutes();

4:varthisDateString=thisDate.getFullYear()+“/”+thisDate.getMonth()+“/”+thisDate.getDate();

5:document.write(thisTimeString+“on“+thisDateString);

6:</script>

32读取URL参数

1:<scriptlanguage=”JavaScript”>

2:varurlParts=document.URL.split(“?”);

3:varparameterParts=urlParts[1].split(“&”);

4:for(i=0;i<parameterParts.length;i++){

5:varpairParts=parameterParts[i].split(“=”);

6:varpairName=pairParts[0];

7:varpairValue=pairParts[1];

8:document.write(pairName+“：“+pairValue);

9:}

10:</script>

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

33打开一个新的document对象

1:<scriptlanguage=”JavaScript”>

2:functionnewDocument(){

3:document.open();

4:document.write(“<p>ThisisaNewDocument.</p>”);

5:document.close();

6:}

7:</script>

34页面跳转

1:<scriptlanguage=”JavaScript”>

2:window.location=“http://www.velee.cn”;

3:</script>

35添加网页加载进度窗口

1:<html>

2:<head>

3:<scriptlanguage='javaScript'>

4:varplaceHolder=window.open('holder.html','placeholder','width=200,height=200');

5:</script>

6:<title>TheMainPage</title>

7:</head>

8:<bodyonLoad='placeHolder.close()'>

9:<p>Thisisthemainpage</p>

10:</body>

11:</html>

JavaScript就这么回事3：图像

36读取图像属性

1:<imgsrc="/”image1.jpg"”name=”myImage”>

2:<ahref=”#”onClick=”window.alert(document.myImage.width)”>Width</a>

37动态加载图像

1:<scriptlanguage=”JavaScript”>

2:myImage=newImage;

3:myImage.src=“Tellers1.jpg”;

4:</script>

38简单的图像替换

1:<scriptlanguage=”JavaScript”>

2:rollImage=newImage;

3:rollImage.src=“rollImage1.jpg”;

4:defaultImage=newImage;

5:defaultImage.src=“image1.jpg”;

6:</script>

7:<ahref="/”myUrl"”onMouseOver=”document.myImage.src=rollImage.src;”

8:onMouseOut=”document.myImage.src=defaultImage.src;”>

9:<imgsrc="/”image1.jpg"”name=”myImage”width=100height=100border=0>

39随机显示图像

1:<scriptlanguage=”JavaScript”>

2:varimageList=newArray;

3:imageList[0]=“image1.jpg”;

4:imageList[1]=“image2.jpg”;

5:imageList[2]=“image3.jpg”;

6:imageList[3]=“image4.jpg”;

7:varimageChoice=Math.floor(Math.random()*imageList.length);

8:document.write(‘<imgsrc=”’+imageList[imageChoice]+‘“>’);

9:</script>

40函数实现的图像替换

1:<scriptlanguage=”JavaScript”>

2:varsource=0;

3:varreplacement=1;

4:functioncreateRollOver(originalImage,replacementImage){

5:varimageArray=newArray;

6:imageArray[source]=newImage;

7:imageArray[source].src=originalImage;

8:imageArray[replacement]=newImage;

9:imageArray[replacement].src=replacementImage;

10:returnimageArray;

11:}

12:varrollImage1=createRollOver(“image1.jpg”,”rollImage1.jpg”);

13:</script>

14:<ahref=”#”onMouseOver=”document.myImage1.src=rollImage1[replacement].src;”

15:onMouseOut=”document.myImage1.src=rollImage1[source].src;”>

16:<imgsrc="/”image1.jpg"”width=100name=”myImage1”border=0>

17:</a>

41创建幻灯片

1:<scriptlanguage=”JavaScript”>

2:varimageList=newArray;

3:imageList[0]=newImage;

4:imageList[0].src=“image1.jpg”;

5:imageList[1]=newImage;

6:imageList[1].src=“image2.jpg”;

7:imageList[2]=newImage;

8:imageList[2].src=“image3.jpg”;

9:imageList[3]=newImage;

10:imageList[3].src=“image4.jpg”;

11:functionslideShow(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:<bodyonLoad=”slideShow(0)”>

21:<imgsrc="/”image1.jpg"”width=100name=”slideShow”>

42随机广告图片

1:<scriptlanguage=”JavaScript”>

2:varimageList=newArray;

3:imageList[0]=“image1.jpg”;

4:imageList[1]=“image2.jpg”;

5:imageList[2]=“image3.jpg”;

6:imageList[3]=“image4.jpg”;

7:varurlList=newArray;

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:varimageChoice=Math.floor(Math.random()*imageList.length);

13:document.write(‘<ahref=”’+urlList[imageChoice]+‘“><imgsrc=”’+imageList[imageChoice]+‘“></a>’);

14:</script>

JavaScript就这么回事4：表单

还是先继续写完JS就这么回事系列吧～

43表单构成

1:<formmethod=”post”action=”target.html”name=”thisForm”>

2:<inputtype=”text”name=”myText”>

3:<selectname=”mySelect”>

4:<optionvalue=”1”>FirstChoice</option>

5:<optionvalue=”2”>SecondChoice</option>

6:</select>

7:<br>

8:<inputtype=”submit”value=”SubmitMe”>

9:</form>

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

1:<formname=”myForm”>

2:<inputtype=”text”name=”myText”>

3:</form>

4:<ahref='#'onClick='window.alert(document.myForm.myText.value);'>CheckTextField</a>

45动态复制文本框内容

1:<formname=”myForm”>

2:EntersomeText:<inputtype=”text”name=”myText”><br>

3:CopyText:<inputtype=”text”name=”copyText”>

4:</form>

5:<ahref=”#”onClick=”document.myForm.copyText.value=

6:document.myForm.myText.value;”>CopyTextField</a>

46侦测文本框的变化

1:<formname=”myForm”>

2:EntersomeText:<inputtype=”text”name=”myText”onChange=”alert(this.value);”>

3:</form>

47访问选中的Select

1:<formname=”myForm”>

2:<selectname=”mySelect”>

3:<optionvalue=”FirstChoice”>1</option>

4:<optionvalue=”SecondChoice”>2</option>

5:<optionvalue=”ThirdChoice”>3</option>

6:</select>

7:</form>

8:<ahref='#'onClick='alert(document.myForm.mySelect.value);'>CheckSelectionList</a>

48动态增加Select项

1:<formname=”myForm”>

2:<selectname=”mySelect”>

3:<optionvalue=”FirstChoice”>1</option>

4:<optionvalue=”SecondChoice”>2</option>

5:</select>

6:</form>

7:<scriptlanguage=”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=“ThirdChoice”;

11:</script>

49验证表单字段

1:<scriptlanguage=”JavaScript”>

2:functioncheckField(field){

3:if(field.value==“”){

4:window.alert(“Youmustenteravalueinthefield”);

5:field.focus();

6:}

7:}

8:</script>

9:<formname=”myForm”action=”target.html”>

10:TextField:<inputtype=”text”name=”myField”onBlur=”checkField(this)”>

11:<br><inputtype=”submit”>

12:</form>

50验证Select项

1:functioncheckList(selection){

2:if(selection.length==0){

3:window.alert(“Youmustmakeaselectionfromthelist.”);

4:returnfalse;

5:}

6:returntrue;

7:}

51动态改变表单的action

1:<formname=”myForm”action=”login.html”>

2:Username:<inputtype=”text”name=”username”><br>

3:Password:<inputtype=”password”name=”password”><br>

4:<inputtype=”button”value=”Login”onClick=”this.form.submit();”>

5:<inputtype=”button”value=”Register”onClick=”this.form.action=‘register.html’;this.form.submit();”>

6:<inputtype=”button”value=”RetrievePassword”onClick=”this.form.action=‘password.html’;this.form.submit();”>

7:</form>

52使用图像按钮

1:<formname=”myForm”action=”login.html”>

2:Username:<inputtype=”text”name=”username”><br>

3:Password:<inputtype=”password”name=”password”><br>

4:<inputtype=”image”src="/”login.gif"”value=”Login”>

5:</form>

53表单数据的加密

1:<SCRIPTLANGUAGE='JavaScript'>

2:<!–

3:functionencrypt(item){

4:varnewItem='';

5:for(i=0;i<item.length;i++){

6:newItem+=item.charCodeAt(i)+'.';

7:}

8:returnnewItem;

9:}

10:functionencryptForm(myForm){

11:for(i=0;i<myForm.elements.length;i++){

12:myForm.elements[i].value=encrypt(myForm.elements[i].value);

13:}

14:}

15:

16://–>

17:</SCRIPT>

18:<formname='myForm'onSubmit='encryptForm(this);window.alert(this.myField.value);'>

19:EnterSomeText:<inputtype=textname=myField><inputtype=submit>

20:</form>

JavaScript就这么回事5：窗口和框架

54改变浏览器状态栏文字提示

1:<scriptlanguage=”JavaScript”>

2:window.status=“Anewstatusmessage”;

3:</script>

55弹出确认提示框

1:<scriptlanguage=”JavaScript”>

2:varuserChoice=window.confirm(“ClickOKorCancel”);

3:if(userChoice){

4:document.write(“YouchoseOK”);

5:}else{

6:document.write(“YouchoseCancel”);

7:}

8:</script>

56提示输入

1:<scriptlanguage=”JavaScript”>

2:varuserName=window.prompt(“PleaseEnterYourName”,”EnterYourNameHere”);

3:document.write(“YourNameis“+userName);

4:</script>

57打开一个新窗口

1://打开一个名称为myNewWindow的浏览器新窗口

2:<scriptlanguage=”JavaScript”>

3:window.open(“http://www.velee.cn”,”myNewWindow”);

4:</script>

58设置新窗口的大小

1:<scriptlanguage=”JavaScript”>

2:window.open(“http://www.velee.cn”,”myNewWindow”,'height=300,width=300');

3:</script>

59设置新窗口的位置

1:<scriptlanguage=”JavaScript”>

2:window.open(“http://www.velee.cn”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');

3:</script>

60是否显示工具栏和滚动栏

1:<scriptlanguage=”JavaScript”>

2:window.open(“http:

61是否可以缩放新窗口的大小

1:<scriptlanguage=”JavaScript”>

2:window.open('http://www.velee.cn','myNewWindow','resizable=yes');</script>

62加载一个新的文档到当前窗口

1:<ahref='#'onClick='document.location='125a.html';'>OpenNewDocument</a>

63设置页面的滚动位置

1:<scriptlanguage=”JavaScript”>

2:if(document.all){//如果是IE浏览器则使用scrollTop属性

3:document.body.scrollTop=200;

4:}else{//如果是NetScape浏览器则使用pageYOffset属性

5:window.pageYOffset=200;

6:}</script>

64在IE中打开全屏窗口

1:<ahref='#'onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Openafull-screenwindow</a>

65新窗口和父窗口的操作

1:<scriptlanguage=”JavaScript”>

2://定义新窗口

3:varnewWindow=window.open(“128a.html”,”newWindow”);

4:newWindow.close();//在父窗口中关闭打开的新窗口

5:</script>

6:在新窗口中关闭父窗口

7:window.opener.close()

66往新窗口中写内容

1:<scriptlanguage=”JavaScript”>

2:varnewWindow=window.open(“”,”newWindow”);

3:newWindow.document.open();

4:newWindow.document.write(“Thisisanewwindow”);

5:newWIndow.document.close();

6:</script>

67加载页面到框架页面

1:<framesetcols=”50%,*”>

2:<framename=”frame1”src="/”135a.html"”>

3:<framename=”frame2”src="/”about:blank"”>

4:</frameset>

5:在frame1中加载frame2中的页面

6:parent.frame2.document.location=“135b.html”;

68在框架页面之间共享脚本

如果在frame1中html文件中有个脚本

1:functiondoAlert(){

2:window.alert(“Frame1isloaded”);

3:}

那么在frame2中可以如此调用该方法

1:<bodyonLoad=”parent.frame1.doAlert();”>

2:Thisisframe2.

3:</body>

69数据公用

可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用

1:<scriptlanguage=”JavaScript”>

2:varpersistentVariable=“Thisisapersistentvalue”;

3:</script>

4:<framesetcols=”50%,*”>

5:<framename=”frame1”src="/”138a.html"”>

6:<framename=”frame2”src="/”138b.html"”>

7:</frameset>

这样在frame1和frame2中都可以使用变量persistentVariable

70框架代码库

根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1:<framesetcols=”0,50%,*”>

2:<framename=”codeFrame”src="/”140code.html"”>

3:<framename=”frame1”src="/”140a.html"”>

4:<framename=”frame2”src="/”140b.html"”>

5:</frameset>