1.document.write(""); 輸出語句
2.JS中的注釋為//
3.傳統的HTML文檔順序是:
document->html->(head,body)
4.一個瀏覽器窗口中的DOM順序是:
window->(navigator,screen,history,location,document)
5.得到表單中元素的名稱和值:
document.getElementById("表單中元素的ID號").name(或value)
6.一個小寫轉大寫的JS:
document.getElementById("output").value=document.getElementById("input").value.toUpperCase();
7.JS中的值類型:
String,Number,Boolean,Null,Object,Function
8.JS中的字符型轉換成數值型:
parseInt(),parseFloat()
9.JS中的數字轉換成字符型:
("" 變量)
10.JS中的取字符串長度是:
(length)
11.JS中的字符與字符相連接使用+號.
12.JS中的比較操作符有:
==等于,!=不等于,>,>=,<.<=
13.JS中聲明變量使用:
var來進行聲明
14.JS中的判斷語句結構:
if(condition){}else{}
15.JS中的循環結構:
for([initial expression];[condition];[upadte expression]) {inside loop}
16.循環中止的命令是:
break
17.JS中的函數定義:
function functionName([parameter],…){statement[s]}
18.當文件中出現多個form表單時.可以用document.forms[0],document.forms[1]來代替.
19.窗口:
打開窗口window.open(), 關閉一個窗口:window.close(), 窗口本身:self
20.狀態欄的設置:
window.status="字符";
21.彈出提示信息:
window.alert("字符");
22.彈出確認框:
window.confirm();
23.彈出輸入提示框:
window.prompt();
24.指定當前顯示鏈接的位置:
window.location.href="URL"
25.取出窗體中的所有表單的數量:
document.forms.length
26.關閉文檔的輸出流:
document.close();
27.字符串追加連接符: =
28.創建一個文檔元素:
document.createElement(),document.createTextNode()
29.得到元素的方法:
document.getElementById()
30.設置表單中所有文本型的成員的值為空:
var form = window.document.forms[0]
for (var i = 0; i<form.elements.length;i ){
if (form.elements.type == "text"){
form.elements.value = "";
}
}
31.復選按鈕在JS中判斷是否選中:
document.forms[0].checkThis.checked
(checked屬性代表為是否選中返回TRUE或FALSE)
32.單選按鈕組(單選按鈕的名稱必須相同):
取單選按鈕組的長度document.forms[0].groupName.length
33.單選按鈕組判斷是否被選中也是用checked.
34.下拉列表框的值:
document.forms[0].selectName.options[n].value
(n有時用下拉列表框名稱加上.selectedIndex來確定被選中的值)
35.字符串的定義:
var myString = new String("This is lightsword");
36.字符串轉成大寫:
string.toUpperCase(); 字符串轉成小寫:string.toLowerCase();
37.返回字符串2在字符串1中出現的位置:
String1.indexOf("String2")!=-1則說明沒找到.
38.取字符串中指定位置的一個字符:
StringA.charAt(9);
39.取出字符串中指定起點和終點的子字符串:
stringA.substring(2,6);
40.數學函數:
Math.PI(返回圓周率),Math.SQRT2(返回開方),Math.max(value1,value2)返回兩個數中的
最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函數,
Math.floor(Math.random()*(n 1))返回隨機數
41.定義日期型變量:
var today = new Date();
42.日期函數列表:
dateObj.getTime()得到時間,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,
dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期幾,
dateObj.getHours()得到小時,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,
dateObj.setTime(value)設置時間,dateObj.setYear(val)設置年,
dateObj.setMonth(val)設置月,dateObj.setDate(val)設置日,
dateObj.setDay(val)設置星期幾,dateObj.setHours設置小時,dateObj.setMinutes(val)設置分,
dateObj.setSeconds(val)設置秒 [注意:此日期時間從0開始計]
43.FRAME的表示方式:
[window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName
44.parent代表父親對象,top代表最頂端對象
45.打開子窗口的父窗口為:opener
46.表示當前所屬的位置:this
47.當在超鏈接中調用JS函數時用:(javascript 來開頭后面加函數名
48.在老的瀏覽器中不執行此JS:<!– //–>
49.引用一個文件式的JS:<script type="text/javascript" src="aaa.js"></script>
50.指定在不支持腳本的瀏覽器顯示的HTML:<noscript></noscript>
51.當超鏈和onCLICK事件都有時,則老版本的瀏覽器轉向a.html,否則轉向b.html.
例:<a href="a.html" onclick="location.href='b.html';return false">dfsadf</a>
52.JS的內建對象有:
Array,Boolean,Date,Error,EvalError,
Function,Math,Number,Object,RangeError,ReferenceError,
RegExp,String,SyntaxError,TypeError,URIError
53.JS中的換行:\n
54.窗口全屏大小:
<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;
this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>
55.JS中的all代表其下層的全部元素
56.JS中的焦點順序:document.getElementByid("表單元素").tabIndex = 1
57.innerHTML的值是表單元素的值:
如<p id="para">"how are <em>you</em>"</p>,則innerHTML的值就是:how are <em>you</em>
58.innerTEXT的值和上面的一樣,只不過不會把<em>這種標記顯示出來.
59.contentEditable可設置元素是否可被修改,isContentEditable返回是否可修改的狀態.
60.isDisabled判斷是否為禁止狀態.disabled設置禁止狀態
61.length取得長度,返回整型數值
62.addBehavior()是一種JS調用的外部函數文件其擴展名為.htc
63.window.focus()使當前的窗口在所有窗口之前.
64.blur()指失去焦點.與FOCUS()相反.
65.select()指元素為選中狀態.
66.防止用戶對文本框中輸入文本:
onfocus="this.blur()"
67.取出該元素在頁面中出現的數量:
document.all.tags("div(或其它HTML標記符)").length
68.JS中分為兩種窗體輸出:模態和非模態.
window.showModaldialog(),window.showModeless()
69.狀態欄文字的設置:
window.status='文字',默認的狀態欄文字設置:window.defaultStatus = '文字.';
70.添加到收藏夾:
external.AddFavorite("http://www.dannyg.com";,"jaskdlf");
71.JS中遇到腳本錯誤時不做任何操作:
window.onerror = doNothing; 指定錯誤句柄的語法為:window.onerror = handleError;
72.JS中指定當前打開窗口的父窗口:
window.opener,支持opener.opener…的多重繼續.
73.JS中的self指的是當前的窗口
74.JS中狀態欄顯示內容:window.status="內容"
75.JS中的top指的是框架集中最頂層的框架
76.JS中關閉當前的窗口:window.close();
77.JS中提出是否確認的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}
78.JS中的窗口重定向:window.navigate("http://www.sina.com.cn";);
79.JS中的打印:window.print()
80.JS中的提示輸入框:window.prompt("message","defaultReply");
81.JS中的窗口滾動條:window.scroll(x,y)
82.JS中的窗口滾動到位置:window.scrollby
83.JS中設置時間間隔:setInterval("expr",msecDelay)或setInterval(funcRef,msecDelay)或setTimeout
84.JS中的模態顯示在IE4 行,在NN中不行:showModalDialog("URL"[,arguments][,features]);
85.JS中的退出之前使用的句柄:
function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}} window.=verifyClose;
86.當窗體第一次調用時使用的文件句柄:onload()
87.當窗體關閉時調用的文件句柄:onunload()
88.window.location的屬性:
protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),
pathname("/a/a.html"),hash("#giantGizmo",指跳轉到相應的錨記),href(全部的信息)
89.window.location.reload()刷新當前頁面.
90.window.history.back()返回上一頁,window.history.forward()返回下一頁,
window.history.go(返回第幾頁,也可以使用訪問過的URL)
91.document.write()不換行的輸出,document.writeln()換行輸出
92.document.body.noWrap=true;防止鏈接文字折行.
93.變量名.charAt(第幾位),取該變量的第幾位的字符.
94."abc".charCodeAt(第幾個),返回第幾個字符的ASCii碼值.
95.字符串連接:string.concat(string2),或用 =進行連接
96.變量.indexOf("字符",起始位置),返回第一個出現的位置(從0開始計算)
97.string.lastIndexOf(searchString[,startIndex])最后一次出現的位置.
98.string.match(regExpression),判斷字符是否匹配.
99.string.replace(regExpression,replaceString)替換現有字符串.
100.string.split(分隔符)返回一個數組存儲值.
101.string.substr(start[,length])取從第幾位到指定長度的字符串.
102.string.toLowerCase()使字符串全部變為小寫.
103.string.toUpperCase()使全部字符變為大寫.
104.parseInt(string[,radix(代表進制)])強制轉換成整型.
105.parseFloat(string[,radix])強制轉換成浮點型.
106.isNaN(變量):測試是否為數值型.
107.定義常量的關鍵字:const,定義變量的關鍵字:var



