WEB技术学习总结1

最新推荐文章于 2023-12-20 09:49:23 发布

转载最新推荐文章于 2023-12-20 09:49:23 发布 · 627 阅读

文章标签：

#web #function #javascript #html #css #xhtml

最近在读<<JavaScript Dom编程艺术>>(http://www.douban.com/subject/1921890/)一书，总结了一部分有价值的设计思想。

网页可以由以下三个层次构成一个共同体：

结构层

表示层

行为层

结构层：网页的结构层是由HTML或XHTML之类的标记语言负责创建。标签对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何有关内容的信息。

表示层：网页的表示层由CSS负责创建。CSS对“如何显示有关内容”的问题做出了回答。

行为层：网页的行为层负责回答“内容应该如何对事件做出反应”这一问题，这一层主要通过JavaScript和DOM技术来实现。

设计一个网站或者WEB应用程序，需要按照结构、表示、行为三个层次对内容进行分离。这意味着：
使用（X）HTML去搭建文档的结构。

使用CSS去设置文档的呈现效果。

使用DOM脚本去实现文档的行为。

这本书还介绍每一个层次的分离方法：结构层和行为层的分离是比较简单，CSS本身提供了一系列机制来对HTML内容添加显示样式。本书作者重点介绍了结构层（HTML）和行为层（JS脚本）分离的方法。如对于如下的HTML文件 test.html:

      <body>
          <div id="imagegallery">
              <a href="www.a.com" />

              <b href="www.b.com" />

              <b href="www.b.com" />
          </div>
      </body>
   </html>

   可以将网页中的动作分离到以下的JS文件test.js:
////////////////////////////////////////////////////////////////////////
// 为每个a标签添加点击动作
function prepareGallery() {
      var gallery = document.getElementById("imagegallery");
      var links = gallery.getElementsByTagName("a");

      for ( var i = 0; i < links.length; i++) {
          links[i].onclick = function() {
              return showPic(this);
          }
      }
}

// addLoadEvent用于添加在页面加载完毕时执行的函数
function addLoadEvent(func) {
      var oldonLoad = window.onload;
      if (typeof window.onload != 'function') {
          window.onload = func;
      } else {
          window.onload = function() {
              oldonload();
              func();
          }
      }
}

addLoadEvent(prepareGallery);