Java Script Java Script 1 Java Script 2

  • Slides: 118
Download presentation
Java. Script

Java. Script

一、了解Java. Script 1. 了解Java. Script 2. Java. Script与Java 3. Java. Script与Java不同点 4. 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>

脚本写在哪里? 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

第一个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

在脚本中写注释 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

弹出对话框 三种对话框 <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.

关闭一个浏览器窗口 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

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.

错误处理 基本语句 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:

自定义构造函数 // 实际的用来显示 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 =

自定�� 象 <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);

使用自己的� 象 定义了对象构造器后,用 new 运算符创建对象实例。 var spaghetti = new pasta("wheat", 0. 2, "circle", true); // 将调用 to. String() 并显示 spaghetti 对象 的属性。 window. alert(spaghetti);

使用原型对象 例如,如果想要能够删除字符串的前后空格(与 VBScript 的 Trim 函数类似),就 可以给 String 原型对象创建自己的方法。 String. prototype. trim = function(){

使用原型对象 例如,如果想要能够删除字符串的前后空格(与 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

数� 和� 象 由于所有的数组也是对象,也支持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

浏览器对象(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) 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("确定离开么? "))

窗口对象(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

位置对象(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>

历史对象(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

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>

添加节点 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.

添加节点 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()方法创建一个新的文本节点(名为

添加节点 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.

删除节点 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"

低级翻转器 <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.

高级翻转器 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.

优点:一次性将图片下载到客户段 高级翻转器 的内存当中,不会出现延时。 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]; //获取链接对象

链接式翻转器 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;

链接式翻转器 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.

三状态翻转器 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%,

一个简单的框架 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 =

迫使站点显示在框架中 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.

迫使站点显示在框架中 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("/")

迫使站点显示在框架中 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

创建和装载动态框架 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.

在框架间共享函数 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.

在框架间共享函数 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

用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 =

选择并转移导航菜单 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.

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()

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事件

鼠标事件处理 v v v v Onmousedown事件 Onmouseup事件 Onmousemove事件 Onmouseover事件 Onmouseout事件 Ondblclick事件 Onlick事件

Ondblclick事件 v window. onload = init. Images; v function init. Images() { for (var

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.

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 =

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 }