JavaScript 惯用 _JavaScript

JavaScript 常用

1：基础知识
1创建脚本块
1:<scriptlanguage=”JavaScript”>
2:JavaScriptcodegoeshere
3:</script>
2在不支持JavaScript的浏览器中将不执行相关代码
1:<scriptlanguage=”JavaScript”>
2:
5:</script>

3浏览器不支持的时候显示
1:<noscript>
2:Hellotothenon-JavaScriptbrowser.
3:</noscript>

4链接外部脚本文件
1:<scriptlanguage=”JavaScript”src="/”filename.js"”></script>

5注释脚本
1://Thisisacomment
3:/*Allofthis*/
6输出到浏览器
1:document.write(“<strong>Hello</strong>”);
7定义变量
var myVariable=“somevalue”;
8字符串相加
var myString=“String1”+“String2”;

9字符串搜索
1:<scriptlanguage=”JavaScript”>
2:
7:</script>

10字符串替换
1:thisVar.replace(“Monday”,”Friday”);

11格式化字串
1:<scriptlanguage=”JavaScript”>
2:
21:</script>

12创建数组
1:<scriptlanguage=”JavaScript”>
2:
11:</script>

13数组排序
1:<scriptlanguage=”JavaScript”>
2:
11:</script>

14分割字符串
1:<scriptlanguage=”JavaScript”>
2:
10:</script>

15弹出警告信息
1:<scriptlanguage=”JavaScript”>
2:
5:</script>

16弹出确认框
1:<scriptlanguage=”JavaScript”>
2:
5:</script>

17定义函数
1:<scriptlanguage=”JavaScript”>
2:
8:</script>

18调用JS函数
1:<ahref=”#” onClick=”functionName()”>Linktext</a>
2:<ahref="/” javascript:functionName"()”>Linktext</a>

19在页面加载完成后执行函数
1:<body onLoad=”functionName();”>
2:???? Bodyofthepage
3:</body>

20条件判断
1:<script>
2:
7:</script>

21指定次数循环
1:<script>
2:
11:</script>

22设定将来执行
1:<script>
2:
8:</script>

23定时执行函数
1:<script>
2:
9:</script>

24取消定时执行
1:<script>
2:
9:</script>

25在页面卸载时候执行函数
1:<body onUnload=”functionName();”>
2:Bodyofthepage
3:</body>
JavaScript就这么回事2：浏览器输出

26访问document对象
1:<scriptlanguage=”JavaScript”>
2:var myURL=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:var thisDate=newDate();
3:document.write(thisDate.toString());
4:</script>

30指定日期的时区
1:<scriptlanguage=”JavaScript”>
2:varmyOffset=-2;
3:var currentDate=newDate();
4:var userOffset=currentDate.getTimezoneOffset()/60;
5:var timeZ-myOffset;
6:currentDate.setHours(currentDate.getHours()+timeZoneDifference);
7:document.write(“ThetimeanddateinCentralEuropeis:“+currentDate.toLocaleString());
8:</script>

31设置日期输出格式
1:<scriptlanguage=”JavaScript”>
2:var thisDate=newDate();
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:<scriptlanguage=”JavaScript”>
2:varurlParts=document.URL.split(“?”);
3:varparameterParts=urlParts[1].split(“&”);
4:for(i=0;i<parameterParts.length;i++){
5:varpairParts=parameterParts.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.liu21st.com/”;
3:</script>

35添加网页加载进度窗口
1:<html>
2:<head>
3:<scriptlanguage='javaScript'>
4:var placeHolder=window.open('holder.html','placeholder','width=200,height=200');
5:</script>
6:<title>TheMainPage</title>
7:</head>
8:<body onLoad='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>
3:

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:var imageChoice=Math.floor(Math.random()*imageList.length);
13:document.write(‘<ahref=”’+urlList[imageChoice]+‘“><imgsrc=”’+imageList[imageChoice]+‘“></a>’);
14:</script>
JavaScript就这么回事4：表单
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:function checkField(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(“You must make a selection from the list.”);
4:return false;
5:}
6:return true;
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>
6:

53表单数据的加密
1:<SCRIPTLANGUAGE='JavaScript'>
2:
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.liu21st.com/”,”myNewWindow”);
4:</script>

58设置新窗口的大小
1:<scriptlanguage=”JavaScript”>
2:window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');
3:</script>

59设置新窗口的位置
1:<scriptlanguage=”JavaScript”>
2:window.open(“http://www.liu21st.com/”,”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.liu21st.com/','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>