JavaScript就这么回事 (JS基础知识整理)

来源：互联网发布：mac os 10.6 软件编辑：程序博客网时间：2024/05/14 10:01

1 创建脚本块引用内容程序代码<mce:script language=”JavaScript”></mce:script>2 隐藏脚本代码引用内容程序代码<mce:script language=”JavaScript”></mce:script>在不支持JavaScript的浏览器中将不执行相关代码3 浏览器不支持的时候显示引用内容程序代码<noscript>Hello to the non-JavaScript browser.</noscript>4 链接外部脚本文件引用内容程序代码<mce:script language=”JavaScript” src="”/”filename.js””" mce_src="”/”filename.js””"></mce:script>5 注释脚本引用内容程序代码// This is a commentdocument.write(“Hello”); // This is a comment/*All of thisis a comment*/6 输出到浏览器引用内容程序代码document.write(“<strong>Hello</strong>”);7 定义变量引用内容程序代码var myVariable = “some value”;8 字符串相加引用内容程序代码var myString = “String1” + “String2”;9 字符串搜索引用内容程序代码<mce:script language=”JavaScript”></mce:script>10 字符串替换引用内容程序代码thisVar.replace(“Monday”,”Friday”);11 格式化字串引用内容程序代码<mce:script language=”JavaScript”></mce:script>12 创建数组引用内容程序代码<mce:script language=”JavaScript”></mce:script>13 数组排序引用内容程序代码<mce:script language=”JavaScript”></mce:script>14 分割字符串引用内容程序代码<mce:script language=”JavaScript”></mce:script>15 弹出警告信息引用内容程序代码<mce:script language=”JavaScript”></mce:script>16 弹出确认框引用内容程序代码<mce:script language=”JavaScript”></mce:script>17 自定义函数引用内容程序代码<mce:script language=”JavaScript”></mce:script>18 调用JS函数引用内容程序代码<a href="”#”" mce_href="”#”" onClick=”functionName()”>Link text</a><a href="”/”javascript:functionName”()”" mce_href="”/”javascript:functionName”()”">Link text</a>19 在页面加载完成后执行函数引用内容程序代码<body onLoad=”functionName();”>Body of the page</body>20 条件判断引用内容程序代码<mce:script type="text/javascript"></mce:script>21 指定次数循环引用内容程序代码<mce:script type="text/javascript"></mce:script>22 设定将来执行引用内容程序代码<mce:script type="text/javascript"></mce:script>23 定时执行函数引用内容程序代码<mce:script type="text/javascript"></mce:script>24 取消定时执行引用内容程序代码<mce:script type="text/javascript"></mce:script>25 在页面卸载时候执行函数引用内容程序代码<body onUnload=”functionName();”>Body of the page</body>JavaScript就这么回事2：浏览器输出26 访问document对象引用内容程序代码<mce:script language=”JavaScript”></mce:script>27 动态输出HTML引用内容程序代码<mce:script language=”JavaScript”></mce:script>28 输出换行引用内容程序代码document.writeln(“<strong>a</strong>”);document.writeln(“b”);29 输出日期引用内容程序代码<mce:script language=”JavaScript”></mce:script>30 指定日期的时区引用内容程序代码<mce:script language=”JavaScript”></mce:script>31 设置日期输出格式引用内容程序代码<mce:script language=”JavaScript”></mce:script>32 读取URL参数引用内容程序代码<mce:script language=”JavaScript”></mce:script>你还以为HTML是无状态的么？33 打开一个新的document对象引用内容程序代码<mce:script language=”JavaScript”></mce:script>34 页面跳转引用内容程序代码<mce:script language=”JavaScript”></mce:script>35 添加网页加载进度窗口引用内容程序代码<html><head><mce:script language=’javaScript’></mce:script><title>The Main Page</title></head><body onLoad=’placeHolder.close()’><p>This is the main page</p></body></html>JavaScript就这么回事3：图像36 读取图像属性引用内容程序代码<img src="”/”image1.jpg””" mce_src="”/”image1.jpg””" name=”myImage”><a href="”#" mce_href="”" ” onClick=”window.alert(document.myImage.width)”>Width</a>37 动态加载图像引用内容程序代码<mce:script language=”JavaScript”></mce:script>38 简单的图像替换引用内容程序代码<mce:script language=”JavaScript”></mce:script><a href="”/”myUrl””" mce_href="”/”myUrl””" onMouseOver=”document.myImage.src = rollImage.src;”onMouseOut=”document.myImage.src = defaultImage.src;”><img src="”/”image1.jpg””" mce_src="”/”image1.jpg””" name=”myImage” width=100 height=100 border=0>39 随机显示图像引用内容程序代码<mce:script language=”JavaScript”></mce:script>40 函数实现的图像替换引用内容程序代码<mce:script language=”JavaScript”></mce:script><a href="”#”" mce_href="”#”" onMouseOver=”document.myImage1.src = rollImage1[replacement].src;”onMouseOut=”document.myImage1.src = rollImage1[source].src;”><img src="”/”image1.jpg””" mce_src="”/”image1.jpg””" width=100 name=”myImage1” border=0></a>41 创建幻灯片引用内容程序代码<mce:script language=”JavaScript”></mce:script></head><body onLoad=”slideShow(0)”><img src="”/”image1.jpg””" mce_src="”/”image1.jpg””" width=100 name=”slideShow”>42 随机广告图片引用内容程序代码<mce:script language=”JavaScript”></mce:script>JavaScript就这么回事4：表单43 表单构成引用内容程序代码<form method=”post” action=”target.html” name=”thisForm”><input type=”text” name=”myText”><select name=”mySelect”><option value=”1”>First Choice</option><option value=”2”>Second Choice</option></select><br><input type=”submit” value=”Submit Me”></form>44 访问表单中的文本框内容引用内容程序代码<form name=”myForm”><input type=”text” name=”myText”></form><a href="’#’" mce_href="’#’" onClick=’window.alert(document.myForm.myText.value);’>Check Text Field</a>45 动态复制文本框内容引用内容程序代码<form name=”myForm”>Enter some Text: <input type=”text” name=”myText”><br>Copy Text: <input type=”text” name=”copyText”></form><a href="”#”" mce_href="”#”" onClick=”document.myForm.copyText.value =document.myForm.myText.value;”>Copy Text Field</a>46 侦测文本框的变化引用内容程序代码<form name=”myForm”>Enter some Text: <input type=”text” name=”myText” onChange=”alert(this.value);”></form>47 访问选中的Select引用内容程序代码<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option><option value=”Third Choice”>3</option></select></form><a href="’#’" mce_href="’#’" onClick=’alert(document.myForm.mySelect.value);’>Check Selection List</a>48 动态增加Select项引用内容程序代码<form name=”myForm”><select name=”mySelect”><option value=”First Choice”>1</option><option value=”Second Choice”>2</option></select></form><mce:script language=”JavaScript”></mce:script>49 验证表单字段引用内容程序代码<mce:script language=”JavaScript”></mce:script><form name=”myForm” action=”target.html”>Text Field: <input type=”text” name=”myField”onBlur=”checkField(this)”><br><input type=”submit”></form>50 验证Select项引用内容程序代码function checkList(selection) {if (selection.length == 0) {window.alert(“You must make a selection from the list.”);return false;}return true;}51 动态改变表单的action引用内容程序代码<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br>Password: <input type=”password” name=”password”><br><input type=”button” value=”Login” onClick=”this.form.submit();”><input type=”button” value=”Register” onClick=”this.form.action = ‘register.html’; this.form.submit();”><input type=”button” value=”Retrieve Password” onClick=”this.form.action = ‘password.html’; this.form.submit();”></form>52 使用图像按钮引用内容程序代码<form name=”myForm” action=”login.html”>Username: <input type=”text” name=”username”><br>Password: <input type=”password”name=”password”><br><input type=”image” src="”/”login.gif””" mce_src="”/”login.gif””" value=”Login”></form>53 表单数据的加密引用内容程序代码<SCRIPT LANGUAGE=’JavaScript’><!–function encrypt(item) {var newItem = ”;for (i=0; i < item.length; i++) {newItem += item.charCodeAt(i) + ‘.’;}return newItem;}function encryptForm(myForm) {for (i=0; i < myForm.elements.length; i++) {myForm.elements[i].value = encrypt(myForm.elements[i].value);}}//–></SCRIPT><form name=’myForm’ onSubmit=’encryptForm(this); window.alert(this.myField.value);’>Enter Some Text: <input type=text name=myField><input type=submit></form>JavaScript就这么回事5：窗口和框架54 改变浏览器状态栏文字提示引用内容程序代码<mce:script language=”JavaScript”></mce:script>55 弹出确认提示框引用内容程序代码<mce:script language=”JavaScript”></mce:script>56 提示输入引用内容程序代码<mce:script language=”JavaScript”></mce:script>57 打开一个新窗口引用内容//打开一个名称为myNewWindow的浏览器新窗口程序代码<mce:script language=”JavaScript”></mce:script>58 设置新窗口的大小引用内容程序代码<mce:script language=”JavaScript”></mce:script>59 设置新窗口的位置引用内容程序代码<mce:script language=”JavaScript”></mce:script>60 是否显示工具栏和滚动栏引用内容程序代码<mce:script language=”JavaScript”></mce:script>61 是否可以缩放新窗口的大小引用内容程序代码<mce:script language=”JavaScript”></mce:script>62 加载一个新的文档到当前窗口引用内容程序代码<a href="’#’" mce_href="’#’" onClick=’document.location = ’125a.html’;’ >Open New Document</a>63 设置页面的滚动位置引用内容程序代码<mce:script language=”JavaScript”></mce:script>64 在IE中打开全屏窗口引用内容程序代码<a href="’#’" mce_href="’#’" onClick=”window.open(‘http://www.devdao.com/’,'newWindow’,'fullScreen=yes’);”>Open a full-screen window</a>65 新窗口和父窗口的操作引用内容程序代码<mce:script language=”JavaScript”></mce:script>在新窗口中关闭父窗口程序代码window.opener.close()66 往新窗口中写内容引用内容程序代码<mce:script language=”JavaScript”></mce:script>67 加载页面到框架页面引用内容程序代码<frameset cols=”50%,*”><frame name=”frame1” src="”/”135a.html””" mce_src="”/”135a.html””"><frame name=”frame2” src="”/”about:blank””" mce_src="”/”about:blank””"></frameset>在frame1中加载frame2中的页面parent.frame2.document.location = “135b.html”;68 在框架页面之间共享脚本引用内容如果在frame1中html文件中有个脚本程序代码function doAlert() {window.alert(“Frame 1 is loaded”);}那么在frame2中可以如此调用该方法程序代码<body onLoad=”parent.frame1.doAlert();”>This is frame 2.</body>69 数据公用引用内容可以在框架页面定义数据项，使得该数据可以被多个框架中的页面公用程序代码<mce:script language=”JavaScript”></mce:script><frameset cols=”50%,*”><frame name=”frame1” src="”/”138a.html””" mce_src="”/”138a.html””"><frame name=”frame2” src="”/”138b.html””" mce_src="”/”138b.html””"></frameset>这样在frame1和frame2中都可以使用变量persistentVariable70 框架代码库引用内容根据以上的一些思路，我们可以使用一个隐藏的框架页面来作为整个框架集的代码库程序代码<frameset cols=”0,50%,*”><frame name=”codeFrame” src="”/”140code.html””" mce_src="”/”140code.html””"><frame name=”frame1” src="”/”140a.html””" mce_src="”/”140a.html””"><frame name=”frame2” src="”/”140b.html””" mce_src="”/”140b.html””"></frameset>