[技术学习]WEB技术学习总结1

 

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

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

• 结构层

• 表示层

• 行为层

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

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

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

设计一个网站或者WEB应用程序 ，需要按照结构、表示、行为三个层次对内容进行分离。这意味着：

• 使用（X）HTML去搭建文档的结构。

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

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

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

      

          
"imagegallery">

              "www.a.com" />


              "www.b.com" />  


              "www.b.com" />                         

          


                             

   


   可以将网页中的动作分离到以下的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);

  ////////////////////////////////////////////////////////////////////////