js基礎(chǔ)完全代碼1

/Js基礎(chǔ)代碼1創(chuàng)建腳本塊引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

JavaScript代碼寫(xiě)在這里面

</script>2隱藏腳本代碼

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

document.write(“Hello”);

//–>

</script>

在不支持JavaScript的瀏覽器中將不執(zhí)行相關(guān)代碼3瀏覽器不支持的時(shí)候顯示

引用內(nèi)容程序代碼

<noscript>

Hellotothenon-JavaScriptbrowser.

</noscript>4鏈接外部腳本文件

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”src=”/”””></script>5注釋腳本

引用內(nèi)容程序代碼

//Thisisacomment

document.write(“Hello”);//Thisisacomment

/*

Allofthis

isacomment

*/6輸出到瀏覽器

引用內(nèi)容程序代碼

document.write(“<strong>Hello</strong>”);7定義變量

引用內(nèi)容程序代碼

varmyVariable=“somevalue”;8字符串相加

引用內(nèi)容程序代碼

varmyString=“String1”+“String2”;9字符串搜索

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varmyVariable=“Hellothere”;

vartherePlace=myVariable.search(“there”);

document.write(therePlace);

//–>

</script>10字符串替換

引用內(nèi)容程序代碼

thisVar.replace(“Monday”,”Friday”);11格式化字串

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varmyVariable=“Hellothere”;

document.write(myVariable.big()+“<br>”);

document.write(myVariable.blink()+“<br>”);

document.write(myVariable.bold()+“<br>”);

document.write(myVariable.fixed()+“<br>”);

document.write(myVariable.fontcolor(“red”)+“<br>”);

document.write(myVariable.fontsize(“18pt”)+“<br>”);

document.write(myVariable.italics()+“<br>”);

document.write(myVariable.small()+“<br>”);

document.write(myVariable.strike()+“<br>”);

document.write(myVariable.sub()+“<br>”);

document.write(myVariable.sup()+“<br>”);

document.write(myVariable.toLowerCase()+“<br>”);

document.write(myVariable.toUpperCase()+“<br>”);

varfirstString=“MyString”;

varfinalString=firstString.bold().toLowerCase().fontcolor(“red”);

//–>

</script>12創(chuàng)建數(shù)組

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varmyArray=newArray(5);

myArray[0]=“FirstEntry”;

myArray[1]=“SecondEntry”;

myArray[2]=“ThirdEntry”;

myArray[3]=“FourthEntry”;

myArray[4]=“FifthEntry”;

varanotherArray=newArray(“FirstEntry”,”SecondEntry”,”ThirdEntry”,”FourthEntry”,”FifthEntry”);

//–>

</script>13數(shù)組排序

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varmyArray=newArray(5);

myArray[0]=“z”;

myArray[1]=“c”;

myArray[2]=“d”;

myArray[3]=“a”;

myArray[4]=“q”;

document.write(myArray.sort());

//–>

</script>14分割字符串

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varmyVariable=“a,b,c,d”;

varstringArray=myVariable.split(“,”);

document.write(stringArray[0]);

document.write(stringArray[1]);

document.write(stringArray[2]);

document.write(stringArray[3]);

//–>

</script>15彈出警告信息

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

window.alert(“Hello”);

//–>

</script>16彈出確認(rèn)框

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

varresult=window.confirm(“ClickOKtocontinue”);

//–>

</script>17自定義函數(shù)

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

<!–

functionmultiple(number1,number2){

varresult=number1*number2;

returnresult;

}

//–>

</script>18調(diào)用JS函數(shù)

引用內(nèi)容程序代碼

<ahref=”#”onClick=”functionName()”>Linktext</a>

<ahref=”/”javascript:functionName”()”>Linktext</a>19在頁(yè)面加載完成后執(zhí)行函數(shù)

引用內(nèi)容程序代碼

<bodyonLoad=”functionName();”>

Bodyofthepage

</body>20條件判斷

引用內(nèi)容程序代碼

<script>

<!–

varuserChoice=window.confirm(“ChooseOKorCancel”);

varresult=(userChoice==true)?“OK”:“Cancel”;

document.write(result);

//–>

</script>21指定次數(shù)循環(huán)

引用內(nèi)容程序代碼

<script>

<!–

varmyArray=newArray(3);

myArray[0]=“Item0”;

myArray[1]=“Item1”;

myArray[2]=“Item2”;

for(i=0;i<myArray.length;i++){

document.write(myArray[i]+“<br>”);

}

