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

lovecontry

浏览: 1036923 次

最近访客更多访客>>

u012363178

seven.zhou

hone

zclzcllll

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1381)

社区版块

存档分类

最近在读<<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标签添加点击动作
functionprepareGallery(){
vargallery = document.getElementById("imagegallery");
varlinks = gallery.getElementsByTagName("a");

for(vari = 0; i < links.length; i++){

  links[i].onclick = function(){
returnshowPic(this);
}
}
}

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

  oldonload();

  func();
}
}
}


 addLoadEvent(prepareGallery);
////////////////////////////////////////////////////////////////////////