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=/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 使用圖像按鈕
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="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.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 加載頁面到框架頁面
1: <frameset cols=”50%,*”>
2: <frame name=”frame1” src="3: <frame name=”frame2” src="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="6: <frame name=”frame2” src="7: </frameset>
這樣在frame1和frame2中都可以使用變量persistentvariable
70 框架代碼庫
根據以上的一些思路，我們可以使用一個隱藏的框架頁面來作為整個框架集的代碼庫
1: <frameset cols=”0,50%,*”>
2: <frame name=”codeframe” src="3: <frame name=”frame1” src="4: <frame name=”frame2” src="