Java Script Java Script 1 Java Script 2
![链接式翻转器 v v v v window. onload=setup; function setup(){ var thislinks= document. links[0]; //获取链接对象](https://slidetodoc.com/presentation_image_h2/6feef3d09b2876bc4aa699c5d4afbb47/image-93.jpg "链接式翻转器 v v v v window. onload=setup; function setup(){ var thislinks= document. links[0]; //获取链接对象")
- Slides: 118
Java. Script
一、了解Java. Script 1. 了解Java. Script 2. Java. Script与Java 3. Java. Script与Java不同点 4. Java. Script 作流程 5. Java. Script可以做什么 6. Java. Script不可以做什么
脚本写在哪里？ src=… HTML文档 <HTML> <HEAD> ……. . . </HEAD> <BOYD> ……. . . </BODY> </HTML> <SCRPT > function HELLO() { …………. } </SCRIPT>
第一个Java. Script程序 v <html> v <body> v <script type="text/javascript"> v document. write("Hello World!"); v </script> v </body> v </html>
在脚本中写注释 v v 两种注释示例 /* …*/ 与 //… /*This is an example of a long Java. Script comment. Note the characters at the beginning ending of the comment. */ Function Emg(){ // This is write. Message. …… }
弹出对话框 三种对话框 <script> function Dialog. Box() { v //alert(‘welcome!’); 一个按钮 // confirm(‘can you speak english? ’); 两个按钮 prompt (“how old are you? ”, ” 23”); 有默认回答，两个按钮 } </script>
关闭一个浏览器窗口 v 两种关闭方式 标签关闭与按钮关闭 <a href="javascript: self. close()">关闭窗口</a> <script > function NVGClose() { window. close(); } </script> <input type="button" value="关闭" onclick=“NVGClose()">
Java. Script函数 v 在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一 个或几个。那么怎样才能确定参数变量的个数呢？在Java. Script中可通 过arguments. Length来检查参数的个数。 Function function_Name(exp 1, exp 2, exp 3, exp 4){ Number =function _Name. arguments. length; if (Number>1） document. wrile(exp 2); if (Number>2) document. write(exp 3); if(Number>3) document. write(exp 4); }
错误处理 基本语句 try/throw/catch try{ 语句块… throw new Error(“…”); } catch(err. Msg) { alert(err. Msg. message); } v eg: function Age() { try { var m="age"; var n=20; document. write(parse. Int(m)+n); //抛出语句 throw new Error("not a valid number"); } catch (err. Msg) { alert(err. Msg. message); } }
自定义构造函数 // 实际的用来显示 past 对象内容的函数。 function pasta. To. String() { // 返回对象的属性。 return "Grain: " + this. grain + "n" + "Width: " + this. width + "n" + "Shape: " + this. shape + "n" + "Egg? : " + Boolean(this. has. Egg); }
自定�� 象 <script language="javascript"> function Student(name){ this. name = name; this. get. Name = get. Name; } function get. Name(){ return this. name; } function Button 1_onclick() { var s = new Student("lijie", 20, "asdad", "13971212"); alert(s. get. Name()); alert(s. name); } </script>
使用自己的� 象 定义了对象构造器后，用 new 运算符创建对象实例。 var spaghetti = new pasta("wheat", 0. 2, "circle", true); // 将调用 to. String() 并显示 spaghetti 对象 的属性。 window. alert(spaghetti);
使用原型对象 例如，如果想要能够删除字符串的前后空格（与 VBScript 的 Trim 函数类似），就 可以给 String 原型对象创建自己的方法。 String. prototype. trim = function(){ // 用正则表达式将前后空格用空字符串替代。 return this. replace(/(^s*)|(s*$)/g, ""); } var s = " leading and trailing spaces "; // 显示 " leading and trailing spaces (35)" window. alert(s + " (" + s. length + ")"); // 删除前后空格 s = s. trim(); // 显示"leading and trailing spaces (27)" window. alert(s + " (" + s. length + ")");
数� 和� 象 由于所有的数组也是对象，也支持expando属性。请注意，虽然如此，添加 的属性并不以任何方式与 length 属性相交互。例如： // 三个元素的数组 var my. Array = new Array(3); my. Array[0] = "Hello"; my. Array[1] = 42; my. Array[2] = new Date(2000, 1, 1); window. alert(my. Array. length); // 显示数组的长度 3 my. Array. expando = "JScript!"; // 添加某些 expando 属性 my. Array["another Expando"] = "Windows"; // 仍然显示 3，因为两个 expando 属性，并不影响长度。 window. alert(my. Array. length);
浏览器对象(Navigator) v v v v Eg: <Script> var len = navigator. plugins. length; with (document) { write ("你的浏览器共支持" + len + "种外挂插件：<BR>"); write ("<TABLE BORDER=0>") write ("<CAPTION>外挂插件清单</CAPTION>") write ("<TR><TH>名称<TH>描述<TH>文件名") for (var i=0; i<len; i++) write("<TR><TD>" + i + "<TD>" + navigator. plugins[i]. name + "<TD>" + navigator. plugins[i]. description + "<TD>" + navigator. plugins[i]. filename); } </Script>
屏幕对象(screen) v v v v Eg： <Script> if ( screen. width < 800 || screen. color. Depth < 8 ) { var msg = "本网站最佳浏览模式为 800 * 600 * 256"; alert(msg); } </Script>
窗口对象(Windows) v v Eg： <Script> function cfm() { v v v if (confirm("确定离开么? ")) //关闭当前窗口, 下面两个方法都可以 //window. close(); self. close(); else return false v v v } v v </Script>
位置对象(Location) v Eg: <input type="button" value="连接到 163" on. Click="location. href='http: //www. 163. com'"> v <input type="button" value="刷新页面" onclick="location. reload()" /> v <input type="button" value="替换页面" onclick="location. replace('2. html')" /> v
历史对象(History) v v v Eg: <a href="history. go(-2)">后退两页</a> <a href="history. back()">后退一页</a> <a href="history. forward()">前进一页</a> <a href="history. go(2)">前进两页</a>
DOM结构图 html v v v v <html> <head> <title>My page</title> </head> <body> </body> <p>This is text on my page</p> </html> head body title p text “My page” “This is text on my page”
添加节点 v v v v Eg： <html> <head> <script src="E: script 01. js"> </script> </head> <body> <form> <p><textarea id="text. Area" rows="5"cols="30"></textarea></p> <input type="submit" value="Add some text to the page"/> </form> </body> </html>
添加节点 v v v window. onload=init. All; function init. All(){ document. get. Elements. By. Tag. Name("form")[0]. onsubmit=function(){return add. Node(); } } function add. Node(){ var in. Text =document. get. Element. By. Id("text. Area"). value; var new. Text=document. create. Text. Node(in. Text) ; var new. Graf=document. create. Element(“p”); new. Graf. append. Child(new. Text); var doc. Body=document. get. Elements. By. Tag. Name("body")[0]; doc. Body. append. Child(new. Graf); return false; v v }
添加节点 v v var new. Text=document. create. Text. Node(in. Text) ; //使用create. Text. Node()方法创建一个新的文本节点（名为 new. Text），它将包含在text. Area中找到的文本。 v var new. Graf=document. create. Element(“p”); //create. Element()方法使用创建一个新的元素节点，()里的内 容可以是任何HTML容器。 v new. Graf. size=“ 15”//给属性 v
删除节点 v v v var all. Grafs=document. get. Elements. By. Tag. Name("p"); if(all. Grafs. length>1) { var last. Graf=all. Graffs. item(all. Grafs. length-1) var doc. Body=document. get. Elements. By. Tag. Name("body")[0] doc. Body. remove. Child(last. Graf) }
低级翻转器 <a href="" onmouseover="document. arrow. src='arrow_on. jpg'" onmouseout="document. arrow. src='arrow_off. jpg'"><img src="arrow_off. jpg" border="0" name="arrow" id="arrow" alt="arrow"/></a> v v 缺点：察觉到延迟，需要下载 onmouseover="document. arrow. src='arrow_on. jpg'" onmouseout="document. arrow. src='arrow_off. jpg'" 释： 当鼠标移动到图片上或离开，<img src=>重定向到另一张图片
高级翻转器 v v v v window. onload=setup; function setup() { var this. Image= document. images[0]; //获取图像 this. Image. out. Image=new Image(); //定义图像的属性为一图像 this. Image. out. Image. src=this. Image. src; //定义属性指向的地址 this. Image. onmouseout=rollout; //调用事件 this. Image. over. Image=new Image(); this. Image. over. Image. src="arrow_on. jpg"; this. Image. onmouseover=rollover; v v }
优点：一次性将图片下载到客户段 高级翻转器 的内存当中，不会出现延时。 v v v v function rollout() { this. src=this. out. Image. src; } function rollover() { this. src=this. over. Image. src; }
链接式翻转器 v v v v window. onload=setup; function setup(){ var thislinks= document. links[0]; //获取链接对象 thislinks. this. Image=document. images[0]; //定义属性 thislinks. out. Image=new Image(); thislinks. out. Image. src=this. Image. src; thislinks. onmouseout=rollout; thislinks. over. Image=new Image(); thislinks. over. Image. src="arrow_on. jpg"; thislinks. onmouseover=rollover; v v }
链接式翻转器 v v v v function rollout() { this. Image. src=this. out. Image. src; } function rollover() { this. Image. src=this. over. Image. src; }
三状态翻转器 v v v v 三状态翻转器就是在高级翻转器中加入一条点击的过程中出 现的图片； this. Image. onclick. Image=new Image(); this. Image. onclick. Image. src="图片地址"; this. Image. onclick=roll. Click; function roll. Click() { this. src=this. onclick. Image. src; }
一个简单的框架 v v v v scrolling：是否显示滚动条 <html> noresize: 是否允许调整框架 <head> 大小 </head> <frameset cols="30%, 70%" > <frame src="1. html" name="left" id="left" scrolling="yes" noresize/> <frame src="2. html" name="content" id="content" /> </frameset> </html>
迫使站点显示在框架中 v v var frameset. Page = "frameset 3. html"; var curr. Page = just. The. Filename(self. location. pathname); v if (top. location == self. location && frameset. Page != curr. Page) { self. location. replace(frameset. Page + "? " + curr. Page); } v 检查top. location是否与self. location相同 v v
迫使站点显示在框架中 v window. onload = chg. Frame; v function chg. Frame() { if (top. location == self. location && document. location. search) { var link. URL = just. The. Filename(document. location. search); var content. Win = document. get. Element. By. Id("content"). content. Window; var curr. URL = just. The. Filename(content. Win. location. pathname); v v if (curr. URL != link. URL) { content. Win. location. replace(link. URL); } v v v }
迫使站点显示在框架中 v v function just. The. Filename(this. File) { if (this. File. index. Of("/") > -1) { this. File = this. File. substring(this. File. last. Index. Of("/")+1); } v if (this. File. index. Of("? ") == 0) { this. File = this. File. substring(1); } v return this. File; v v v }
创建和装载动态框架 v window. onload = init. Links; v function init. Links() { for (var i=0; i<document. links. length; i++) { document. links[i]. onclick = write. Content; document. links[i]. this. Page = i+1; } } v v v v function write. Content() { var new. Text = "<h 1>You are now looking at page " + this. Page + ". </h 1>"; v var content. Win = parent. document. get. Element. By. Id("content"). content. Window; content. Win. document. body. inner. HTML = new. Text; return false; v v }
在框架间共享函数 v var banner. Array = new Array("images/red. Banner. gif", "images/green. Banner. gif", "images/blue. Banner. gif"); v window. onload = init. Frames; v function init. Frames() { var left. Win = document. get. Element. By. Id("left"). content. Window. document; v for (var i=0; i<left. Win. links. length; i++) { left. Win. links[i]. target = "content"; left. Win. links[i]. onclick = reset. Banner; } v v v set. Banner(); v v }
在框架间共享函数 v v v function set. Banner() { var content. Win = document. get. Element. By. Id("content"). content. Window. document; var random. Num = Math. floor(Math. random() * banner. Array. length); v v v content. Win. get. Element. By. Id("ad. Banner"). src = banner. Array[random. Num]; } function reset. Banner() { set. Timeout("set. Banner()", 1000); }
用javascript装载iframe v window. onload = initi. Frame; v function initi. Frame() { for (var i=0; i<document. links. length; i++) { document. links[i]. target = "content"; document. links[i]. onclick = seti. Frame; } } v v v v v function seti. Frame() { document. get. Element. By. Id("content"). content. Window. document. location. href = this. href; return false; }
选择并转移导航菜单 v v v v v window. onload = init. Form; window. onunload = function() {}; function init. Form() { document. get. Element. By. Id("new. Location"). selected. Index = 0; document. get. Element. By. Id("new. Location"). onchange = jump. Page; } function jump. Page() { var new. Loc = document. get. Element. By. Id("new. Location"); var new. Page = new. Loc. options[new. Loc. selected. Index]. value; if (new. Page != "") { window. location = new. Page; } v v }
Onresize事件 v window. onresize = resize. Fix; v if (document. layers) { var orig. Width = window. inner. Width; var orig. Height = window. inner. Height; } v v v function resize. Fix() { if (document. layers) { if (window. inner. Width != orig. Width || window. inner. Height != orig. Height) { window. location. reload(); } } } 重置窗体大小事件
Onfocus事件 v Onfocus事件与onblur正好相反，当一个页面成为最前面的活动窗口时， 就会触发onfocus事件。 v window. onfocus = move. Back; v function move. Back() { self. blur(); } v v
鼠标事件处理 v v v v Onmousedown事件 Onmouseup事件 Onmousemove事件 Onmouseover事件 Onmouseout事件 Ondblclick事件 Onlick事件
Ondblclick事件 v window. onload = init. Images; v function init. Images() { for (var i=0; i<document. images. length; i++) { document. images[i]. ondblclick = new. Window; } } v v v v v function new. Window() { var img. Name = "images/" + this. id + ". jpg" var img. Window = window. open(img. Name, "img. Win", "width=320, height=240, scrollbars=no") } 双击事件
Onblur事件 v window. onload = init. Form; v function init. Form() { var all. Tags = document. get. Elements. By. Tag. Name("*"); v for (var i=0; i<all. Tags. length; i++) { if (all. Tags[i]. class. Name. index. Of("reqd") > -1) { all. Tags[i]. onblur = field. Check; } } v v v } v function field. Check() { if (this. value == "") { this. style. background. Color = "#FFFF 99"; this. focus(); } else { this. style. background. Color = "#FFFFFF"; } } v v v v
Onkeydown事件 v v v v document. onkeydown = key. Hit; var this. Pic = 0; function key. Hit(evt) { var my. Pix = new Array("images/callisto. jpg", "images/europa. jpg", "images/io. jpg", "images/ganymede. jpg"); var img. Ct = my. Pix. length-1; var lt. Arrow = 37; var rt. Arrow = 39; var this. Key = (evt) ? evt. which : window. event. key. Code; v v if (this. Key == lt. Arrow) { chg. Slide(-1); } else if (this. Key == rt. Arrow) { chg. Slide(1); } return false; v v v v function chg. Slide(direction) { this. Pic = this. Pic + direction; if (this. Pic > img. Ct) { this. Pic = 0; } if (this. Pic < 0) { this. Pic = img. Ct; } document. get. Element. By. Id("my. Picture"). src = my. Pix[this. Pic]; } v v v }