??xml version="1.0" encoding="utf-8" standalone="yes"?>
JavaScriptp么回?Q基知识
1 创徏脚本?/p>
1: <script language=”JavaScript?gt;
2: JavaScript code goes here
3: </script>
2 隐藏脚本代码
1: <script language=”JavaScript?gt;
2: <!--
3: document.write(“Hello?;
4: // -->
5: </script>
在不支持JavaScript的浏览器中将不执行相关代?/p>
3 览器不支持的时候显C?/p>
1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript>
4 链接外部脚本文g
1: <script language=”JavaScript?src="/”filename.js"?gt;</script>
5 注释脚本
1: // This is a comment
2: document.write(“Hello?; // This is a comment
3: /*
4: All of this
5: is a comment
6: */
6 输出到浏览器
1: document.write(?lt;strong>Hello</strong>?;
7 定义变量
1: var myVariable = “some value?
8 字符串相?/p>
1: var myString = “String1?+ “String2?
9 字符串搜?/p>
1: <script language=”JavaScript?gt;
2: <!--
3: var myVariable = “Hello there?
4: var therePlace = myVariable.search(“there?;
5: document.write(therePlace);
6: // -->
7: </script>
10 字符串替?/p>
1: thisVar.replace(“Monday?”Friday?;
11 格式化字?/p>
1: <script language=”JavaScript?gt;
2: <!--
3: var myVariable = “Hello there?
4: document.write(myVariable.big() + ?lt;br/>?;
5: document.write(myVariable.blink() + ?lt;br/>?;
6: document.write(myVariable.bold() + ?lt;br/>?;
7: document.write(myVariable.fixed() + ?lt;br/>?;
8: document.write(myVariable.fontcolor(“red? + ?lt;br/>?;
9: document.write(myVariable.fontsize(?8pt? + ?lt;br/>?;
10: document.write(myVariable.italics() + ?lt;br/>?;
11: document.write(myVariable.small() + ?lt;br/>?;
12: document.write(myVariable.strike() + ?lt;br/>?;
13: document.write(myVariable.sub() + ?lt;br/>?;
14: document.write(myVariable.sup() + ?lt;br/>?;
15: document.write(myVariable.toLowerCase() + ?lt;br/>?;
16: document.write(myVariable.toUpperCase() + ?lt;br/>?;
17:
18: var firstString = “My String?
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red?;
20: // -->
21: </script>
12 创徏数组
1: <script language=”JavaScript?gt;
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “First Entry?
5: myArray[1] = “Second Entry?
6: myArray[2] = “Third Entry?
7: myArray[3] = “Fourth Entry?
8: myArray[4] = “Fifth Entry?
9: var anotherArray = new Array(“First Entry?”Second Entry?”Third Entry?”Fourth Entry?”Fifth Entry?;
10: // -->
11: </script>
13 数组排序
1: <script language=”JavaScript?gt;
2: <!--
3: var myArray = new Array(5);
4: myArray[0] = “z?
5: myArray[1] = “c?
6: myArray[2] = “d?
7: myArray[3] = “a?
8: myArray[4] = “q?
9: document.write(myArray.sort());
10: // -->
11: </script>
14 分割字符?/p>
1: <script language=”JavaScript?gt;
2: <!--
3: var myVariable = “a,b,c,d?
4: var stringArray = myVariable.split(??;
5: document.write(stringArray[0]);
6: document.write(stringArray[1]);
7: document.write(stringArray[2]);
8: document.write(stringArray[3]);
9: // -->
10: </script>
15 弹出警告信息
1: <script language=”JavaScript?gt;
2: <!--
3: window.alert(“Hello?;
4: // -->
5: </script>
16 弹出认?/p>
1: <script language=”JavaScript?gt;
2: <!--
3: var result = window.confirm(“Click OK to continue?;
4: // -->
5: </script>
17 定义函数
1: <script language=”JavaScript?gt;
2: <!--
3: function multiple(number1,number2) {
4: var result = number1 * number2;
5: return result;
6: }
7: // -->
8: </script>
18 调用JS函数
1: <a href=??onClick=”functionName()?gt;Link text</a>
2: <a href="/”javascript:functionName"()?gt;Link text</a>
19 在页面加载完成后执行函数
1: <body onLoad=”functionName();?gt;
2: Body of the page
3: </body>
20 条g判断
1: <script>
2: <!--
3: var userChoice = window.confirm(“Choose OK or Cancel?;
4: var result = (userChoice == true) ? “OK?: “Cancel?
5: document.write(result);
6: // -->
7: </script>
21 指定ơ数循环
1: <script>
2: <!--
3: var myArray = new Array(3);
4: myArray[0] = “Item 0?
5: myArray[1] = “Item 1?
6: myArray[2] = “Item 2?
7: for (i = 0; i < myArray.length; i++) {
8: document.write(myArray[i] + ?lt;br/>?;
9: }
10: // -->
11: </script>
22 讑֮来执行
1: <script>
2: <!--
3: function hello() {
4: window.alert(“Hello?;
5: }
6: window.setTimeout(“hello()?5000);
7: // -->
8: </script>
23 定时执行函数
1: <script>
2: <!--
3: function hello() {
4: window.alert(“Hello?;
5: window.setTimeout(“hello()?5000);
6: }
7: window.setTimeout(“hello()?5000);
8: // -->
9: </script>
24 取消定时执行
1: <script>
2: <!--
3: function hello() {
4: window.alert(“Hello?;
5: }
6: var myTimeout = window.setTimeout(“hello()?5000);
7: window.clearTimeout(myTimeout);
8: // -->
9: </script>
25 在页面卸载时候执行函?/p>
1: <body onUnload=”functionName();?gt;
2: Body of the page
3: </body>
JavaScriptp么回?Q浏览器输出
26 讉Kdocument对象
1: <script language=”JavaScript?gt;
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script>
27 动态输出HTML
1: <script language=”JavaScript?gt;
2: document.write(?lt;p>Here’s some information about this document:</p>?;
3: document.write(?lt;ul>?;
4: document.write(?lt;li>Referring Document: ?+ document.referrer + ?lt;/li>?;
5: document.write(?lt;li>Domain: ?+ document.domain + ?lt;/li>?;
6: document.write(?lt;li>URL: ?+ document.URL + ?lt;/li>?;
7: document.write(?lt;/ul>?;
8: </script>
28 输出换行
1: document.writeln(?lt;strong>a</strong>?;
2: document.writeln(“b?;
29 输出日期
1: <script language=”JavaScript?gt;
2: var thisDate = new Date();
3: document.write(thisDate.toString());
4: </script>
30 指定日期的时?/p>
1: <script language=”JavaScript?gt;
2: var myOffset = -2;
3: var currentDate = new Date();
4: var userOffset = currentDate.getTimezoneOffset()/60;
5: var timeZoneDifference = userOffset - myOffset;
6: currentDate.setHours(currentDate.getHours() + timeZoneDifference);
7: document.write(“The time and date in Central Europe is: ?+ currentDate.toLocaleString());
8: </script>
31 讄日期输出格式
1: <script language=”JavaScript?gt;
2: var thisDate = new Date();
3: var thisTimeString = thisDate.getHours() + ??+ thisDate.getMinutes();
4: var thisDateString = thisDate.getFullYear() + ??+ thisDate.getMonth() + ??+ thisDate.getDate();
5: document.write(thisTimeString + ?on ?+ thisDateString);
6: </script>
32 dURL参数
1: <script language=”JavaScript?gt;
2: var urlParts = document.URL.split(??;
3: var parameterParts = urlParts[1].split(?amp;?;
4: for (i = 0; i < parameterParts.length; i++) {
5: var pairParts = parameterParts[i].split(??;
6: var pairName = pairParts[0];
7: var pairValue = pairParts[1];
8: document.write(pairName + ?Q?+pairValue );
9: }
10: </script>
你还以ؓHTML是无状态的么?
33 打开一个新的document对象
1: <script language=”JavaScript?gt;
2: function newDocument() {
3: document.open();
4: document.write(?lt;p>This is a New Document.</p>?;
5: document.close();
6: }
7: </script>
34 面跌{
1: <script language=”JavaScript?gt;
2: window.location = “http://www.liu21st.com/?
3: </script>
35 d|页加蝲q度H口
1: <html>
2: <head>
3: <script language='javaScript'>
4: var placeHolder = window.open('holder.html','placeholder','width=200,height=200');
5: </script>
6: <title>The Main Page</title>
7: </head>
8: <body onLoad='placeHolder.close()'>
9: <p>This is the main page</p>
10: </body>
11: </html>
JavaScriptp么回?Q图?
36 d囑փ属?/p>
1: <img src="/”image1.jpg"?name=”myImage?gt;
2: <a href=? ?onClick=”window.alert(document.myImage.width)?gt;Width</a>
3:
37 动态加载图?/p>
1: <script language=”JavaScript?gt;
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg?
4: </script>
38 单的囑փ替换
1: <script language=”JavaScript?gt;
2: rollImage = new Image;
3: rollImage.src = “rollImage1.jpg?
4: defaultImage = new Image;
5: defaultImage.src = “image1.jpg?
6: </script>
7: <a href="/”myUrl"?onMouseOver=”document.myImage.src = rollImage.src;?br />8: onMouseOut=”document.myImage.src = defaultImage.src;?gt;
9: <img src="/”image1.jpg"?name=”myImage?width=100 height=100 border=0>
39 随机昄囑փ
1: <script language=”JavaScript?gt;
2: var imageList = new Array;
3: imageList[0] = “image1.jpg?
4: imageList[1] = “image2.jpg?
5: imageList[2] = “image3.jpg?
6: imageList[3] = “image4.jpg?
7: var imageChoice = Math.floor(Math.random() * imageList.length);
8: document.write(?lt;img src=”?+ imageList[imageChoice] + ‘?gt;?;
9: </script>
40 函数实现的图像替?/p>
1: <script language=”JavaScript?gt;
2: var source = 0;
3: var replacement = 1;
4: function createRollOver(originalImage,replacementImage) {
5: var imageArray = new Array;
6: imageArray[source] = new Image;
7: imageArray[source].src = originalImage;
8: imageArray[replacement] = new Image;
9: imageArray[replacement].src = replacementImage;
10: return imageArray;
11: }
12: var rollImage1 = createRollOver(“image1.jpg?”rollImage1.jpg?;
13: </script>
14: <a href=??onMouseOver=”document.myImage1.src = rollImage1[replacement].src;?br />15: onMouseOut=”document.myImage1.src = rollImage1[source].src;?gt;
16: <img src="/”image1.jpg"?width=100 name=”myImage1?border=0>
17: </a>
41 创徏qȝ?/p>
1: <script language=”JavaScript?gt;
2: var imageList = new Array;
3: imageList[0] = new Image;
4: imageList[0].src = “image1.jpg?
5: imageList[1] = new Image;
6: imageList[1].src = “image2.jpg?
7: imageList[2] = new Image;
8: imageList[2].src = “image3.jpg?
9: imageList[3] = new Image;
10: imageList[3].src = “image4.jpg?
11: function slideShow(imageNumber) {
12: document.slideShow.src = imageList[imageNumber].src;
13: imageNumber += 1;
14: if (imageNumber < imageList.length) {
15: window.setTimeout(“slideShow(?+ imageNumber + ??3000);
16: }
17: }
18: </script>
19: </head>
20: <body onLoad=”slideShow(0)?gt;
21: <img src="/”image1.jpg"?width=100 name=”slideShow?gt;
42 随机q告囄
1: <script language=”JavaScript?gt;
2: var imageList = new Array;
3: imageList[0] = “image1.jpg?
4: imageList[1] = “image2.jpg?
5: imageList[2] = “image3.jpg?
6: imageList[3] = “image4.jpg?
7: var urlList = new Array;
8: urlList[0] = “http://some.host/?
9: urlList[1] = “http://another.host/?
10: urlList[2] = “http://somewhere.else/?
11: urlList[3] = “http://right.here/?
12: var imageChoice = Math.floor(Math.random() * imageList.length);
13: document.write(?lt;a href=”?+ urlList[imageChoice] + ‘?gt;<img src=”?+ imageList[imageChoice] + ‘?gt;</a>?;
14: </script>
JavaScriptp么回?Q表?
q是先l写完JSp么回事系列吧?br />43 表单构成
1: <form method=”post?action=”target.html?name=”thisForm?gt;
2: <input type=”text?name=”myText?gt;
3: <select name=”mySelect?gt;
4: <option value=??gt;First Choice</option>
5: <option value=??gt;Second Choice</option>
6: </select>
7: <br/>
8: <input type=”submit?value=”Submit Me?gt;
9: </form>
44 讉K表单中的文本框内?/p>
1: <form name=”myForm?gt;
2: <input type=”text?name=”myText?gt;
3: </form>
4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>
45 动态复制文本框内容
1: <form name=”myForm?gt;
2: Enter some Text: <input type=”text?name=”myText?gt;<br/>
3: Copy Text: <input type=”text?name=”copyText?gt;
4: </form>
5: <a href=??onClick=”document.myForm.copyText.value =
6: document.myForm.myText.value;?gt;Copy Text Field</a>
46 侦测文本框的变化
1: <form name=”myForm?gt;
2: Enter some Text: <input type=”text?name=”myText?onChange=”alert(this.value);?gt;
3: </form>
47 讉K选中的Select
1: <form name=”myForm?gt;
2: <select name=”mySelect?gt;
3: <option value=”First Choice?gt;1</option>
4: <option value=”Second Choice?gt;2</option>
5: <option value=”Third Choice?gt;3</option>
6: </select>
7: </form>
8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>
48 动态增加Select?/p>
1: <form name=”myForm?gt;
2: <select name=”mySelect?gt;
3: <option value=”First Choice?gt;1</option>
4: <option value=”Second Choice?gt;2</option>
5: </select>
6: </form>
7: <script language=”JavaScript?gt;
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = ??
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice?
11: </script>
49 验证表单字段
1: <script language=”JavaScript?gt;
2: function checkField(field) {
3: if (field.value == “? {
4: window.alert(“You must enter a value in the field?;
5: field.focus();
6: }
7: }
8: </script>
9: <form name=”myForm?action=”target.html?gt;
10: Text Field: <input type=”text?name=”myField”onBlur=”checkField(this)?gt;
11: <br/><input type=”submit?gt;
12: </form>
50 验证Select?/p>
1: function checkList(selection) {
2: if (selection.length == 0) {
3: window.alert(“You must make a selection from the list.?;
4: return false;
5: }
6: return true;
7: }
51 动态改变表单的action
1: <form name=”myForm?action=”login.html?gt;
2: Username: <input type=”text?name=”username?gt;<br/>
3: Password: <input type=”password?name=”password?gt;<br/>
4: <input type=”button?value=”Login?onClick=”this.form.submit();?gt;
5: <input type=”button?value=”Register?onClick=”this.form.action = ‘register.html? this.form.submit();?gt;
6: <input type=”button?value=”Retrieve Password?onClick=”this.form.action = ‘password.html? this.form.submit();?gt;
7: </form>
52 使用囑փ按钮
1: <form name=”myForm?action=”login.html?gt;
2: Username: <input type=”text?name=”username?gt;<br/>
3: Password: <input type=”password”name=”password?gt;<br/>
4: <input type=”image?src="/”login.gif"?value=”Login?gt;
5: </form>
6:
53 表单数据的加?/p>
1: <SCRIPT LANGUAGE='JavaScript'>
2: <!--
3: function encrypt(item) {
4: var newItem = '';
5: for (i=0; i < item.length; i++) {
6: newItem += item.charCodeAt(i) + '.';
7: }
8: return newItem;
9: }
10: function encryptForm(myForm) {
11: for (i=0; i < myForm.elements.length; i++) {
12: myForm.elements[i].value = encrypt(myForm.elements[i].value);
13: }
14: }
15:
16: //-->
17: </SCRIPT>
18: <form name='myForm' onSubmit='encryptForm(this); window.alert(this.myField.value);'>
19: Enter Some Text: <input type=text name=myField><input type=submit>
20: </form>
JavaScriptp么回?Q窗口和框架
54 改变览器状态栏文字提示
1: <script language=”JavaScript?gt;
2: window.status = “A new status message?
3: </script>
55 弹出认提示?/p>
1: <script language=”JavaScript?gt;
2: var userChoice = window.confirm(“Click OK or Cancel?;
3: if (userChoice) {
4: document.write(“You chose OK?;
5: } else {
6: document.write(“You chose Cancel?;
7: }
8: </script>
56 提示输入
1: <script language=”JavaScript?gt;
2: var userName = window.prompt(“Please Enter Your Name?”Enter Your Name Here?;
3: document.write(“Your Name is ?+ userName);
4: </script>
57 打开一个新H口
1: //打开一个名UCؓmyNewWindow的浏览器新窗?br />2: <script language=”JavaScript?gt;
3: window.open(“http://www.liu21st.com/?”myNewWindow?;
4: </script>
58 讄新窗口的大小
1: <script language=”JavaScript?gt;
2: window.open(“http://www.liu21st.com/?”myNewWindow?'height=300,width=300');
3: </script>
59 讄新窗口的位置
1: <script language=”JavaScript?gt;
2: window.open(“http://www.liu21st.com/?”myNewWindow?'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </script>
60 是否昄工具栏和滚动?/p>
1: <script language=”JavaScript?gt;
2: window.open(“http:
61 是否可以~放新窗口的大小
1: <script language=”JavaScript?gt;
2: window.open('http://www.liu21st.com/' , 'myNewWindow', 'resizable=yes' );</script>
62 加蝲一个新的文到当前H口
1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a>
63 讄面的滚动位|?/p>
1: <script language=”JavaScript?gt;
2: if (document.all) { //如果是IE览器则使用scrollTop属?br />3: document.body.scrollTop = 200;
4: } else { //如果是NetScape览器则使用pageYOffset属?br />5: window.pageYOffset = 200;
6: }</script>
64 在IE中打开全屏H口
1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');?gt;Open a full-screen window</a>
65 新窗口和父窗口的操作
1: <script language=”JavaScript?gt;
2: //定义新窗?br />3: var newWindow = window.open(?28a.html?”newWindow?;
4: newWindow.close(); //在父H口中关闭打开的新H口
5: </script>
6: 在新H口中关闭父H口
7: window.opener.close()
66 往新窗口中写内?/p>
1: <script language=”JavaScript?gt;
2: var newWindow = window.open(“?”newWindow?;
3: newWindow.document.open();
4: newWindow.document.write(“This is a new window?;
5: newWIndow.document.close();
6: </script>
67 加蝲面到框枉?/p>
1: <frameset cols=?0%,*?gt;
2: <frame name=”frame1?src="/?35a.html"?gt;
3: <frame name=”frame2?src="/”about:blank"?gt;
4: </frameset>
5: 在frame1中加载frame2中的面
6: parent.frame2.document.location = ?35b.html?
68 在框枉面之间共享脚?br />如果在frame1中html文g中有个脚?/p>
1: function doAlert() {
2: window.alert(“Frame 1 is loaded?;
3: }
那么在frame2中可以如此调用该Ҏ
1: <body onLoad=”parent.frame1.doAlert();?gt;
2: This is frame 2.
3: </body>
69 数据公用
可以在框枉面定义数据项Q得该数据可以被多个框架中的页面公?/p>
1: <script language=”JavaScript?gt;
2: var persistentVariable = “This is a persistent value?
3: </script>
4: <frameset cols=?0%,*?gt;
5: <frame name=”frame1?src="/?38a.html"?gt;
6: <frame name=”frame2?src="/?38b.html"?gt;
7: </frameset>
q样在frame1和frame2中都可以使用变量persistentVariable
70 框架代码?br />Ҏ以上的一些思\Q我们可以用一个隐藏的框架面来作为整个框枉的代码库
1: <frameset cols=?,50%,*?gt;
2: <frame name=”codeFrame?src="/?40code.html"?gt;
3: <frame name=”frame1?src="/?40a.html"?gt;
4: <frame name=”frame2?src="/?40b.html"?gt;
5: </frameset>