JavaScript权威指南--WEB浏览器中的javascript

知识要点 

JavaScript权威指南--WEB浏览器中的javascript_第1张图片

1.客户端javascript

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

//设置location属性,跳转至新的页面
window.location = "https://www.baidu.com"

window对象还定义了一些方法,比如alert(),还有setTimeout()。

注意上面的代码并没有显式的使用window 属性。在客户端javascript中,window对象 也是全局对象。这意味着window对象处于作用域链顶部,它的属性和方法实际上是全局变量和全局函数。window对象有一个自身引用的属性,叫做window。如果需要引用窗口对象本身,引用引用这个属性。但是如果只想引用全局窗口对象的属性,通常不需要用到window。

window对象还定义了很多其他重要的属性、方法和构造函数,参见14章查看完整细节。

window对象中一个重要的属性是document,它引用Document对象,后者表示显示在窗口中的文档。Document有一些重要的方法,比如getElementByid()。

getElementById()返回的Element对象有其它重要的属性和方法,比如允许脚本获取它的内容,设置属性值等。

查询、遍历和修改文档将在15章做介绍。

每个Element对象都有style和className属性,允许脚本指定元素css样式,或修改元素上的css类名。16章会讲解style和className属性和其它css编程技术。

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

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

window对象的onload对象处理程序是最重要的事件处理程序之一。当显示在文档内的内容文档且可以操作时触发。javascript代码通常封装在onload事件处理程序里。17章会详细讲述事件。




    
    
    



    

文字title(Click Here)

文字内容

在本章的概要介绍到了,一些web页面感觉上像文档,而另一些则像应用。接下来的两节探讨javascript在两种页面类型里是如何使用的。

1.1.web文档里的javascript

javascript程序可以通过Document对象和它包含的Element对象遍历和管理文档内容。它可以通过操作css样式和类,修改文章内容的呈现。并且可以通过注册事件的处理辰星来定义文档的元素行为。内容、呈现和行为的组合叫动态HTML或者DHTML,会在13-17章里介绍到

javascript可以增强用户的体验:比如以下方式:

  • 创建动画和其它视觉效果,巧妙地引导和帮助用户进行页面导航。
  • 对表格进行分组,让用户更容易找到所需
  • 隐藏某些内容,当用户“深入”到内容时,逐渐展示详细信息。

1.2.web应用里的javascript

在web文档库使用的javascript DHTML特性在web应用里都会用到,对于web应用来说,除了内容、呈现和操作api之外,还依赖web浏览器环境提供更基础的服务。‘

要真正的了解web应用,需要先认识web浏览器已经有很好的发展了,现在不仅仅是显示文档的角色了,而渐渐变成简易的操作系统。想一下,传统操作系统允许组织桌面和文件夹里的图标(表示文件或应用);web浏览器允许在工具栏和文件夹里组织书签(表示文档和web应用)。系统可以在一个窗口里运行多个应用;web浏览器可以在一个标签里显示多个文档。操作系统定义很多底层的API、提供绘制图形,保存文件等功能。web浏览器也定义了底层API(18章)、保存数据(20章),和绘制图形(21章)。

谨记web浏览器是简单的操作系统的概念,这样就可以把web定义问用javascript访问更多浏览器提供的高级服务(比如网络、图形和数据存储)的web页面。高级服务里最著名的是XMLHTTPRequest,可以对HTTP请求编程来启动网络。web里是固体这个从服务器获取新信息,而不用从新载入页面。类似这样的web应用通常胶Ajax应用,Ajax构成了web2.0的脊梁。XMLHTTPRequest会在18章详细介绍。

HTML5标准和相关标准为web应用定义了很多其他重要的API。包括21章的数据存储和20章的图像API,以及很多其他特性的API,如地理位置信息,历史管理和后台线程。在实现这些API后,会开启一场web应用的功能革命。这些内容在22章会介绍。

2.在html嵌入javascript

有四种方法:

  • 内联 ,放置在之间
  • 放置在



    
    



    

2.2.外部文件中的脚本

标签之间的任何内容都会忽略掉,如果需要,可以在此处不错说明文档和版权信息,但要注意,如果有任何非空格或javascript的注释文本出现在此,html5校验器会报错。

下面是一些使用src属性的javascript的优点

  • 可以把大块的javascript代码从HTML文件中删除,这有助于保持内容和行为的分离
  • 如果多个javascript共有相同的javascript代码,用src属性的方式可以让你只管理一份代码,而不用再代码改变时而编辑每个HTML文件。
  • 如果一个javascript代码文件是多个页面共享,那么只需下载一次,通过使用它的第一个页面,随后是页面可以从浏览器缓存检索它。
  • 由于src是任意的url,因此来自一个web服务器的javascript程序或web页面可以使用另一个web服务器输出的代码。很多互联网广告依赖于此。
  • 从其他网站载入脚本的能力,可以让我们更好的利用缓存(CDN方式)。

从文档服务器之外的服务器里载入脚本有重要的安全隐患,6.2节介绍的同源安全策略会阻止一个域文档的javascript和另外一个域的内容进行交互。但是,要注意和脚本本身的来源并没有关系,而是和脚本嵌入的文档来源有关系。因此,同源策略和并不适合用在以下的情况,即便代码和文档有不同的来源,javascript代码也可以和它嵌入的文档进行交互,当在页面中用src脚本时,就给了脚本作者(以及从中载入这段脚本域的网站管理员)完全控制web页面的权限。

2.3.脚本类型

javascript是web元素脚本语言,而在默认的情况下,假定包含或引用javascript代码,如果使用不标准脚本语言,如Microsoft的VBScript(只有IE支持),就必须用type指定脚本的MIME类型

type的默认属性是"text/javascript"

当web浏览器遇到元素,并且当这个元素里包含其值不被浏览器识别的type属性时,它会解析这个元素但不会尝试显示或者执行它的内容。这意味着可以使用

当脚本把文本传递给document.write()时,这个文本被添加到文档输入流中,html解析器会在当前位置创建一个文本节点,将文本插入到这个文本节点后面

当HTML解析器遇到

defer和async属性都像在告诉浏览器链接进来的脚本不会使用document.write(),也不会生成文档内容,因此浏览器可以在下载脚本时继续解析和渲染文档。defer属性是使得的浏览器延迟脚本的执行,直到文本的载入和解析完成,并可以操作。async属性使得浏览器可以尽快的执行脚本,而不用在下载脚本时阻塞文档解析如果

你可能感兴趣的:(JavaScript权威指南--WEB浏览器中的javascript)