这篇介绍JavaScript方面的日志，我在是Clang上看到的。作者介绍挺全面的，所以转载过来让感兴趣的朋友看一下。呵呵～～～
有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～
趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～
适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人
基础知识：HTML
JavaScript就这么回事1：基础知识
1创建脚本块
1:<scriptlanguage=”JavaScript”>
2:JavaScriptcodegoeshere
3:</script>
2隐藏脚本代码
1:<scriptlanguage=”JavaScript”>
2:<>
5:</script>
在不支持JavaScript的浏览器中将不执行相关代码
3浏览器不支持的时候显示
1:<noscript>
2:Hellotothenon-JavaScriptbrowser.
3:</noscript>
4链接外部脚本文件
1:<scriptlanguage=”JavaScript”src="http://img.sxsky.net/it//”filename.js"”></script>
5注释脚本
1://Thisisacomment
2:document.write(“Hello”);//Thisisacomment
3:/*
4:Allofthis
5:isacomment
6:*/
6输出到浏览器
1:document.write(“<strong>Hello</strong>”);
7定义变量
1:varmyVariable=“somevalue”;
8字符串相加
1:varmyString=“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:<bodyonLoad=”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:<bodyonUnload=”functionName();”>
2:Bodyofthepage
3:</body>
JavaScript就这么回事2：浏览器输出
26访问document对象
1:<scriptlanguage=”JavaScript”>
2:varmyURL=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:varthisDate=newDate();
3:document.write(thisDate.toString());
4:</script>
30指定日期的时区
1:<scriptlanguage=”JavaScript”>
2:varmyOffset=-2;
3:varcurrentDate=newDate();
4:varuserOffset=currentDate.getTimezoneOffset()/60;
5:vartimeZoneDifference=userOffset-myOffset;
6:currentDate.setHours(currentDate.getHours()+timeZoneDifference);
7:document.write(“ThetimeanddateinCentralEuropeis:“+currentDate.toLocaleString());
8:</script>
31设置日期输出格式
1:<scriptlanguage=”JavaScript”>
2:varthisDate=newDate();
3:varthisTimeString=thisDate.getHours()+“:”+thisDate.getMinutes();
4:varthisDateString=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[i].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:varplaceHolder=window.open('holder.html','placeholder','width=200,height=200');
5:</script>
6:<title>TheMainPage</title>
7:</head>
8:<bodyonLoad='placeHolder.close()'>
9:<p>Thisisthemainpage</p>
10:</body>
11:</html>
JavaScript就这么回事3：图像
36读取图像属性
1:<imgsrc="http://img.sxsky.net/it//”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="http://img.sxsky.net/it//”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="http://img.sxsky.net/it//”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="http://img.sxsky.net/it//”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:varimageChoice=Math.floor(Math.random()*imageList.length);
13:document.write(‘<ahref=”'+urlList[imageChoice]+‘“><imgsrc=”'+imageList[imageChoice]+‘“></a>');
14:</script>
JavaScript就这么回事4：表单
还是先继续写完JS就这么回事系列吧～
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:functioncheckField(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(“Youmustmakeaselectionfromthelist.”);
4:returnfalse;
5:}
6:returntrue;
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="http://img.sxsky.net/it//”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="http://img.sxsky.net/it//”135a.html"”>
3:<framename=”frame2”src="http://img.sxsky.net/it//”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="http://img.sxsky.net/it//”138a.html"”>
6:<framename=”frame2”src="http://img.sxsky.net/it//”138b.html"”>
7:</frameset>
这样在frame1和frame2中都可以使用变量persistentVariable
70框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1:<framesetcols=”0,50%,*”>
2:<framename=”codeFrame”src="http://img.sxsky.net/it//”140code.html"”>
3:<framename=”frame1”src="http://img.sxsky.net/it//”140a.html"”>
4:<framename=”frame2”src="http://img.sxsky.net/it//”140b.html"”>
5:</frameset>
【JavaScript方法和技巧大全】相关文章：
★ JavaScript基于setTimeout实现计数的方法