《JavaScript权威指南》----第13章 Web浏览器中的JavaScript(1) 学习记录

来源：互联网发布：网络协议分析与实现编辑：程序博客网时间：2024/05/16 14:09

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.onclick=function(){
             this.innerHTML=new Date().toString();
          };

Window对象的onload处理程序是最重要的事件处理程序之一。当显示在窗口中的文档内容稳定并可以操作它时会触发它。JavaScript代码通常也都封装在onload事件处理程序里。

</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>

0 0