JavaScript就这么回事.docx

1、JavaScript就这么回事JavaScript就这么回事（1-5）（转的一个不错的JavaScript基础教程）2008年01月06日 星期日有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么

2、回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用适合阅读范围：对JavaScript一无所知离精通只差一步之遥的人基础知识：HTMLJavaScript就这么回事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: documen

3、t.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: 10 字符串替换1: thisVar.replace(“Monday”,”Friday”); 11 格式化字串1: 2: !-3: var myVariable =

4、“Hello there”;4: document.write(myVariable.big() + “”);5: document.write(myVariable.blink() + “”);6: document.write(myVariable.bold() + “”);7: document.write(myVariable.fixed() + “”);8: document.write(myVariable.fontcolor(“red”) + “”);9: document.write(myVariable.fontsize(“18pt”) + “”);10: document.

5、write(myVariable.italics() + “”);11: document.write(myVariable.small() + “”);12: document.write(myVariable.strike() + “”);13: document.write(myVariable.sub() + “”);14: document.write(myVariable.sup() + “”);15: document.write(myVariable.toLowerCase() + “”);16: document.write(myVariable.toUpperCase()

6、+ “”);17: 18: var firstString = “My String”;19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);20: / -21: 12 创建数组1: 2: 11: 13 数组排序1: 2: 11: 14 分割字符串1: 2: 10: 15 弹出警告信息1: 2: 5: 16 弹出确认框1: 2: 5: 17 定义函数1: 2: 8: 18 调用JS函数1: Link text2: Link text 19 在页面加载完成后执行函数1: 2: Body of the pag

7、e3: 20 条件判断1: 2: 7: 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 设定将来执行1: 2: 8: 23 定时执行函数1: 2: 9: 24 取消定时执行1: 2: 9: 25 在页面卸载时候执行函数1: 2: Body o

8、f the page3: JavaScript就这么回事2：浏览器输出 26 访问document对象1: 2: var myURL = document.URL;3: window.alert(myURL);4: 27 动态输出HTML1: 2: document.write(“Heres some information about this document:”);3: document.write(“”);4: document.write(“Referring Document: “ + document.referrer + “”);5: document.write(“Domai

9、n: “ + document.domain + “”);6: document.write(“URL: “ + document.URL + “”);7: document.write(“”);8: 28 输出换行1: document.writeln(“a”);2: document.writeln(“b”); 29 输出日期1: 2: var thisDate = new Date();3: document.write(thisDate.toString();4: 30 指定日期的时区1: 2: var myOffset = -2;3: var currentDate = new Da

10、te();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: 31 设置日期输出格式1: 2: var thisD

11、ate = 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: 32 读取URL参数1: 2: var urlParts = document.URL.

12、split(“?”);3: var parameterParts = urlParts1.split(“&”);4: for (i = 0; i parameterParts.length; i+) 5: var pairParts = parameterPartsi.split(“=”);6: var pairName = pairParts0;7: var pairValue = pairParts1;8: document.write(pairName + “ ：“ +pairValue );9: 10: 你还以为HTML是无状态的么？33 打开一个新的document对象1: 2: f

13、unction newDocument() 3: document.open();4: document.write(“This is a New Document.”);5: document.close();6: 7: 34 页面跳转1: 2: window.location = “3: 35 添加网页加载进度窗口1: 2: 3: 4: var placeHolder = window.open(holder.html,placeholder,width=200,height=200);5: 6: The Main Page7: 8: 9: This is the main page10:

14、 11: JavaScript就这么回事3：图像 36 读取图像属性1: 2: Width37 动态加载图像1: 2: myImage = new Image;3: myImage.src = “Tellers1.jpg”;4: 38 简单的图像替换1: 2: rollImage = new Image;3: rollImage.src = “rollImage1.jpg”;4: defaultImage = new Image;5: defaultImage.src = “image1.jpg”;6: 7: 9: 39 随机显示图像1: 2: var imageList = new Arra

15、y;3: imageList0 = “image1.jpg”;4: imageList1 = “image2.jpg”;5: imageList2 = “image3.jpg”;6: imageList3 = “image4.jpg”;7: var imageChoice = Math.floor(Math.random() * imageList.length);8: document.write();9: 40 函数实现的图像替换1: 2: var source = 0;3: var replacement = 1;4: function createRollOver(originalIm

16、age,replacementImage) 5: var imageArray = new Array;6: imageArraysource = new Image;7: imageArraysource.src = originalImage;8: imageArrayreplacement = new Image;9: imageArrayreplacement.src = replacementImage;10: return imageArray;11: 12: var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”

17、);13: 14: 16: 17: 41 创建幻灯片1: 2: var imageList = new Array;3: imageList0 = new Image;4: imageList0.src = “image1.jpg”;5: imageList1 = new Image;6: imageList1.src = “image2.jpg”;7: imageList2 = new Image;8: imageList2.src = “image3.jpg”;9: imageList3 = new Image;10: imageList3.src = “image4.jpg”;11: function slideShow(imageNumber) 12: document.slideShow.src = imageListimageNumber.src;13: imageNumber += 1;14: if (imageNumber imageList.length) 15: window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);16: 17: 18: 19: 20: 21: 42 随机广告图片1: 2: var imageList = new Array;3: imageList0 = “ima