教程：JavaScript就這么回事1-5?

有些時候你精通一門語言，但是會發現你其實整天在和其它語言打交道，也許你以為這些微不足道，不至于影響你的開發進度，但恰恰是這些你不重視的東西會浪費你很多時間，我一直以為我早在幾年前就已經精通JavaScript了，直到目前，我才越來越覺得JavaScript遠比我想象的復雜和強大，我開始崇拜它，就像崇拜所有OOP語言一樣～
趁著節日的空隙，把有關JavaScript的方法和技巧整理下，讓每個在為JavaScript而煩惱的人明白，JavaScript就這么回事！并希望JavaScript還可以成為你的朋友，讓你豁然開朗，在項目中更好的應用～

適合閱讀范圍：對JavaScript一無所知～離精通只差一步之遙的人
基礎知識：HTML

JavaScript就這么回事1：基礎知識

1 創建腳本塊

1: <script language=”JavaScript”>
2: JavaScript code goes here
3: </script>

2 隱藏腳本代碼

1: <script language=”JavaScript”>
2: <!–
3: document.write(“Hello”);
4: // –>
5: </script>

在不支持JavaScript的瀏覽器中將不執行相關代碼

3 瀏覽器不支持的時候顯示

1: <noscript>
2: Hello to the non-JavaScript browser.
3: </noscript>

4 鏈接外部腳本文件

1: <script language=”JavaScript” src="/”filename.js"”></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(“<strong>Hello</strong>”);

7 定義變量

1: var myVariable = “some value”;

8 字符串相加

1: var myString = “String1” + “String2”;

9 字符串搜索

1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “Hello there”;
4: var therePlace = myVariable.search(“there”);
5: document.write(therePlace);
6: // –>
7: </script>

10 字符串替換

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

11 格式化字串

1: <script language=”JavaScript”>
2: <!–
3: var myVariable = “Hello there”;
4: document.write(myVariable.big() + “<br>”);
5: document.write(myVariable.blink() + “<br>”);
6: document.write(myVariable.bold() + “<br>”);
7: document.write(myVariable.fixed() + “<br>”);
8: document.write(myVariable.fontcolor(“red”) + “<br>”);
9: document.write(myVariable.fontsize(“18pt”) + “<br>”);
10: document.write(myVariable.italics() + “<br>”);
11: document.write(myVariable.small() + “<br>”);
12: document.write(myVariable.strike() + “<br>”);
13: document.write(myVariable.sub() + “<br>”);
14: document.write(myVariable.sup() + “<br>”);
15: document.write(myVariable.toLowerCase() + “<br>”);
16: document.write(myVariable.toUpperCase() + “<br>”);
17:
18: var firstString = “My String”;
19: var finalString = firstString.bold().toLowerCase().fontcolor(“red”);
20: // –>
21: </script>

12 創建數組

1: <script language=”JavaScript”>
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”>
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 分割字符串

1: <script language=”JavaScript”>
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”>
2: <!–
3: window.alert(“Hello”);
4: // –>
5: </script>

16 彈出確認框

1: <script language=”JavaScript”>
2: <!–
3: var result = window.confirm(“Click OK to continue”);
4: // –>
5: </script>

17 定義函數

1: <script language=”JavaScript”>
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()”>Link text</a>
2: <a href="/”javascript:functionName"()”>Link text</a>

19 在頁面加載完成后執行函數

1: <body onLoad=”functionName();”>
2: Body of the page
3: </body>

20 條件判斷

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] + “<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 在頁面卸載時候執行函數

1: <body onUnload=”functionName();”>
2: Body of the page
3: </body>

JavaScript就這么回事2：瀏覽器輸出

26 訪問document對象

1: <script language=”JavaScript”>
2: var myURL = document.URL;
3: window.alert(myURL);
4: </script>

27 動態輸出HTML