//–>

</script>22設(shè)定將來(lái)執(zhí)行

引用內(nèi)容程序代碼

<script>

<!–

functionhello(){

window.alert(“Hello”);

}

window.setTimeout(“hello()”,5000);

//–>

</script>23定時(shí)執(zhí)行函數(shù)

引用內(nèi)容程序代碼

<script>

<!–

functionhello(){

window.alert(“Hello”);

window.setTimeout(“hello()”,5000);

}

window.setTimeout(“hello()”,5000);

//–>

</script>24取消定時(shí)執(zhí)行

引用內(nèi)容程序代碼

<script>

<!–

functionhello(){

window.alert(“Hello”);

}

varmyTimeout=window.setTimeout(“hello()”,5000);

window.clearTimeout(myTimeout);

//–>

</script>25在頁(yè)面卸載時(shí)候執(zhí)行函數(shù)

引用內(nèi)容程序代碼

<bodyonUnload=”functionName();”>

Bodyofthepage

</body>JavaScript就這么回事2：瀏覽器輸出26訪(fǎng)問(wèn)document對(duì)象

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varmyURL=document.URL;

window.alert(myURL);

</script>27動(dòng)態(tài)輸出HTML

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

document.write(“<p>Here’ssomeinformationaboutthisdocument:</p>”);

document.write(“<ul>”);

document.write(“<li>ReferringDocument:“+document.referrer+“</li>”);

document.write(“<li>Domain:“+document.domain+“</li>”);

document.write(“<li>URL:“+document.URL+“</li>”);

document.write(“</ul>”);

</script>28輸出換行

引用內(nèi)容程序代碼

document.writeln(“<strong>a</strong>”);

document.writeln(“b”);29輸出日期

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varthisDate=newDate();

document.write(thisDate.toString());

</script>30指定日期的時(shí)區(qū)

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varmyOffset=-2;

varcurrentDate=newDate();

varuserOffset=currentDate.getTimezoneOffset()/60;

vartimeZoneDifference=userOffset–myOffset;

currentDate.setHours(currentDate.getHours()+timeZoneDifference);

document.write(“ThetimeanddateinCentralEuropeis:“+currentDate.toLocaleString());

</script>31設(shè)置日期輸出格式

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varthisDate=newDate();

varthisTimeString=thisDate.getHours()+“:”+thisDate.getMinutes();

varthisDateString=thisDate.getFullYear()+“/”+thisDate.getMonth()+“/”+thisDate.getDate();

document.write(thisTimeString+“on“+thisDateString);

</script>32讀取URL參數(shù)

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varurlParts=document.URL.split(“?”);

varparameterParts=urlParts[1].split(“&”);

for(i=0;i<parameterParts.length;i++){

varpairParts=parameterParts[i].split(“=”);

varpairName=pairParts[0];

varpairValue=pairParts[1];

document.write(pairName+“：“+pairValue);

}

</script>

你還以為HTML是無(wú)狀態(tài)的么？33打開(kāi)一個(gè)新的document對(duì)象

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

functionnewDocument(){

document.open();

document.write(“<p>ThisisaNewDocument.</p>”);

document.close();

}

</script>34頁(yè)面跳轉(zhuǎn)

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.location=“”;

</script>35添加網(wǎng)頁(yè)加載進(jìn)度窗口

引用內(nèi)容程序代碼

<html>

<head>

<scriptlanguage=’javaScript’>

varplaceHolder=window.open(‘holder.html’,'placeholder’,'width=200,height=200′);

</script>

<title>TheMainPage</title>

</head>

<bodyonLoad=’placeHolder.close()’>

<p>Thisisthemainpage</p>

</body>

</html>JavaScript就這么回事3：圖像36讀取圖像屬性

引用內(nèi)容程序代碼

<imgsrc=”/”image1.jpg””name=”myImage”>

<ahref=”#”onClick=”window.alert(document.myImage.width)”>Width</a>37動(dòng)態(tài)加載圖像

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

myImage=newImage;

myImage.src=“Tellers1.jpg”;

</script>38簡(jiǎn)單的圖像替換

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

rollImage=newImage;

rollImage.src=“rollImage1.jpg”;

defaultImage=newImage;

defaultImage.src=“image1.jpg”;

</script>

<ahref=”/”myUrl””onMouseOver=”document.myImage.src=rollImage.src;”

onMouseOut=”document.myImage.src=defaultImage.src;”>

