📄 0034.htm
字号:
<html>
<head>
<title>新时代软件教程:操作系统 主页制作 服务器 设计软件 网络技术 编程语言 文字编辑</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
body, table {font-size: 9pt; font-family: 宋体}
a {text-decoration:none}
a:hover {color: red;text-decoration:underline}
.1 {background-color: rgb(245,245,245)}
-->
</style>
</head>
<p align="center"><script src="../../1.js"></script></a>
<p align="center"><big><strong>动态HTML教程（三）</strong></big></p>
<div align="right">---《网猴》版权所有</div>
<p><font face="宋体" size="3">今天我们将开始学习动态HTML最精彩的部分：动态HTML编程。HTM之所以成功的原因之一在于它提供了在互联网上展现网页的统一方式。一旦你标识了一个网页，它在任何地方都可以看到。Javascript也是如此。及时它的版本会有很多种，但它的核心和语法是统一的，它在支持Javascript的所有浏览器中都可以应用。CSS也具有统一的语法。在所有的浏览器中它的显示结果也应该是一致的。所以它能帮助你生成跨平台风格一致的动态网页。</font></p>
<p><font face="宋体" size="3">但是，还有一些小问题。</font></p>
<p><font face="宋体" size="3">在1997中期时，Netscape和Microsoft都推出了自己的动态HTML浏览器，但那时没有一种规范编程语言同网页元素之间的交流的统一规定。但是在那时已经有了JavaScript同网页中的图象、链接和表单元素进行交流的规范。然而这两家公司对于如何控制网页元素存在不同的见解。
</font></p>
<p><font face="宋体" size="3">Netscape对JavaScript加入了一系列的对象，并引入了<tt><LAYER></tt>标签，伴随产生的便是它的dHTML
理念：－或者采用<tt><LAYER></tt>标签分层的内容分层，或者<tt><DIV></tt>标签的CSS定位，它们可以用Javascript的对象访问，而且它的属性(left,
top, visibility,和background color)可以被控制。 </font></p>
<p><font face="宋体" size="3">但是微软走得更深入一些。它推出了全新的HTML生成引擎，它不仅能定位任何元素，还能改变对CSS设置的任何选项。（例如，你可以改变字体或你的<tt>EM</tt>标签)
，而且，它还完善了文件对象模块（Document Object Model），使其能通过任何IE支持的编程或脚本语言访问。
这两种体制之间的明显区别在于其语法。Netscape 支持树<br>
形语法： </font></p>
<p><tt><font face="宋体">document.layers['topLayer'].document.layers['subLayer'].document.layers['bottom'].left
</font></tt></p>
<p> 而Internet Explorer将所有的HTML对象都放在一个水平结构上，使你可以修改也是对象：
</font>
<ul>
<p><tt><font face="宋体">bottom.style.left </font></tt></p>
</ul>
<p><font face="宋体">如果你在这种浏览器中使用了另一种浏览器支持的方法，则浏览器会显示错误信息。但是还有许多技术可以对这种不兼容性作出变通处理。一旦你掌握了其中的诀窍，你就可以左右逢源，无所不能。本课中将学习如何利用最少量的条件访问文件对象模块DOM，然后我们将介绍一个将对象在屏幕中移动的简单Javascript脚本。
<p><font size="3" face="宋体">首先我们学习为两种浏览器生成不同的动态HTML。我不打算在此列出两种浏览器各自的动态HTML特点，我只列出两种浏览器所支持的相同的动态HTML功能。</font></p>
<font size="3"><div align="center"><center>
<table border="1" width="96%" bordercolor="#00525B" cellspacing="0">
<tr>
</font><td width="47%" bgcolor="#F5F5F5"><font face="宋体" size="3" color="#0080FF"><span
class="eng">Function </span></font></td>
<td width="23%" bgcolor="#F5F5F5"><font face="宋体" size="3" color="#0080FF"><span
class="eng">Navigator</span></font></td>
<td width="30%" bgcolor="#F5F5F5"><font face="宋体" size="3" color="#0080FF"><span
class="eng">Explorer</span></font></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">改变某个区域的内容:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.document.open();<br>
object.document.writeln();<br>
object.document.close(); </font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.innerHTML</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">识别不同的区域:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.name</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.id
or object.name</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">根据母体对象的左边定位:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.left</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.left</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">根据母体对象的顶部定位:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.top</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.top</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">堆栈顺序:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.zIndex</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.zIndex</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">对象的可视性:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.visibility</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.visibility</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">clipping
区域:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.clip</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.clip</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">背景图象:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.background</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.backgroundImage</font></span></em></td>
<font size="3">
</tr>
<tr>
</font><td width="47%" bgcolor="#FFF8F0"><span class="eng"><font size="3" face="宋体">背景颜色:</font></span></td>
<td width="23%" bgcolor="#EEFFF0"><em><span class="eng"><font size="3" face="宋体">object.bgColor</font></span></em></td>
<td width="30%" bgcolor="#F4F4FF"><em><span class="eng"><font size="3" face="宋体">object.style.backgroundColor</font></span></em></td>
<font size="3">
</tr>
</table>
</center></div></font>
<p><font size="3" face="宋体">你可以看到它们之间没有完全相同的项目。<tt><i>object</i>.name</tt>似乎相同，但是对对象使用CSS时必须制定<tt>ID</tt>属性，所以你只能对图象、链接和表单
使用该功能。所以为了编写脚本，你必须设定很多条件。听起来很痛苦，但其实还不象你想象的那么糟。
<p><font size="3" face="宋体">有很多中办法可以利用Javascript设定条件。其中办法是确定用户所使用的浏览器的类型和版本，并据此作出评估。现在我还发现了更好的解决办法。
</font></p>
<font size="3">
<p><font face="宋体">浏览器类型和版本条件设定的第1个问题是浏览器的改变的问题。如果你将浏览器版本设定为Internet
Explorer 4.0和Netscape 4.0，那么等5.0版的浏览器发布时你的网页会发生什么情况？或者这两种新发布的浏览器版本互相兼容，而你的脚本中都没有考虑到这些问题又会如何？
所以根据浏览器类型和版本设定条件的方法不可行。</font></p>
</font>
<p><font size="3" face="宋体">更好的方法是根据功能设定条件。如果你读过<a
href="javascript:if(confirm('../../grwy.online.ha.cn/explorer/program/javascript/index.html \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address. \n\nDo you want to open it from the server@'))window.location='../../grwy.online.ha.cn/explorer/program/javascript/index.html'" tppabs="http://grwy.online.ha.cn/explorer/program/javascript/index.html">Javascript教程</a></font> <font size="3"><font
face="宋体">，你一定知道Javascript的"if"语句中测试一个语句返回的是真true
(<tt>1</tt>)还是假false (<tt>0</tt>)，然后它将根据返回的布尔值执行一个语句。通常情况下它被用来测试某些变量的条件，例如：
</font>
<ul>
<tt><p><font face="宋体">if (x<=5) setTimeout('doSomething()', 500); </font></p>
</tt>
</ul>
<p> 但是一个对象是否存在也可以作为被测试的条件。如果某个对象存在，则返回真，否则返回假。所以为了提供一个有效的测试条件，你必须从某个特定角度来测试一个对象的代表性质以便应用动态HMTL。</font></p>
</font>
<p><font size="3" face="宋体">Netscape利用分层运行动态HTML。它的运行方式同图象数组在Navigator中的方式类似。你设定一个分层对象的数组，象对图象的引用那样设定引用方式。所以<tt>document.layers['foobar']</tt>
则是代表被相对定位或是绝对定位了的<tt><DIV></tt>的对象 (在Netscape
模式中，它必须是在你的文件<tt>NAME</tt>或<tt>ID</tt>属性为"foobar"的一个绝对定位或相对定位了的<tt><DIV></tt>或<tt><SPAN></tt>)。然后你就可以设定上述各种属性。你还可以用<tt>document.foobar</tt>来代表这个对象。</font></p>
<p><font size="3" face="宋体">在Internet Explorer中，则用一种水平的结构来代表对象。所以<tt>ID</tt>或<tt>NAME</tt>属性为<tt>foobar</tt>的<tt><DIV></tt>就是<tt>foobar</tt>，所以你可以用<tt>foobar.style.left</tt>来访问或设定这个对象的左边的位置。还有许多种循环访问一系列对象的方法（非常有用）。在Explorer的文件对象模块（Document
Object Model）中，对象可以代表所有在该对象之下的对象（object object
object）。所以<tt>foobar.all</tt> 包含所有包含在foobar之下的HTML标签。无论什么时候你都可以找到一个很好的类属对象－<tt>document.all</tt>，因为所有的网页中都有一个文件（document），因此它必然有一个<tt>document.all</tt>对象。
<p><font size="3"><font face="宋体">所以如果你想控制某个对象的位置，你应该这样编写你的JavaScript:
</font>
<ul>
<pre> <script language="javascript">
function moveIt() {
if(document.layers) {
document.truck.left -= 5;
if (document.truck.left<0){
document.truck.left=480}
}
else if (document.all) {
truck.style.left="parseInt(truck.style.left)" 5;
if (parseInt(truck.style.left)<0)
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -