13.1 客户端JavaScript
户Web浏览器中的JavaScript通常被称之为客户端JavaScript。一些呈现静态信息的网页页面,叫做文档(document)。相对文档来说,其他Web页面则感觉更像是应用,这些页面可以动态载入新的信息,且可以进行离线操作,以及保存数据到本地。此外,还有其他Web页面处于文档和应用的中间,结合了两者的特性。
1.客户端JavaScript
Window对象是所有客户顿JavaScript特性和API的主要接入点。它表示Web浏览器的一个窗口或窗体,并且可以用标识符Window来引用它。Window对象定义了一些属性,比如,指代Location对象的location属性,Location对象指定当前显示在窗口中的URL,并允许脚本往窗口载入新的URL.
window.location='http://www.baidu.com'; //必须加上http://前缀,否则JavaScript只会在本地服务器中寻找URL
Window对像还定义了一些方法,比如alert(),可以弹出一个对话框来显示一些信息,还有setTimeout(),可以注册一个函数,在给定的一段时间后去触发一个回调:
setTimeout(function(){alert('Hello JavaScript');},2000);
上述代码中并没有显示地使用window属性。这是因为Window对象是一个全局对象,处于作用域链的顶端,其属性和方法实际上也是全局变量和全局函数。如果需要引用Window对象本身的话,可以用window属性,但如果想引用Window对象的属性或者方法的话,通常并不需要用到window属性。
在Window对象中,最为重要的属性就是document,没有之一,它引用了Document对象,表示在窗口中的文档。
Document有一些即为重要的属性和方法,比如getElementById(),此方法返回的Element对象有其他重要的属性和方法,比如允许脚本获取它的内容,设置属性值等,
<ul>
<li id="timestamp"></li>
</ul>
<script>
var timestamp = document.getElementById("timestamp");
if(timestamp.firstChild==null){
timestamp.appendChild(document.createTextNode(new Date().toString()));
}
</script>
每一个Element对象都有style和className属性,对这些属性进行设置能使我们方便地去改变文档中元素的呈现样式:
timestamp.style.backgroundCoor="yellow"; //属性名注意使用驼峰式命名法,因为在这里JavaScript是会区分大小写的
tmestamp.className="highlight";
Window,Document和Element对象上另一个重要的属性集合就是事件处理程序相关的属性,它可以让JavaScript代码修改窗口,文档和组成文档的元素的行为。
timestamp.οnclick=function(){
this.innerHTML=new Date().toString();
};
Window对象的onload处理程序是最重要的事件处理程序之一。当显示在窗口中的文档内容稳定并可以操作它时会触发它。JavaScript代码通常也都封装在onload事件处理程序里。
<script>
window.onload = function(){
var elements = document.getElementsByClassName("reveal");
for(var i = 0;i<elements.length;i++){
var elt = elements[i];
var title = elt.getElementsByClassName("handle")[0];
addRevealHandler(title,elt);
}
function addRevealHandler(title,elt){
title.onclick = function(){
if(elt.className=="reveal")
elt.className = "revealed";
else if(elt.className=="revealed")
elt.className = "reveal";
};
}
};
</script>
<body>
<div class="reveal">
<h1 class="handle">Click Here to Reveal Hidden Text</h1>
<p>This text is hidden.It appears when you click on the title</p>
</div>
</body>