js基础代码.docx

js基础代码.docx

《js基础代码.docx》由会员分享，可在线阅读，更多相关《js基础代码.docx（14页珍藏版）》请在冰豆网上搜索。

js基础代码

1创建脚本块

引用内容程序代码

JavaScript代码写在这里面

2隐藏脚本代码

引用内容程序代码

–

document.write（“Hello”）;

//–>

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

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

引用内容程序代码

Hellotothenon-JavaScriptbrowser.

4链接外部脚本文件

引用内容程序代码

5注释脚本

引用内容程序代码

//Thisisacomment

document.write（“Hello”）;//Thisisacomment

/*

Allofthis

isacomment

*/

6输出到浏览器

引用内容程序代码

document.write（“Hello”）;

7定义变量

引用内容程序代码

varmyVariable=“somevalue”;

8字符串相加

引用内容程序代码

varmyString=“String1”+“String2”;

9字符串搜索

引用内容程序代码

–

varmyVariable=“Hellothere”;

vartherePlace=myVariable.search（“there”）;

document.write（therePlace）;

//–>

10字符串替换

引用内容程序代码

thisVar.replace（“Monday”,”Friday”）;

11格式化字串

引用内容程序代码

–

varmyVariable=“Hellothere”;

document.write（myVariable.big（）+“
”）;

document.write（myVariable.blink（）+“
”）;

document.write（myVariable.bold（）+“
”）;

document.write（myVariable.fixed（）+“
”）;

document.write（myVariable.fontcolor（“red”）+“
”）;

document.write（myVariable.fontsize（“18pt”）+“
”）;

document.write（myVariable.italics（）+“
”）;

document.write（myVariable.small（）+“
”）;

document.write（myVariable.strike（）+“
”）;

document.write（myVariable.sub（）+“
”）;

document.write（myVariable.sup（）+“
”）;

document.write（myVariable.toLowerCase（）+“
”）;

document.write（myVariable.toUpperCase（）+“
”）;

varfirstString=“MyString”;

varfinalString=firstString.bold（）.toLowerCase（）.fontcolor（“red”）;

//–>

12创建数组

引用内容程序代码

–

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”）;

//–>

13数组排序

引用内容程序代码

–

varmyArray=newArray（5）;

myArray[0]=“z”;

myArray[1]=“c”;

myArray[2]=“d”;

myArray[3]=“a”;

myArray[4]=“q”;

document.write（myArray.sort（））;

//–>

14分割字符串

引用内容程序代码

–

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

varstringArray=myVariable.split（“,”）;

document.write（stringArray[0]）;

document.write（stringArray[1]）;

document.write（stringArray[2]）;

document.write（stringArray[3]）;

//–>

15弹出警告信息

引用内容程序代码

–

window.alert（“Hello”）;

//–>

16弹出确认框

引用内容程序代码

–

varresult=window.confirm（“ClickOKtocontinue”）;

//–>

17自定义函数

引用内容程序代码

–

functionmultiple（number1,number2）{

varresult=number1*number2;

returnresult;

}

//–>

18调用JS函数

引用内容程序代码

Linktext

functionName”（）”>Linktext

19在页面加载完成后执行函数

引用内容程序代码

Bodyofthepage

20条件判断

引用内容程序代码

21指定次数循环

引用内容程序代码

22设定将来执行

引用内容程序代码

23定时执行函数

引用内容程序代码

24取消定时执行

引用内容程序代码

25在页面卸载时候执行函数

引用内容程序代码

Bodyofthepage

JavaScript就这么回事2：

浏览器输出

26访问document对象

引用内容程序代码

varmyURL=document.URL;

window.alert（myURL）;

27动态输出HTML

引用内容程序代码

document.write（“

Here’ssomeinformationaboutthisdocument:

document.write（“

”）;

document.write（“

• ReferringDocument:

  “+document.referrer+“

”）;

document.write（“

• Domain:

  “+document.domain+“

”）;

document.write（“

• URL:

  “+document.URL+“

”）;

document.write（“

28输出换行

引用内容程序代码

document.writeln（“a”）;

document.writeln（“b”）;

29输出日期

引用内容程序代码

varthisDate=newDate（）;

document.write（thisDate.toString（））;

30指定日期的时区

引用内容程序代码

varmyOffset=-2;

varcurrentDate=newDate（）;

varuserOffset=currentDate.getTimezoneOffset（）/60;

vartimeZoneDifference=userOffset–myOffset;

currentDate.setHours（currentDate.getHours（）+timeZoneDifference）;

document.write（“ThetimeanddateinCentralEuropeis:

“+currentDate.toLocaleString（））;

31设置日期输出格式

引用内容程序代码

varthisDate=newDate（）;

varthisTimeString=thisDate.getHours（）+“:

”+thisDate.getMinutes（）;

varthisDateString=thisDate.getFullYear（）+“/”+thisDate.getMonth（）+“/”+thisDate.getDate（）;

document.write（thisTimeString+“on“+thisDateString）;

32读取URL参数

引用内容程序代码

varurlParts=document.URL.split（“?

”）;

varparameterParts=urlParts[1].split（“&”）;

for（i=0;i

varpairParts=parameterParts[i].split（“=”）;

varpairName=pairParts[0];

varpairValue=pairParts[1];

document.write（pairName+“：

“+pairValue）;

}

你还以为HTML是无状态的么？

33打开一个新的document对象

引用内容程序代码

functionnewDocument（）{

document.open（）;

document.write（“

ThisisaNewDocument.

document.close（）;

}

34页面跳转

引用内容程序代码

window.location=“http:

//www.x-

35添加网页加载进度窗口

引用内容程序代码

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

Thisisthemainpage

JavaScript就这么回事3：

图像

36读取图像属性

引用内容程序代码

Width

37动态加载图像

引用内容程序代码

myImage=newImage;

myImage.src=“Tellers1.jpg”;

38简单的图像替换

引用内容程序代码

rollImage=newImage;

rollImage.src=“rollImage1.jpg”;

defaultImage=newImage;

defaultImage.src=“image1.jpg”;

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

39随机显示图像

引用内容程序代码

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（‘’）;

40函数实现的图像替换

引用内容程序代码

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”）;

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

41创建幻灯片

引用内容程序代码

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

window.setTimeout（“slideShow（“+imageNumber+“）”,3000）;

}

}

42随机广告图片

引用内容程序代码

varimageList=newArray;

imageList[0]=“image1.jpg”;

imageList[1]=“image2.jpg”;

imageList[2]=“image3.jpg”;

imageList[3]=“image4.jpg”;

varurlList=newArray;

urlList[0]=“http:

//some.host/”;

urlList[1]=“http:

//another.host/”;

urlList[2]=“http:

//somewhere.else/”;

urlList[3]=“http:

//right.here/”;

varimageChoice=Math.floor（Math.random（）*imageList.length）;

document.write（‘’）;

JavaScript就这么回事4：

表单

43表单构成

引用内容程序代码

FirstChoice

SecondChoice

44访问表单中的文本框内容

引用内容程序代码

CheckTextField

45动态复制文本框内容

引用内容程序代