动态HTML教程（三）

  即日咱们将发端进修动静html最精粹的局部：动静html编制程序。htm之以是胜利的因为之一在乎它供给了在互联网络上展示网页的一致办法。一旦你标识了一个网页，它在任何场合都不妨看到。javascript也是如许。准时它的本子会有很多种，但它的中心和语法是一致的，它在扶助javascript的一切欣赏器中都不妨运用。css也具备一致的语法。在一切的欣赏器中它的表露截止也该当是普遍的。以是它能扶助你天生跨平台作风普遍的动静网页。

  然而，再有少许小题目。

  在1997中叶时，netscape和microsoft都推出了本人的动静html欣赏器，但其时没有一种典型编制程序谈话同网页元素之间的交谈的一致规则。然而在其时仍旧有了javascript同网页中的图象、链接和表单位素举行交谈的典型。但是这两家公司对于怎样遏制网页元素生存各别的看法。

  netscape对javascript介入了一系列的东西，并引入了<layer>标签，随同爆发的便是它的dhtml 观念：－大概沿用<layer>标签分层的实质分层，大概<div>标签的css定位，它们不妨用javascript的东西考察，并且它的属性(left, top, visibility,和background color)不妨被遏制。

  然而微软走得更深刻少许。它推出了崭新的html天生引擎，它不只能定位任何元素，还能变换对css树立的任何选项。（比方，你不妨变换字体或你的em标签) ，并且，它还完备了文献东西模块（document object model），使其能经过任何ie扶助的编制程序或剧本谈话考察。 这两种机制之间的鲜明辨别在乎其语法。netscape 扶助树形语法：

  document.layers['toplayer'].document.layers['sublayer'].document.layers['bottom'].left

  而internet explorer将一切的html东西都放在一个程度构造上，使你不妨窜改也是东西：

bottom.style.left

  即使你在这种欣赏器中运用了另一种欣赏器扶助的本领，则欣赏器会表露缺点消息。然而再有很多本领不妨对这种不兼容性作出灵活处置。一旦你控制了个中的窍门，你就不妨面面俱到，无所不许。本课中将进修怎样运用最小批的前提考察文献东西模块dom，而后咱们将引见一个将东西在屏幕中挪动的大略javascript剧本。

  开始咱们进修为两种欣赏器天生各别的动静html。我不安排在此列出两种欣赏器各自的动静html特性，我只列出两种欣赏器所扶助的沟通的动静html功效。

  你不妨看到它们之间没有实足沟通的名目。object.name犹如沟通，然而对东西运用css时必需拟订id属性，以是你只能对图象、链接和表单 运用该功效。以是为了编写剧本，你必需设定很多前提。听起来很苦楚，但本来还不象你设想的那么糟。

  有很多中方法不妨运用javascript设定前提。个中方法是决定用户所运用的欣赏器的典型和本子，并据此作出评价。此刻我还创造了更好的处置方法。

  欣赏器典型和本子前提设定的第1个题目是欣赏器的变换的题目。即使你将欣赏器本子设定于internet explorer 4.0和netscape 4.0，那么等5.0版的欣赏器颁布时你的网页会爆发什么情景？大概这两种新颁布的欣赏器本子彼此兼容，而你的剧本中都没有商量到那些题目又会怎样？ 以是按照欣赏器典型和本子设定前提的本领不行行。

  更好的本领是按照功效设定前提。即使你读过javascript教程 ，你确定领会javascript的"if"语句中尝试一个语句归来的是真true (1)仍旧假false (0)，而后它将按照归来的布尔值实行一个语句。常常情景下它被用来尝试某些变量的前提，比方：

  if (x<=5) settimeout('dosomething()', 500);

  然而一个东西能否生存也不妨动作被尝试的前提。即使某个东西生存，则归来真，要不归来假。以是为了供给一个灵验的尝试前提，你必需从某个一定观点来尝试一个东西的代办本质再不运用动静hmtl。

  netscape运用分层运动作态html。它的运转办法同图象数组在navigator中的办法一致。你设定一个分层东西的数组，象对图象的援用那么设定援用办法。以是document.layers['foobar'] 则是代办被对立定位或是一致定位了的<div>的东西 (在netscape 形式中，它必需是在你的文献name或id属性为"foobar"的一个一致定位或对立定位了的<div>或<span>)。而后你就不妨设定上述百般属性。你还不妨用document.foobar来代办这个东西。

  在internet explorer中，则用一种程度的构造来代办东西。以是id或name属性为foobar的<div>即是foobar，以是你不妨用foobar.style.left来考察或设定这个东西的左边的场所。再有很多种轮回考察一系列东西的本领（特殊有效）。在explorer的文献东西模块（document object model）中，东西不妨代办一切在该东西之下的东西（object object object）。以是foobar.all 包括一切包括在foobar之下的html标签。不管什么功夫你都不妨找到一个很好的类属东西－document.all，由于一切的网页中都有一个文献（document），所以它必定有一个document.all东西。

  以是即使你想遏制某个东西的场所，你该当如许编写你的javascript:

 <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)                { truck.style.left="480;" } }           if ((document.layers) || (document.all)) { settimeout('moveit()', 100); } } </script>  它的实行截止该当是:

   代码的含意如次：

