第 9 章 JavaScript 概述续

第9章 JavaScript概述续

本章内容 JavaScript简介一插入JavaScript的方法二 JavaScript程序基础三 BOM和DOM 四

浏览器对象模型BOM

window frames navigator location document screen history location forms anchors images links embeds applets BOM • JavaScript是运行在浏览器中的，因此提供了一系列对象用于与浏览器窗口进行交互。这些对象主要有：window、document、location、navigator和screen等，把它们统称为BOM（Browser Object Model，浏览器对象模型）

JavaScript对象的层次结构 1．第一层次 JavaScript对象的层次结构中最顶层的对象是窗口对象（window），它代表当前的浏览器窗口。 Window对象常用的方法有：open()、close()、 alert()、confirm()、prompt()。 2．第二层次　　窗口对象window之下是文档(document)、浏览器(navigator)、屏幕(screen)、事件(event)、框架(frame)、历史(history)、地址(location)。

JavaScript对象的层次结构 3．第三层次　文档对象之下包括表单(form)、图像(image)、链接 (link)、锚对象(anchor)等多种对象。浏览器对象之下包括MIME类型对象(mimeType)、插件对象(plugin)等。 4．第四层次　表单对象之下包括按钮(button)、复选(checkbox)、单选按钮(radio)、文件域(fileUpload)等。

window对象 • window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供的主要功能可以分为以下5类： • （1）调整窗口的大小和位置； • （2）打开新窗口； • （3）系统提示框； • （4）状态栏控制； • （5）定时操作。

window对象的方法 window对象有如下4个方法用来调整窗口的位置或大小。（1）window.moveBy(dx, dy) 该方法将浏览器窗口相对于当前的位置移动指定的距离（相对定位），当dx和dy为负数时则向反方向移动。（2）window.moveTo(x, y) 该方法将浏览器窗口移动到屏幕指定的位置（x、y处）（绝对定位）。同样可使用负数，只不过这样会把窗口移出屏幕。（3）window.resizeBy(dw, dh) 相对于浏览器窗口的当前大小，把宽度增加dw个像素，高度增加dh个像素。两个参数也可以使用负数来缩写窗口。（4）window.resizeTo(w, h) 把窗口大小调整为w像素宽，h像素高，不能使用负数。

window.open • 打开新窗口 • 用法：window.open([url] [, target] [, options]) • options参数可能的选项包括： • （1）height: 窗口的高度，单位为像素； • （2）width：窗口的宽度，单位为像素； • （3）left：窗口的左边缘位置； • （4）top：窗口的上边缘位置； • window.open("pop.html", "new", "width=400,height=300"); • 表示在新窗口打开pop.html，新窗口的宽和高分别是400像素和300像素。

关于target参数的取值 • target参数除了可以使用"_self"，"_blank"等html中的属性值外，还可以利用target参数为窗口命名，如： • window.open("pop.html", "myTarget"); • 这样可以让其他链接将目标文件指定在该窗口中打开。 • <a href="iframe.html" target="myTarget">在指定窗口打开</a> • <form target="myTarget">

点击网页链接同时打开两个窗口 • <SCRIPT LANGUAGE="JavaScript">function adClick(ad, site) {window.open(ad);window.location = site;}</script> <a href="javascript:adClick(http://www.sohu.com, http://www.163.com);"> 同时打开两个页面</a>

系统对话框 （1）window.alert([message]) alert()方法前面已经反复使用，它只接受一个参数，即弹出对话框要显示的内容。调用alert()语句后浏览器将创建一个单按钮的消息框。（2）window.confirm([message]) 该方法将显示一个确认提示框，其中包括“确定”和“取消”按钮。用户单击“确定”按钮时，window.confirm返回true；单击“取消”按钮时，window.confirm返回false。例如： if (confirm("确实要删除这张图片吗？")) alert("图片正在删除…"); else alert("已取消删除！");

（3）window.prompt([message] [, default]) 该方法将显示一个消息提示框，其中包含一个文本输入框。输入框能够接受用户输入参数，从而实现进一步的交互。该方法接受两个参数，第一个参数是显示给用户的文本，第二个参数为文本框中的默认值（可以为空）。整个方法返回字符串，值即为用户的输入。例如： <script language="JavaScript" type="text/javascript"> var nInput=prompt("请输入你的名字",""); if(nInput!=null) document.write("Hello! "+nInput); </script>

status属性 • 状态栏控制（status属性） • 浏览器状态的显示信息可以通过window.status属性直接进行修改。例如： window.status="看看状态栏中的文字变化了吗？";

