Javascript常用方法

 1、charAt(index)

       var str = "asd";   aa = str.charAt(0);    ouput->a     index为开始值，返回值为获取的字串。

2、charCodeAt()

     var str = "学习";  aa = str.charCodeAt();  output-->为str的ASCII码。

 3、Noscript  如果浏览器不支持脚本就显示Noscript里的文本或内容

        <noscript>浏览器不支持脚本或禁用了</noscript>

4、window.external...
<INPUT onclick='window.external.ImportExportFavorites(true,"http://localhost");' type=button value=导入收藏夹>
<INPUT onclick='window.external.ImportExportFavorites(false,"http://localhost");' type=button value=导出收藏夹>
<INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type=button value=整理收藏夹>
<INPUT onclick="window.external.ShowBrowserUI('LanguageDialog', null)" type=button value=语言设置>
<INPUT onclick="window.external.AddFavorite('http://blog.csdn.net/Opossum/', '学习，讨论')" type=button value=加入收藏夹>
<INPUT onclick="window.external.addChannel('http://blog.csdn.net/Opossum/')" type=button value=加入到频道>
      相关：<INPUT onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://blog.csdn.net/Opossum/')" type=button value=设成主页>

4、history...
<INPUT onclick=history.go(1) type=button value=前进>
<INPUT onclick=history.go(-1) type=button value=后退>
<INPUT onclick=history.forward() type=button value=前进>
<INPUT onclick=history.back() type=button value=后退>

5、document.execCommand...
<INPUT onclick="document.execCommand('Cut')" type=button value=剪切>
<INPUT onclick="document.execCommand('Copy')" type=button value=拷贝>
<INPUT onclick="document.execCommand('Paste')" type=button value=粘贴>
<INPUT onclick="document.execCommand('Undo')" type=button value=撤消>
<INPUT onclick="document.execCommand('Delete')" type=button value=删除>
<INPUT onclick="document.execCommand('Bold')" type=button value=黑体>
<INPUT onclick="document.execCommand('Italic')" type=button value=斜体>
<INPUT onclick="document.execCommand('Underline')" type=button value=下划线>
<INPUT onclick="document.execCommand('stop')" type=button value=停止>
<INPUT onclick="document.execCommand('SaveAs')" type=button value=保存>
<INPUT onclick="document.execCommand('Saveas',false,'c://test.htm')" type=button value=另存为>
<INPUT onclick="document.execCommand('FontName',false,fn)" type=button value=字体>
<INPUT onclick="document.execCommand('FontSize',false,fs)" type=button value=字体大小>
<INPUT onclick="document.execCommand('refresh',false,0)" type=button value=刷新>

6、 window.location...
<INPUT onclick=window.location.reload() type=button value=刷新 name=refresh>
<INPUT onclick='window.location="view-source:" + window.location.href' type=button value=查看源文件 name=Button7>

7、WebBrowser.ExecWB...
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(2,1) type=button value=关闭所有><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(7,1) type=button value=打印预览><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(17,1) type=button value=全选><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新><br />
<input name=Button onClick=document.all.WebBrowser.ExecWB(45,1) type=button value=关闭>

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>是在页面内载入该控件，以便调用该控件的方法，这个classid在系统注册表里是唯一的，如果改了，就可能是别的控件或者是不存在的控件的id了，所以不可以更改

附WebBrowser.ExecWB里面CMDID的参数（自己试一试）：

OLECMDID_OPEN = 1,

OLECMDID_NEW = 2,

OLECMDID_SAVE = 3,

OLECMDID_SAVEAS = 4,

OLECMDID_SAVECOPYAS = 5,

OLECMDID_PRINT = 6,

OLECMDID_PRINTPREVIEW = 7,

OLECMDID_PAGESETUP = 8,

OLECMDID_SPELL = 9,

OLECMDID_PROPERTIES = 10,

OLECMDID_CUT = 11,

OLECMDID_COPY = 12,

OLECMDID_PASTE = 13,

OLECMDID_PASTESPECIAL = 14,

OLECMDID_UNDO = 15,

OLECMDID_REDO = 16,

OLECMDID_SELECTALL = 17,

OLECMDID_CLEARSELECTION = 18,

OLECMDID_ZOOM = 19,

OLECMDID_GETZOOMRANGE = 20,

OLECMDID_UPDATECOMMANDS = 21,

OLECMDID_REFRESH = 22,

OLECMDID_STOP = 23,

OLECMDID_HIDETOOLBARS = 24,

OLECMDID_SETPROGRESSMAX = 25,

OLECMDID_SETPROGRESSPOS = 26,

OLECMDID_SETPROGRESSTEXT = 27,

OLECMDID_SETTITLE = 28,

OLECMDID_SETDOWNLOADSTATE = 29,

OLECMDID_STOPDOWNLOAD = 30,

OLECMDID_ONTOOLBARACTIVATED = 31,

OLECMDID_FIND = 32,

OLECMDID_DELETE = 33,

OLECMDID_HTTPEQUIV = 34,

OLECMDID_HTTPEQUIV_DONE = 35,

OLECMDID_ENABLE_INTERACTION = 36,

OLECMDID_ONUNLOAD = 37,

OLECMDID_PROPERTYBAG2 = 38,

OLECMDID_PREREFRESH = 39,

OLECMDID_SHOWSCRIPTERROR = 40,

OLECMDID_SHOWMESSAGE = 41,

OLECMDID_SHOWFIND = 42,

OLECMDID_SHOWPAGESETUP = 43,

OLECMDID_SHOWPRINT = 44,

OLECMDID_CLOSE = 45,

OLECMDID_ALLOWUILESSSAVEAS = 46,

OLECMDID_DONTDOWNLOADCSS = 47,

OLECMDID_UPDATEPAGESTATUS = 48,

OLECMDID_PRINT2 = 49,

OLECMDID_PRINTPREVIEW2 = 50,

OLECMDID_SETPRINTTEMPLATE = 51,

OLECMDID_GETPRINTTEMPLATE = 52,

OLECMDID_PAGEACTIONBLOCKED = 55,

OLECMDID_PAGEACTIONUIQUERY = 56,

OLECMDID_FOCUSVIEWCONTROLS = 57,

OLECMDID_FOCUSVIEWCONTROLSQUERY = 58

OLECMDID_SHOWPAGEACTIONMENU = 59

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="/”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>

[color=Purple]45 动态复制文本框内容[/color]

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>

[color=Purple]50 验证Select项[/color]

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.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='#' 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>