当前位置:Gxlcms > mysql > 教案:转换课程第2章DOM编程

教案:转换课程第2章DOM编程

时间:2021-07-01 10:21:17 帮助过:29人阅读

因为各种原因,本文中缺少部分内容,不便之处请原谅。 如有问题,请留言,并留下联系方式,我会尽快回复。 如果这个对你有用,请回贴以示支持,谢谢。 授课教师:牟勇 课时: 100 分钟 l 整章授课思路 l 本章重点 n 本章共有五个知识点: DOM , document 对

因为各种原因,本文中缺少部分内容,不便之处请原谅。

如有问题,请留言,并留下联系方式,我会尽快回复。

如果这个对你有用,请回贴以示支持,谢谢。

授课教师:牟勇

课时:100分钟

l 整章授课思路l 本章重点

n本章共有五个知识点:DOMdocument对象,制作浮动广告窗口,制作全选特效,常见错误

nDOM可以从HTML标记树谈起,先介绍HTML标记树,节点等概念,之后引出:要动态改变HTML标记树,就需要使用DOM,之后介绍什么是DOM,最后介绍HTMLDOM模型。

ndocument对象:首先介绍document对象的两个DOM方法,需要补充说明的是,每一个树的节点都有对应的DOM方法,而我们介绍的两个document对象的DOM方法是每一个元素节点(也就是对应于html标记的节点)都有这两个DOM方法。

n简单介绍了document对象的DOM方法之后,通过两个特效来说明这两个方法的使用。

n最后说明常见错误。

n什么是DOM

ndocument对象的属性和方法

nCSS常用属性

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

DOMDocument Object Model ,它是W3C国际组织的一套Web标准,它定义了访问HTML文档对象的一套属性、方法和事件

……

onload="inix( )" >

……

id="advLayer" style="position:absolute; left:16px;

top:129px; width:144px; height:95px; z-index:1;">

width="180" height="230" border="0">

教员应讲解关键代码(红色部分),重点说明函数的两种调用方式:HTML调用和JS调用(土红色部分)

制作带关闭按钮的浮动窗口[20分钟]

引入:我们前面已经实现了一个可以随着滚动条跑的广告窗口,但这样的广告窗口有个缺点,就是当用户不想看到它的时候无法关闭它。

问题:如何实现带关闭功能的浮动窗口?

分析:做一个图片,再作一个层,把图片贴到这个层里面,用它来实现关闭(点击时隐藏层)

实现思路:

1、使用getElementById( )方法获得层对象

2、设置层的样式style的显示属性display="none"

onload="inix( )" >

onclick="closeMe( )"

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中示例能实现关闭了,但关闭图片不能跟随滚动,怎么办?

分析:让关闭图标所在的层像浮动窗口一样,也跟随滚动条同步滚动。

在原来的基础上再添加一句代码就可以了(土红色部分)。教员可以让学员到老师机上来添加这一句代码,以加强学员对getElementById()方法的使用。

小结1制作右边栏浮动的带关闭按钮的广告图片

教员提供练习代码(幻灯片上的超链接已提供了练习代码的链接),学员完成代码填空。

制作实现全选效果[20分钟]

引入:制作浮动广告图片到此告一段落。在网页上,我们还会常常看到如下的情况。

如何给那些复选框提供全选和全不选的功能呢?

这要解决如下2个问题:

1、复选框是否选中的属性是哪个?

答案:checked

2、写代码逐个复选框设置为true,有没有更好的办法?

答案:让所有需要选中的复选框为同一个名字,让它们成为一个数组,然后使用循环解决问题。

实现思路:

1.创建一组同名复选框

2、使用getElementsByName( )方法获得一组同名的复选框对象。

3、通过循环来改变复选框是否被选中属性checked的值。

……

……

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 ;

}

}

应使用==,而不是=

……

('true')">全选 全不选

height="18">

‘true’true的含义是不一样的(true是逻辑常量,而’true’是字符串)

本章总结 [10分钟]

请介绍Document对象的常用属性?

请详细解释Document对象的常用方法?

请简述制作带关闭按钮的浮动窗口实现思路?

请简要回答如何制作全选/全不选复选框效果?

考核点

DOM的概念

getElementById()的使用

getElementsByName()的使用

扩展部分:

display属性的常量值(不需要全部讲)

学员问题汇总:

暂无

作业:

习题154页至55页选择题

习题255页至571,2,3(教员提供素材)

习题3:预习第三章,试做课后的选择题

人气教程排行