history属性 • 浏览器后退和前进（history属性） • window还有一个非常实用的属性是history。它可以访问历史页面，但不能获取到历史页面的URL，如果希望浏览器返回前一页可以使用如下代码： • window.history.go(-1); • 如果希望前进一页，只需要使用正数1即可，代码如下： • window.history.go(1); • 如果希望刷新显示当前页，则使用0即可，代码如下： • window.history.go(0);

上面三句的效果还可以分别用back()和forward()实现，代码如下：上面三句的效果还可以分别用back()和forward()实现，代码如下： • window.history.back(); • window.history.forward(); • location.reload();

定时操作函数 • 定时操作通常有两种使用目的，一种是周期性地执行脚本，例如在页面上显示时钟，需要每隔一秒钟更新一次时间的显示，另一种则是将某个操作延时一段时间执行，例如迫使用户等待一段时间才能进行操作，可以使用window.setTimeout函数使其延时执行，而后面的脚本可以继续运行不受影响。 • 需要注意的是，定时操作函数还是利用JavaScript制作网页动画效果的基础，例如网页上的漂浮广告，就是每隔几毫秒更新一下漂浮广告的显示位置。其他的如文字打字效果，图片轮转显示等，可以说一切用Javascipt实现的动画效果都离不开setTimeout函数。

