JavaScript就这么回事 (JS基础知识整理)

最新推荐文章于 2024-10-30 18:24:25 发布

亚克

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量338

点赞数

分类专栏： Web开发文章标签： javascript imagelist image 浏览器 input action

Web开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1创建脚本块

引用内容程序代码

<scriptlanguage=”JavaScript”>

JavaScript代码写在这里面

</script>

2隐藏脚本代码

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

document.write(“Hello”);

//-->

</script>

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

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

引用内容程序代码

Helloto the non-JavaScript browser.

</noscript>

4链接外部脚本文件

引用内容程序代码

<scriptlanguage=”JavaScript” src="/”filename.js"”></script>

5注释脚本

引用内容程序代码

//This is a comment

document.write(“Hello”);// This is a comment

Allof this

isa comment

6输出到浏览器

引用内容程序代码

document.write(“<strong>Hello</strong>”);

7定义变量

引用内容程序代码

varmyVariable = “some value”;

8字符串相加

引用内容程序代码

varmyString = “String1” + “String2”;

9字符串搜索

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

varmyVariable = “Hello there”;

vartherePlace = myVariable.search(“there”);

document.write(therePlace);

//-->

</script>

10字符串替换

引用内容程序代码

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

11格式化字串

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

varmyVariable = “Hello there”;

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 = “My String”;

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

//-->

</script>

12创建数组

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

varmyArray = new Array(5);

myArray[0]= “First Entry”;

myArray[1]= “Second Entry”;

myArray[2]= “Third Entry”;

myArray[3]= “Fourth Entry”;

myArray[4]= “Fifth Entry”;

varanotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”FourthEntry”,”Fifth Entry”);

//-->

</script>

13数组排序

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

varmyArray = new Array(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(“Click OK to continue”);

//-->

</script>

17自定义函数

引用内容程序代码

<scriptlanguage=”JavaScript”>

<!--

functionmultiple(number1,number2) {

varresult = number1 * number2;

returnresult;

}

//-->

</script>

18调用JS函数

引用内容程序代码

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

<ahref="/”javascript:functionName"()”>Link text</a>

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

引用内容程序代码

<bodyonLoad=”functionName();”>

Bodyof the page

</body>

20条件判断

引用内容程序代码

<!--

varuserChoice = window.confirm(“Choose OK or Cancel”);

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

document.write(result);

//-->

</script>

21指定次数循环

引用内容程序代码

<!--

varmyArray = new Array(3);

myArray[0]= “Item 0”;

myArray[1]= “Item 1”;

myArray[2]= “Item 2”;

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

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

}

//-->

</script>

22设定将来执行

引用内容程序代码

<!--

functionhello() {

window.alert(“Hello”);

}

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

//-->

</script>

23定时执行函数

引用内容程序代码

<!--

functionhello() {

window.alert(“Hello”);

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

}

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

//-->

</script>

24取消定时执行

引用内容程序代码

<!--

functionhello() {

window.alert(“Hello”);

}

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

window.clearTimeout(myTimeout);

//-->

</script>

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

引用内容程序代码

<bodyonUnload=”functionName();”>

Bodyof the page

</body>

JavaScript就这么回事2：浏览器输出

26访问document对象

引用内容程序代码

<scriptlanguage=”JavaScript”>

varmyURL = document.URL;

window.alert(myURL);

</script>

27动态输出HTML

引用内容程序代码

<scriptlanguage=”JavaScript”>

document.write(“<p>Here’ssome information about this document:</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 = new Date();

document.write(thisDate.toString());

</script>

30指定日期的时区

引用内容程序代码

<scriptlanguage=”JavaScript”>

varmyOffset = -2;

varcurrentDate = new Date();

varuserOffset = currentDate.getTimezoneOffset()/60;

vartimeZoneDifference = userOffset - myOffset;

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

document.write(“Thetime and date in Central Europe is: “ + currentDate.toLocaleString());

</script>

31设置日期输出格式

引用内容程序代码

<scriptlanguage=”JavaScript”>

varthisDate = new Date();

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>Thisis a New Document.</p>”);

