js基础完全代码1

/Js基础代码1创建脚本块引用内容程序代码

<scriptlanguage=”JavaScript”>

JavaScript代码写在这里面

</script>2隐藏脚本代码

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!–

document.write(“Hello”);

//–>

</script>

在不支持JavaScript的浏览器中将不执行相关代码3浏览器不支持的时候显示

引用内容程序代码

<noscript>

Hellotothenon-JavaScriptbrowser.

</noscript>4链接外部脚本文件

引用内容程序代码

<scriptlanguage=”JavaScript”src=”/”””></script>5注释脚本

引用内容程序代码

//Thisisacomment

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

/*

Allofthis

isacomment

*/6输出到浏览器

引用内容程序代码

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

引用内容程序代码

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

引用内容程序代码

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

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!–

varmyVariable=“Hellothere”;

vartherePlace=myVariable.search(“there”);

document.write(therePlace);

//–>

</script>10字符串替换

引用内容程序代码

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

引用内容程序代码

<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创建数组

引用内容程序代码

<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数组排序

引用内容程序代码

<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分割字符串

引用内容程序代码

<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弹出警告信息

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!–

window.alert(“Hello”);

//–>

</script>16弹出确认框

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!–

varresult=window.confirm(“ClickOKtocontinue”);

//–>

</script>17自定义函数

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!–

functionmultiple(number1,number2){

varresult=number1*number2;

returnresult;

}

//–>

</script>18调用JS函数

引用内容程序代码

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

<ahref=”/”javascript:functionName”()”>Linktext</a>19在页面加载完成后执行函数

引用内容程序代码

<bodyonLoad=”functionName();”>

Bodyofthepage

</body>20条件判断

引用内容程序代码

<script>

<!–

varuserChoice=window.confirm(“ChooseOKorCancel”);

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

document.write(result);

//–>

</script>21指定次数循环

引用内容程序代码

<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设定将来执行

引用内容程序代码

<script>

<!–

functionhello(){

window.alert(“Hello”);

}

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

//–>

</script>23定时执行函数

引用内容程序代码

<script>

<!–

functionhello(){

window.alert(“Hello”);

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

}

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

//–>

</script>24取消定时执行

引用内容程序代码

<script>

<!–

functionhello(){

window.alert(“Hello”);

}

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

window.clearTimeout(myTimeout);

//–>

</script>25在页面卸载时候执行函数

引用内容程序代码

<bodyonUnload=”functionName();”>

Bodyofthepage

</body>JavaScript就这么回事2：浏览器输出26访问document对象

引用内容程序代码

<scriptlanguage=”JavaScript”>

varmyURL=document.URL;

window.alert(myURL);

</script>27动态输出HTML

引用内容程序代码

<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输出换行

引用内容程序代码

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

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

引用内容程序代码

<scriptlanguage=”JavaScript”>

varthisDate=newDate();

document.write(thisDate.toString());

</script>30指定日期的时区

引用内容程序代码

<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设置日期输出格式

引用内容程序代码

<scriptlanguage=”JavaScript”>

varthisDate=newDate();

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

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

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

</script>32读取URL参数

引用内容程序代码

<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是无状态的么？33打开一个新的document对象

引用内容程序代码

<scriptlanguage=”JavaScript”>

functionnewDocument(){

document.open();

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

document.close();

}

</script>34页面跳转

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.location=“”;

</script>35添加网页加载进度窗口

引用内容程序代码

<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读取图像属性

引用内容程序代码

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

<ahref=”#”onClick=”window.alert(document.myImage.width)”>Width</a>37动态加载图像

引用内容程序代码

<scriptlanguage=”JavaScript”>

myImage=newImage;

myImage.src=“Tellers1.jpg”;

</script>38简单的图像替换

引用内容程序代码

<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随机显示图像

引用内容程序代码

<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函数实现的图像替换

引用内容程序代码

<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创建幻灯片

引用内容程序代码

<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随机广告图片

引用内容程序代码

<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表单构成

引用内容程序代码

<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访问表单中的文本框内容

引用内容程序代码

<formname=”myForm”>

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

</form>

<ahref=’#’onClick=’window.alert(document.myForm.myText.value);’>CheckTextField</a>45动态复制文本框内容

引用内容程序代码

<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侦测文本框的变化

引用内容程序代码

<formname=”myForm”>

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

</form>47访问选中的Select

引用内容程序代码

<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动态增加Select项

引用内容程序代码

<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验证表单字段

引用内容程序代码

<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验证Select项

引用内容程序代码

functioncheckList(selection){

if(selection.length==0){

window.alert(“Youmustmakeaselectionfromthelist.”);

returnfalse;

}

returntrue;

}51动态改变表单的action

引用内容程序代码

<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使用图像按钮

引用内容程序代码

<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表单数据的加密

引用内容程序代码

<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改变浏览器状态栏文字提示

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.status=“Anewstatusmessage”;

</script>55弹出确认提示框

引用内容程序代码

<scriptlanguage=”JavaScript”>

varuserChoice=window.confirm(“ClickOKorCancel”);

if(userChoice){

document.write(“YouchoseOK”);

}else{

document.write(“YouchoseCancel”);

}

</script>56提示输入

引用内容程序代码

<scriptlanguage=”JavaScript”>

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

document.write(“YourNameis“+userName);

</script>57打开一个新窗口

引用内容//打开一个名称为myNewWindow的浏览器新窗口

程序代码

<scriptlanguage=”JavaScript”>

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

</script>58设置新窗口的大小

引用内容程序代码

<scriptlanguage=”JavaScript”>

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

</script>59设置新窗口的位置

引用内容程序代码

<scriptlanguage=”JavaScript”>

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

</script>60是否显示工具栏和滚动栏

引用内容程序代码

<scriptlanguage=”JavaScript”>

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

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

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.open(‘’,‘myNewWindow’,‘resizable=yes’);</script>62加载一个新的文档到当前窗口

引用内容程序代码

<ahref=’#’onClick=’document.location=‘125a.html’;’>OpenNewDocument</a>63设置页面的滚动位置

引用内容程序代码

<scriptlanguage=”JavaScript”>

if(document.all){//如果是IE浏览器则使用scrollTop属性

document.body.scrollTop=200;

}else{//如果是NetScape浏