JavaScript的方法和技巧.doc

JavaScript就这么回事1：基础知识 1 创建脚本块1: 2: JavaScript code goes here3: 2 隐藏脚本代码1: 2: 5: 在不支持JavaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示1: 2: Hello to the non-JavaScript browser.3: 4 链接外部脚本文件1: 5 注释脚本1: / This is a comment2: document.write(“Hello”); / This is a comment3: /*4: All of this5: is a comment6: */ 6 输出到浏览器1: document.write(“Hello”); 7 定义变量1: var myVariable = “some value”; 8 字符串相加1: var myString = “String1” + “String2”; 9 字符串搜索1: 2: 7: search 方法指明是否存在相应的匹配。如果找到一个匹配，search 方法将返回一个整数值，指明这个匹配距离字符串开始的偏移位置。如果没有找到匹配，则返回 -1。10 字符串替换1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串var myVariable = Hello there;document.write(myVariable.big() + );document.write(myVariable.blink() +);document.write(myVariable.bold() + );document.write(myVariable.fixed() + );document.write(myVariable.fontcolor(red) + );document.write(myVariable.fontsize(18pt) + );document.write(myVariable.italics() + );document.write(myVariable.small() + );document.write(myVariable.strike() + );document.write(myVariable.sub() + );document.write(myVariable.sup() + );document.write(myVariable.toLowerCase() +);document.write(myVariable.toUpperCase() + );var firstString = My String;var finalString = firstString.bold().toLowerCase().fontcolor(red);:黑体,斜体,下划线,打字机体。 12 创建数组1: 2: 11: var myArray = new Array(5);myArray0 = First Entry;myArray1 = Second Entry;myArray2 = Third Entry;myArray3 = Fourth Entry;myArray4 = Fifth Entry;var arr,str=;for( arr in myArray )str += arr+:+myArrayarr+n;alert(str.length);13 数组排序（对象数组）var myArray = new Array(5);myArray0 = z;myArray1 = c;myArray2 = d;myArray3 = a;myArray4 = q;document.write(myArray.sort(); 14 分割字符串var myVariable = a,b,c,d;var stringsplit=myVariable.split(,);for(i=0;istringsplit.length;i+)document.write(stringspliti+); split 方法的结果是一个字符串数组15 弹出警告信息window.alert(hello); 16 弹出确认框var truthBeTold = window.confirm(单击“确定”继续。单击“取消”停止。);if (truthBeTold) window.alert(欢迎访问我们的 Web 页！); else window.alert(再见啦！); 提示消息框var theResponse = mpt(欢迎？,请在此输入您的姓名。);document.write(theResponse);17 定义函数function multiple(number1,number2) var result = number1 * number2;return result; 18 调用JS函数1: Link text2: Link text 19 在页面加载完成后执行函数Body of the page20 条件判断var userChoice = window.confirm(Choose OK or Cancel);var result = (userChoice = true) ? OK : Cancel;document.write(result);21 指定次数循环1: 2: !-3: var myArray = new Array(3);4: myArray0 = “Item 0”;5: myArray1 = “Item 1”;6: myArray2 = “Item 2”;7: for (i = 0; i myArray.length; i+) 8: document.write(myArrayi + “”);9: 10: / -11: 22 设定将来执行Function hello () window.alert (Hello);window.setTimeout (hello (), 5000); 23 定时执行函数 function hello() window.alert(Hello);window.setTimeout(hello(),5000);window.setTimeout(hello(),5000);24 取消定时执行 function hello() window.alert(Hello); var myTimeout = window.setTimeout(hello(),5000); window.clearTimeout(myTimeout);25 在页面卸载时候执行函数Body of the page JavaScript就这么回事2：浏览器输出 26 访问document对象 var myURL = document.URL; window.alert(myURL); 27 动态输出HTMLdocument.write (Heres some information about this document:);document.write ();document.write(Referring Document: + document.referrer + );document.write(Domain: + document.domain + );document.write(URL: + document.URL + );document.write(); 28 输出换行document.writeln(a); document.writeln(b);29 输出日期var thisDate = new Date();document.write(thisDate.toString()+);document.write(thisDate);30 指定日期的时区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();31 设置日期输出格式var thisDate = new Date();var thisTimeString = thisDate.getHours() +:+thisDate.getMinutes();var thisDateString = thisDate.getYear() + / + thisDate.getMonth() + / + thisDate.getDate();document.write(thisTimeString + t on + thisDateString);32 读取URL参数var urlParts = document.URL.split(?);var parameterParts = urlParts0.split(&);/window.alert(parameterParts);for (i = 0; i parameterParts.length; i+) var pairParts = parameterPartsi.split(+);var pairName = pairParts0;var pairValue = pairParts1;document.write(pairName + : +pairValue );你还以为HTML是无状态的么？33 打开一个新的document对象 document.write(TestDemo);function writeDocBack() var oNewDoc = document.open(text/html,replace); var sMarkup = New Document; sMarkup += Hello, world!; oNewDoc.write(sMarkup); oNewDoc.close(); 34 页面跳转window.location.href =; window.location.href =/TestDemo/page/MyHtml.html;35 添加网页加载进度窗口open方法，打开一个新的窗口。在open方法的参数列表中指定要装载的URL资源、窗口的名称、窗口的主要特性。在某个网页文件打开的同时，自动打开一个新的用于发布通知的窗口，新的通知的窗口在一个指定的时间后又自动关闭。首先编写一个test.jsp网页文件，文件内容如下：Var placeHolder =window.open(MyHtml.html,123,width=200,height=200); 接着编写一个MyHtml.html网页文件，文件内容如下： window.setTimeout(window.close(),5000) 通知5秒以后，此网页将要自动关闭！ 1: 2: 3: 4: var placeHolder = window.open(holder.html,placeholder,width=200,height=200);5: 6: The Main Page7: 8: placeHolder.close();运行新的程序，弹出窗口刚打开，马上就会被关闭9: This is the main page10: 11: JavaScript就这么回事3：图像 36 读取图像属性Width37 动态加载图像Image()对象 预加载图像最简单的方法用javascript将一个新的Image()对象实例化，并把你想要预加载的图像的URL传递给它。假设我们有一个叫做 a28342_lc1.jpg 的图像，我们希望，当用户把鼠标放在一个已经显示过的图像上的时，系统能够显示出这个图像。为了预加载这个图像，以便实现更快的响应时间，我们只用创建一个新的Image()对象，将其命名为heavyImage，并使用onLoad()事件处理程序把它同时加载到页面上。 function preloader() heavyImage = new Image();heavyImage.src = /TestDemo/image/a28342_lc1.jpg; 把图象同时加载到页面上 要注意的是，图像标记自身并不会处理onMouseOver()和onMouseOut()事件，这就是为什么上面例子里的标记被放在一个标记里，后者的确加入了对这些事件类型的支持。 用数组加载多个图像38 简单的图像替换rollImage = new Image;rollImage.src = /ImageDynamic2/image/F-15I.jpg;defaultImage = new Image;defaultImage.src = /ImageDynamic2/image/F-16D.jpg; ImageDynamic239 随机显示图像 var imageList = new Array;imageList0=/Random-39/image/F-15I.jpgimageList1=/Random-39/image/F-16D.jpgimageList2=/Random-39/image/F-18F.jpgimageList3=/Random-39/image/F-35.jpg var imageChoice = Math.floor(Math.random() * imageList.length);document.write(); 40 函数实现的图像替换var source = 0;var replacement = 1;function createRollOver(originalImage,replacementImage) var imageArray = new Array;imageArraysource = new Image;imageArraysource.src = originalImage;imageArrayreplacement = new Image;imageArrayreplacement.src = replacementImage;return imageArray; var rollImage1 = createRollOver(/function-40/image/2.jpg,/function-40/image/3.jpg); 41 创建幻灯片var imageList = new Array;imageList0 = new Image;imageList0.src = /PowerPoint-41/image/1.jpg;imageList1 = new Image;imageList1.src = /PowerPoint-41/image/2.jpg;imageList2 = new Image;imageList2.src = /PowerPoint-41/image/3.jpg;imageList3 = new Image;imageList3.src = /PowerPoint-41/image/4.jpg;function slideShow(imageNumber) document.slideShow.src = imageListimageNumber.src;imageNumber += 1;if (imageNumber imageList.length) window.setTimeout(slideShow( + imageNumber + ),3000); 42 随机广告图片1: 2: var imageList = new Array;3: imageList0 = “image1.jpg”;4: imageList1 = “image2.jpg”;5: imageList2 = “image3.jpg”;6: imageList3 = “image4.jpg”;7: var urlList = new Array;8: urlList0 = “http:/some.host/”;9: urlList1 = “http:/another.host/”;10: urlList2 = “http:/somewhere.else/”;11: urlList3 = “http:/right.here/”;12: var imageChoice = Math.floor(Math.random() * imageList.length);13: document.write();14: JavaScript就这么回事4：表单 还是先继续写完JS就这么回事系列吧43 表单构成1: 2: 3: 4: First Choice5: Second Choice6: 7: 8: 9: 44 访问表单中的文本框内容1: 2: 3: 4: Check Text Field 45 动态复制文本框内容1: 2: Enter some Text: 3: Copy Text: 4: 5: Copy Text Field 46 侦测文本框的变化1: 2: Enter some Text: 3: 47 访问选中的Select1: 2: 3: 14: 25: 36: 7: 8: Check Selection List 48 动态增加Select项1: 2: 3: 14: 25: 6: 7: 8: document.myForm.mySelect.length+;9: document.myForm.mySelect.optionsdocument.myForm.mySelect.length - 1.text = “3”;10: document.myForm.mySelect.optionsdocument.myForm.mySelect.length - 1.value = “Third Choice”;11: 49 验证表单字段1: 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: 9: 10: Text Field: 11: 12: 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: 51 动态改变表单的action1: 2: Username: 3: Password: 4: 5: 6: 7: 52 使用图像按钮1: 2: Username: 3: Password: 4: 5: 6: 53 表单数据的加密1: 2: !-3: function encrypt(item) 4: var newItem = ;5: for (i=0; i item.length; i+) 6: newItem += item.charCodeAt(i) + .;7: 8: return newItem;9: 10: function encryptForm(myForm) 11: for (i=0; i 17: 18: 19: Enter Some Text: 20: JavaScript就这么回事5：窗口和框架 54 改变浏览器状态栏文字提示1: 2: window.status = “A new status message”;3: 55 弹出确认提示框1: 2: var userChoice = window.confirm(“Click OK or Cancel”);3: if (userChoice) 4: document.write(“You chose OK”);5: else 6: document.write(“You chose Cancel”);7: 8: 56 提示输入1: 2: var userName = mpt(“Please Enter Your Name”,”Enter Your Name Here”);3: document.write(“Your Name is “ + userName);4: 57 打开一个新窗口1: /打开一个名称为myNewWindow的浏览器新窗口2: 3: window.open(“/”,”myNewWindow”);4: 58 设置新窗口的大小1: 2: window.open(“/”,”myNewWindow”,height=300,width=300);3: 59 设置新窗口的位置1: 2: window.open(“/”,”myNewWindow”,height=300,width=300,left=200,screenX=200,top=100,screenY=100);3: 60 是否显示工具栏和滚动栏1: 2: window.open(“http: 61 是否可以缩放新窗口的大小1: 2: window.open(/ , myNewWindow, resizable=yes ); 62 加载一个新的文档到当前窗口1: Open New Document 63 设置页面的滚动位置1: 2: if (document.all) /如果是IE浏览器则使用scrollTop属性3: document.body.scrollTop = 200;4: else /如果是NetScape浏览器