有些时候你精通一门语言,但是会发现你其实整天在和其它语言打交道,也许你以为这些微不足道,不至于影响你的开发进度,但恰恰是这些你不重视的东西 会浪费你很多时间,我一直以为我早在几年前就已经精通JavaScript了,直到目前,我才越来越觉得JavaScript远比我想象的复杂和强大,我 开始崇拜它, 趁着节日的空隙,把有关JavaScript的方法和技巧整理下,让每个在为JavaScript而烦恼的人明白,JavaScript就这么回事!并希望JavaScript还可以成为你的朋友,让你豁然开朗,在项目中更好的应用~
适合阅读范围:对JavaScript一无所知~离精通只差一步之遥的人 基础知识:HTML
JavaScript就这么回事1:基础知识
1 创建脚本块
< script language = ”JavaScript” > JavaScript code goes here</ script >
2 隐藏脚本代码
1 : < script language = ”JavaScript” > 2 : <!-- 3 : document.write(“Hello”); 4 : // --> 5 : </ script >
在不支持JavaScript的浏览器中将不执行相关代码
3 浏览器不支持的时候显示
1 : < noscript > 2 : Hello to the non - JavaScript browser. 3 : </ noscript >
4 链接外部脚本文件
1 : < script language = ”JavaScript” src = " /”filename.js " ” ></ script >
5 注释脚本
1 : // This is a comment 2 : document.write(“Hello”); // This is a comment 3 : /**/ /* 4: All of this 5: is a comment 6: */
6 输出到浏览器
1 : document.write(“ < strong > Hello </ strong > ”);
7 定义变量
1 : var myVariable = “some value”;
8 字符串相加
1 : var myString = “String1” + “String2”;
9 字符串搜索
1 : < script language = ”JavaScript” > 2 : <!-- 3 : var myVariable = “Hello there”; 4 : var therePlace = myVariable.search(“there”); 5 : document.write(therePlace); 6 : // --> 7 : </ script >
10 字符串替换
1 : thisVar.replace(“Monday”,”Friday”);
11 格式化字串
1 : < script language = ”JavaScript” > 2 : <!-- 3 : var myVariable = “Hello there”; 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 : var firstString = “My String”; 19 : var finalString = firstString.bold().toLowerCase().fontcolor(“red”); 20 : // --> 21 : </ script >
12 创建数组
1 : < script language = ”JavaScript” > 2 : <!-- 3 : var myArray = new Array( 5 ); 4 : myArray[ 0 ] = “First Entry”; 5 : myArray[ 1 ] = “Second Entry”; 6 : myArray[ 2 ] = “Third Entry”; 7 : myArray[ 3 ] = “Fourth Entry”; 8 : myArray[ 4 ] = “Fifth Entry”; 9 : var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”); 10 : // --> 11 : </ script >
13 数组排序
1 : < script language = ”JavaScript” > 2 : <!-- 3 : var myArray = new Array( 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 : < script language = ”JavaScript” > 2 : <!-- 3 : var myVariable = “a,b,c,d”; 4 : var stringArray = 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 : < script language = ”JavaScript” > 2 : <!-- 3 : window.alert(“Hello”); 4 : // --> 5 : </ script >
16 弹出确认框
1 : < script language = ”JavaScript” > 2 : <!-- 3 : var result = window.confirm(“Click OK to continue ”); 4 : // --> 5 : </ script >
17 定义函数
1 : < script language = ”JavaScript” > 2 : <!-- 3 : function multiple(number1,number2) ... { 4 : var result = number1 * number2; 5 : return result; 6 : } 7 : // --> 8 : </ script >
18 调用JS函数
1: < a href =”#” onClick =”functionName()” > Link text </ a > 2: < a href ="/”javascript:functionName" ()” > Link text </ a >
19 在页面加载完成后执行函数
1: < body onLoad =”functionName();” > 2: Body of the page 3: </ body >
20 条件判断
1 : < script > 2 : <!-- 3 : var userChoice = window.confirm(“Choose OK or Cancel”); 4 : var result = (userChoice == true ) ? “OK” : “Cancel”; 5 : document.write(result); 6 : // --> 7 : </ script >
21 指定次数循环
1 : < script > 2 : <!-- 3 : var myArray = new Array( 3 ); 4 : myArray[ 0 ] = “Item 0 ”; 5 : myArray[ 1 ] = “Item 1 ”; 6 : myArray[ 2 ] = “Item 2 ”; 7 : for (i = 0 ; i < myArray.length; i ++ ) ... { 8 : document.write(myArray[i] + “ < br /> ”); 9 : } 10 : // --> 11 : </ script >
22 设定将来执行
1 : < script > 2 : <!-- 3 : function hello() ... { 4 : window.alert(“Hello”); 5 : } 6 : window.setTimeout(“hello()”, 5000 ); 7 : // --> 8 : </ script >
23 定时执行函数
1 : < script > 2 : <!-- 3 : function hello() ... { 4 : window.alert(“Hello”); 5 : window.setTimeout(“hello()”, 5000 ); 6 : } 7 : window.setTimeout(“hello()”, 5000 ); 8 : // --> 9 : </ script >
24 取消定时执行
1 : < script > 2 : <!-- 3 : function hello() ... { 4 : window.alert(“Hello”); 5 : } 6 : var myTimeout = window.setTimeout(“hello()”, 5000 ); 7 : window.clearTimeout(myTimeout); 8 : // --> 9 : </ script >
25 在页面卸载时候执行函数
1: < body onUnload =”functionName();” > 2: Body of the page 3: </ body >
JavaScript就这么回事2:浏览器输出
26 访问document对象
1 : < script language = ”JavaScript” > 2 : var myURL = document.URL; 3 : window.alert(myURL); 4 : </ script >
27 动态输出HTML
1 : < script language = ”JavaScript” > 2 : document.write(“ < p > Here’s some information about this document: </ p > ”); 3 : document.write(“ < ul > ”); 4 : document.write(“ < li > Referring Document: “ + 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 : < script language = ”JavaScript” > 2 : var thisDate = new Date(); 3 : document.write(thisDate.toString()); 4 : </ script >
30 指定日期的时区
1 : < script language = ”JavaScript” > 2 : var myOffset = - 2 ; 3 : var currentDate = new Date(); 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 : </ script >
31 设置日期输出格式
1 : < script language = ”JavaScript” > 2 : var thisDate = 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 : </ script >
32 读取URL参数
1 : < script language = ”JavaScript” > 2 : var urlParts = document.URL.split(“ ? ”); 3 : var parameterParts = urlParts[ 1 ].split(“ & ”); 4 : for (i = 0 ; i < parameterParts.length; i ++ ) ... { 5 : var pairParts = parameterParts[i].split(“ = ”); 6 : var pairName = pairParts[ 0 ]; 7 : var pairValue = pairParts[ 1 ]; 8 : document.write(pairName + “ :“ + pairValue ); 9 : } 10 : </ script >
你还以为HTML是无状态的么?
33 打开一个新的document对象
1 : < script language = ”JavaScript” > 2 : function newDocument() ... { 3 : document.open(); 4 : document.write(“ < p > This is a New Document. </ p > ”); 5 : document.close(); 6 : } 7 : </ script >
34 页面跳转
1 : < script language = ”JavaScript” > 2 : window.location = “http: // www.liu21st.com/”; 3 : </ script >
35 添加网页加载进度窗口
1: < html > 2: < head > 3: < script language ='javaScript' > ... 4 : var placeHolder = window.open( ' holder.html ' , ' placeholder ' , ' width=200,height=200 ' ); 5 : </ script > 6: < title > The Main Page </ title > 7: </ head > 8: < body onLoad ='placeHolder.close()' > 9: < p > This is the main page </ p > 10: </ body > 11: </ html >
JavaScript就这么回事3:图像 36 读取图像属性
1: < img src ="/”image1.jpg" ” name =”myImage” > 2: < a href =”# ” onClick =”window.alert(document.myImage.width)” > Width </ a >
37 动态加载图像
1 : < script language = ”JavaScript” > 2 : myImage = new Image; 3 : myImage.src = “Tellers1.jpg”; 4 : </ script >
38 简单的图像替换
1 : < script language = ”JavaScript” > 2 : rollImage = new Image; 3 : rollImage.src = “rollImage1.jpg”; 4 : defaultImage = new Image; 5 : defaultImage.src = “image1.jpg”; 6 : </ script > 7 : < a href = " /”myUrl " ” onMouseOver = ”document.myImage.src = rollImage.src;” 8 : onMouseOut = ”document.myImage.src = defaultImage.src;” > 9 : < img src = " /”image1.jpg " ” name = ”myImage” width = 100 height = 100 border = 0 >
39 随机显示图像
1 : < script language = ”JavaScript” > 2 : var imageList = new Array; 3 : imageList[ 0 ] = “image1.jpg”; 4 : imageList[ 1 ] = “image2.jpg”; 5 : imageList[ 2 ] = “image3.jpg”; 6 : imageList[ 3 ] = “image4.jpg”; 7 : var imageChoice = Math.floor(Math.random() * imageList.length); 8 : document.write(‘ < img src = ”’ + imageList[imageChoice] + ‘“ > ’); 9 : </ script >
40 函数实现的图像替换
1 : < script language = ”JavaScript” > 2 : var source = 0 ; 3 : var replacement = 1 ; 4 : function createRollOver(originalImage,replacementImage) ... { 5 : var imageArray = new Array; 6 : imageArray[source] = new Image; 7 : imageArray[source].src = originalImage; 8 : imageArray[replacement] = new Image; 9 : imageArray[replacement].src = replacementImage; 10 : return imageArray; 11 : } 12 : var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”); 13 : </ script > 14 : < a href = ”#” onMouseOver = ”document.myImage1.src = rollImage1[replacement].src;” 15 : onMouseOut = ”document.myImage1.src = rollImage1[source].src;” > 16 : < img src = " /”image1.jpg " ” width = 100 name = ”myImage1” border = 0 > 17 : </ a >
41 创建幻灯片
1: < script language =”JavaScript” > ... 2 : var imageList = new Array; 3 : imageList[ 0 ] = new Image; 4 : imageList[ 0 ].src = “image1.jpg”; 5 : imageList[ 1 ] = new Image; 6 : imageList[ 1 ].src = “image2.jpg”; 7 : imageList[ 2 ] = new Image; 8 : imageList[ 2 ].src = “image3.jpg”; 9 : imageList[ 3 ] = new Image; 10 : imageList[ 3 ].src = “image4.jpg”; 11 : function slideShow(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: < body onLoad =”slideShow(0)” > 21: < img src ="/”image1.jpg" ” width =100 name =”slideShow” >
42 随机广告图片
1 : < script language = ”JavaScript” > 2 : var imageList = new Array; 3 : imageList[ 0 ] = “image1.jpg”; 4 : imageList[ 1 ] = “image2.jpg”; 5 : imageList[ 2 ] = “image3.jpg”; 6 : imageList[ 3 ] = “image4.jpg”; 7 : var urlList = new Array; 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(‘ < a href = ”’ + urlList[imageChoice] + ‘“ >< img src = ”’ + imageList[imageChoice] + ‘“ ></ a > ’); 14 : </ script >
JavaScript就这么回事4:表单
还是先继续写完JS就这么回事系列吧~
43 表单构成
1: < form method =”post” action =”target.html” name =”thisForm” > 2: < input type =”text” name =”myText” > 3: < select name =”mySelect” > 4: < option value =”1” > First Choice </ option > 5: < option value =”2” > Second Choice </ option > 6: </ select > 7: < br /> 8: < input type =”submit” value =”Submit Me” > 9: </ form >
44 访问表单中的文本框内容
1: < form name =”myForm” > 2: < input type =”text” name =”myText” > 3: </ form > 4: < a href ='#' onClick ='window.alert(document.myForm.myText.value);' > Check Text Field </ a >
45 动态复制文本框内容
1: < form name =”myForm” > 2: Enter some Text: < input type =”text” name =”myText” >< br /> 3: Copy Text: < input type =”text” name =”copyText” > 4: </ form > 5: < a href =”#” onClick =”document.myForm.copyText.value = 6: document.myForm.myText.value;” > Copy Text Field </ a >
46 侦测文本框的变化
1: < form name =”myForm” > 2: Enter some Text: < input type =”text” name =”myText” onChange =”alert(this.value);” > 3: </ form >
47 访问选中的Select
1 : < form name = ”myForm” > 2 : < select name = ”mySelect” > 3 : < option value = ”First Choice” > 1 </ option > 4 : < option value = ”Second Choice” > 2 </ option > 5 : < option value = ”Third Choice” > 3 </ option > 6 : </ select > 7 : </ form > 8 : < a href = ' # ' onClick = ' alert(document.myForm.mySelect.value); ' > Check Selection List </ a >
48 动态增加Select项
1: < form name =”myForm” > 2: < select name =”mySelect” > 3: < option value =”First Choice” > 1 </ option > 4: < option value =”Second Choice” > 2 </ option > 5: </ select > 6: </ form > 7: < script language =”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 = “Third Choice”; 11 : </ script >
49 验证表单字段
1: < script language =”JavaScript” > ... 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 : </ script > 9: < form name =”myForm” action =”target.html” > 10: Text Field: < input type =”text” name =”myField”onBlur=”checkField(this)” > 11: < br />< input type =”submit” > 12: </ form >
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 : }