JavaScript 入门

引例

//tell the browser to run this script when the page has finished loading
window.onload = insertDateTime;

//insert the data & time
function insertDateTime(){
  //ensure a DOM-aware user agent
  if(!document.getElementById) return;
  if(!document.createTextNode) return;

  //create a date-time object
  var oNow = new Data();

  //get the current date & time as a string
  var sDateTime = oNow.toLocaleString();

  //point to the target element where we want to insert the date & time
  var oTarget = document.getElementById('output');
  //make sure the target is found
  if(!oTarget) return;

  //delete everything inside the target
  while(oTarget.firstChild){
    oTarget.removeChild(oTarget.firstChild);
  }

  //use the date-time string to create a new text node for the page
  var oNewText = document.createTextNode(sDateTime);

  //insert the mew text into the span
  oTarget.appendChild(oNewText);
}

解析

触发事件

脚本要把日期和事件插入到页面的段落中,但浏览器在读取和运行JavaScript代码之前,并没有读取HTML体.在JavaScript开始运行时,要插入新内容的段落甚至在浏览器的内存中不存在.
解决办法就是告诉JavaScript,在文档完全读入内存之前,不要执行插入操作.为此使用了onload事件.页面的元素(在DOM中称为对象)可以感知很多事件,例如 鼠标单击或按下一个键. 文档加载到浏览器中后,就会触发window对象的onload事件.
window.onload = insertDateTime;告诉JavaScript,文档加载完毕后调用insertDateTime()函数.

确保一个安全的环境

```
//ensure a DOM-aware user agent
if(!document.getElementById) return;
if(!document.createTextNode) return;
```
这里调用的getElementById()和createTextNode()是两个某些旧的JavaScript解释器不能理解的DOM方法.感叹号!表示”not”,return告诉JavaScript停止运行当前的函数. 如果不包含这些保护措施,某些老式的浏览器或其JavaScript解释器就会在运行其后代码的时候崩溃.

生成日期和时间

要插入这个文档中的文本是当前的日期和时间.JavaScript很容易完成这个插入操作:创建一个Date对象,并使用它的一个方法生成字符串:
```
//create a date-time object
var oNow = new Date()
//get the current date & time as a string
var sDateTime = oNow.toLocaleString();
```
这些代码把oNow变量设置为一个新的Date对象.之后使用其toLocaleString()方法输出一个文本字符串,它包含:Thrusday, August 20, 2009 4:16:05 PM

确定目标

下一步就是把日期和事件插入文档中需要的位置.执行了以下操作:

指向目标span元素
删除该文本中已有的文本
在元素中插入新的文本

为了指向output span,使用ID的方式来定位:
var oTarget = document.getElementById('output');
该语句通过ID(ouput)lai定位目标元素,并把该对象的引用存储在oTarget变量中.
HTML规范指出,每个元素的ID在当前页面必须是唯一的,即使不小心在页面上使用了相同的ID,getElementById()方法也仅返回第一个ID实例.所以,这个方法仅定位一个元素.(本例中就是span元素)
如果getElementById()没有找到对应的ID,则将返回空值.为了避免由于疏忽导致的这类错误,采用if(!oTarget) return;这个测试语句.
也可以将这个错误变成警告提示:if(!oTarget) return alert("Warning: output element not found!");

删除原来的内容

我们要删除span的文本,再插入新内容.在表示页面内容的DOM中,span是其所有子元素的父元素.span现在只有一个子元素:单词”now”.
为了删除span的内容,执行一个简单的循环.只要还有要删除的元素,该循环就一次删除一个子元素:
```
//delete everything inside the target
while(oTarget.firstChild){
oTarget.removeChild(oTarget.firstChild);
}
```
在本例中这个循环只会执行一次.

插入日期和时间

最后在DOM中创建一个包含所有所需文本的新节点,并插入span:
`
//use the date-time string to create a new text node for the page
var oNewText = document.createTextNode(sDateTime);

//insert the new text into the span
oTarget.appendChild(oNewText);
`
sDateTime是从Date对象中生成的字符串.

这里调用document对象关联的一个方法,该方法会创建一个新的文本节点,并把日期和事件字符串作为其值.此时该文本结点还不是可见文档内容的一部分,使用目标元素的appendChild()方法就可以插入它.