document.close();

}

</script>

34页面跳转

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.location= “http://www.x-force.cn/”;

</script>

35添加网页加载进度窗口

引用内容程序代码

<html>

<head>

<scriptlanguage='javaScript'>

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

</script>

<title>TheMain Page</title>

</head>

<bodyonLoad='placeHolder.close()'>

<p>Thisis the main page</p>

</body>

</html>

JavaScript就这么回事3：图像

36读取图像属性

引用内容程序代码

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

<ahref=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>

37动态加载图像

引用内容程序代码

<scriptlanguage=”JavaScript”>

myImage= new Image;

myImage.src= “Tellers1.jpg”;

</script>

38简单的图像替换

引用内容程序代码

<scriptlanguage=”JavaScript”>

rollImage= new Image;

rollImage.src= “rollImage1.jpg”;

defaultImage= new Image;

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=100 height=100 border=0>

39随机显示图像

引用内容程序代码

<scriptlanguage=”JavaScript”>

varimageList = new Array;

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 = new Array;

imageArray[source]= new Image;

imageArray[source].src= originalImage;

imageArray[replacement]= new Image;

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=100 name=”myImage1” border=0>

</a>

41创建幻灯片

引用内容程序代码

<scriptlanguage=”JavaScript”>

varimageList = new Array;

imageList[0]= new Image;

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

imageList[1]= new Image;

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

imageList[2]= new Image;

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

imageList[3]= new Image;

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=100 name=”slideShow”>

42随机广告图片

引用内容程序代码

<scriptlanguage=”JavaScript”>

varimageList = new Array;

imageList[0]= “image1.jpg”;

imageList[1]= “image2.jpg”;

imageList[2]= “image3.jpg”;

imageList[3]= “image4.jpg”;

varurlList = new Array;

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(‘<ahref=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice]+ ‘“></a>’);

</script>

JavaScript就这么回事4：表单

43表单构成

引用内容程序代码

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

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

<selectname=”mySelect”>

<optionvalue=”1”>First Choice</option>

<optionvalue=”2”>Second Choice</option>

</select>

<br>

<inputtype=”submit” value=”Submit Me”>

</form>

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

引用内容程序代码

<formname=”myForm”>

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

</form>

<ahref='#' onClick='window.alert(document.myForm.myText.value);'>Check TextField</a>

45动态复制文本框内容

引用内容程序代码

<formname=”myForm”>

Entersome Text: <input type=”text” name=”myText”><br>

CopyText: <input type=”text” name=”copyText”>

</form>

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

document.myForm.myText.value;”>CopyText Field</a>

46侦测文本框的变化

引用内容程序代码

<formname=”myForm”>

Entersome Text: <input type=”text” name=”myText”onChange=”alert(this.value);”>

</form>

47访问选中的Select

引用内容程序代码

<formname=”myForm”>

<selectname=”mySelect”>

<optionvalue=”First Choice”>1</option>

<optionvalue=”Second Choice”>2</option>

<optionvalue=”Third Choice”>3</option>

</select>

</form>

<ahref='#' onClick='alert(document.myForm.mySelect.value);'>Check SelectionList</a>

48动态增加Select项

引用内容程序代码

<formname=”myForm”>

<selectname=”mySelect”>

<optionvalue=”First Choice”>1</option>

<optionvalue=”Second Choice”>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 = “Third Choice”;

</script>

49验证表单字段

引用内容程序代码

<scriptlanguage=”JavaScript”>

functioncheckField(field) {

if(field.value == “”) {

window.alert(“Youmust enter a value in the field”);

field.focus();

}

</script>

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

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

</form>

50验证Select项

引用内容程序代码

functioncheckList(selection) {

if(selection.length == 0) {

window.alert(“Youmust make a selection from the list.”);

returnfalse;

}

returntrue;

}

51动态改变表单的action

引用内容程序代码

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

Username:<input type=”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=”Retrieve Password” onClick=”this.form.action =‘password.html’; this.form.submit();”>

</form>

52使用图像按钮

引用内容程序代码

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

Username:<input type=”text” name=”username”><br>

Password:<input type=”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);'>