即使存户端扶助document.layers东西, 将名为truck的东西层左移5个场所. 即使名为truck的东西层的场所小于0, 则名为truck的东西层的的left属性树立为480。 然而，即使存户端扶助document.all东西, 则将名为truck的html东西的款式选项left的平头值减去5。 即使名为truck的html东西的款式选项left的平头值小于0，则将其数值设为480。 即使存户端扶助document.all或document.layers东西中的任何一种， 等待10秒钟，而后实行因变量moveit。 此刻你本人作一下这个步调。让干脆机在页面中挪动。提防：你该当沿用行内款式，例：<div id="truck"style="position: absolute; left: 20; top: 20">。

  此刻你仍旧不妨在页面中挪动东西了。 然而即使你须要将多个东西依照一定的程序挪动大概实行多个事变触发的动作时，不只的代码体积会减少（历次考察一个东西时你都必需运用一次if/then 语句），并且历次都必需为某个动作键入document.truck.left 是一件很烦人的事。在netscape模块中，当你嵌入div时，文献东西模块的档次构造就会减少，如次：

 <div id="foo">   <div id="bar">      <div id="sna">      </div>   </div></div>  要考察foo，则必需实行document.foo, 而要考察bar，则必需实行document.foo.document.bar。而要考察sna，则必需实行document.foo.document.bar.document.sna。

  我快要受不了啦啦啦！！！

  以是你必需处置援用东西时形成的代码体积伸展的题目，还得制止历次挪动一个东西时必需设定前提。但你不妨用一个本领处置这个题目。

  任何用javascript编写过网页的人都领会任何翻开一个小窗口：

windowid = window.open('name', 'http：//blah.com/');  这项训令就可翻开一个小窗口，然而你还不妨经过运用windowid 作一个援用在连接遏制追逐窗口。比方windowid.location = 'http：//www.taylor.org/就不妨变换窗口资源的定位。"windowid.close()"就可封闭该窗口。你所做的不过对一个javascript东西树立一个援用。在动静html中也不妨运用同样的本领。

  你大概会提防到在上一页的图表中，大普遍定位属性的语法都很一致。只然而它们被用在了各别的东西上。咱们不妨用一个javascript例程处置上头的题目。

 <script>function setup(){   if(document.layers){      datruck = document.truck;   } else if(document.all) {      datruck = truck.style;   }}</script>此刻moveit因变量不妨被改为

function moveit() {   datruck.left = parseint(datruck.left) - 5;   if(parseint(datruck.left) < 0){      datruck.left = 480;   }   settimeout('moveit()', 100);}  代码短了少许，对吧？底下咱们将使页面那些图象都动起来。

此刻你所能遏制的属性仍旧不不过left和top了，固然，还 有z-index。此刻咱们创造网猴们彼此追逐的功效。

function movemonkey(monkey, dir) {  if (document.all) {    var wtmonkey = document.all(monkey).style;  } else if (document.layers) {    var wtmonkey = document.monkeycontainer.document.layers[monkey];  }

  if ((parseint(wtmonkey.left) <0) || (parseint(wtmonkey.left)> 150)) {    dir = dir * -1;    wtmonkey.zindex = 5 - dir;  }  wtmonkey.left = parseint(wtmonkey.left) + dir;  settimeout('movemonkey(\'' + monkey + '\', ' + dir +')', 100);}

网猴的名字被传播给因变量，因变量则变换网猴的左边的定位。而后举行规范的功效查看，为一定的欣赏器设定援用参数。而后它变换z-index，即使网猴挪动到了台子的任何一端，则因变量变换网猴挪动的目标。

提防这不是体例类属javascript挪动例程的独一本领。你不妨随便增添、缩小或编写本人的例程。底下是即日的家园功课。将作出动画功效。你不妨运用上头所供给的代码大概编写你本人的代码。当你编写例程时提防netscape嵌入定位东西的本领。