1 创建脚本块 引用内容程序代码 < script language =”JavaScript” > ... JavaScript 代码写在这里面 </ script > 2 隐藏脚本代码 引用内容程序代码 < script language =”JavaScript” > ... <!--document.write(“Hello”);// --> </ script > 在不支持JavaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示 引用内容程序代码 < noscript > Hello to the non-JavaScript browser. </ noscript > 4 链接外部脚本文件 引用内容程序代码 < script language =”JavaScript” src ="/”filename.js" ” ></ script > 5 注释脚本 引用内容程序代码// This is a commentdocument.write(“Hello”); // This is a comment/*All of thisis a comment*/ 6 输出到浏览器 引用内容程序代码document.write(“ < strong > Hello </ strong > ”); 7 定义变量 引用内容程序代码var myVariable = “some value”; 8 字符串相加 引用内容程序代码var myString = “String1” + “String2”; 9 字符串搜索 引用内容程序代码 < script language =”JavaScript” > ... <!--var myVariable = “Hello there”;var therePlace = myVariable.search(“there”);document.write(therePlace);// --> </ script > 10 字符串替换 引用内容程序代码thisVar.replace(“Monday”,”Friday”); 11 格式化字串 引用内容程序代码 < script language =”JavaScript” > ... <!--var myVariable = “Hello there”;document.write(myVariable.big() + “<br>”);document.write(myVariable.blink() + “<br>”);document.write(myVariable.bold() + “<br>”);document.write(myVariable.fixed() + “<br>”);document.write(myVariable.fontcolor(“red”) + “<br>”);document.write(myVariable.fontsize(“18pt”) + “<br>”);document.write(myVariable.italics() + “<br>”);document.write(myVariable.small() + “<br>”);document.write(myVariable.strike() + “<br>”);document.write(myVariable.sub() + “<br>”);document.write(myVariable.sup() + “<br>”);document.write(myVariable.toLowerCase() + “<br>”);document.write(myVariable.toUpperCase() + “<br>”);var firstString = “My String”;var finalString = firstString.bold().toLowerCase().fontcolor(“red”);// --> </ script > 12 创建数组 引用内容程序代码 < script language =”JavaScript” > ... <!--var myArray = new Array(5);myArray[0] = “First Entry”;myArray[1] = “Second Entry”;myArray[2] = “Third Entry”;myArray[3] = “Fourth Entry”;myArray[4] = “Fifth Entry”;var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);// --> </ script > 13 数组排序 引用内容程序代码 < script language =”JavaScript” > ... <!--var myArray = new Array(5);myArray[0] = “z”;myArray[1] = “c”;myArray[2] = “d”;myArray[3] = “a”;myArray[4] = “q”;document.write(myArray.sort());// --> </ script > 14 分割字符串 引用内容程序代码 < script language =”JavaScript” > ... <!--var myVariable = “a,b,c,d”;var stringArray = myVariable.split(“,”);document.write(stringArray[0]);document.write(stringArray[1]);document.write(stringArray[2]);document.write(stringArray[3]);// --> </ script > 15 弹出警告信息 引用内容程序代码 < script language =”JavaScript” > ... <!--window.alert(“Hello”);// --> </ script > 16 弹出确认框 引用内容程序代码 < script language =”JavaScript” > ... <!--var result = window.confirm(“Click OK to continue”);// --> </ script > 17 自定义函数 引用内容程序代码 < script language =”JavaScript” > ... <!--function multiple(number1,number2) ...{ var result = number1 * number2;return result;}// --> </ script > 18 调用JS函数 引用内容程序代码 < a href =”#” onClick =”functionName()” > Link text </ a > < a href ="/”javascript:functionName" ()” > Link text </ a > 19 在页面加载完成后执行函数 引用内容程序代码 < body onLoad =”functionName();” > Body of the page </ body > 20 条件判断 引用内容程序代码 < script > ... <!--var userChoice = window.confirm(“Choose OK or Cancel”);var result = (userChoice == true) ? “OK” : “Cancel”;document.write(result);// --> </ script > 21 指定次数循环 引用内容程序代码 < script > ... <!--var myArray = new Array(3);myArray[0] = “Item 0”;myArray[1] = “Item 1”;myArray[2] = “Item 2”;for (i = 0; i < myArray.length; i++) ...{ document.write(myArray[i] + “<br>”);}// --> </ script > 22 设定将来执行 引用内容程序代码 < script > ... <!--function hello() ...{ window.alert(“Hello”);}window.setTimeout(“hello()”,5000);// --> </ script > 23 定时执行函数 引用内容程序代码 < script > ... <!--function hello() ...{ window.alert(“Hello”);window.setTimeout(“hello()”,5000);}window.setTimeout(“hello()”,5000);// --> </ script > 24 取消定时执行 引用内容程序代码 < script > ... <!--function hello() ...{ window.alert(“Hello”);}var myTimeout = window.setTimeout(“hello()”,5000);window.clearTimeout(myTimeout);// --> </ script > 25 在页面卸载时候执行函数 引用内容程序代码 < body onUnload =”functionName();” > Body of the page </ body > JavaScript就这么回事2:浏览器输出26 访问document对象 引用内容程序代码 < script language =”JavaScript” > ... var myURL = document.URL;window.alert(myURL); </ script > 27 动态输出HTML 引用内容程序代码 < script language =”JavaScript” > ... document.write(“<p>Here’s some information about this document:</p>”);document.write(“<ul>”);document.write(“<li>Referring Document: “ + document.referrer + “</li>”);document.write(“<li>Domain: “ + document.domain + “</li>”);document.write(“<li>URL: “ + document.URL + “</li>”);document.write(“</ul>”); </ script > 28 输出换行 引用内容程序代码document.writeln(“ < strong > a </ strong > ”);document.writeln(“b”);29 输出日期 引用内容程序代码 < script language =”JavaScript” > ... var thisDate = new Date();document.write(thisDate.toString()); </ script > 30 指定日期的时区 引用内容程序代码 < script language =”JavaScript” > ... var myOffset = -2;var currentDate = new Date();var userOffset = currentDate.getTimezoneOffset()/60;var timeZoneDifference = userOffset - myOffset;currentDate.setHours(currentDate.getHours() + timeZoneDifference);document.write(“The time and date in Central Europe is: “ + currentDate.toLocaleString()); </ script > 31 设置日期输出格式 引用内容程序代码 < script language =”JavaScript” > ... var thisDate = new Date();var thisTimeString = thisDate.getHours() + “:” + thisDate.getMinutes();var thisDateString = thisDate.getFullYear() + “/” + thisDate.getMonth() + “/” + thisDate.getDate();document.write(thisTimeString + “ on “ + thisDateString); </ script > 32 读取URL参数 引用内容程序代码 < script language =”JavaScript” > ... var urlParts = document.URL.split(“?”);var parameterParts = urlParts[1].split(“&”);for (i = 0; i < parameterParts.length; i++) ...{ var pairParts = parameterParts[i].split(“=”);var pairName = pairParts[0];var pairValue = pairParts[1];document.write(pairName + “ :“ +pairValue );} </ script > 你还以为HTML是无状态的么?33 打开一个新的document对象 引用内容程序代码 < script language =”JavaScript” > ... function newDocument() ...{ document.open();document.write(“<p>This is a New Document.</p>”);document.close();} </ script > 34 页面跳转 引用内容程序代码 < script language =”JavaScript” > ... window.location = “http://www.x-force.cn/”; </ script > 35 添加网页加载进度窗口 引用内容程序代码 < html > < head > < script language ='javaScript' > ... var placeHolder = window.open('holder.html','placeholder','width=200,height=200'); </ script > < title > The Main Page </ title > </ head > < body onLoad ='placeHolder.close()' > < p > This is the main page </ p > </ body > </ html > JavaScript就这么回事3:图像 36 读取图像属性 引用内容程序代码 < img src ="/”image1.jpg" ” name =”myImage” > < a href =”# ” onClick =”window.alert(document.myImage.width)” > Width </ a > 37 动态加载图像 引用内容程序代码 < script language =”JavaScript” > ... myImage = new Image;myImage.src = “Tellers1.jpg”; </ script > 38 简单的图像替换 引用内容程序代码 < script language =”JavaScript” > ... rollImage = new Image;rollImage.src = “rollImage1.jpg”;defaultImage = new Image;defaultImage.src = “image1.jpg”; </ script > < a href ="/”myUrl" ” onMouseOver =”document.myImage.src = rollImage.src;” onMouseOut =”document.myImage.src = defaultImage.src;” > < img src ="/”image1.jpg" ” name =”myImage” width =100 height =100 border =0 > 39 随机显示图像 引用内容程序代码 < script language =”JavaScript” > ... var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var imageChoice = Math.floor(Math.random() * imageList.length);document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’); </ script > 40 函数实现的图像替换 引用内容程序代码 < script language =”JavaScript” > ... var source = 0;var replacement = 1;function createRollOver(originalImage,replacementImage) ...{ var imageArray = new Array;imageArray[source] = new Image;imageArray[source].src = originalImage;imageArray[replacement] = new Image;imageArray[replacement].src = replacementImage;return imageArray;}var rollImage = createRollOver(“image1.jpg”,”rollImage1.jpg”); </ script > < a href =”#” onMouseOver =”document.myImage1.src = rollImage1[replacement].src;” onMouseOut =”document.myImage1.src = rollImage1[source].src;” > < img src ="/”image1.jpg" ” width =100 name =”myImage1” border =0 > </ a > 41 创建幻灯片 引用内容程序代码 < script language =”JavaScript” > ... var imageList = new Array;imageList[0] = new Image;imageList[0].src = “image1.jpg”;imageList[1] = new Image;imageList[1].src = “image2.jpg”;imageList[2] = new Image;imageList[2].src = “image3.jpg”;imageList[3] = new Image;imageList[3].src = “image4.jpg”;function slideShow(imageNumber) ...{ document.slideShow.src = imageList[imageNumber].src;imageNumber += 1;if (imageNumber < imageList.length) ...{ window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);}} </ script > </ head > < body onLoad =”slideShow(0)” > < img src ="/”image1.jpg" ” width =100 name =”slideShow” > 42 随机广告图片 引用内容程序代码 < script language =”JavaScript” > ... var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var urlList = new Array;urlList[0] = “http://some.host/”;urlList[1] = “http://another.host/”;urlList[2] = “http://somewhere.else/”;urlList[3] = “http://right.here/”;var imageChoice = Math.floor(Math.random() * imageList.length);document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’); </ script > JavaScript就这么回事4:表单 43 表单构成 引用内容程序代码 < form method =”post” action =”target.html” name =”thisForm” > < input type =”text” name =”myText” > < select name =”mySelect” > < option value =”1” > First Choice </ option > < option value =”2” > Second Choice </ option > </ select > < br > < input type =”submit” value =”Submit Me” > </ form > 44 访问表单中的文本框内容 引用内容程序代码 < form name =”myForm” > < input type =”text” name =”myText” > </ form > < a href ='#' onClick ='window.alert(document.myForm.myText.value);' > Check Text Field </ a > 45 动态复制文本框内容 引用内容程序代码 < form name =”myForm” > Enter some Text: < input type =”text” name =”myText” >< br > Copy Text: < input type =”text” name =”copyText” > </ form > < a href =”#” onClick =”document.myForm.copyText.value =document.myForm.myText.value;” > Copy Text Field </ a > 46 侦测文本框的变化 引用内容程序代码 < form name =”myForm” > Enter some Text: < input type =”text” name =”myText” onChange =”alert(this.value);” > </ form > 47 访问选中的Select 引用内容程序代码 < form name =”myForm” > < select name =”mySelect” > < option value =”First Choice” > 1 </ option > < option value =”Second Choice” > 2 </ option > < option value =”Third Choice” > 3 </ option > </ select > </ form > < a href ='#' onClick ='alert(document.myForm.mySelect.value);' > Check Selection List </ a > 48 动态增加Select项 引用内容程序代码 < form name =”myForm” > < select name =”mySelect” > < option value =”First Choice” > 1 </ option > < option value =”Second Choice” > 2 </ option > </ select > </ form > < script language =”JavaScript” > ... document.myForm.mySelect.length++;document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”; </ script > 49 验证表单字段 引用内容程序代码 < script language =”JavaScript” > ... function checkField(field) ...{ if (field.value == “”) ...{ window.alert(“You must enter a value in the field”);field.focus();}} </ script > < form name =”myForm” action =”target.html” > Text Field: < input type =”text” name =”myField”onBlur=”checkField(this)” > < br >< input type =”submit” > </ form > 50 验证Select项 引用内容程序代码function checkList(selection) { if (selection.length == 0) { window.alert(“You must make a selection from the list.”);return false;}return true;} 51 动态改变表单的action 引用内容程序代码 < form name =”myForm” action =”login.html” > Username: < input type =”text” name =”username” >< br > Password: < input type =”password” name =”password” >< br > < input type =”button” value =”Login” onClick =”this.form.submit();” > < input type =”button” value =”Register” onClick =”this.form.action = ‘register.html’; this.form.submit();” > < input type =”button” value =”Retrieve Password” onClick =”this.form.action = ‘password.html’; this.form.submit();” > </ form > 52 使用图像按钮 引用内容程序代码 < form name =”myForm” action =”login.html” > Username: < input type =”text” name =”username” >< br > Password: < input type =”password”name=”password” >< br > < input type =”image” src ="/”login.gif" ” value =”Login” > </ form > 53 表单数据的加密 引用内容程序代码 < SCRIPT LANGUAGE ='JavaScript' > ... <!--function encrypt(item) ...{ var newItem = '';for (i=0; i < item.length; i++) ...{ newItem += item.charCodeAt(i) + '.';}return newItem;}function encryptForm(myForm) ...{ for (i=0; i < myForm.elements.length; i++) ...{ myForm.elements[i].value = encrypt(myForm.elements[i].value);}}//--> </ SCRIPT > < form name ='myForm' onSubmit ='encryptForm(this); window.alert(this.myField.value);' > Enter Some Text: < input type =text name =myField >< input type =submit > </ form > JavaScript就这么回事5:窗口和框架 54 改变浏览器状态栏文字提示 引用内容程序代码 < script language =”JavaScript” > ... window.status = “A new status message”; </ script > 55 弹出确认提示框 引用内容程序代码 < script language =”JavaScript” > ... var userChoice = window.confirm(“Click OK or Cancel”);if (userChoice) ...{ document.write(“You chose OK”);} else ...{ document.write(“You chose Cancel”);} </ script > 56 提示输入 引用内容程序代码 < script language =”JavaScript” > ... var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);document.write(“Your Name is “ + userName); </ script > 57 打开一个新窗口 引用内容//打开一个名称为myNewWindow的浏览器新窗口程序代码 < script language =”JavaScript” > ... window.open(“http://www.liu21st.com/”,”myNewWindow”); </ script > 58 设置新窗口的大小 引用内容程序代码 < script language =”JavaScript” > ... window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300'); </ script > 59 设置新窗口的位置 引用内容程序代码 < script language =”JavaScript” > ... window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100'); </ script > 60 是否显示工具栏和滚动栏 引用内容程序代码 < script language =”JavaScript” > ... window.open(“http://www.x-force.cn/",toolbar=no, menubar=no); </ script > 61 是否可以缩放新窗口的大小 引用内容程序代码 < script language =”JavaScript” > ... window.open('http://www.x-force.cn/' , 'myNewWindow', 'resizable=yes' ); </ script > 62 加载一个新的文档到当前窗口 引用内容程序代码 < a href ='#' onClick ='document.location = '125a.html';' > Open New Document </ a > 63 设置页面的滚动位置 引用内容程序代码 < script language =”JavaScript” > ... if (document.all) ...{ //如果是IE浏览器则使用scrollTop属性document.body.scrollTop = 200;} else ...{ //如果是NetScape浏览器则使用pageYOffset属性window.pageYOffset = 200;}</script> 64 在IE中打开全屏窗口 引用内容程序代码<a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a> 65 新窗口和父窗口的操作 引用内容程序代码<script language=”JavaScript”>...//定义新窗口var newWindow = window.open(“128a.html”,”newWindow”);newWindow.close(); //在父窗口中关闭打开的新窗口</script>在新窗口中关闭父窗口程序代码window.opener.close() 66 往新窗口中写内容 引用内容程序代码<script language=”JavaScript”>...var newWindow = window.open(“”,”newWindow”);newWindow.document.open();newWindow.document.write(“This is a new window”);newWIndow.document.close();</script> 67 加载页面到框架页面 引用内容程序代码<frameset cols=”50%,*”><frame name=”frame1” src="/”135a.html"”><frame name=”frame2” src="/”about:blank"”></frameset>在frame1中加载frame2中的页面parent.frame2.document.location = “135b.html”; 68 在框架页面之间共享脚本 引用内容如果在frame1中html文件中有个脚本程序代码function doAlert() { window.alert(“Frame 1 is loaded”);} 那么在frame2中可以如此调用该方法程序代码<body onLoad=”parent.frame1.doAlert();”>This is frame 2.</body> 69 数据公用 引用内容可以在框架页面定义数据项,使得该数据可以被多个框架中的页面公用程序代码<script language=”JavaScript”>...var persistentVariable = “This is a persistent value”;</script><frameset cols=”50%,*”><frame name=”frame1” src="/”138a.html"”><frame name=”frame2” src="/”138b.html"”></frameset> 这样在frame1和frame2中都可以使用变量persistentVariable70 框架代码库 引用内容根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库程序代码<frameset cols=”0,50%,*”><frame name=”codeFrame” src="/”140code.html"”><frame name=”frame1” src="/”140a.html"”><frame name=”frame2” src="/”140b.html"”></frameset>本文转载自『异次元の世界』http://www.x-force.cn/article.asp?id=142