因为各种原因，本文中缺少部分内容，不便之处请原谅。 如有问题，请留言，并留下联系方式，我会尽快回复。 如果这个对你有用，请回贴以示支持，谢谢。 授课教师：牟勇 课时： 100 分钟 l 整章授课思路 l 本章重点 n 本章共有五个知识点： DOM ， document 对
因为各种原因，本文中缺少部分内容，不便之处请原谅。
如有问题，请留言，并留下联系方式，我会尽快回复。
如果这个对你有用，请回贴以示支持，谢谢。
授课教师：牟勇
课时： 100 分钟
l 整章授课思路 l 本章重点
n 本章共有五个知识点： DOM ， document 对象，制作浮动广告窗口，制作全选特效，常见错误
n DOM 可以从 HTML 标记树谈起，先介绍 HTML 标记树，节点等概念，之后引出：要动态改变 HTML 标记树，就需要使用 DOM ，之后介绍什么是 DOM ，最后介绍 HTML 的 DOM 模型。
n document 对象：首先介绍 document 对象的两个 DOM 方法，需要补充说明的是，每一个树的节点都有对应的 DOM 方法，而我们介绍的两个 document 对象的 DOM 方法是每一个元素节点 ( 也就是对应于 html 标记的节点 ) 都有这两个 DOM 方法。
n 简单介绍了 document 对象的 DOM 方法之后，通过两个特效来说明这两个方法的使用。
n 最后说明常见错误。
n 什么是 DOM
n document 对象的属性和方法
n CSS 常用属性
l 本章难点
n 会创建个性化的表格
n 会创建个性化的表单
l 本章工作任务
u 制作浮动的广告图片特效
u 制作带关闭按钮的浮动窗口
u 制作全选 / 全不选特效
l 整章授课思路
n 本章共有
n 首先介绍转换课程的基本内容，目标。
n 介绍本章目标：使用 Eclipse 平台开发 Java 程序，学会使用调试解决程序错误
n 使用 Eclipse 平台开发 Java 程序：通过示例和练习，让学员熟悉 Eclipse 的基本操作。
n 调试：通过一个生活案例引入调试的概念，然后教会学员单步调试，并学会观察变量的变化。
回顾 : [5 分钟 ]
CSS 外部样式表有哪些引用方法？
A:hover 是什么意思？
如果我要更改背景色，应使用哪个样式属性？
如果我要更改字体大小，应使用哪个样式属性？
如果我要将右边框粗细更改为 1px ，将左填充更改为 0px ，应该怎么写？
预习检查 : [5 分钟 ]
document 对象有哪些常用方法？
bgcolor 属性用来设置什么？
简要说明如何制作浮动的广告图片。
课程知识点讲解：
DOM- 文档对象模型： [10 分钟 ]
HTML 的树状结构
如果我们分析常见的页面 HTML 源代码，我们会发现存在树状的文档结构。
其中， 是最顶一层，我们称它为根节点，根节点是没有上级 ( 也称为父节点 ) 的节点，在它的下面有两个子节点： 和
，而 是它们的父节点。由于 和 它们有共同的父节点，所以我们把这两个节点的关系称为兄弟节点。我们还会看到在这棵树的最底层有一些节点，它们没有子节点。这些节点我们把它们称为叶节点。问题：发现这个规律对我们有什么用？
答案：由于 HTML 的内容是静态的，如果我们要操作这些元素，就必须首先准确找到这些元素。由于它们是一个树状结构，各自的位置是相对固定的，这一点就保证了我们可以准确的找到我们想要修改的元素。这个树状结构我们给它取了一个名称，叫 DOM(Document Object Model) 。
( 出示示例：修改超链接 )
什么是 DOM
DOM － Document Object Model , 它是 W3C 国际组织的一套 Web 标准，它定义了访问 HTML 文档对象的一套属性、方法和事件 。
function changeLink()
{ document.getElementById('myAnchor').innerHTML=" 搜狐 " ;
document.getElementById('myAnchor').href="http://HdhCmsTestsohu测试数据" ; }
淘宝
使用 DOM 改变链接 ">
教员应重点解释 JavaScript 函数中的 getElementById() 方法的意义，以及 innerHTML 属性和 href 属性的意义。
HTML 的 DOM 对象模型
首先出示幻灯片上的浏览器图形，依次说明 window 对象， history 对象， document 对象， form 对象的具体含义，给学员以形象的记忆点，之后告诉学员，由于存在这样一个层次结构，所以在我们引用某个 HTML 元素时，我们要按顺序一层一层的进行引用，例如我们要找到表单[ myform ]我们可以写做 window.document.myform ，强调书写格式：每个对象之间用[ . ]分隔。
之后出示幻灯片上的 HTML DOM 对象模型图，说明对象的名称，它们之间的层次关系。
document 对象： [10 分钟 ]
引入：认识了 DOM 的重要性，我们就来学习在 HTML 中最常用的一个对象： document 对象的属性和方法吧
属性或方法
说明
bgColor
背景颜色
getElementById()
通过 ID 获得元素
getElementsByName()
通过 name 属性获得一组元素
由于 4.0 中已经学过了 document 对象的属性和方法，所以，只需要简单介绍即可，重点强调 getElementById() 与 getElementsByName() 方法，它们的相同的地方就是都能获得 HTML 元素对象，不同的地方就是 getElementById() 方法是根据 id 来获得一个元素对象，而 getElementsByName() 方法是根据 name 来获得一组元素对象。
制作浮动的广告图片 [20 分钟 ]
引入：通过简单的学习，我们已经知道几个 document 重要的属性和方法，下面我们来具体运用一下它们，看看我们都能做些什么吧 !
问题：如何在页面上方显示广告图片？如何控制图片的移动？
分析：使用 DIV 层，把图片放在层中，然后使用 JavaScript 控制层的位置坐标
实现思路：在页面中插入层，然后在层中插入图片。编写脚本，使用 getElementById() 方法获取层对象，然后根据鼠标滚动的距离移动层的位置。
常见页面的坐标介绍
top ： 左上角的 y 坐标。
pixelTop ： 左上角的 y 坐标，与 top 的区别仅在于： ixelTop 是一个整数，所以可以直接参与算术运算，而 top 是一个字符串，不能直接参与算术运算。
scrollTop ： 滚动条滚动的距离。
关键代码：
var advInitTop=0;
function inix( ) {
x=document.getElementById("advLayer").style.pixelTop; }
function move( ) {
document.getElementById("advLayer").style.pixelTop=
advInitTop+document.body.scrollTop;
}
window.onscroll=move ; // 当页面滚动时调用 move( ) 函数
……
……
width="180" height="230" border="0">
教员应讲解关键代码 ( 红色部分 ) ，重点说明函数的两种调用方式： HTML 调用和 JS 调用 ( 土红色部分 ) 。
制作带关闭按钮的浮动窗口 [20 分钟 ]
引入： 我们前面已经实现了一个可以随着滚动条跑的广告窗口，但这样的广告窗口有个缺点，就是当用户不想看到它的时候无法关闭它。
问题：如何实现带关闭功能的浮动窗口？
分析：做一个图片，再作一个层，把图片贴到这个层里面，用它来实现关闭 ( 点击时隐藏层 ) 。
实现思路：
1 、使用 getElementById( ) 方法获得层对象
2 、设置层的样式 style 的显示属性 display="none"
var advInitTop=0;
function inix( ){
advInitTop=document.getElementById("advLayer").style.pixelTop; }
function move( ){
document.getElementById("advLayer").style.pixelTop=
advInitTop+document.body.scrollTop; }
function closeMe( ) {
document.getElementById("closeLayer") .style.display="none" ;
document.getElementById("advLayer").style.display="none"; }
window.onscroll=move ; // 当页面滚动时调用 move( ) 函数
style="position:absolute;left:166px;top:132px;width:27px;
height:19px;z-index:2;">
教员应强调隐藏层的代码 ( 土红色部分 ) 。
如果要隐藏，使用[ none ]字面量，如果要显示，使用[ block ]字面量。
下面是参考内容 ( 这部分内容教员可以有选择性的与学员说明，不需要全部讲 ) ：
block : CSS1 块对象的默认值。用该值为对象之后添加新行
none : CSS1 隐藏对象。与 visibility 属性的 hidden 值不同，其不为被隐藏的对象保留其物理空间
inline : CSS1 内联对象的默认值。用该值将从对象中删除行
compact : CSS2 分配对象为块对象或基于内容之上的内联对象
marker : CSS2 指定内容在容器对象之前或之后。要使用此参数，对象必须和 :after 及 :before 伪元素一起使用
inline-table : CSS2 将表格显示为无前后换行的内联对象或内联容器
list-item : CSS1 将块对象指定为列表项目。并可以添加可选项目标志
run-in : CSS2 分配对象为块对象或基于内容之上的内联对象
table : CSS2 将对象作为块元素级的表格显示
table-caption : CSS2 将对象作为表格标题显示
table-cell : CSS2 将对象作为表格单元格显示
table-column : CSS2 将对象作为表格列显示
table-column-group : CSS2 将对象作为表格列组显示
table-header-group : CSS2 将对象作为表格标题组显示
table-footer-group : CSS2 将对象作为表格脚注组显示
table-row : CSS2 将对象作为表格行显示
table-row-group : CSS2 将对象作为表格行组显示
问题： 上一张 PPT 中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？
分析：让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。
var advInitTop=0;
var closeInitTop=0;
function inix( ){
advInitTop=document.getElementById("advLayer").style.pixelTop;closeInitTop=document.getElementById("closeLayer").style.pixelTop; }
function move( ){
document.getElementById("advLayer").style.pixelTop=
advInitTop+document.body.scrollTop ;
document.getElementById("closeLayer").style.pixelTop=
closeInitTop+document.body.scrollTop ; }
function closeMe( ) {
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none"; }
window.onscroll=move ; // 窗口的滚动事件
在原来的基础上再添加一句代码就可以了 ( 土红色部分 ) 。教员可以让学员到老师机上来添加这一句代码，以加强学员对 getElementById() 方法的使用。
小结 1 ： 制作右边栏浮动的带关闭按钮的广告图片
教员提供练习代码 ( 幻灯片上的超链接已提供了练习代码的链接 ) ，学员完成代码填空。
制作实现全选效果 [20 分钟 ]
引入：制作浮动广告图片到此告一段落。在网页上，我们还会常常看到如下的情况。
如何给那些复选框提供全选和全不选的功能呢？
这要解决如下 2 个问题：
1 、复选框是否选中的属性是哪个？
答案： checked
2 、写代码逐个复选框设置为 true ，有没有更好的办法？
答案：让所有需要选中的复选框为同一个名字，让它们成为一个数组，然后使用循环解决问题。
实现思路：
1. 创建一组同名复选框
2 、使用 getElementsByName( ) 方法获得一组同名的复选框对象。
3 、通过循环来改变复选框是否被选中属性 checked 的值。
function checkAll(boolValue ) {
var allCheckBoxs=document.getElementsByName("isBuy") ;
for (var i=0;i allCheckBoxs.length ;i++)
{
if(allCheckBoxs[i].type=="checkbox")
allCheckBoxs[i].checked=boolValue ;
} }
……
href="javascript: checkAll(true)" > 全选
全不选
height="18">
……
教员解释关键代码 ( 红色部分 ) ，可以提醒学员：循环中的 if 语句是否必须？ ( 这个 if 是为了预留退路的代码，避免将来 HTML 网页进行修改时别的元素使用了相同 name 的情况 ) ， href=;javascript: 的意思 ( href=javascript: 的意思是让原来的超链接失效，使得在我们点击一个超链接时不是跳转到另一个页面，而是执行一个 javascript 函数， javascript: 仅用于 href 属性 )
小结 2 ： 编写如图所示，通过全选 / 全不选前面加个复选框来实现全选 / 全不选切换的效果。
教员提供练习代码 ( 幻灯片上有超链接 ) ，由学员进行代码填空
常见错误 [5 分钟 ]
常见错误 1 ：
language="javascript">
function checkAll(boolValue )
{
alert("OK");
var allCheckBoxs=document.getElementsByName("isBuy") ;
alert(allCheckBoxs[0].type);
for (var i=0;i
{
if(allCheckBoxs[i].type="checkbox")
allCheckBoxs[i].checked=boolValue ;
}
}
应使用 == ，而不是 = 。
function checkAll(boolValue ) {
var allCheckBoxs=document.getElementsByName("isBuy") ;
for (var i=0;i
{
if(allCheckBoxs[i].type=="checkbox")
allCheckBoxs[i].checked=boolValue ;
} }
……
('true') "> 全选
全不选
height="18">
‘true’ 和 true 的含义是不一样的 (true 是逻辑常量，而 ’true’ 是字符串 ) 。
本章总结 [10 分钟 ]
请介绍 Document 对象的常用属性？
请详细解释 Document 对象的常用方法？
请简述制作带关闭按钮的浮动窗口实现思路？
请简要回答如何制作全选 / 全不选复选框效果？
考核点
DOM 的概念
getElementById() 的使用
getElementsByName() 的使用
扩展部分：
display 属性的常量值 ( 不需要全部讲 )
学员问题汇总：
暂无
作业：
习题 1 ： 54 页至 55 页选择题
习题 2 ： 55 页至 57 第 1,2,3 题 ( 教员提供素材 )
习题 3 ：预习第三章，试做课后的选择题