Web浏览器中的JavaScript(一)

  1. 外部引入js脚本的优点:

1)  可以把大块的Js代码从html文件中删除,这有助于保持内容和行为的分离,从而简化html文件。

2)  如果多个Web页面公用相同的JavaScript代码,用src属性可以让你只管理一份代码,而不用在代码改变时编辑每个html文件

3)  如果一个JavaScript代码文件由多个页面共享,就只需要下载它一次,通过使用它的第一个页面——随后的页面可以从浏览器缓存检索它

4)  由于src属性的值可以使任意的url,因此来自一个Web服务器的JavaScript程序或Web页面可以使用由另一个Web服务器输出的代码。

5)  从其他网站载入脚本的能力,可以让我们更好地利用缓存。Google正在为通用的客户端类库推广标准且好记的url,可以让浏览器只缓冲一份副本,并且网络上的任意站点都可以使用。链接JavaScript代码到Google服务器,可以减少Web页面的启动时间,因为这些类库可能已经存在于用户的浏览器缓存中,但你必须相信第三方提供的代码服务,这对于你的站点来说很关键。

2.url中的JavaScript:

在URL后面跟一个javascript:协议限定符,是一种嵌入JavaScript代码到客户端的方式.这种特殊的协议类型指定URL内容为任意字符串.这个字符串是会被JavaScript解释器运行的JavaScript代码.它被当做单独的一行代码对待,这意味着语句之间必须用分号隔开,而//注释必须用/**/注释代替。javascript:URL能识别的“资源”是转换成字符串执行代码的返回值。如果代码返回undefined,那么这个资源是没有内容的。

javascript:URL可以用在可以使用常规URL的任意地方:比如<a>标记href属性,<form>的action属性,甚至window.open()方法的参数。超练级里的javascriptURL可以是这样:<a href=”javascript:alert(new Date().toLocaleTimeString());” >检查时间,而不必覆盖整个文档</a>

当浏览器载入这种类型的URL时,它会执行JavaScript代码,但是由于没有返回值(alert()返回undefined)作为新文档的显示内容,类似FireFox的浏览器并不会替换当前的文档。(在这种情况下,JavaScript:URL和onclick事件处理程序的目的一样。上面的链接通过<button>元素的onclick处理程序来表示会更好,因为<a>元素通常应该保留为超链接,用来载入新文档。)-如果要确保javascript:URL不会覆盖当前文档,可以用void操作符强制函数调用或给表达式赋予undefined值。

<a href=”javascript:void window.open(‘about:blank’);”>打开一个窗口</a>

如果这个url里没有void操作符,调用window.open()方法返回的值会(在一些浏览器里)被转化为字符串并显示,而当文档也会被覆盖为包含该字符串的文档:

[object Windwo]

和html事件处理程序一样,javascript url是web早期的遗物,通常应该避免在现代html里使用。但javascript:url在html文档之外确实有着重要的角色。如果要测试一段javascript代码,那么可以再浏览器地址栏里直接输入javascript:url。

3.书签:在Web浏览器中,“书签”就是一个保存起来的url。如果书签是javascript:url,那么保存的就是一小段脚本,叫做bookmarklet。bookmarklet是一个小型程序,很容易就可以从浏览器的菜单或工具栏里启动。bookmarklet里的代码执行起来就像页面上的脚本一样,可以从浏览器的菜单或工具栏里启动。bookmarklet里的代码执行起来就像页面上的脚本一样,可以查询和设置文档的内容、呈现和行为。只要书签不返回值,它就可以操作当前显示的任何文档,而不把文档替换成新的内容。

考虑下面<a>标签里的javascript:url。单击连接会打开一个简单的javascript表达式计算器,它允许在页面环境中计算表达式和执行语句:

注意,即使这个javascript url是写成多行的,html解析器仍将它作为单独的一行对待,并且其中单行//注释也是无效的。还有,要记住代码是单引号的html属性的一部分,所以代码不可以包含任何单引号。

在开发时,把这样的链接硬编码在页面中是有用的;而把它另存为可以在任何页面上运行的书签,就更有用了。通常,在浏览器里把超链接的地址加入书签可以这样做,在链接上右击选择类似“Bookmark Link”的选项,或者拖动链接到书签工具栏。

