[关闭]
@tsingwong 2016-02-26T05:40:47.000000Z 字数 6524 阅读 790

DOM day9

DOM JavaScript

1. 项目简介

假设先需要为一个乐队设计网站，网站必须有一些交互特性，还要对残疾用户以及搜索引擎保持良好。网站主要目的是发布有关乐队的信息。

1. 原始资料

客户提交构建网站的东西：有关乐队的介绍资料、巡演日程，还有一些照片。核心用户体验就是把这个网站看称一个宣传手册。

2. 站点结构

根据客户提供的资料，可画出一张简单的站点图。站点结构不算复杂，至少把所有页面都放到一个页面。
为准备站点的制作，创建三个文件夹：

    /images：保存要用的图片
    /styles：保存Css文件
    /scripts：保存JavaScript文件

页面，首先有一个详细介绍乐队北京信息的页面，其次是一个类似相册的放照片的页面。巡回日程安排单独一个页面。还必须有一个联系页面。最后是要有一个主页，放上乐队简介和站点导航信息。：

    Home
    About
    Photos
    Live
    Contact

分别对应如下文件：

    index.html
    about.html
    photos.html
    live.html
    contact.html

每个页面内容不同，但他们都要使用相同的基本结构。

3. 页面结构

站点每个页面大抵分成下面这样几个区域：
1. 头部区域，包含站点的品牌性信息，即放logo的地方。这个区域要使用<header>元素。
2. 导航区域，包含一组链接，指向各个页面。这个区域使用<nav>元素。
3. 内容区域，包含每一页的实质性内容，这个区域使用<article>元素。

模版代码如下：

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Jay Skripts and the Domsters</title>
  7.     <script type="text/javascript" src="scripts/modernizr-1.6.min.js"></script>
  8. </head>
  10. <body>
  11.     <header>
  12.         <nav>
  13.             <ul>
  14.                 <li><a href="index.html">Home</a></li>
  15.                 <li><a href="about.html">About</a></li>
  16.                 <li><a href="photos.html">Photos</a></li>
  17.                 <li><a href="live.html">Live</a></li>
  18.                 <li><a href="contact.html">Contact</a></li>
  19.             </ul>
  20.         </nav>
  21.     </header>
  22. </body>
  24. </html>

2. 设计

知道了每个页面中包含的结构化元素，且已经有了客户提供的资料，使用图形设计工具（PhotoShop等），做出合适的任何风格的设计方案。
视觉设计之后，可以把平面设计切分成多个图片。把北京图片保存为background.gif。而品牌图像保存为 logo.gif。带有一点渐变的导航条命名为 navbar.gif。最后把人物剪影保存为guitarist.gif。把这些图片都放置到images文件夹中。

这里使用的是随书提供的图片。

3. CSS

现在有了基本的HTML模版，也知道自己的站点长什么样。通过为模版应用CSS，可以在Web上再现你的设计方案。
如果把所有CSS都放到一个文件，可能会为后期维护带来一些麻烦。故所有CSS分别放在几个文件中，建议如下设计：

        layout.css：保存与整体布局有关的样式。
        color.css：保存专门的颜色样式表。
        typography.css：保存与办事有关的样式。

这些样式表都可以导入到一个基本的样式表中：

  1. @import url(layout.css);
  2. @import url(color.css);
  3. @import url(typography.css);

保存为basic.css，存放在styles文件夹中，如果想添加一个新样式表或者删除一个样式时，只要编辑basic.css文件即可。
可以在模版的<head>元素中通过<link>元素引人这个基本样式表。然后，在页面<header>中添加一个<img>标签，指向logo图片。此时也可以向<artcle>中添加一些临时性填充文本。

1. 颜色

