javascript就这么回事
基础知识
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="
http://www.webjx.com/”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=/webjx/”#” onclick=”functionname()”>link text</a>
2: <a href="/webjx/”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 + “<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.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.liu21st.com/”;
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="http://www.webjx.com/”image1.jpg"” name=”myimage”>
2: <a href=/webjx/”# ” 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="/webjx/”myurl"” onmouseover=”document.myimage.src = rollimage.src;”
8: onmouseout=”document.myimage.src = defaultimage.src;”>
9: <img src="http://www.webjx.com/”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=http://www.webjx.com/”’ + 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=/webjx/”#” onmouseover=”document.myimage1.src = rollimage1[replacement].src;”
15: onmouseout=”document.myimage1.src = rollimage1[source].src;”>
16: <img src="http://www.webjx.com/”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="http://www.webjx.com/”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=/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="http://www.webjx.com/”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.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="http://www.webjx.com/”135a.html"”>
3: <frame name=”frame2” src="http://www.webjx.com/”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="http://www.webjx.com/”138a.html"”>
6: <frame name=”frame2” src="http://www.webjx.com/”138b.html"”>
7: </frameset>
这样在frame1和frame2中都可以使用变量persistentvariable
70 框架代码库
根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库
1: <frameset cols=”0,50%,*”>
2: <frame name=”codeframe” src="http://www.webjx.com/”140code.html"”>
3: <frame name=”frame1” src="http://www.webjx.com/”140a.html"”>
4: <frame name=”frame2” src="http://www.webjx.com/”140b.html"”>