day3_5original.htm

成为真正的网页制作的高手的话,必须了解并使用DHTML.这里提供了最好的手册和文档.

   <div id="bar">

      <div id="sna">

      </div>

   </div>

&lt;/div&gt;</font></pre>
    </ul>
    <p><font face="宋体">To access <tt>foo</tt> would be <tt>document.foo</tt>, but to 
    access <tt>bar</tt> would be <tt>document.foo.document.bar</tt>. And to access <tt>sna</tt> 
    would be <tt>document.foo.document.bar.document.sna</tt>.</font></p>
    <p><font face="宋体">YIKES!</font></p>
    <p><font face="宋体">So to deal both with the increasing size of referencing an object 
    and to prevent the need for a conditional every time an object is moved, there's a snazzy 
    little trick you can use. And you're probably more familiar with it than you realize.</font></p>
    <p><font face="宋体">Anyone who's ever worked with JavaScript on a Web page has probably 
    dealt with opening up a little popup window. So, this little snippet of code will look 
    mighty familiar:</font><ul>
      <pre><font face="宋体">windowID = window.open('name', 'http://blah.com/');</font></pre>
    </ul>
    <p><font face="宋体">The window pops open, but you are able to continue to control that 
    window by using the <tt>windowID</tt> as a reference to it. You can change the source by 
    saying <tt>windowID.location = 'http://www.taylor.org/'</tt>, or you can close the window 
    by saying <tt>&quot;windowID.close()&quot;</tt>. Or do all kinds of stuff to it. What you 
    have done is to create a reference to the JavaScript object. This same technique lets you 
    greatly simplify your code for dynamic HTML. </font></p>
    <p><font face="宋体">You may have noticed that, in the chart on the last page, there are 
    similarities in the syntax for most of the positioning properties - they just happen to 
    fall under different objects. So let's quickly solve this little problem with one 
    JavaScript routine.</font><ul>
      <pre><font face="宋体">&lt;script&gt;

function setup(){

   if(document.layers){

      daTruck = document.truck;

   } else if(document.all) {

      daTruck = truck.style;

   }

}

&lt;/script&gt;</font></pre>
    </ul>
    <p><font face="宋体">Now the <tt>moveIt</tt> function can read</font><ul>
      <pre><font face="宋体">function moveIt() {

   daTruck.left = parseInt(daTruck.left) - 5;

   if(parseInt(daTruck.left) &lt; 0){

      daTruck.left = 480;

   }

   setTimeout('moveIt()', 100);

}</font></pre>
    </ul>
    <p><font face="宋体">Much smaller, isn't it? So how about a quick assignment? Take the <a
    href="/webmonkey/98/10/files/dramatis_personae.html" target="_new&quot;">dramatis personae</a> 
    page that you built yesterday, and have all the <tt>DIV</tt>s fly in. Yes, I know it's 
    cheesy and overdone, but it's easy (which is why it's cheesy and overdone). Then move on 
    to the next page.</font></p>
    <p><font face="宋体"><!-- PAGE X LINKS --> <!-- this stuff checks if there are more pages in this story. if so, we'll
suck out the titles of those pages and build links. Right now, the maximum is
15 pages. --> <!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... --> Page 1: <b><a
    href="/webmonkey/98/10/index2a.html?tw=dynamic_html">Let's Look at Scripting</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... -->    Page 2: <b><a href="/webmonkey/98/10/index2a_page2.html?tw=dynamic_html">Syntax: Microsoft 
    vs. Netscape</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... -->    Page 3: <b><a href="/webmonkey/98/10/index2a_page3.html?tw=dynamic_html">Make It Work in 
    Both Browsers</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... -->    Page 4: <b><a href="/webmonkey/98/10/index2a_page4.html?tw=dynamic_html">How the Script 
    Works</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... -->    Page 5: <b><a href="/webmonkey/98/10/index2a_page5.html?tw=dynamic_html">A Trick for 
    Accessing Objects</a></b><br>
<!-- this is a mini-template that formats each pageX link. So, if a story
has 15 pages, we need to generate 15 links to it. This is how each one
will look... -->    Page 6: <b><a href="/webmonkey/98/10/index2a_page6.html?tw=dynamic_html">Make the Monkeys 
    Chase One Another</a></b><br>
    </font></font></td>
  </tr>
  <tr>
    <td width="155" valign="bottom"><font size="3"><font face="宋体">Want to print this 
    article? Use <a
    href="/webmonkey/templates/print_template.htmlt?meta=/webmonkey/98/10/index2a_meta.html"
    target="_blank">this</a> version. </font><p><font face="宋体">Questions? Comments? <a
    href="mailto:[e-mail]">Talk</a> to the monkey. </font></p>
    <p><font face="宋体">The Webmonkey Secret <a
    href="/webmonkey/hideout/index.html?tw=hideout">Hideout</a> </font></font></td>
  </tr>
</table>

<p><big><font face="宋体"><br>
<br>
</font></big></p>

<table width="568" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left"><font size="2"><font face="宋体"><a href="http://www.wired.com/home/"
    target="_top"><img align="left" hspace="0" valign="baseline"
    src="http://static.wired.com/meta/footer/w.gif" alt="[W]" height="16" width="16"
    border="0"></a>Wired Digital offers <a href="http://www.hotwired.com/" target="_top">HotWired</a>, 
    <a href="http://www.wired.com/news/" target="_top">Wired News</a>, <a
    href="http://www.hotbot.com/" target="_top">HotBot</a>, <a
    href="http://www.wired.com/wired/" target="_top"><cite>Wired</cite> magazine</a> online, <a
    href="http://www.suck.com/" target="_top">Suck</a>, <a href="http://www.livewired.com/"
    target="_top">LiveWired</a>, <a href="http://www.cocktailtime.com/" target="_top">Cocktail</a>, 
    <a href="http://www.hotwired.com/rough/" target="_top">The Rough Guide</a>, and <a
    href="http://www.newsbot.com/" target="_top">NewsBot</a>. </font><p><font face="宋体"><a
    href="/full.copyright.html" target="_top">Copyright</a> &copy; 1994-98 Wired Digital Inc. 
    All rights reserved. </font></font></td>
  </tr>
</table>
</body>
</html>