Cocos Creator_JavaScript权威指南(第六版)_第13章_Web浏览器中的JavaScript

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_39710961/article/details/81741257

本书第一部分介绍了JavaScript语言核心。第二部分开始转向Web浏览器中JavaScript的讨论,通常称为客户端JavaScript。
Web浏览器中Web页面是如何呈现的。一些呈现静态信息的页面,叫做文档(由于加入了JavaScript,静态页面的信息看上去会动来动去,但信息本身是静态的),相对于文档来说,其他Web页面则感觉上更像应用。如果需要的话,这些页面可以动态载入新的信息,因此看起来更加图形化,而非文本化,并且他们可以进行离线操作,以及保存数据到本地,以便再次发访问时时进行状态恢复。此外,还有其他Web页面出于文档和应用的中间,结合了两者的特性。

13.1 客户端JavaScript
Window对象是所有客户端JavaScript特性和API的主要接入点。他表示Web浏览器的一个窗口或窗体,并且可以用标识符window来引用它。Window对象定义了一些属性,比如,指代Location对象的location属性,Location对象指定当前显示在窗口中的URL,并允许脚本往窗口里载入新的URL:

    //设置Location属性,从而跳转到新的Web页面
    window.location = "http://www.oreilly.com";

Window对象还定义了一些方法,比如alert(),可以掏出一个对话框来现实一些信息。还有setTimeout(),可以注册一个函数,在给定的一段时间之后触发一个回调:

    //等待两秒,然后说hello
    setTimeout(function(){alert(“hello world”);}, 2000);

注意上面的代码并没有显示地使用window属性。在客户端JavaScript中,window对象也是全局对象。这意味着Window对象处于作用域链的顶部,它的属性和方法实际上是全局变量和全局函数。Window对象有一个引用自身的属性,叫做window。如果需要应用窗口对象本身,可以用这个属性,但是如果只是想要引用全局窗口对象的属性,通常并不需要,通常并不需要用到Window。
Window对象还定义了很多其他重要的属性、方法和构造函数。
Window对象中其中一个最重要的属性是document,它引用Document对象,后者表示显示在窗口中的文档。Document对象有一些重要方法,比如getElementById(),可以基于元素id属性的值返回单一的文档元素(表示HTML标签的一对开始/结束标记,以及它们之间的所有内容)://查找 id=“timestamp”的元素 var timestamp = document.getElementById("timestamp");
getElementById()返回的Element对象有其他重要的属性和方法,比如允许脚本获取它的内容,设置属性等:

   //如果元素为空,往里面插入当前的日期和时间
   if(timestamp.firstChild == null)
      timestamp.appendChild(document.createTextNode(new Date().toString()));

每个Element对象都有style和className属性,允许脚本指定文档元素的CSS样式,或修改应用到元素上的CSS类名。设置这些CSS相关的属性会改变文档元素的呈现:

   //显示修改目标元素的呈现
   timestamp.style.backgroundColor = "yellow";
   //或者只改变类,让样式表指定具体内容
   timestamp.className = "highlight"

Window、Document和Element对象上另一个重要的属性集合是事件处理程序相关的属性。可以在脚本中为之绑定一个函数,这个函数会在某个事件发生时以异步的方式调用。事件处理程序可以让JavaScript代码修改窗口、文档和组成文档的元素的行为。事件处理程序的属性名是以单词”on”开始的,用法如下:

 //当用户单击timestamp元素时,更新它的内容
 timestamp.onclick = function(){ this.innerHTML = new Date().toString();}

Window对象的onload处理程序是最重要的事件处理程序之一。当显示在窗口中的文档

猜你喜欢

转载自blog.csdn.net/qq_39710961/article/details/81741257
今日推荐