JavaScript就这么回事

最新推荐文章于 2024-11-11 19:29:13 发布

jelink

最新推荐文章于 2024-11-11 19:29:13 发布

阅读量743

点赞数

分类专栏： JavaScript 文章标签： javascript imagelist image input action button

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

有些时候你精通一门语言，但是会发现你其实整天在和其它语言打交道，也许你以为这些微不足道，不至于影响你的开发进度，但恰恰是这些你不重视的东西会浪费你很多时间，我一直以为我早在几年前就已经精通JavaScript了，直到目前，我才越来越觉得JavaScript 远比我想象的复杂和强大，我开始崇拜它，就像崇拜所有OOP语言一样～趁着节日的空隙，把有关JavaScript的方法和技巧整理下，让每个在为JavaScript而烦恼的人明白，JavaScript就这么回事！并希望JavaScript还可以成为你的朋友，让你豁然开朗，在项目中更好的应用～适合阅读范围：对JavaScript一无所知～离精通只差一步之遥的人

基础知识：HTML

1 创建脚本块

<script language=”JavaScript”>JavaScript code goes here</script>

2 隐藏脚本代码

<script language=”JavaScript”> document.write(“Hello”);</script>

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

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

<noscript>Hello to the non-JavaScript browser.</noscript>

4 链接外部脚本文件

 <script language=”JavaScript” src=”filename.js”></script>

5 注释脚本

1: // This is a comment2: document.write(“Hello”); // This is a comment3: /*4: All of this5: is a comment6: */

6 输出到浏览器

1: document.write(“Hello”);

7 定义变量

var myVariable = “some value”;

8 字符串相加

var myString = “String1” + “String2”;

9 字符串搜索

<script language=”JavaScript”> var myVariable = “Hello there”; var therePlace = myVariable.search(“there”); document.write(therePlace);</script>

10 字符串替换

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

11 格式化字串

<script language=”JavaScript”> var myVariable = “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.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>”); var firstString = “My String”; var finalString = firstString.bold().toLowerCase().fontcolor(“red”);</script>

12 创建数组

<script language=”JavaScript”>var myArray = new Array(5); myArray[0] = “First Entry”;myArray[1] = “Second Entry”;myArray[2] = “Third Entry”;myArray[3] = “Fourth Entry”;myArray[4] = “Fifth Entry”;var anotherArray = new Array(“First Entry”,”Second Entry”,”Third Entry”,”Fourth Entry”,”Fifth Entry”);</script>

13 数组排序

<script language=”JavaScript”>var myArray = new Array(5);myArray[0] = “z”; myArray[1] = “c”; myArray[2] = “d”; myArray[3] = “a”;myArray[4] = “q”; document.write(myArray.sort());  </script>

14 分割字符串

<script language=”JavaScript”>var myVariable = “a,b,c,d”;var stringArray = myVariable.split(“,”);document.write(stringArray[0]);document.write(stringArray[1]);document.write(stringArray[2]);document.write(stringArray[3]);</script>

15 弹出警告信息

<script language=”JavaScript”>window.alert(“Hello”);</script>

16 弹出确认框

<script language=”JavaScript”>var result = window.confirm(“Click OK to continue”);</script>

17 定义函数

<script language=”JavaScript”>function multiple(number1,number2) {var result = number1 * number2;return result;}</script>

18 调用JS函数

1: <a href=”#” onClick=”functionName()”>Link text</a>2: <a href=”javascript:functionName()”>Link text</a>

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

<body onLoad=”functionName();”>Body of the page</body>

20 条件判断

<script>var userChoice = window.confirm(“Choose OK or Cancel”);var result = (userChoice == true) ? “OK” : “Cancel”; document.write(result);</script>

21 指定次数循环

<script>var myArray = 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 + “
”); } </script>

22 设定将来执行

<script>function hello() {window.alert(“Hello”);}window.setTimeout(“hello()”,5000);</script>

23 定时执行函数

<script>function hello() {window.alert(“Hello”);window.setTimeout(“hello()”,5000);}window.setTimeout(“hello()”,5000);</script>

24 取消定时执行

<script>function hello() {window.alert(“Hello”);}var myTimeout = window.setTimeout(“hello()”,5000);window.clearTimeout(myTimeout);</script>

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

<body onUnload=”functionName();”>Body of the page</body>

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=“[url]http://www.liu21st.com/[/url]”;</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>