1: <script language=”JavaScript”>
2: document.write(“<p>Here’s some information about this document:</p>”);
3: document.write(“<ul>”);
4: document.write(“<li>Referring Document: “ + document.referrer + “</li>”);
5: document.write(“<li>Domain: “ + document.domain + “</li>”);
6: document.write(“<li>URL: “ + document.URL + “</li>”);
7: document.write(“</ul>”);
8: </script>

28 輸出換行

1: document.writeln(“<strong>a</strong>”);
2: document.writeln(“b”);

29 輸出日期

1: <script language=”JavaScript”>
2: var thisDate = new Date();
3: document.write(thisDate.toString());
4: </script>

30 指定日期的時區

1: <script language=”JavaScript”>
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”>
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 讀取URL參數

1: <script language=”JavaScript”>
2: var urlParts = document.URL.split(“?”);
3: var parameterParts = urlParts[1].split(“&”);
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 + “ ：“ +pairValue );
9: }
10: </script>

你還以為HTML是無狀態的么？

33 打開一個新的document對象

1: <script language=”JavaScript”>
2: function newDocument() {
3: document.open();
4: document.write(“<p>This is a New Document.</p>”);
5: document.close();
6: }
7: </script>

34 頁面跳轉

1: <script language=”JavaScript”>
2: window.location = “http://www.velee.cn”;
3: </script>

35 添加網頁加載進度窗口

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>

JavaScript就這么回事3：圖像

36 讀取圖像屬性

1: <img src="/”image1.jpg"” name=”myImage”>
2: <a href=”# ” onClick=”window.alert(document.myImage.width)”>Width</a>
3:

37 動態加載圖像

1: <script language=”JavaScript”>
2: myImage = new Image;
3: myImage.src = “Tellers1.jpg”;
4: </script>

38 簡單的圖像替換

1: <script language=”JavaScript”>
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;”
8: onMouseOut=”document.myImage.src = defaultImage.src;”>
9: <img src="/”image1.jpg"” name=”myImage” width=100 height=100 border=0>

39 隨機顯示圖像

1: <script language=”JavaScript”>
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(‘<img src=”’ + imageList[imageChoice] + ‘“>’);
9: </script>

40 函數實現的圖像替換

1: <script language=”JavaScript”>
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;”
15: onMouseOut=”document.myImage1.src = rollImage1[source].src;”>
16: <img src="/”image1.jpg"” width=100 name=”myImage1” border=0>
17: </a>

41 創建幻燈片

1: <script language=”JavaScript”>
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)”>
21: <img src="/”image1.jpg"” width=100 name=”slideShow”>

42 隨機廣告圖片

1: <script language=”JavaScript”>
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(‘<a href=”’ + urlList[imageChoice] + ‘“><img src=”’ + imageList[imageChoice] + ‘“></a>’);
14: </script>

JavaScript就這么回事4：表單

還是先繼續寫完JS就這么回事系列吧～
43 表單構成

1: <form method=”post” action=”target.html” name=”thisForm”>
2: <input type=”text” name=”myText”>
3: <select name=”mySelect”>
4: <option value=”1”>First Choice</option>
5: <option value=”2”>Second Choice</option>
6: </select>
7: <br>
8: <input type=”submit” value=”Submit Me”>
9: </form>

44 訪問表單中的文本框內容

1: <form name=”myForm”>
2: <input type=”text” name=”myText”>
3: </form>
4: <a href='#' onClick='window.alert(document.myForm.myText.value);'>Check Text Field</a>

45 動態復制文本框內容

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText”><br>
3: Copy Text: <input type=”text” name=”copyText”>
4: </form>
5: <a href=”#” onClick=”document.myForm.copyText.value =
6: document.myForm.myText.value;”>Copy Text Field</a>

46 偵測文本框的變化

1: <form name=”myForm”>
2: Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”>
3: </form>

47 訪問選中的Select

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: <option value=”Third Choice”>3</option>
6: </select>
7: </form>
8: <a href='#' onClick='alert(document.myForm.mySelect.value);'>Check Selection List</a>

48 動態增加Select項

1: <form name=”myForm”>
2: <select name=”mySelect”>
3: <option value=”First Choice”>1</option>
4: <option value=”Second Choice”>2</option>
5: </select>
6: </form>
7: <script language=”JavaScript”>
8: document.myForm.mySelect.length++;
9: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text = “3”;
10: document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value = “Third Choice”;
11: </script>

49 驗證表單字段

1: <script language=”JavaScript”>
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”>
10: Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”>
11: <br><input type=”submit”>
12: </form>

50 驗證Select項

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”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password” name=”password”><br>
4: <input type=”button” value=”Login” onClick=”this.form.submit();”>
5: <input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”>
6: <input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”>
7: </form>

52 使用圖像按鈕

1: <form name=”myForm” action=”login.html”>
2: Username: <input type=”text” name=”username”><br>
3: Password: <input type=”password”name=”password”><br>
4: <input type=”image” src="/”login.gif"” value=”Login”>
5: </form>
6:

53 表單數據的加密

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>

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

54 改變瀏覽器狀態欄文字提示

1: <script language=”JavaScript”>
2: window.status = “A new status message”;
3: </script>

55 彈出確認提示框

1: <script language=”JavaScript”>
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”>
2: var userName = window.prompt(“Please Enter Your Name”,”Enter Your Name Here”);
3: document.write(“Your Name is “ + userName);
4: </script>

57 打開一個新窗口