样式表color.css是最直观的。记住，不管为哪个元素应用什么颜色，都要同时给它一个背景色。否则，就有可能导致意外，看不到某些文本。

  1. body{
  2.     color: #fb5;
  3.     background-color: #334;
  4. }
  5. a:link{
  6.     /*未访问过的链接*/
  7.     color: #445;
  8.     background-color: #eb6;
  9. }
  10. a:visited{
  11.     /*已访问过的链接*/
  12.     color: #345;
  13.     background-color: #eb6;
  14. }
  15. a:hover{
  16.     /*鼠标指针悬浮在链接上*/
  17.     color: #667;
  18.     background-color: #fb5;
  19. }
  20. a:active{
  21.     /*活动链接，即点击链接*/
  22.     color: #778;
  23.     background-color: #ec8;
  24. }
  25. header{
  26.     color: #ec8;
  27.     background-color: #334;
  28.     border-color: #667;
  29. }
  30. header nav{
  31.     color: #445;
  32.     background-color: #789;
  33.     border-color: #667;
  34. }
  35. article{
  36.     color: #223;
  37.     background-color: #edc;
  38.     border-color: #667;
  39. }
  40. header nav ul{
  41.     border-color: #99a;
  42. }
  43. header nav a:link,header nav a:visited{
  44.     color:#eef;
  45.     background-color: transparent;
  46.     border-color: #99a;
  47. }
  48. header nav a:hover{
  49.     color: #445;
  50.     background-color: #eb6;
  51. }
  52. header nav a:active{
  53.     color: #667;
  54.     background-color: #ec8;
  55. }
  56. article img{
  57.     border-color: #ba9;
  58.     outline-color: #dcb;
  59. }
  60. #imagegallery a{
  61.     background-color: transparent;
  62. }

模版有了色彩。

2. 布局

基本布局还是比较简单，所有内容都在一栏中。为让导航中的链接水平排列，需要应用一些浮动效果。
首先，为HTML5块元素定义默认的样式。主要真对那些不支持它们的浏览器，好让这些元素都能够具有适当的块布局。
其次，使用通配选择器把所有元素的内外边距设置为零。这样就把不同浏览器为元素设置的不同内外边距全部删除。重设这些值之后，所有样式就可以一视同仁了。

  1. section,header,article,nav{
  2.     /*设置该元素为块级元素，此元素前后会有换行符*/
  3.     display: block;
  4. }
  5. *{
  6.     padding: 0;
  7.     margin: 0;
  8. }
  9. body{
  10.     margin: 1em 10%;
  11.     /*规定要使用的背景图像*/
  12.     background-image: url(../images/background.gif);
  13.     /*规定背景图像是否固定或者随着页面的其余部分滚动，默认scroll，滚动；当前不滚动*/
  14.     background-attachment: fixed;
  15.     /*规定背景图像的位置*/
  16.     background-position: top left;
  17.     /*规定如何重复背景图像，当前为沿着水平方向重复*/
  18.     background-repeat: repeat-x;
  19.     /*段落最大宽度*/
  20.     max-width: 80em;
  21. }
  22. header{
  23.     background-image: url(../images/guitarist.gif);
  24.     background-repeat: no-repeat;
  25.     background-position: bottom right;
  26.     /*规定边框的宽度、样式*/
  27.     border-width: .1em;
  28.     border-style: solid;
  29.     /*设置下边框的宽度*/
  30.     border-bottom-width: 0;
  31. }
  32. header nav{
  33.     background-image: url(../images/header navbar.gif);
  34.     background-position: bottom left;
  35.     background-repeat: repeat-x;
  36.     border-width: .1em;
  37.     border-style: solid;
  38.     border-bottom-width: 0;
  39.     border-top-width: 0;
  40.     padding-left: 10%;
  41. }
  42. header nav ul{
  43.     width:100%;
  44.     overflow: hidden;
  45.     border-left-width: .1em;
  46.     border-left-style: solid;
  47. }
  48. header nav li{
  49.     display: inline;
  50. }
  51. header nav li a{
  52.     display: block;
  53.     float: left;
  54.     padding: .5em 2em;
  55.     border-right: .1em solid;
  56. }
  57. article{
  58.     border-width: .1em;
  59.     border-style: solid;
  60.     border-top-width: 0;
  61.     padding: 2em 10%;
  62.     line-height:  1.8em;
  63. }
  64. article img{
  65.     border-width: .1em;
  66.     border-style: solid;
  67.     border-width: .1em;
  68.     outline-style: solid;
  69. }

这样已经通过CSS定义了颜色和布局。

3. 板式