36 读取图像属性
<img src=”image1.jpg” name=”myImage”><a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
37 动态加载图像
<script language=”JavaScript”>myImage = new Image;myImage.src = “Tellers1.jpg”;</script>
38 简单的图像替换
<script language=”JavaScript”>rollImage = new Image;rollImage.src = “rollImage1.jpg”;defaultImage = new Image;defaultImage.src = “image1.jpg”;</script><a href=”myUrl” onMouseOver=”document.myImage.src = rollImage.src;”onMouseOut=”document.myImage.src = defaultImage.src;”><img src=”image1.jpg” name=”myImage” width=100 height=100 border=0>
39 随机显示图像
<script language=”JavaScript”>var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var imageChoice = Math.floor(Math.random() * imageList.length);document.write(‘<img src=”’ + imageList[imageChoice] + ‘“>’);</script>
40 函数实现的图像替换
<script language=”JavaScript”>var source = 0;var replacement = 1;function createRollOver(originalImage,replacementImage) {var imageArray = new Array;imageArray[source] = new Image;imageArray[source].src = originalImage;imageArray[replacement] = new Image;imageArray[replacement].src = replacementImage;return imageArray;}var rollImage1 = createRollOver(“image1.jpg”,”rollImage1.jpg”);</script><a href=”#” onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”onMouseOut=”document.myImage1.src = rollImage1[source].src;”><img src=”image1.jpg” width=100 name=”myImage1” border=0></a>
41 创建幻灯片
<script language=”JavaScript”>var imageList = 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”;function slideShow(imageNumber) {document.slideShow.src = imageList[imageNumber].src;imageNumber += 1;if (imageNumber < imageList.length) {window.setTimeout(“slideShow(“ + imageNumber + “)”,3000);}}</script></head><body onLoad=”slideShow(0)”><img src=”image1.jpg” width=100 name=”slideShow”>
42 随机广告图片
<script language=”JavaScript”>var imageList = new Array;imageList[0] = “image1.jpg”;imageList[1] = “image2.jpg”;imageList[2] = “image3.jpg”;imageList[3] = “image4.jpg”;var urlList = new Array;urlList[0] = “http://some.host/”;urlList[1] = “http://another.host/”;urlList[2] = “http://somewhere.else/”;urlList[3] = “http://right.here/”;var imageChoice = Math.floor(Math.random() * imageList.length);document.write(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);</script> 
43 表单构成
<form method=”post” action=”target.html” name=”thisForm”><input type=”text” name=”myText”><select name=”mySelect”><option value=”1”>First Choice</option><option value=”2”>Second Choice</option></select><br><input type=”submit” value=”Submit Me”></form>
44 访问表单中的文本框内容
<form name=”myForm”><input type=”text” name=”myText”></form><a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>
45 动态复制文本框内容
<form name=”myForm”>Enter some Text: <input type=”text” name=”myText”><br>Copy Text: <input type=”text” name=”copyText”></form><a href=”#” onClick=”document.myForm.copyText.value =document.myForm.myText.value;”>Copy Text Field</a>
46 侦测文本框的变化
<form name=”myForm”>Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”></form>
47 访问选中的Select
<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option><option value=”Third Choice”>3</option></select></form><a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>
48 动态增加Select项
<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option></select></form><script language=”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 验证表单字段
<script language=”JavaScript”>function checkField(field) {if (field.value == “”) {window.alert(“You must enter a value in the field”);field.focus();}}</script><form name=”myForm” action=”target.html”>Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”><br><input type=”submit”></form>
50 验证Select项
function checkList(selection) {if (selection.length == 0) {window.alert(“You must make a selection from the list.”);return false;}return true;}
51 动态改变表单的action
<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br>Password: <input type=”password” name=”password”><br><input type=”button” value=”Login” onClick=”this.form.submit();”><input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”><input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”></form>
52 使用图像按钮
<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br>Password: <input type=”password”name=”password”><br><input type=”image” src=”login.gif” value=”Login”></form>
53 表单数据的加密
<SCRIPT LANGUAGE='JavaScript'><!--function encrypt(item) {var newItem = '';for (i=0; i < item.length; i++) {newItem += item.charCodeAt(i) + '.';}return newItem;}function encryptForm(myForm) {for (i=0; i < myForm.elements.length; i++) {myForm.elements.value = encrypt(myForm.elements.value);}}></SCRIPT><form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>Enter Some Text: <input type=text name=myField><input type=submit> </form>
上面的encryptForm方法把表单中的数据转换为编码，在提交表单之前完成了简单的表单数据加密～