4.如果web页面包含一个嵌入的窗体(通常使用<iframe>元素),嵌入文档中的Javascript代码和被嵌入文档里的Javascript代码会有不同的全局对象,它可以当做一个单独的Javascript程序。但是,要记住,没有严格的关于Javascript程序范围的定义。如果外面和里面的文档来自与同一个服务器,那么两个文档的代码就可以进行交互,并且如果你愿意,就可以把它们当做是一个程序的两个相互作用的部分。

5.bookmarklet里的Javascript:url存在于文档之外,可以想象成是一种用户扩展或者对于其他程序的修改。当用户执行一个bookmarklet时,书签里的Javascript代码就可以访问全局对象和文档的内容,以及对它们进行操作。

6.javascript程序的执行有两个阶段。在第一阶段,载入文档内容,并执行<script>元素里的代码(包括内联脚本和外部脚本)。脚本通常会按他们在文档里的出现顺序执行。通常所有脚本里的Javascript代码都是从上往下,按照它在条件,循环以及其他控制语句中的出现顺序执行。

当文档载入完成,并且所有脚本执行完成后,Javascript执行就进入它的第二阶段。这个阶段是异步的,而且是事件驱动的。在事件驱动阶段,Web浏览器调用事件处理程序函数(由第一阶段里执行的脚本指定的html事件处理程序,或之前的事件处理程序来定义),来响应异步发生的事件。调用事件处理程序通常是响应用户输入(如鼠标单击,键盘按下等)。但是,还可以由网络活动,运行时间或者Javascript代码中的错误来触发。嵌入Web页面里的Javascript:url也可以被当成是一种事件处理程序,因为直到用户通过单击链接或提交表单来激活之后他们才会有效果。

事件驱动阶段里发生的第一个事件是load事件,指示文档已经完全载入,并且可以操作。Javascript程序经常用这个事件来触发或发送消息。我们经常看到一些函数的脚本程序,除了定义一个onload事件处理函数外不做其他操作,这个函数会在脚本事件驱动阶段开始时被onload事件触发。正是这个onload事件会对文档进行操作,并做程序想做的任何事。Javascript程序载入阶段是相对短暂的,通常只持续1-2秒,在文档载入完成之后,只要Web浏览器显示文档,事件驱动阶段就会一直持续下去。因为这个阶段是异步的和事件驱动的,所以可能有长时间处于不活动状态。没有Javascript被执行。被用户或网络事件触发的活动打断。

核心Javascript和客户端Javascript都有一个单线程执行模型。脚本和事件处理程序(无论如何)在同一个时间只能执行一个,没有并发性。这保持了Javascript编程的简单性。

7.当html解析器遇到<script>元素时,它默认必须先执行脚本,然后再恢复文档的解析和渲染。这对于内联脚本没什么问题,但如果脚本源码是一个由src属性指定的外部文件,这意味着脚本后面的文档部分在下载和执行脚本之前都不会出现在浏览器中。(至文档的文本内容已经载入,但是未被浏览器引擎解析为DOM树,而DOM树的生成是受Javascript代码影响的,Javascript代码会“阻塞”页面UI的渲染。

8.脚本的执行只是在默认情况下是同步和阻塞的。<script>标签可以有defer和async属性,这(在支持他们的浏览器里)可以改变脚本的执行方法。这些都是布尔属性,没有值;只需要出现在<script>标签里即可。html5说这些属性只在和src属性联合使用时才有效,但有些浏览器还支持延迟的内联脚本。

<script defersrc="deferred.js" ></script>

<script async src="async.js"></script>

defer和async属性都像在告诉浏览器链接进来的脚本不会使用document.write(),也不会生成文档内容,因此浏览器可以再下载脚本时继续解析和渲染文档。defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析完成,并可以操作。async属性使得浏览器可以尽快地执行脚本,而不用在下载脚本时阻塞文档解析。如果<script>标签同时有两个属性,同时支持两者的浏览器会遵从async属性并忽略defer属性。注意,延迟的脚本会按他们在文档里的出现顺序执行。而异步脚本在他们在他们载入后执行,这意味着他们可能会无序执行。

9.按照约定,事件处理程序的属性的名字是以“on”开始,后面跟着时间的名字。还要注意在上面的任何代码里没有函数调用:只是把函数本身赋值给这些属性。浏览器会在事件发生时执行调用。用时间进行一步编程会经常涉及嵌套函数,也经常要在函数里定义函数。

时间: 2024-10-11 11:06:23

Web浏览器中的JavaScript(一)的相关文章

JavaScript权威指南第13章 web浏览器中的javascript

13.1 客户端javascript window对象是所有的客户端javascript特性和api的主要接入点.表示浏览器的一个窗口,可以通过window对象来引用它. window 的方法 alert() prompt() confirm() 13.2 在html里嵌入javascript 4种方法: 内联:放置在<script></script>标签之中 外部引入:<script src="   "></script> html程序

第十一章:WEB浏览器中的javascript

客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节同样涵盖重要的web应用所需要的网络编程API.本地存储和检索数据.画图等.主要包含内容有以下章节: web浏览器中的javascript / window对象 /  脚本化文档 /  脚本化css / 事件处理 / 校本化http / jQuery类库 / 客户端存储  /  多媒体和图形编程 /

《Javascript权威指南》 Web浏览器中的JavaScript

URL中的JavaScript 在URL后跟一个javascript:协议限定符,是一种嵌入javascript代码到客户端的方法.这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被javascript解析器运行的javascript代码.它被当做单独的一行代码,语句之间必须用分号隔开,注释用/**/.javascript:URL能识别的“资源”是转换成字符串的执行代码的返回值.如果代码返回undefined,那么这个资源是没有内容的. 可以在使用常规URL的任意地方:<a>的hr

Web浏览器中的JavaScript(二)

客户端Javascript时间线: 1)  Web浏览器创建Document对象,并开始解析Web页面,解析html元素和它们的文本内容后添加Element对象和Text节点到文档中.在这个阶段documen.readystate属性值是"loading" 2)  当HTML解析器遇到没有async和defer属性的<script>元素时,它把这些元素添加到文档中,然后执行行内或外部脚本.这些脚本会同步执行,并且在脚本下载(如果需要)和执行时解析器会暂停.这样脚本就可以用d

