我思故我強

37 動態加載圖像

1: <script language=”javascript”>
2: myimage = new image;
3: myimage.src = “tellers1.jpg”;
4: </script>

38 簡單的圖像替換

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=http://www.webjx.com/”’ + imagelist[imagechoice] + ‘“>’);
9: </script>

40 函數實現的圖像替換

41 創建幻燈片

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=/webjx/”’ + urllist[imagechoice] + ‘“><img src=http://www.webjx.com/”’ + 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='/webjx/#' 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=/webjx/”#” 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='/webjx/#' 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 使用圖像按鈕

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.value = encrypt(myform.elements.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.liu21st.com/”,”mynewwindow”);
4: </script>

58 設置新窗口的大小

1: <script language=”javascript”>
2: window.open(“http://www.liu21st.com/”,”mynewwindow”,'height=300,width=300');
3: </script>

59 設置新窗口的位置

1: <script language=”javascript”>
2: window.open(“http://www.liu21st.com/”,”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.liu21st.com/' , 'mynewwindow', 'resizable=yes' );</script>

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

1: <a href='/webjx/#' 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='/webjx/#' 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 加載頁面到框架頁面

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 數據公用
可以在框架頁面定義數據項，使得該數據可以被多個框架中的頁面公用

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