<imgsrc=”/”image1.jpg””name=”myImage”width=100height=100border=0>39隨機(jī)顯示圖像

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varimageList=newArray;

imageList[0]=“image1.jpg”;

imageList[1]=“image2.jpg”;

imageList[2]=“image3.jpg”;

imageList[3]=“image4.jpg”;

varimageChoice=Math.floor(Math.random()*imageList.length);

document.write(‘<imgsrc=”’+imageList[imageChoice]+‘“>’);

</script>40函數(shù)實(shí)現(xiàn)的圖像替換

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varsource=0;

varreplacement=1;

functioncreateRollOver(originalImage,replacementImage){

varimageArray=newArray;

imageArray[source]=newImage;

imageArray[source].src=originalImage;

imageArray[replacement]=newImage;

imageArray[replacement].src=replacementImage;

returnimageArray;

}

varrollImage=createRollOver(“image1.jpg”,”rollImage1.jpg”);

</script>

<ahref=”#”onMouseOver=”document.myImage1.src=rollImage1[replacement].src;”

onMouseOut=”document.myImage1.src=rollImage1[source].src;”>

<imgsrc=”/”image1.jpg””width=100name=”myImage1”border=0>

</a>41創(chuàng)建幻燈片

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varimageList=newArray;

imageList[0]=newImage;

imageList[0].src=“image1.jpg”;

imageList[1]=newImage;

imageList[1].src=“image2.jpg”;

imageList[2]=newImage;

imageList[2].src=“image3.jpg”;

imageList[3]=newImage;

imageList[3].src=“image4.jpg”;

functionslideShow(imageNumber){

document.slideShow.src=imageList[imageNumber].src;

imageNumber+=1;

if(imageNumber<imageList.length){

window.setTimeout(“slideShow(“+imageNumber+“)”,3000);

}

}

</script>

</head>

<bodyonLoad=”slideShow(0)”>

<imgsrc=”/”image1.jpg””width=100name=”slideShow”>42隨機(jī)廣告圖片

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varimageList=newArray;

imageList[0]=“image1.jpg”;

imageList[1]=“image2.jpg”;

imageList[2]=“image3.jpg”;

imageList[3]=“image4.jpg”;

varurlList=newArray;

urlList[0]=“”;

urlList[1]=“”;

urlList[2]=“”;

urlList[3]=“”;

varimageChoice=Math.floor(Math.random()*imageList.length);

document.write(‘<ahref=”’+urlList[imageChoice]+‘“><imgsrc=”’+imageList[imageChoice]+‘“></a>’);

</script>JavaScript就這么回事4：表單43表單構(gòu)成

引用內(nèi)容程序代碼

<formmethod=”post”action=”target.html”name=”thisForm”>

<inputtype=”text”name=”myText”>

<selectname=”mySelect”>

<optionvalue=”1”>FirstChoice</option>

<optionvalue=”2”>SecondChoice</option>

</select>

<br>

<inputtype=”submit”value=”SubmitMe”>

</form>44訪(fǎng)問(wèn)表單中的文本框內(nèi)容

引用內(nèi)容程序代碼

<formname=”myForm”>

<inputtype=”text”name=”myText”>

</form>

<ahref=’#’onClick=’window.alert(document.myForm.myText.value);’>CheckTextField</a>45動(dòng)態(tài)復(fù)制文本框內(nèi)容

引用內(nèi)容程序代碼

<formname=”myForm”>

EntersomeText:<inputtype=”text”name=”myText”><br>

CopyText:<inputtype=”text”name=”copyText”>

</form>

<ahref=”#”onClick=”document.myForm.copyText.value=

document.myForm.myText.value;”>CopyTextField</a>46偵測(cè)文本框的變化

引用內(nèi)容程序代碼

<formname=”myForm”>

EntersomeText:<inputtype=”text”name=”myText”onChange=”alert(this.value);”>

</form>47訪(fǎng)問(wèn)選中的Select

引用內(nèi)容程序代碼

<formname=”myForm”>

<selectname=”mySelect”>

<optionvalue=”FirstChoice”>1</option>

<optionvalue=”SecondChoice”>2</option>

<optionvalue=”ThirdChoice”>3</option>

</select>

</form>

<ahref=’#’onClick=’alert(document.myForm.mySelect.value);’>CheckSelectionList</a>48動(dòng)態(tài)增加Select項(xiàng)

引用內(nèi)容程序代碼