Node中的JavaScript和浏览器中的JavaScript的区别

浏览器中的JavaScript: 1.基于ECMAscript规范,这个规范规定了语法 2.添加了dom:用来处理文档 document object model 3.添加了BOM:用于操作浏览器 window location histrory navigator Node中的JavaScript 1.基于ECMAscript规范,这个规范规定了语法 2.因为他是在服务器端来实现服务器端操作的script,所有它没有DOM 3.它增加了核心API,使用频繁的API,内置到node的环境中 4.

web浏览器中javascript

1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; // 找到head节点 var s = document.createElement("script"); // 创建一个script标签 s.src = url; // 设置一个src属性 head.appendChild(s); // 插入标签到head节点中}2.事件驱动javas

Web浏览器中动态添加修改HTML页面代码的问题分析

引言:在Web的世界里,浏览器加载页面,展示给用户最终的内容,可是最终展示的HTML代码与服务器上存储的代码一致吗? 1.  xpath为什么不能正常工作? XPath是用来快速定位页面元素的方式和方法,忽然有一天,发现在页面中截取的XPath在代码的匹配中是无法工作的,那问题出在哪里呢? 页面地址:http://www.66ip.cn/ 截取匹配页面中的IP地址,基于Chrome浏览器自带的开发者工具,我们截取到某一个匹配的XPath路径为: //*[@id="main"]/div/

bala001 浏览器中的JavaScript执行机制:09 | 块级作用域:var缺陷以及为什么要引入let和const?

前言:该篇说明:|请见 说明 —— 浏览器工作原理与实践 目录 在前面<07 | 变量提升:JavaScript 代码是按照顺序执行的吗?>这篇文章中,我们已经讲解了 JavaScript 中变量提升的相关内容,正是由于 JavaScript 存在变量提升这种特性,从而导致了很多于直觉不符的代码,这也是 JavaScript 的一个重要设计缺陷. 虽然 ECMAScript6(以下简称 ES6 )已经通过引入块级作用域并配合 let.const 关键字,来避开了这种设计缺陷,但是由于 Java

Web网站中利用JavaScript中ActiveXObject对象获取硬件信息(显示器数量、分辨率)从而进行单双屏跳转

前言:最近这两天工作上,要实现一个功能,在好友阿聪的帮助下,算是比较好的解决了这个需求. B/S的Web网站,需要实现点击按钮时,根据客户端连接的显示屏(监视器)数量进行,单双屏跳转显示新页面. 由于是Web网站,项目是要发布在服务端上,通过后台去读硬件信息,也是读到的是服务器的硬件信息. 故考虑用JS中的ActiveXObject对象,读取到硬件的显示器(监视器)信息,比如数量.分辨率. 此处使用ActiveXObject对象,由于项目限制用的是IE9,打开窗口用的是window.open()