Download presentation
Presentation is loading. Please wait.
1
JavaScript 语言3 学习网站：心蕊设计http://xin126.cn/
第 4 章 JavaScript 语言3 学习网站：心蕊设计
2
数组（Array）对象 数组是一个有序的值的集合，数组中的元素通过数组名和数组下标进行访问
数组的创建（使用关键词 new 来创建数组对象 ） var arr=new Array(); 创建数组的同时规定数组大小: var arr=new Array(10);
3
数组（Array）对象 数组赋值 数组元素的访问 document.write(“我喜欢的车是”+mycars[2]);
var mycars=new Array(3) mycars[0]=“宝马" mycars[1]=“奥迪" mycars[2]=“奔驰“ var mycars=new Array("宝马","奥迪","奔驰") 数组元素的访问 document.write(“我喜欢的车是”+mycars[2]);
![数组（Array）对象 数组赋值 数组元素的访问 document.write( 我喜欢的车是 +mycars[2]);](http://slidesplayer.com/slide/14805265/90/images/3/%E6%95%B0%E7%BB%84%EF%BC%88Array%EF%BC%89%E5%AF%B9%E8%B1%A1+%E6%95%B0%E7%BB%84%E8%B5%8B%E5%80%BC+%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E8%AE%BF%E9%97%AE+document.write%28+%E6%88%91%E5%96%9C%E6%AC%A2%E7%9A%84%E8%BD%A6%E6%98%AF+%2Bmycars%5B2%5D%29%3B.jpg "var mycars=new Array(3) mycars[0]= 宝马 mycars[1]= 奥迪 mycars[2]= 奔驰 var mycars=new Array( 宝马 , 奥迪 , 奔驰 ) 数组元素的访问. document.write( 我喜欢的车是 +mycars[2]);")
4
动态改变单元格内容 <a href="#" onClick="changeContent(0)">scene 1</a> <a href="#" onClick="changeContent(1)">scene 2</a> <a href="#" onmouseover="changeContent(2)">scene 3</a> <td id="content" ><img src='images/img1.jpg'><br>squirrel......</td> var starAry= new Array() starAry[0] ="<img src='images/img1.jpg'><br>squirrel......" starAry[1] ="<img src='images/img2.jpg'><br>road......" starAry[2] ="<img src='images/img3.jpg'><br>bicycle......" function changeContent(i){ content.innerHTML = starAry[i] //content是单元格td的id 例4-4-8.html html
5
数组对象的属性 length(能够求出数组的长度) var names= new Array("烟台","北京","济南");
<script language="JavaScript"> <!-- var names= new Array("烟台","北京","济南"); document.write(names.length); //--> </script>
6
数组的常用方法1 concat() 将两个数组合并为一个数组。
var names1=new Array("北京市", "上海市", "广州市"); var names2=new Array("天津市", "重庆市"); document.write("<b>第一个数组的元素为："+ names1 + "<br>"); document.write("<b>第二个数组的元素为："+ names2 + "<br>"); document.write("<b><br>合并后的数组的数组元素为：<br>"); var names3 = names1.concat(names2); document.write(names3); 例4-4-9.html
7
数组的常用方法2 join() 使用指定的分隔符将数组元素拼接成一个字符串返回。
document.write("合并后的数组调用join()方法的结果为：<br>"+names3.join("-")); 例4-4-9.html
8
数组的常用方法3 push()： 在数组末尾添加一个或多个元素。 var names=new Array("连城诀","天龙八部");
document.write("数组的原始值：" +names); names.push("射雕英雄传","白马啸西风"); document.write(“调用push方法后数组的值：" +names);
9
数组的常用方法4 pop()：从数组末尾删除一个元素。 names.pop();
document.write("调用一次pop方法后数组的值："+names); document.write("再调用一次pop方法后数组的值："+names);
10
通用浏览器对象 浏览器是用于显示 HTML 文档内容的应用程序
IE 浏览器对象 Netscape 浏览器对象
11
文档对象模型 window frame self top parent document history location link
form anchor text select radio button reset textarea checkbox option submit 最低公用标准的文档对象层次
12
Window 对象 Window 对象表示浏览器的窗口，可用于检索有关窗口状态的信息。 属性 名称 说明 document event
表示浏览器窗口中的HTML文档。 event 表示事件的状态，例如发生事件的元素、键盘上键的状态、鼠标的位置和鼠标按钮的状态。 history 包含有关客户访问过的URL的信息。 location 包含有关当前URL的信息。 name 设置或检索窗口或框架的名称。 screen 包含有关客户的屏幕和显示性能的信息。 status 设置或检索窗口底部的状态栏中的消息。
13
Window 对象 方法(1) 名称 说明 alert blur close focus confirm navigate promt
显示包含应用程序定义消息的对话框。 blur 使对象失去焦点并激发onblur事件。 close 关闭当前浏览器窗口或HTML应用程序。 focus 使控件接收焦点。 confirm 弹出一个消息框。 navigate 将指定的URL加载到当前窗口。 promt 弹出一个提示框。
14
Window 对象 方法(2) 名称 说明 setTimeout（expression,time） clearTimeout(timer)
setIntervel (expression,time) 设定一个时间间隔，可以定时反复的自动执行expression描述的代码，使用time设置时间，单位是毫秒。 open(“URL”, “windowName”[, “windowFeatures”][,replaceFlag]) 打开新的窗口并加载给定URL指定的文档；如果没有提供URL，则打开一个空文档。
15
prompt()方法 弹出一个输入框 <Script Language="JavaScript">
name=prompt("请输入您的大名:"); document.write("欢迎"+name+"光临本站"); document.close(); </Script> close是Document 对象的方法 作用：关闭输出流并强制显示发送的数据。
16
Document 对象 方法 名称 说明 clear close open write writeln 清除当前文档。
关闭输出流并强制显示发送的数据。 open 打开一个文档以收集write方法或writeln方法的输出。 write 向指定窗口中的文档写入一个或多个HTML语句。 writeln 向指定窗口中的文档写入一个或多个HTML语句，写完后回车。
17
Document 对象 Document 对象表示给定浏览器窗口中的 HTML 文档，用于检索有关该文档的信息。
<HTML><HEAD> <TITLE>Document对象</TITLE> <script language=“JavaScript”> alert(document.title); </script> </HEAD></HTML> 例02.htm
18
状态栏和标题栏动态显示 var msg,i=0;
msg = new Array("------Welcome to","------Javascript","------world !","Welcome to Javascript world !"); function changeTitle(){ window.status=msg[i]; //状态栏显示 window.document.title=msg[i]; //标题栏显示 i++; if (i==msg.length) i= 0; } window.setTimeout("changeTitle()",0); window.setInterval("changeTitle()",1000); 例： html
19
write和writeln write与writeln的区别在于writeln在输出后自动添加一个换行，但在浏览器中往往被忽略，因此一般情况下用两种方法输出的效果在页面上是没有区别的(除非是输出到<pre>元素内)。 <pre> <script language="JavaScript"> document.write("你好"); document.writeln("欢迎"); document.write("光临"); </script> </pre>
20
Location 对象 方法 名称 说明 assign(“URL”) reload replace(“URL”) 加载新的HTML文档。
重新加载当前页。 replace(“URL”) 通过加载指定URL处的文档来替换当前文档。
21
assign()方法应用实例 例4-4-17.html function link_website(){
<SCRIPT language=JavaScript> function link_website(){ location.assign(fm.tt.value)} </SCRIPT> <form name=fm> <input type=“text” size=“30” name=“tt”> <input type=“button” value=”单击以加载自己喜爱的网站 “ name=bt onclick=“link_website()” > </form> 例 html
22
reload()方法应用实例 常用于股市，期货等实时变化的页面中。 重新加载当前页
<SCRIPT language=JavaScript> setInterval(“location.reload()”,10000); </SCRIPT> 常用于股市，期货等实时变化的页面中。
23
History对象 此对象提供客户最近访问过的 URL 列表 属性 length：返回浏览器历史列表中的 URL 数量 方法
back() 加载 history 列表中的前一个 URL forward() 加载 history 列表中的下一个 URL。 go() 加载 history 列表中的某个具体页面。0代表当前记录，-1代表前一记录，1代表下一条记录。
24
History对象应用 <button onClick="javascript:history.go(-1);">后退</button> <button onClick="javascript:history.go(1);">前进</button> <button onClick="javascript:history.go(0);">刷新</button> <button onClick="javascript:alert(history.length)">浏览过的页面数量</button> 例04.htm
25
END 学习网站：
Similar presentations