动态显示时间 <script type="text/javascript"> function $(id) { return document.getElementById(id); } function dispTime() { $("clock").innerHTML = (new Date()).toLocaleString();// 将时间显示在clock的div中 } function init() { // 启动时钟显示 dispTime(); //显示时间 window.setTimeout(init, 1000); // 过1秒钟更新执行一次init() } </script>

地址栏控制（location对象） location对象的主要作用是分析和设置页面的URL地址，它是window对象和document对象的属性。 location对象表示窗口地址栏中的URL <select name="select" onchange="window.location.href=this.options[this.selectedIndex].value"> <option>请选择需要的网址</option> <option value="http://www.sohu.com">搜狐</option> <option value="http://www.sina.com">新浪</option> <option value="http://www.MSN.com.cn">MSN中国</option> </select>

location.replace • 如果不希望用户可以用“后退”按钮返回原来的页面，可以使用replace()方法，该方法也能转到指定的页面，但不能返回到原来的页面了，这常用在注册成功后禁止用户后退到填写注册资料的页面。例如： • <p onclick="location.replace('http://www.sohu.com');">访问搜狐</p> • 可以发现转到新页面后，“后退”按钮是灰色的了

navigator对象 • navigator对象主要是用来检测客户端浏览器信息的，关于Web浏览器的信息，浏览器的类型、版本信息以及操作系统的类型都可以从该对象中获取。 • navigator对象最常用的属性是userAgent，通常浏览器及操作系统的判断都是通过该属性来实现的，最基本的方法是首先将它的值赋给一个变量，代码如下： • var sUserAgent = navigator.userAgent; • document.write(sUserAgent);

document对象

document对象 • document对象实际上又是window对象的属性，document对象的独特之处是它既属于BOM又属于DOM。 • 从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。 • document对象最初是用来处理页面文档的，但很多属性已经不推荐继续使用了，如改变页面的背景颜色（document.bgColor）、前景颜色（document.fgColor）和链接颜色（document.linkColor）等，因为这些可以使用DOM动态操纵CSS属性实现。如果一定要使用这些属性，应该把它们放在body部分，否则对Firefox浏览器无效

document对象的属性

获得页面的标题和最后修改时间 <title>获取页面标题</title> <script language="JavaScript"> document.write(document.title+"<br />"); document.write(document.lastModified); </script>

将页面中所有超链接的打开方式都设置为新窗口打开 <body onload="newwin()"> <script language="JavaScript" type="text/javascript"> function newwin(){ for (i=0;i<=document.links.length-1;i++) document.links[i].target="_blank"; }</script> <a href="01.htm">测试1</a> <a href="02.htm">测试2</a> < /body >

改变超链接中原来的链接地址 • 改变超链接中原来的链接地址 < body > < a href ="http://www.blogjava.net/amigoxie" > link </ a > < script type ="text/javascript" > document.write( " 原链接: " + document.links[ 0 ].href + " <br> " ); document.links[ 0 ].href = " http://blog.csdn.net/amigoxie " ; document.write( " 改变后的链接： " + document.links[ 0 ].href); </ script > </ body >

用document对象的集合属性访问html元素 <body> <img src=“logo.gif" name="imgHome"/> <form method="post" action="1.htm" name="data"> <input type="text" name="txtEmail"/> <input type="submit" value="提交"/> </form></body> • 要访问body中的img图像，可用 document.images[“imgHome”] • 访问表单中的输入框 document.forms[“data”].txtEmail • 但如果要访问table，div等html元素，由于document对象没有tables、divs这些集合属性，所以就不能这样访问了，要用后面介绍的DOM中访问指定节点的方法访问

document对象的方法（write和writeln方法） • 这两个方法都接受一个字符串参数，在当前HTML文档中输出字符串，唯一的区别是writeln在字串末尾加一个换行符（\n）。 • 但是writeln只是在HTML代码文档中添加一个换行符，由于浏览器会忽略代码中的换行符，所以以下两种方式都不会使内容在浏览器中产生换行。 • document.write("这是第一行"+"\n"); • document.writeln("这是第一行"); //等效于上一行的代码 • 要在浏览器中换行，只能再输出一个换行标记<br />，即： • document.write ("这是第一行"+"<br />");

用document.write动态引入外部js文件 • 如果要动态引入一个js文件，即根据条件判断，通过document.write输出<script>元素，则必须这样写才对： • if (prompt("是否链接外部脚本（1表示是）","")==1) • document.write("<script type='text/javascript' src='1.js'>" + "</scr"+"ipt>"); • 注意要将</script>分成两部分，因为浏览器一遇到</script>，它会假定其中代码是完整的（即使它出现字符串中。

screen对象 • sreen对象主要用来获取用户电脑的屏幕信息，包括屏幕的分辨率，屏幕的颜色位数，窗口可显示的最大尺寸。有时可以利用sreen对象根据用户的屏幕分辨率打开适合该分辨率显示的网页。 • 使浏览器窗口自动满屏显示 <body> <script language="JavaScript" type="text/javascript"> window.moveTo(0,0); window.resizeTo(screen.availWidth,screen.availHeight); </script> 该窗口总是满屏幕显示</body>

文档对象模型DOM

html head body meta title h2 p ul a li li li DOM模型 • 我们已经知道一段HTML代码对应一颗DOM树。 • 从图中可以看出，每个HTML元素就是DOM树中的一个节点。整个DOM模型都是由元素节点（element node）构成的。

使用DOM模型 • DOM在HTML页面中的应用可分为以下几类： • （1）访问指定节点； • （2）访问相关节点； • （3）访问节点属性； • （4）检查节点类型； • （5）创建节点； • （6）操作节点。

访问指定节点 • 访问指定节点”的含义是已知节点的某个属性（如id属性、name属性或者节点类型），在DOM树中寻找符合条件的节点。相关的方法包括getElementById()， • getElementsByName() • 和getElementsByTagName()。

访问元素属性 • 设置元素属性setAttribute方法 • <title>setAttribute()</title> • <script language="javascript"> • function changePic(){ • //获取图片 • var myImg = document.getElementsByTagName("img")[0]; • //设置图片src和title属性 • myImg.setAttribute("src","02.jpg"); • myImg.setAttribute("title","紫荆公寓"); • } • </script> • </head> • <body> • <img src=“01.jpg” title=“山坡" onclick="changePic()" /> • </body>

元素节点 a href="iframe.html" target="myTarget" 在指定窗口打开属性节点属性节点文本节点节点的分类 • （1）元素节点的nodeType值为1； • （2）属性节点的nodeType值为2； • （3）文本节点的nodeType值为3。

制作Tab选项卡面板 • Tab面板由于能节省很多网页空间、给用户较好的体验,受到大家的普遍喜爱,所以是目前网页中流行的高级元素。

首先，一个tab面板可以分解成两部分，即上方的导航条和下面的内容框，实际上，导航条中有几个tab项就应该会有几个内容框。只是因为当鼠标滑动到某个tab项的时候，才显示与其对应的一个内容框，而把其他内容框都通过（dislay:none）隐藏了，且不占据网页空间。如果不把其他内容框隐藏的话那么图1中的tab面板就是图2这个样子。

Tab面板的结构代码 <ul id="tab"> <li><a id="tab1" class="cur" href="#">课程特色</a></li> <li><a id="tab2" href="#">教学方法</a></li> </ul> <div id="info1"> ·<a href="#">本课程主要特色</a><br /> ·<a href="#">课程地位</a><br /> </div> <div id="info2"> ·<a href="#">教学方法和教学手段</a><br /> ·<a href="#">课程的历史</a><br /> </div>

Tab面板的结构 • 从结构代码中可以看出，这个Tab面板是用具有2个列表项的无序列表做的导航条，使用2个div容器做的内容框。实际上这些div容器都没有上边框，而只有左、右和下边框，为了证实这一点，我们只需给这些div容器加个上边界（margin-top:12px;）就可以发现它们确实没有上边框，

其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。其实div的上边框是由导航条ul#tab元素的下边框实现的，这是因为当鼠标滑过tab项时，要让tab的子元素的下边框变为白色，而且正好遮盖住ul#tab元素的蓝色下边框。这样在激活的tab项处就看不到tab元素的下边框了。 • 为了实现这种边框的遮盖，首先必须使两个元素的边框重合，当然，有人会说，如果给div容器加个上边框，再让div容器使用负边界法向上偏移1像素（margin-top:-1px;），那么它的上边框也会和tab项的下边框重合，但这样的话是div容器的上边框覆盖在tab项的下边框上，这样即算tab项的下边框变白色，也会被div容器的上边框覆盖而看不到效果，这就是div容器不能有上边框的原因。

所以只能使用ul的子元素的下边框覆盖ul元素的下边框，因为默认情况下子元素的盒子是覆盖在父元素盒子之上的。在这里ul的子元素有li和a。由于当鼠标滑过时需要子元素的下边框变色，而IE 6只支持a元素的hover伪类，所以选择用a元素的下边框覆盖ul元素的下边框 #tab { margin: 0; /*通用设置，将列表的边界、填充都设为0*/ padding: 0 0 24px 0; /*由于li元素浮动，ul盒子高度为0，用填充使高度扩展*/ list-style-type: none; /*去掉列表元素列表项前的小黑点*/ border-bottom:1px solid #11a3ff; /*给ul元素添加下边框*/ }

每个选项a元素的样式 #tab a { display: block; padding: 0 10px; /*给a元素左右加10像素填充 */ height:23px; /*使a元素的高度正好等于ul元素高度，从而它们的下边框重合 */ line-height:23px; /*以上两条使a元素文字垂直居中 */ border: 1px solid #11a3ff; /*设置边框 */ margin:0 4px 0 0; /*设置右边界 */ font-size: 14px; color: #993300; text-decoration: none; /*去下划线 */ background-color: #BBDDFF; }

这样ul#tab元素的高是24+1=25象素，a元素的高是23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被a元素撑开。这样ul#tab元素的高是24+1=25象素，a元素的高是23+1+1=25象素，而且a元素是浮动的，脱离了标准流，所以a元素不会占据ul元素的空间，在IE中ul元素的高也不会被a元素撑开。 • 注意：ul元素作为浮动盒子a的外围容器不能设置宽和高，否则在IE中浮动盒子（a元素）将不会脱离标准流，这样a元素的盒子将被包含在ul元素的盒子中，两个盒子的下边框将无法重叠。这就是为什么对ul#tab元素设置下填充为24像素，而不设置高度为24像素（height:24px;）的原因。 • 同样，ul元素不能设置宽度，这意味着tab面板的宽度是无法由其自身控制的，但这并不构成一个问题，因为tab面板总是放在网页中其他元素（如div）中的，只要设置外围容器的宽度，就能控制tab面板的宽度了。

#tab li { float:left; /*使tab项水平排列 */ margin:0 4px 0 0; /*设置右边界，使tab项之间右间距 */ } div { background-color: #FFeeee; padding: 10px; border-left:1px solid #11a3ff; /* 左边框 */ border-right:1px solid #11a3ff; /* 右边框 */ border-bottom:1px solid #11a3ff; /* 下边框 */ }

当鼠标滑过时 #info2 { display: none; /*使#info2暂时隐藏起来 */ } #tab a:hover,#tab a.cur { border-bottom: 1px solid #ffeeee; /*鼠标滑过或是当前选项时改变下划线颜色 */ color: #F74533; /*改变tab项的文字颜色 */ background-color: #FFeeee; /*改变tab项的背景颜色 */ }

添加行为 <ul id="tab"> <li><a id="tab1" onmouseover="changtab(1)" class="cur" href="#">课程特色</a></li> <li><a id="tab2" onmouseover="changtab(2)" href="#">教学方法</a></li> </ul> 最后写JavaScript代码： <script language="JavaScript" type="text/javascript"> function changtab(n) { for(i=1;i<=document.getElementsByTagName("li").length;i++) { document.getElementById('info'+i).style.display='none'; document.getElementById('tab'+i).className='none'; } document.getElementById('info'+n).style.display='block'; document.getElementById('tab'+n).className='cur'; }</script>

DW CS3对JavaScript的支持 • 行为面板 • Spry组件

Jquery简介

第 9 章 JavaScript 概述续