EnterSome Text: <input type=text name=myField><input type=submit>

</form>

JavaScript就这么回事5：窗口和框架

54改变浏览器状态栏文字提示

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.status= “A new status message”;

</script>

55弹出确认提示框

引用内容程序代码

<scriptlanguage=”JavaScript”>

varuserChoice = window.confirm(“Click OK or Cancel”);

if(userChoice) {

document.write(“Youchose OK”);

}else {

document.write(“Youchose Cancel”);

}

</script>

56提示输入

引用内容程序代码

<scriptlanguage=”JavaScript”>

varuserName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);

document.write(“YourName is “ + userName);

</script>

57打开一个新窗口

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

程序代码

<scriptlanguage=”JavaScript”>

window.open(“http://www.liu21st.com/”,”myNewWindow”);

</script>

58设置新窗口的大小

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300');

</script>

59设置新窗口的位置

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.open(“http://www.liu21st.com/”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');

</script>

60是否显示工具栏和滚动栏

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.open(“http://www.x-force.cn/",toolbar=no,menubar=no);

</script>

61是否可以缩放新窗口的大小

引用内容程序代码

<scriptlanguage=”JavaScript”>

window.open('http://www.x-force.cn/', 'myNewWindow', 'resizable=yes' );</script>

62加载一个新的文档到当前窗口

引用内容程序代码

<ahref='#' onClick='document.location = '125a.html';' >Open NewDocument</a>

63设置页面的滚动位置

引用内容程序代码

<scriptlanguage=”JavaScript”>

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

document.body.scrollTop= 200;

}else { //如果是NetScape浏览器则使用pageYOffset属性

window.pageYOffset= 200;

}</script>

64在IE中打开全屏窗口

引用内容程序代码

<ahref='#'onClick=”window.open('http://www.devdao.com/','newWindow','fullScreen=yes');”>Opena full-screen window</a>

65新窗口和父窗口的操作

引用内容程序代码

<scriptlanguage=”JavaScript”>

//定义新窗口

varnewWindow = window.open(“128a.html”,”newWindow”);

newWindow.close();//在父窗口中关闭打开的新窗口

</script>在新窗口中关闭父窗口

程序代码

window.opener.close()

66往新窗口中写内容

引用内容程序代码

<scriptlanguage=”JavaScript”>

varnewWindow = window.open(“”,”newWindow”);

newWindow.document.open();

newWindow.document.write(“Thisis a new window”);

newWIndow.document.close();

</script>

67加载页面到框架页面

引用内容程序代码

<framesetcols=”50%,*”>

<framename=”frame1” src="/”135a.html"”>

<framename=”frame2” src="/”about:blank"”>

</frameset>

在frame1中加载frame2中的页面

parent.frame2.document.location= “135b.html”;

68在框架页面之间共享脚本

引用内容如果在frame1中html文件中有个脚本

程序代码

functiondoAlert() {

window.alert(“Frame1 is loaded”);

}

那么在frame2中可以如此调用该方法

程序代码

<bodyonLoad=”parent.frame1.doAlert();”>

Thisis frame 2.

</body>

69数据公用

引用内容可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用

程序代码

<scriptlanguage=”JavaScript”>

varpersistentVariable = “This is a persistent value”;

</script>

<framesetcols=”50%,*”>

<framename=”frame1” src="/”138a.html"”>

<framename=”frame2” src="/”138b.html"”>

</frameset>

这样在frame1和frame2中都可以使用变量persistentVariable

70框架代码库

引用内容根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库

程序代码

<framesetcols=”0,50%,*”>

<framename=”codeFrame” src="/”140code.html"”>

<framename=”frame1” src="/”140a.html"”>

<framename=”frame2” src="/”140b.html"”>

</frameset>

源文档<http://www.iplaysoft.com/that-is-javascript.html>

亚克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录