PPK on JavaScript 笔记 4

第4章 准备

准备阶段最重要是关于HTML/CSS和Javascript如何协作的问题。

浏览器初始化顺序是首先脚步，然后是statements，最后是html。

如果在js里面直接引用body里面的element就会报错，最好是把执行脚本放到函数里调用。

function  initializePage() {
        var  x  =  document.getElementById('test');
       x.onclick  =   function  () {alert('Hello world ! ')};
}
window.onload  =  initializePage;

一些常见的钩子

id：创建钩子最简单的方法，每个id在文档中只能使用一次。
var x = document.getElementById('hook');

var  x  =  document.getElementById('hook');

class：可以为一系列的元素初始化相同的行为。

var  lists  =  document.getElementsByTagName('ul');
for  ( var  i = 0 ; i < lists.length; i ++ ) {
     if  (lists[i].className  !=  'menutree')  continue ;
     // 初始化行为
}

自定义属性：即不属于(X)HTML规范的属性，这是不合法的，但有时为了脚本的方便使用它。

var  maxLength  =   this .getAttribute('maxlength');

名/值对：即写成如下的形式，然后从className中通过操作字符串获取状态。

< textarea class = " maxlength=300 " ></ textarea >

准备页面：设置事件处理程序，确定访问者状态，设置访问，产生内容，定义关系(relatedElement)，修改文档结构。

<script>标签

defer属性：表示正在加载中的脚本不包含任何会改变HTML的指令（如document.write）。Explorer仅在页面已经完全加载之后才会执行拥有defer属性的脚本。

XHTML规定包含内容的script标签必须定义成CDATA，它会告诉XML/HTML解释器不要解析这些内容，而是直接送给脚本引擎。

< script type = " text/javascript " >
// <![CDATA[
alert('Hello World ! ');
// ]]>
</ script >

所有的脚本都被注册到HTML的全局对象中，同一个变量可以在多个脚本中使用，且为最后定义的那个。

当浏览器遇到script标签时，发送一个HTTP请求去获取脚本文件，解析其中的脚本，对HTML页面的分析和渲染暂停，直到脚本加载完成。

load事件会在页面完全加载时触发，window.onload = ; 多次设置onload会覆盖之前的设置，需要编写函数在同一个元素上设置多个事件处理程序。

等待load时会因为图片等造成延迟，这个问题很难解决，目前只有Mozilla支持的DOMContentLoaded事件，在文档加载完成后执行，不必等待图片。