《JavaScript DOM编程艺术》studyNote part2

(X)HTML与CSS使用方法

1、“Web的力量在于它最广泛的包容性，无条件的向每个人开放是它的一个基本特点。”

2、网页的三层结构
结构层：（X）HTML
表示层：CSS
行为层：JavaScript+DOM

3、最佳编程准则：
使用有意义的标记来构造内容
使用CSS把样式信息与核心内容分离开来
使用有着足够预留退路的JavaScript脚本来添加操作行为

4、网站子目录结构/images /styles /scripts ；CSS定义为layout.css负责页面布局、color.css颜色相关的信息、typography.css文本字型有关的CSS信息；全局JS函数放在global.js中

5、table的sumary属性的内容不会被可视化浏览器显示，对于很复杂的表格，添加一个summary属性使得那些用“听”的浏览者了解表格的内容。

6、  overflow属性的四种可取值与含义：
visible：不裁剪溢出的内容。
hidden：裁剪溢出的内容
scroll：类似于hidden，但会显示滚动条以便用户能够看到内容的其他部分
auto：类似于scroll，只有在真正发生溢出的时候才显示滚动条

7、ol为有序列表，ul为无序列表，dl为定义列表，style样式里的media参数用于指定样式表被接受的介质或媒体，缺省值是screen提交到计算机屏幕。

8、一般用来显示数据还是使用table，也不能一味的说它不好
<table><caption></caption><thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody></table>

9、包容在<li>标签里的列表项通常各占一行，若把display属性设置为none之后，那些列表项便可由纵向排列变成横向排列。

10、<abbr>与<acronym>的区别：例如把DOM念成一个单词dom，它就是acronym（字头缩写），如果念成三个字母D-O-M，它就是abbr（缩略语）。IE不支持<abbr>，<abbr>的childNodes.length永远为0

11、dl定义表项
<dl>
<dt>定义标题</dt>
<dd>定义描述</dd>
</dl>

12、blockquote元素包含一个可选属性cite，它的基本用途是给出一个用来告诉人们blockquote元素内容是来自何方的URL地址。

13、accesskey约定俗成的设置方法，参见：http://www.clagnut.com/blog/193，一般来说accesskey = “1”对应一个“返回主页”的链接，2对应一个“后退”链接，4对应“打开本站搜索”，9对应“联系方法”，0查看快速访问键清单。

14、独享CSS样式的定义：h2.special{}、h2#special{}
 
把多个JavaScript函数绑定到onload事件事件处理函数上

function addLoadEvent(func){
       var oldonload = window.onload;
       if(typeof window.onload != ‘function’){
       window.onload = func;
}else {
       window.onload = function(){
              oldonload();
              func();
              }
}
}

 

表单页面常用JS函数：
1、label元素的for属性可以把一条文本与某个表单字段关联在一起。例如，以下函数实现效果：当用户点击某个label元素所包含的文本，与之相关的表单字段就将获得输入焦点，并等待用户输入数据。

function focusLabels() {
  if (!document.getElementsByTagName) return false;
  var labels = document.getElementsByTagName("label");
  for (var i=0; i<labels.length; i++) {
    if (!labels[i].getAttribute("for")) continue;
    labels[i].onclick = function() {
      var id = this.getAttribute("for");
      if (!document.getElementById(id)) return false;
      var element = document.getElementById(id);
      element.focus();
    }
  }
}

 

2、resetFields()函数实现效果，当表单字段获得输入焦点时，自动删除它的默认值，当用户在未输入任何东西的情况下离开表单字段时，恢复它的默认值。

function resetFields(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.type == "submit") continue;
    if (!element.defaultValue) continue;
    element.onfocus = function() {
    if (this.value == this.defaultValue) {
      this.value = "";
     }
    }
    element.onblur = function() {
      if (this.value == "") {
        this.value = this.defaultValue;
      }
    }
  }
}

 

3、表单检查的两个函数：isFilled()和isEmail()

function validateForm(whichform) {
  for (var i=0; i<whichform.elements.length; i++) {
    var element = whichform.elements[i];
    if (element.className.indexOf("required") != -1) {
      if (!isFilled(element)) {
        alert("Please fill in the "+element.name+" field.");
        return false;
      }
    }
    if (element.className.indexOf("email") != -1) {
      if (!isEmail(element)) {
        alert("The "+element.name+" field must be a valid email address.");
        return false;
      }
    }
  }
  return true;
}

function isFilled(field) {
  if (field.value.length < 1 || field.value == field.defaultValue) {
    return false;
  } else {
    return true;
  }
}

function isEmail(field) {
  if (field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1) {
    return false;
  } else {
    return true;
  }
}

function prepareForms() {
  for (var i=0; i<document.forms.length; i++) {
    var thisform = document.forms[i];
    resetFields(thisform);
    thisform.onsubmit = function() {
      return validateForm(this);
    }
  }
}