字体、大小都应该放在板式这个css中，但内外边距应该如何放呢？
我们这里把内边距放在了布局中，外边距信息放在了板式中。

  1. body{
  2.     /*设置元素的字体尺寸，此处是基于父元素的百分值*/
  3.     font-size: 76%;
  4.     /*设置元素的字体类型，多个字体是为了浏览器不支持第一个字体会尝试下一个，以此类推*/
  5.     font-family: "Helvetica","Arial",sans-serif;
  6. }
  7. body * {
  8.     font-size: 1em;
  9. }
  10. a{
  11.     font-weight: bold;
  12.     /*规定添加到文本的修饰，上下划线等*/
  13.     text-decoration: none;
  14. }
  15. header nav{
  16.     font-family: "Lucida Grande","Helvetica","Arial",sans-serif;
  17. }
  18. header nav a{
  19.     text-decoration: none;
  20.     /*规定字体粗细*/
  21.     font-weight: bold;
  22. }
  23. article{
  24.     line-height: 1.8em;
  25. }
  26. article p{
  27.     margin: 1em 0;
  28. }
  29. h1{
  30.     font-family: "Georgia","Times New Roman",sans-serif;
  31.     font:2.4em normal;
  32. }
  33. h2{
  34.     font-family: "Georgia","Times New Roman",sans-serif;
  35.     font:1.8em normal;
  36.     margin-top: 1em;
  37. }
  38. h3{
  39.     font-family: "Georgia","Times New Roman",sans-serif;
  40.     font:1.4em normal;
  41.     margin-top: 1em;
  42. }
  43. #imagegallery li{
  44.     list-style-type: none;
  45. }
  46. textarea{
  47.     font-family: "Helvetica","Arial",sans-serif;
  48. }

至此，CSS文件已经基本完成。

4. 标记

模版做完，样式也基本完成，接下来考虑站点中的每个页面。
首先从主页index.html开始，该页面包含一段介绍性文字，放在<article>元素中。

5. JavaScript

在编写DOM脚本前，必须先确定怎么样组织JavaScript文件。如果站点需要很长的脚本，那最好是分割成几个小文件；如果所需JavaScript代码不长，为了减少请求的数量，把所有脚本都放在一个文件里，有助于最后缩减代码。

1. 页面突出显示

每当基于模版页面创建一个新页面时，都要向<article>元素中插入标记。
理想状况下，应该更新每个页面<nav>元素中的链接。比如，当前页面是index.html，那么导航里面就没必要添加指向当前index.html页面的链接。
但实际开发中，不可能一页一页地编辑导航链接。常见做法是通过服务器端包含技术，把包含导航标记的片段插入到每一个页面。这里假设服务器端包含下列代码：

  1. <header>
  2.     <img src="images/logo.gif" alt="Jay Skript and the Domsters" />
  3.     <nav>
  4.         <ul>
  5.             <li><a href="index.html">Home</a></li>
  6.             <li><a href="about.html">About</a></li>
  7.             <li><a href="photos.html">Photos</a></li>
  8.             <li><a href="live.html">Live</a></li>
  9.             <li><a href="contact.html">Contact</a></li>
  10.         </ul>
  11.     </nav>
  12. </header>

服务器端包含可以使用Apache Server Side Includes（SSIs）、PHP、ASP等，或者其他语言。
服务器端包含的优点是可以把重用标记块集中保存。这样以后更新页面头部或者导航链接时，就只需要修改一个文件即可。缺点是不能在每个页面中自定义这个块。

获取当前页面的URL：window.location.href
获取链接的URL：getAttribute("href")

JavaScript中比较字符串提供了很多方法。其中indexOf方法用于在字符串中寻找子字符串的位置：

    string.indexOf(substring)

这个方法返回子字符串第一次出现的位置。这里只想知道某个字符串是否被包含在另一个字符串中，是否是当前URL里的链接URL。

    currenturl.indexOf(linkurl)

如果没有匹配到，方法返回-1.如果返回其他值，即有匹配。
JavaScript中toLowerCase方法可以把文本转换成小写形式

2. 内部导航

提取部分值，使用split方法，这是根据分隔符把一个字符串分成两或多个部分的一种便捷方式：

array = string.split(character)

form对象：
HTML文档中的每个元素都是一个对象。每个元素都有nodeName、nodeType之类的DOM属性。
同样，文档中的每个表单元素都是一个form对象，每个form对象都有一个elements.length属性。这个属性返回表单中的包含的表单元素的个数：
from.elements.length
该返回值与childNodes.length 不一样，后者返回的是元素中所包含的所有节点的个数。而form对象的elements.length属性只关注那些属于表单元素的元素，如input、textarea等。
同理，包含所有表单元素的数组：
form.elements
与childNodes属性也不一样，后者数组返回的是所有节点，前者数组只返回inout、select、textarea及其他表单字段。
element.value 等同于
element.getAttribute("value")

3. 验证表单

编写验证表单脚本时要记住三件事：
1. 验证脚本写得不好，不如没有验证；
2. 千万不要完全依赖JavaScript。客户端验证并不能取代服务器端的验证。即使有了JavaScript验证，服务器端照样还应该对接收到的数据再次验证。
3. 客户端验证的目的在于帮助用户填写好表单，避免提交未完成的表单，从而节省他们的时间。服务器端验证的目的在于保护数据库和后台系统的安全。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注