<formname=”myForm”>

<selectname=”mySelect”>

<optionvalue=”FirstChoice”>1</option>

<optionvalue=”SecondChoice”>2</option>

</select>

</form>

<scriptlanguage=”JavaScript”>

document.myForm.mySelect.length++;

document.myForm.mySelect.options[document.myForm.mySelect.length-1].text=“3”;

document.myForm.mySelect.options[document.myForm.mySelect.length-1].value=“ThirdChoice”;

</script>49驗(yàn)證表單字段

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

functioncheckField(field){

if(field.value==“”){

window.alert(“Youmustenteravalueinthefield”);

field.focus();

}

}

</script>

<formname=”myForm”action=”target.html”>

TextField:<inputtype=”text”name=”myField”onBlur=”checkField(this)”>

<br><inputtype=”submit”>

</form>50驗(yàn)證Select項(xiàng)

引用內(nèi)容程序代碼

functioncheckList(selection){

if(selection.length==0){

window.alert(“Youmustmakeaselectionfromthelist.”);

returnfalse;

}

returntrue;

}51動(dòng)態(tài)改變表單的action

引用內(nèi)容程序代碼

<formname=”myForm”action=”login.html”>

Username:<inputtype=”text”name=”username”><br>

Password:<inputtype=”password”name=”password”><br>

<inputtype=”button”value=”Login”onClick=”this.form.submit();”>

<inputtype=”button”value=”Register”onClick=”this.form.action=‘register.html’;this.form.submit();”>

<inputtype=”button”value=”RetrievePassword”onClick=”this.form.action=‘password.html’;this.form.submit();”>

</form>52使用圖像按鈕

引用內(nèi)容程序代碼

<formname=”myForm”action=”login.html”>

Username:<inputtype=”text”name=”username”><br>

Password:<inputtype=”password”name=”password”><br>

<inputtype=”image”src=”/”login.gif””value=”Login”>

</form>53表單數(shù)據(jù)的加密

引用內(nèi)容程序代碼

<SCRIPTLANGUAGE=’JavaScript’>

<!–

functionencrypt(item){

varnewItem=”;

for(i=0;i<item.length;i++){

newItem+=item.charCodeAt(i)+‘.’;

}

returnnewItem;

}

functionencryptForm(myForm){

for(i=0;i<myForm.elements.length;i++){

myForm.elements[i].value=encrypt(myForm.elements[i].value);

}

}//–>

</SCRIPT>

<formname=’myForm’onSubmit=’encryptForm(this);window.alert(this.myField.value);’>

EnterSomeText:<inputtype=textname=myField><inputtype=submit>

</form>JavaScript就這么回事5：窗口和框架54改變?yōu)g覽器狀態(tài)欄文字提示

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.status=“Anewstatusmessage”;

</script>55彈出確認(rèn)提示框

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varuserChoice=window.confirm(“ClickOKorCancel”);

if(userChoice){

document.write(“YouchoseOK”);

}else{

document.write(“YouchoseCancel”);

}

</script>56提示輸入

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

varuserName=mpt(“PleaseEnterYourName”,”EnterYourNameHere”);

document.write(“YourNameis“+userName);

</script>57打開(kāi)一個(gè)新窗口

引用內(nèi)容//打開(kāi)一個(gè)名稱(chēng)為myNewWindow的瀏覽器新窗口

程序代碼

<scriptlanguage=”JavaScript”>

window.open(“”,”myNewWindow”);

</script>58設(shè)置新窗口的大小

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.open(“”,”myNewWindow”,’height=300,width=300′);

</script>59設(shè)置新窗口的位置

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.open(“”,”myNewWindow”,’height=300,width=300,left=200,screenX=200,top=100,screenY=100′);

</script>60是否顯示工具欄和滾動(dòng)欄

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.open(“”,toolbar=no,menubar=no);

</script>61是否可以縮放新窗口的大小

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

window.open(‘’,‘myNewWindow’,‘resizable=yes’);</script>62加載一個(gè)新的文檔到當(dāng)前窗口

引用內(nèi)容程序代碼

<ahref=’#’onClick=’document.location=‘125a.html’;’>OpenNewDocument</a>63設(shè)置頁(yè)面的滾動(dòng)位置

引用內(nèi)容程序代碼

<scriptlanguage=”JavaScript”>

if(document.all){//如果是IE瀏覽器則使用scrollTop屬性

document.body.scrollTop=200;

}else{//如果是NetScape瀏