1: //打開一個名稱為myNewWindow的瀏覽器新窗口
2: <script language=”JavaScript”>
3: window.open(“http://www.velee.cn”,”myNewWindow”);
4: </script>

58 設置新窗口的大小

1: <script language=”JavaScript”>
2: window.open(“http://www.velee.cn”,”myNewWindow”,'height=300,width=300');
3: </script>

59 設置新窗口的位置

1: <script language=”JavaScript”>
2: window.open(“http://www.velee.cn”,”myNewWindow”,'height=300,width=300,left=200,screenX=200,top=100,screenY=100');
3: </script>

60 是否顯示工具欄和滾動欄

1: <script language=”JavaScript”>
2: window.open(“http:

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

1: <script language=”JavaScript”>
2: window.open('http://www.velee.cn' , 'myNewWindow', 'resizable=yes' );</script>

62 加載一個新的文檔到當前窗口

1: <a href='#' onClick='document.location = '125a.html';' >Open New Document</a>

63 設置頁面的滾動位置

1: <script language=”JavaScript”>
2: if (document.all) { //如果是IE瀏覽器則使用scrollTop屬性
3: document.body.scrollTop = 200;
4: } else { //如果是NetScape瀏覽器則使用pageYOffset屬性
5: window.pageYOffset = 200;
6: }</script>

64 在IE中打開全屏窗口

1: <a href='#' onClick=”window.open('http://www.juxta.com/','newWindow','fullScreen=yes');”>Open a full-screen window</a>

65 新窗口和父窗口的操作

1: <script language=”JavaScript”>
2: //定義新窗口
3: var newWindow = window.open(“128a.html”,”newWindow”);
4: newWindow.close(); //在父窗口中關閉打開的新窗口
5: </script>
6: 在新窗口中關閉父窗口
7: window.opener.close()

66 往新窗口中寫內容

1: <script language=”JavaScript”>
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 加載頁面到框架頁面

1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src="/”135a.html"”>
3: <frame name=”frame2” src="/”about:blank"”>
4: </frameset>
5: 在frame1中加載frame2中的頁面
6: parent.frame2.document.location = “135b.html”;

68 在框架頁面之間共享腳本
如果在frame1中html文件中有個腳本

1: function doAlert() {
2: window.alert(“Frame 1 is loaded”);
3: }

那么在frame2中可以如此調用該方法

1: <body onLoad=”parent.frame1.doAlert();”>
2: This is frame 2.
3: </body>

69 數據公用
可以在框架頁面定義數據項，使得該數據可以被多個框架中的頁面公用

1: <script language=”JavaScript”>
2: var persistentVariable = “This is a persistent value”;
3: </script>
4: <frameset cols=”50%,*”>
5: <frame name=”frame1” src="/”138a.html"”>
6: <frame name=”frame2” src="/”138b.html"”>
7: </frameset>

這樣在frame1和frame2中都可以使用變量persistentVariable
70 框架代碼庫
根據以上的一些思路，我們可以使用一個隱藏的框架頁面來作為整個框架集的代碼庫

1: <frameset cols=”0,50%,*”>
2: <frame name=”codeFrame” src="/”140code.html"”>
3: <frame name=”frame1” src="/”140a.html"”>
4: <frame name=”frame2” src="/”140b.html"”>
5: </frameset>



教程：事半功倍系列之javascript From:向東IT博客
本文由經典論壇 鄧永炎 整理

清華大學出版的《事半功倍系列 javascript》,本人照著書敲出來的,有些翻譯了一下.前幾年看了一下,最近無事,重新翻了翻,很有幫助.本書應該有光盤的,但學校的書,光盤不知在哪.希望對你學 javascript有幫助

第一章javascript簡介

1.在地址欄輸入javascript語句

Javascript:Document.write("顯示文字")

2.將javascript嵌入 HTML文檔

<script language=javascript>
document.bgColor="blue"
</script>

第二章 使用變量和數組

1.聲明變量

<script language=javascripe>
Var answer1,answer2,answer3,answer4;
answer1=9;
answer2=2.5
answer3="Milkey May"
answer4=true
</script>

2.使用整數

<script language=javascript>
var decimalNum,hexadecimalNum,octalNum
decimalNum=24
hexadecimalNum=0×24
octalNum=024
document.write("顯示十進制數："+ decimalNum+"<br>")
document.write("顯示十六進制數："+ hexadecimalNum +"<br>")
document.write("顯示八進制數："+ octalNum +"<br>")
</script>

3.使用浮點數

<script language=javascript>
var num1,num2,num3,num4
num1=1234567890000.0
num2=5.14e23
num3=0.0000123456
num4=6.0254e3-4
document.write("浮點數1："+num1+"<br>")
document.write("浮點數2："+num2+"<br>")
document.write("浮點數3："+num3+"<br>")
document.write("浮點數4："+num4+"<br>")
</script>

4.使用布爾值

<script language=javascript>
var answer1,answer2
answer1=true
answer2=false
document.write("顯示布爾1："+answer1+"<br>")
document.write("顯示布爾2："+answer2+"<br>")
</script>

5.使用字符串

<script language=javascript>
var str1,str2
str1="fdsgdg dsfdsf china"
str2="武漢市廣播電視大學"
document.write("顯示字符串1："+str1+"<br>")
document.write("顯示字符串2："+str2+"<br>")
</script>

6.確定變量類型

<script>
var answer1,answer2,answer3,answer4
answer1=9
answer2=2.5
answer3="milky may"
answer4=true
document.write("變量1的類型是："+typeof answer1 +"<br>")
document.write("變量2的類型是："+typeof answer2 +"<br>")
document.write("變量3的類型是："+typeof answer3 +"<br>")
document.write("變量4的類型是："+typeof answer4 +"<br>")
</script>

7.將字符串轉換成數字

<script>
var str1="31 days in january"
var int1=parseInt(str1)
document.write("str1的數據類型是 ："+typeof str1+"<br>")
document.write("int1的數據類型是 ："+typeof int1+"<br>")
</script>

8.將數字轉換成字符串

<script>
var int1=256
var str1=""+int1
document.write("str1的數據類型是 ："+typeof str1+"<br>")
document.write("int1的數據類型是 ："+typeof int1+"<br>")
</script>

9.聲明數組

<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
document.write("數組是："+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4])
</script>

10.確定數組元素的個數

<script>
array=new Array(5)
array[0]=1
array[1]=3
array[2]=5
array[3]=7
array[4]=11
document.write("數組是："+array[0]+" "+array[1]+" "+array[2]+" "+array[3]+" "+array[4]+"<br>")
document.write("數組的元素個數是"+array.length)
</script>

11.將數組轉換為字符串

<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=array.join()
str2=array.join(" ")
document.write(str1+"<br>")
document.write(str2)
</script>

12.對數組排序

<script>
array=new Array()
array[0]="dark"
array[1]="apple"
array[2]="nebula"
array[3]="water"
str1=array.sort()
document.write(str1+"<br>")
</script>

第三章 創建表達式

1.使用算術運算符

<script>
var1=12
var2=10
varadd=var1+var2
varsub=var1-var2
varmult=var1*var2
vardiv=var1/var2
varmod=var1%var2
document.write("數據1是："+var1+"<br>")
document.write("數據2是："+var2+"<br>")
document.write("數據相加是："+varadd+"<br>")
document.write("數據相減是："+varsub+"<br>")
document.write("數據相乘是："+varmult+"<br>")
document.write("數據相除是："+vardiv+"<br>")
document.write("數據相除取余數是："+varmod+"<br>")
</script>

2.遞增變量和遞減變量

<script>
days=1
document.write("輸出變量"+days+"<br>")
days++
document.write("遞增后變量變為："+days)
</script>

3.創建比較表達式

<script>
daysofmonth=28
if(daysofmonth==28)
month="february"
document.write("days of month:"+daysofmonth+"<br>")
document.write("month:"+month)
</script>

4.創建邏輯表達式

<script>
dayofmonth=28
if(dayofmonth==28 || dayofmonth==29)
month="february"
document.write("days of month:"+dayofmonth+"<br>")
document.write("month:"+month)
</script>

5.使用條件運算符

<script language="javascript">
stomach="hungry";
time="5:00";
(stomach=="hungry"&&time=="5:00") ? eat = "dinner":eat="a snack";
document.write("輸出結果"+eat);
</script>

6.識別數字

<script>
var1=24;
(isNaN(var1))?document.write("變量var1"+var1+"不是數字"):Document.write("變量var1"+var1+"是數字")
</script>

第四章 控制程序流程

1.使用IF –Else語句

<script>
month="december"
date=25
if(month=="december" && date==25)
document.write("今天是圣誕節,商店關門")
else
document.write("歡迎,您來商店購物")
</script>

2.使用for 循環

<script>
for (count=1;count<=10;count++)
document.write("輸出第"+count+"句"+"<br>")
</script>

3.使用while循環

<script>
count=1
while(count<=15){
document.write("輸出第"+count+"句" +"<br>")
count++}
</script>

4.中斷循環

<script>
count=1
while(count<=15){
count++
if(count==8)
break;
document.write("輸出第"+count+"句"+"<br>")}
</script>

5.繼續循環

<script>
count=1
while(count<=15){
count++
if(count==8)
continue;
document.write("輸出第"+count+"句"+"<br>")}
</script>

6.使用javascript定時器

<script>
function rabbit()
{document.write("輸出語句")
}
</script>
<body onload=window.setTimeout(rabbit(),5000)>

7.設置定期間隔

<script>
window.setInterval("document.form1.text2.value=document.form1.text1.value",3000)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
</form>

8.清除超時和間隔

<script>
stop=window.setInterval("document.form1.text2.value=document.form1.text1.value",300)
</script>
<form name=form1>
<input type=text name=text1><br>
<input type=text name=text2><br>
<input type=button name=button1 value=" 清除超時和間隔" onclick=clearInterval(stop)>
</form>

第五章 使用函數

1.聲明函數

<script>
function quote()
{ document.write("輸出語句")
}
</script>

2.調用函數

<script>
function quote()
{ document.write("輸出語句")
}
quote()
</script>

3.了解全局變量和局部變量

任何不用 var關鍵字聲明的變量都是全局變量,任何在函數外聲明的變量都是全局變量

4.將參數傳送給函數

<script>
function f(item)
{document.write("輸出參數"+item+"<br>")
}
f("fgdfgd")
f("參數二")
</script>

5.從函數返回值

<script>
function average(var1,var2,var3)
{ave=(var1+var2+var3)/3;
document.write("輸出結果");
return ave;
}
document.write(average(34,56,78))
</script>

6.通過HTML鏈接調用函數

<script>
function quote(){
document.write(" 輸出字符串")
}
</script>
<a href=javascript:quote()>通過HTML鏈接調用函數</a>
<a href=javascript:Document.write("輸出字符")> 通過HTML鏈接調用函數,直接寫javascript語句</a>

第六章 處理事件

1.檢查鼠標單擊

<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.button1.value='there'>
</form>

2.檢測雙擊

<form name=form1>
<input type=button name=button1 value=hello onclick=document.form1.button1.value='你單擊了按鈕' ondblclick=document.form1.button1.value='你雙擊了該按鈕'>
</form>

3.創建懸停按鈕

<img src=go.gif onmouseover=document.images[0].src='go2.gif' onmouseout= document.images[0].src='go.gif'>

4.檢測按鍵

<form name=form1>
<input type=text name=text1 value=hello onkeypress="if(window.event.keyCode=='100') document.form1.text1.value='你按了d鍵'">
</form>

5.設置焦點

<form name=form1>
<input type=text name=text1 value=hello
onfous=document.form1.text1.value='該文本框獲得焦點'
onblur=document.form1.text1.value='該文本框失去焦點'>
</form>

6.檢測下拉菜單選擇

<form name=form1>
<select name=select1 size=4
onChange=document.form1.text1.value=document.form1.select1.value>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="武漢">武漢</option>
<option value="天津">天津</option>
<option value="大連">大連</option>
</select>
<input tppe=text name=text1 value=hello>
</form>

7.創建網頁加載和卸載信息

<body onload=document.form1.text1.value='頁面加載完畢' onunload=alert('再見,歡迎再來')>
<form name=form1>
<input type=text name=text1 value="頁面正在加載 ……">
</form>

第七章 使用對象

1.理解對象\屬性和方法

<body bgcolor="green">
<script>
document.write("頁面背景顏色是:"+document.bgColor)
document.write("頁面前景顏色是:"+document.fgColor)
</script>

2.使用網頁元素對象

<script>
</script>
<form name=form1>
<textarea name=ta1>dfgfdgfdhfdhdfdfgdf</textarea>
<input type=button value="選擇文本" onclick=document.form1.ta1.select()>
<input type=button value="顯示文本" onclick=document.write(document.form1.ta1.value)>
</form>

3.使用子對象

<form name=form1>
<input type=text name=text1 value=hello>
</form>
<script>
document.form1.text1.value="gdfgfd"
</script>

<form name=form1>
<input type=radio name=radio1>男
<input type=radio name=radio2>女
</script>
<script>
document.form1.radio1.checked=true
</script>

4.使用預定義對象

<script>
str1="dgdfgdfgdfhf固定法固定法功夫攻打法"
document.write(str1+"<br>")
str2=str1.substr(5)
document.write(str2+"<br>")
document.write("輸出圓的面積:"+Math.PI*Math.pow(5.0,2))
</script>

5.創建新對象

<script>
today=new Date()
document.write("今天是"+(today.getMonth()+1)+"月"+today.getDate()+"日"+"<br>")
document.write("現在是:"+today.toLocaleString())
</script>

6.引用當前對象

<form name=form1>
<input type=text name=text1 value="dgdgdfgfd" onclick=this.select()>
</script>

7.查看對象屬性

<script>
for(prop in window)
{document.write("window."+prop+"="+window[prop]+"<br>");}
for(prop2 in location)
{document.write("location."+prop2+"="+location[prop]+"<br>");}
</script>

8.使用Array對象

<script>
array=new Array(10)
array[0]="bark"
array[1]="apple"
array[2]="nebula"
array[3]="cookie"
array[4]="technology"
document.write("數組元素個數是"+array.Length+"<br>")
document.write("用 join將數組合并"+array.join(" ")+"<br>")
document.write(" 數組排序"+array.sort())
</script>

9.使用 image 對象

<img src=**.gif alt="圖片提示…." border=10>
<script>
document.write("圖片提示是:"+document.images[0].alt+"<br>")
document.write("圖片邊框大小是:"+document.images[0].broder)
</script>

10.預加載圖像

<script>
freddy=new Image()
freddy.src=freddy.gif
</script>
<body onload=document.images[0].src=freddy.src>
,<img src="blank.gif">
</body>

11.改變圖像

<img src=freddy.gif><br>
<form name=form1>
<input type=button name=button1 value="改變圖像" onclickd=document.images[0].src=dudjp.gif>
</form>

12.使用link和anchor對象

<a name=anchor1>錨點1<br>
<a href=http://www.microsoft.com>Microsoft</a><br>
<a href=http://www.sohu.com>sohu</a><br>
<a href=http://www.sina.com.cn>sina</a><br>
<script>
document.write("本頁面共有"+document.links.length+"鏈接"+"<br>")
document.write("本頁面共有"+document.anchors.length+"錨點"+"<br>")
document.write("第一個鏈接協議是"+document.links[0].protocol+"<br>")
document.write("第一個鏈接路徑是"+document.links[0].pathnamel+"<br>")
document.write("第一個鏈接href是"+document.links[0].hrefl+"<br>")
</script>

13.改變鏈接

<a href =http://www.microsoft.com>link</a>
<form name=form1>
<input type=button name=button1 value="改變鏈接" onclick=document.links[0].>
</form>

14.使用history對象

<form name=form1>
<input type=button name=button1 value="向后返回2頁" onclick=window.history.go(-2)>
</form>

第八章 使用窗口

1.在瀏覽器的狀態欄上顯示文本

<body onload=window.status="歡迎光臨我的站點">
<a href=http://www.sohu.com>sohu</a>
</body>

2.改變背景色

<script>
document.bgColor="orange"
</script>

3.列舉背景顏色

<body bgColor =green>
<script>
document.write("當前背景色是:"+document.bgColor)
</script>
</body>

4.改變文本和鏈接顏色

<script>
document.bgColor="orange"
document.fgColor="blue"
document.linkColor="red"
</script>
<h2>看看這段文本顏色</h2>
<a href=http://www.sohu.com>sohu</a>
</body>

5.改變文檔標題

<script>
name="Mouse"
document.title="welcome to "+name+"'s House"
document.write(document.title)
</script>

6.顯示修改日期

<script>
document.write("本頁面最后修改時間是"+document.lastModified)
</script>

7.查看當前文檔的URL

<script>
document.write("本頁面的URL:"+document.URL)
</script>

8.查看引用頁

<script>
document.write("本頁面的引用頁是"+document.referrer)
</script>

9.打開新的瀏覽器窗口

<script>
window.open("*.htm","title","width=200,height=400,resizable=yes")
</script>

10.關閉遠程窗口

close.html:
<script>
document.write("正文")
</script>
<form name=form1>
<input type=button name=button1va, , , lue="關閉" onclick=window.close()>
</form>

open.html
<script>
window.open("close.html","romote","width=200,height=400,resizable=yes")
</script>

11.打印窗口

<script>
document.write("正文")
</script>
<form name=form1>
<input type=button value=打印 onclick=window.print()>
</form>

12.移動窗口

<form name=form1>
水平方向<input type=text name=x value=20>
垂直方向<input type=text name=y value=50>
<input type=button value="移動窗口到…"onclick=window.moveTo(document.form1.x.value,document.form1.y.value)>
</form>

<form name=form1>
水平方向<input type=text name=x value=20>
垂直方向<input type=text name=y value=50>
<input type=button value="移動窗口"onclick=window.moveBy(document.form1.x.value,document.form1.y.value)>
</form>

13.改變窗口大小

<form name=form1>
水平方向<input type=text name=x value=200>
垂直方向<input type=text name=y value=500>
<input type=button value="改變窗口大小到….."onclick=window.resizeTo(document.form1.x.value,document.form1.y.value)>
</form>

<form name=form1>
水平方向<input type=text name=x value=200>
垂直方向<input type=text name=y value=500>
<input type=button value="改變窗口大小"onclick=window.resizeBy(document.form1.x.value,document.form1.y.value)>
</form>

14.用警告對話框通知用戶

<script>
window.alert("welcome")
</script>

15.用提示對話框接受輸入

<script>
name=window.prompt("輸入姓名","姓名")
document.write(" 歡迎您:"+name+"來到這里")
</script>

16.用確認對話框使用戶做出決定

<script>
like=window.confirm("你覺得好嗎?")
if(like==true)
document.write("謝謝你的夸獎")
else
document.write("希望得到你的夸獎")
</script>

第九章 使用字符串

1.使用字符串對象

<script>
mystring="gdgdfgfddddaaaaaaaaaaaabbbbbbbbbbbbbbbbbvbhg.<br>"
document.write(mystring)
document.write(mystring.bold())
document.write(mystring.toUpperCase())
</script>

2.使用子字符串

<script>
str1="fdsf 1111 gfdgfd dfdsf cccc dddd.<br>"
document.write(str1)
document.write(str1.substring(0,13)+"<br>")
document.write(str1.substr (20,11)+"<br>")
</script>

3.連接字符串

<script>
str1="may you find"
str2="peace,happiness and prosperity.<br>"
document.write(str1+"<br>")
document.write(str2)
document.write(str1.concat(str2))
document.write(str1+=str2)
</script>

4.格式化字符串變量

<script>
str1="peace,happiness and prosperity.<br>"
document.write(str1)
document.write(str1.big())
document.write(str1.small())
document.write(str1.bold())
document.write(str1.italics())
document.write(str1.strike())
document.write(str1.fontsize(6))
document.write(str1.fontcolor(green))
</script>

5.創建錨和鏈接

<script>
str1="this is the bigginning of the page.<br>"
str2="….<br>"
str3="this is the end of the page .<br>"
str4="link to the start<br>"
str5="link to the end<br>"
document.write(str1.anchor("start"))
for(i=0;i<10;i++)
document.write(str2);
document.write(str3.anchor("end"))
document.write(str4.link("#start"))
document.write(str5.link("#end"))
</script>

6.確定字符串長度

<script>
str1="this is the bigginning of the page."
document.write(str1+"<br>")
document.write( "字符串的長度是:"+str1.length)
document.write("字符串全部大寫是;"+str1.toUpperCase())
document.write("字符串全部小寫是;"+str1.toLowerCase())
</script>

7.在字符串內搜索

<script>
str1="this is the end of the line.<br>"
document.write(str1)
document.write("字符end在字符串的位置是"+str1.search("end"))
document.write("字符dog在字符串的位置是"+str1.search("dog"))
</script>

8.定位字符串中的字符

<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
document.write(str1)
document.write("the index for the second word ‘and' is"+str1.indexOf("and",30))
documednt.write("the last index of the word ‘and' is "+str1.lastIndexOf("and"))
</script>

9.替換字符串中的文本

<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
document.write(str1)
document .write(str1.replace("and",","))
</script>

10.字符串分離

<script>
str1="spring is a time for flowers and trees and baby bunnles<br>"
document.write(str1)
str1array=str1.split(" ")
document.write(str1array[0]+"<br>")
document.write(str1array[1]+"<br>")
document.write(str1array[2]+"<br>")
document.write(str1array[3]+"<br>")
</script>

第十章 使用日期和時間

1.使用Date對象

<script>
cdate=new Date("august 2,1989 12:30:00")
document.write(cdate)
</script>

2.顯示當地時間和日期

<script>
cdate=new Date()
document.write("當前時間是:"+cdate.toGMTString()+"<br>")
document.write("日期和時間是:"+cdate.toLocaleString())
</script>

3.獲得時間和日期值

<script>
cdate=new Date()
document.write("顯示當前的星期"+cdate.getDay()+"<br>")
document.write("顯示當前的月份"+cdate.getMonth()+"<br>")
document.write("顯示當前的日期"+cdate.getDay()+"<br>")
document.write("顯示當前的年份"+cdate.getYear()+"<br>")
document.write("顯示當前的小時"+cdate.getHours()+"<br>")
document.write("顯示當前的分鐘"+cdate.getMinutes()+"<br>")
document.write("顯示當前的秒"+cdate.getSeconds()+"<br>")
</script>

4.設置時間和日期值

<script language=javascript>
cdate=new Date("December 25,1984")
document.write("顯示日期"+cdate+"<br>")
document.write("設置月份"+cdate.setMonth(10)+"<br>")
document.write("設置日期"+cdate.setDate(23)+"<br>")
document.write("設置年份"+cdate.setYear(2000)+"<br>")
document.write("設置小時"+cdate.setHours(13)+"<br>");
document.write("設置分鐘"+cdate.setMinutes(47)+"<br>");
document.write("設置秒"+cdate.setSeconds(23)+"<br>");
document.write("顯示設置后的日期和時間"+cdate);
</script>

第十一章 使用Math對象

1. 使用Math對象

<script language=javascript>
</script>
<form name=form1>
圓的半徑:<input type=text name=rad><br>
圓的面積:<input type=text name=area><br>
<input type=button name=button1 value=計算圓的面積 onclick=document.form1.area.value=document.form1.rad.value*document.
form1.rad.value*Math.PI>
</form>

2.生成隨機數

<script>
array1=new Array(
"這是第1句",
"這是第2句",
"這是第3句",
"這是第4句",
"這是第5句",
"這是第6句")
RandomNo=Math.floor(array1.length*Math.random())
document.write("隨機輸出某一句"+"<br>"+array1[RandomNo])
</script>

3.使用平方根

<form name=form1>
value:<input type=text name=va1><br>
平方根<input type=text name=sqrt><br>
<input type=button name=button1 value=計算平方根
onclick="document.form1.sqrt.value=Math.sqrt(document.form1.va1.value)">
</form>

4.數字的舍入

<form name=form1>
輸入<input type=text name=val><br>
舍入的結果<input type=text name=round><br>
<input type=button name=button1 value=計算結果 onclick=document.form1.round.value=Math.round(document.form1.val.value)>
</form>

5.乘方運算

<form name=form1>
底數<input type=text name=val><br>
指數<input type=text name=power><br>
冪<input type=text name=result><br>
<input type=button name=button1 value=計算結果 onclick="document.form1.result.value=Math.pow (document.form1.val.value,document.form1.power.value)">
</form>

6.發現最小值和最大值

<form name=form1>
數字1<input type=text name=val1><br>
數字2<input type=text name=val2><br>
最小值<input type=text name=min><br>
最大值<input type=text name=max><br>
數字1<input type=button value=計算 onclick="document.form1.min.value=Math.min (document.form1.val1.value,document.form1.val2.value);document.form1.
max.value= Math.max(document.form1.val1.value,document.form1.val2.value)">
</form>

第十二章 使用表單

1.使用文本框

<form name=form1>
<input type=text value="information ,please"name=text1>
</form>
<script>
document.write("表單text1類型是: "+document.form1.text1.type+"<br>")
document.write("表單text1名稱是: "+document.form1.text1.name+"<br>")
document.write("表單text1值是: "+document.form1.text1.value+"<br>")
document.write("表單text1大小是: "+document.form1.text1.size+"<br>")
</script>

<form name=form1>
<input type=text name=text1 value=click here
onfocus=document.form1.text1.select()>
</form>

2.使用密碼框

<form name=form1>
<input type=password name=pw1 value=daylight>
</form>
<script>
document.write("表單pw1的類型:"+document.form1.pw1.type+"<br>")
document.write("表單pw1的名稱:"+document.form1.pw1.name+"<br>")
document.write("表單pw1的值:"+document.form1.pw1.value+"<br>")
document.write("表單pw1的大小:"+document.form1.pw1.size+"<br>")
</script>

3.使用隱藏字段

<form name=form1>
<input type=hidden name=hid1 value=piece of eight>
</form>
<script>
document.write("表單hid1的類型:"+document.form1.hid1.type+"<br>")
document.write("表單hid1的名稱:"+document.form1.hid1.name+"<br>")
document.write("表單hid1的值:"+document.form1.hid1.value+"<br>")
</script>

4.使用文本區域框

<form name=form1>
<textarea name=ta1>how many grains of sand are there in the sahara desert?</textarea>
</form>
<script>
document.write("表單ta1的類型:"+document.form1.ta1.type+"<br>")
document.write("表單ta1的名稱:"+document.form1.ta1.name+"<br>")
document.write("表單ta1的值:"+document.form1.ta1.value+"<br>")
document.write("表單ta1的橫向寬度:"+document.form1.ta1.cols+"<br>")
document.write("表單ta1的縱向寬度:"+document.form1.rows.value+"<br>")
</script>

6.使用重置按鈕

<form name=form1>
<input type=reset name=reset1 value="rest form">
</form>
<script>
document.write("表單reset1的類型:"+document.form1.reset1.type+"<br>")
document.write("表單reset1的名稱:"+document.form1.reset1.name+"<br>")
document.write("表單reset1的值:"+document.form1.reset1.value+"<br>")
</script>

7.使用提交按鈕

<form name=form1>
<input type=submit name=submit1 value="submit form">
</form>
<script>
document.write("表單submit1的類型:"+document.form1.submit1.type+"<br>")
document.write("表單submit1的名稱:"+document.form1.submit1.name+"<br>")
document.write("表單submit1的值:"+document.form1.submit1.value+"<br>")
</script>

8.使用復選按鈕

<form name=form1>
<input type=checkbox name=cb1 >computer savvy?
</form>
<script>
document.write("表單cb1的類型:"+document.form1.cb1.type+"<br>")
document.write("表單cb1是否被選擇?:"+document.form1.cb1.checked+"<br>")
document.write("表單cb1的名稱:"+document.form1.cb1.name+"<br>")
</script>

9.使用單選按鈕

<form name=form1>
<input type=radio name=radio1>male
<input type=radio name=radio1>female
</form>
<script>
document.write("第一個按鈕被選擇"+document.form1.radio1[0].checked+"<br>")
document.write("第二個按鈕被選擇"+document.form1.radio1[1].checked+"<br>")
document.write("按鈕的名稱"+ document.form1.radio1[0].name+"<br>")
document.write("按鈕的個數"+document.form1.radio1.length)
</script>

10.使用選擇列表

<form name=form1>
<select name=select1 size=4>
<option name=option1 value=lon>london,England</option>
<option name=option2 value=dub>Dublin,Ireland</option>
</select>
</form>
<script>
document.write("這個選擇列表的名稱"+document.form1.select1.name+"<br>")
document.write("這個選擇列表的長度"+document.form1.select1.length+"<br>")
document.write("這個選擇列表當前被選擇的索引號"+document.form1.select1.selectedIndex+"<br>")
document.write("這個選擇列表的尺寸"+document.form1.select1.size+"<br>")
</script>

11.驗證表單的有效性

<script>
function validate(){
if(document.form1.text1.value!='1'||'2'||'3'||'4'){
alert("請輸入1~4的整數")
}
}
</script>
<form name=form1>
請輸入1~4的整數:
<input type=text name=text1 size=4 onchange=validate()>
</form>

12.控制表單焦點

<form name=form1>
<input type=text name=text1 value=where is you focus?><br>
<input type=text name=text2 value=is there?><br>
<input type=text name=text3 value=or maybe here?><br>
<input type=button name=button1 value="text box #1" onclick=document.form1.text1.focus()><br>
<input type=button name=button2 value="text box #2" onclick=document.form1.text2.focus()><br>
<input type=button name=button3 value="text box #3" onclick=document.form1.text3.focus()><br>
</form>

第十三章 使用分欄

第十四章 使用navigator

1.使用navigator對象

<script>
document.write("navigator對象的屬性"+"<br>")
document.write("appcodename:"+navigator.appCodeName+"<br>")
document.write("appname::"+navigator.appName+"<br>")
document.write("appversion:"+navigator.appVersion+"<br>")
document.write("platform:"+navigator.platform+"<br>")
document.write("userAgent:"+navigator.userAgent+"<br>")
</script>
<script>
document.write("navigator對象的方法"+"<br>")
document.write("javaEnabled():"+navigator.javaEnabled())
</script>

2.檢查用戶的瀏覽器

<script>
if(navigator.appName.indexOf("Microsoft")!=-1){
document.write("用戶瀏覽器是微軟的IE瀏覽器"+"<br>")}
else if(navigator.appName.indexOf("Netscape")!=-1){
document.write("用戶瀏覽器是netscape的netscape瀏覽器"+"<br>")}
if(navigator.appVersion.indexOf("4.0")!=-1){
document.write("you are using a version 4.0compatible browser")
}
else{
document.write("this browser is not 4.0 compliant")}
</script>

3.檢測用戶的操作系統

<script>
if (navigator.platform.indexOf("win32")!=-1){
document.write("you are using a computer running windows 95 or highter")}
else{
document.write("this computer is not running windows 95 or higher")}
</script>

4.使用location對象

<script>
document.write("location對象的屬性"+"<br>")
document.write("hash"+location.hash+"<br>")
document.write("hostname"+location.hostname+"<br>")
document.write("host"+location.host+"<br>")
document.write("href"+location.href+"<br>")
document.write("port"+location.port+"<br>")
document.write("search"+location.search+"<br>")
</script>

重新加載網頁
<form name=form1>
<input type=button name=button1 value=重新加載本頁 onclick=location.reload>
</form>

5.使用cookie

<script>
finction makecookie(){
if(!document.cookie){
name=prompt("請輸入你的姓名");
document.cookie="name="+name+";";}
}
</script>

<body onload=makecookie()>
<script>
function makecookie(){
if(!document.cookie){
name=prompt("請輸入你的姓名")
document.cookie="name="+name+";";
namestart=document.cookie.indexOf("=");
nameend=document.cookieindexOf(";");
document.writeln("your name is:"+document.cookie.substring(namestart+1,nameend)+",br>")
}
}
</script>

[size=x-small][/size][align=left][/align]

Javascript常用函數及基本教程集合的用法參考