`

Javascript入门(可供CSS/JS/XSS初学者参考)

 
阅读更多
JavaScript作用小结:

1创建脚本块


1:<scriptlanguage=”JavaScript”>
2:JavaScriptcodegoeshere
3:</script>

2隐藏脚本代码

1:<scriptlanguage=”JavaScript”>
2:<!--
3:document.write(“Hello”);
4://-->
5:</script>

在不支持JavaScript的浏览器中将不执行相关代码

3浏览器不支持的时候显示

1:<noscript>
2:Hellotothenon-JavaScriptbrowser.
3:</noscript>

4链接外部脚本文件

1:<scriptlanguage=”JavaScript”src="/”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:<!--
3:varmyVariable=“Hellothere”;
4:vartherePlace=myVariable.search(“there”);
5:document.write(therePlace);
6://-->
7:</script>

10字符串替换

1:thisVar.replace(“Monday”,”Friday”);

11格式化字串

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyVariable=“Hellothere”;
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:varfirstString=“MyString”;
19:varfinalString=firstString.bold().toLowerCase().fontcolor(“red”);
20://-->
21:</script>

12创建数组

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyArray=newArray(5);
4:myArray[0]=“FirstEntry”;
5:myArray[1]=“SecondEntry”;
6:myArray[2]=“ThirdEntry”;
7:myArray[3]=“FourthEntry”;
8:myArray[4]=“FifthEntry”;
9:varanotherArray=newArray(“FirstEntry”,”SecondEntry”,”ThirdEntry”,”FourthEntry”,”FifthEntry”);
10://-->
11:</script>

13数组排序

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyArray=newArray(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:<scriptlanguage=”JavaScript”>
2:<!--
3:varmyVariable=“a,b,c,d”;
4:varstringArray=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:<scriptlanguage=”JavaScript”>
2:<!--
3:window.alert(“Hello”);
4://-->
5:</script>

16弹出确认框

1:<scriptlanguage=”JavaScript”>
2:<!--
3:varresult=window.confirm(“ClickOKtocontinue”);
4://-->
5:</script>

17定义函数

1:<scriptlanguage=”JavaScript”>
2:<!--
3:functionmultiple(number1,number2){
4:varresult=number1*number2;
5:returnresult;
6:}
7://-->
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:<!--
3:varuserChoice=window.confirm(“ChooseOKorCancel”);
4:varresult=(userChoice==true)?“OK”:“Cancel”;
5:document.write(result);
6://-->
7:</script>

21指定次数循环

1:<script>
2:<!--
3:varmyArray=newArray(3);
4:myArray[0]=“Item0”;
5:myArray[1]=“Item1”;
6:myArray[2]=“Item2”;
7:for(i=0;i<myArray.length;i++){
8:document.write(myArray[i]+“<br>”);
9:}
10://-->
11:</script>

22设定将来执行

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:}
6:window.setTimeout(“hello()”,5000);
7://-->
8:</script>

23定时执行函数

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:window.setTimeout(“hello()”,5000);
6:}
7:window.setTimeout(“hello()”,5000);
8://-->
9:</script>

24取消定时执行

1:<script>
2:<!--
3:functionhello(){
4:window.alert(“Hello”);
5:}
6:varmyTimeout=window.setTimeout(“hello()”,5000);
7:window.clearTimeout(myTimeout);
8://-->
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.webjx.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="/”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="/”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="/”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="/”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="/”login.gif"”value=”Login”>
5:</form>
6:


53表单数据的加密

1:<SCRIPTLANGUAGE='JavaScript'>
2:<!--
3:functionencrypt(item){
4:varnewItem='';
5:for(i=0;i<item.length;i++){
6:newItem+=item.charCodeAt(i)+'.';
7:}
8:returnnewItem;
9:}
10:functionencryptForm(myForm){
11:for(i=0;i<myForm.elements.length;i++){
12:myForm.elements[i].value=encrypt(myForm.elements[i].value);
13:}
14:}
15:
16://-->
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="/”135a.html"”>
3:<framename=”frame2”src="/”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="/”138a.html"”>
6:<framename=”frame2”src="/”138b.html"”>
7:</frameset>


这样在frame1和frame2中都可以使用变量persistentVariable
70框架代码库
根据以上的一些思路,我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

1:<framesetcols=”0,50%,*”>
2:<framename=”codeFrame”src="/”140code.html"”>
3:<framename=”frame1”src="/”140a.html"”>
4:<framename=”frame2”src="/”140b.html"”>
5:</frameset>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics