第1章 JavaScript实现与在HTML中使用

最新推荐文章于 2023-04-16 23:01:23 发布

WEL测试

最新推荐文章于 2023-04-16 23:01:23 发布

阅读量1.2k

点赞数

分类专栏： # Javascrpt学习笔记文章标签： javascript javascript属性 JavaScript标签位置

本文为WEL测试原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/henni_719/article/details/53167854

版权

Javascrpt学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

第1章JavaScript实现与在HTML中使用

1.1 JavaScript实现

一个完整的JavaScript实现应该由下列三个不同的部分组成：

1.1.1 ECMAScript

由ECMAScript定义的ECMAScript与Web浏览器没有依赖关系。实际上在，这门语言本身并不包含输入和输出定义。常见Web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。ECMA-262规定了ECMAScript的下列组成部分：语法、类型、语句、关键字、保留字、操作符、对象。

1.1.2 文档对象模型(DOM)

DOM是针对XML但经过扩展用于XHTML的应用程序编程接口。DOM把整个页面映射为一个多层节点结构。HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点又包含着不同类型的数据。

<html>
     <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

在DOM中，这个页面可以通过下图分层节点图表示，通过DOM创建的表示文档的树形图，开发人员可以获得控制页面内容和结构的主动权。根据DOM提供的API，开发人员可以轻松自如地删除、添加、替换或修改任何节点。

1.1.3 浏览器对象模型(BOM)

BOM只处理浏览器窗口和框架；但习惯把针对浏览器的JavaScript扩展算作BOM的一部分。例如如下扩展：

Ø 弹出新浏览器窗口的功能

Ø 移动、缩放和关闭浏览器窗口的功能

Ø 提供浏览器详细信息的navigator对象

Ø 提供浏览器所加载页面的详细信息的location对象

Ø 提供用户显示器分辨率详细信息的screen对象

Ø 对cookies支持

Ø 像SMLHttpRequest和IE的ActiveXObject自定义对象

由于没有BOM标准可以遵循，因此每个浏览器都有自己的实现方式。

1.2 在HTML中使用JavaScript

只要一提到把JavaScript放到网页中，就不得不涉及Web的核心语言HTML。在开发JavaScript的时候，Netscape要解决：如何做到让JavaScript既能与HTML页面共存，又不影响那些页面在其他浏览器中呈现效果？经过尝试、纠错和争论，最终的决定就是为Web增加统一的脚本支持。

1.2.1 <script>元素

向HTML页面中插入JavaScript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在NetscapeNavigator 2中首先实现。后来这个元素被加入HTML规范中，HTML4.01为<script>定义了6个属性：

Ø async：可选。表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

Ø charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

Ø defer：可选。表示脚本可以延迟到文档完全被解析和显示之后在执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

Ø language：已废弃。原先用于表示编写代码使用的脚本语言(如JavaScript、JavaScript1.2、VBScript)。大多数浏览器会忽略这个属性。

Ø src：可选。表示包含要执行代码的外部文件。

Ø type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript，但是type中设置这个值可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/JavaScript和application/ecmascript。考虑到最大限度的浏览器兼容性，目前type属性的值依旧还是text/javascript。这个属性不是必须的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用<script>元素的方式有两种：直接在页面中嵌入JavaScript代码、包含外部JavaScript文件。

在使用<script>元素嵌入JavaScript代码时，只须为<script>指定type属性。像下面这样把JavaScript代码直接放在元素内部即可：

<script type="text/javascript">
	function sayHi(){
	alert("Hi!");
	}
</script>

包含在<script>元素内部的JavaScript代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕前，页面中的其余内容都不会被浏览器加载或显示。

在使用<script>嵌入JavaScript代码时，不要在代码中的任何地方出现"</script>"字符串。例如，浏览器在加载下面所示的代码时就会产生一个错误：

<script type="text/javascript">
	function sayScript(){
	alert("</script>");
	}
</script>

按照解析嵌入式代码的规则，当浏览器遇到字符串"<\script>"时，就会认为那是结束的</script>标签。通过转义字符"/"解决这个问题，例如：

<script type="text/javascript">
	function sayScript(){
	alert("<\/script>");
	}
</script>

这样写代码浏览器可以接受，而不会导致错误。如果要通过<script>元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接,例如：<scripttype="text/javascript" src="example.js"></script>。外部文件example.js将被加载到当前页面中。外部文件只须包含通常要放在开始的<script>和结束的</script>之间的那些JavaScript代码即可。与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件时(包括下载该文件)时，页面的处理也会暂时停止。如果是在XHTML文档中，也可以省略前面示例代码中结束的</script>b标签，如：<script type="text/javascript"src="example.js" />

需要注意的是，带有src属性的<script>元素不应该在其<script>和</script>标签之间在包含额外的JavaScript代码。如果包含了嵌入代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL:

<script type="text/javascript"src="http://www.somewhere.com/afile.js"></script>

这样，位于外部域中的代码也会被加载和解析，就像这些代码位于加载它们的页面中一样。利用这一点就可以在必要时通过不同的域来提供JavaScript文件。不过，在访问不能控制的服务器上的JavaScript文件时则要多加小心。如果想要包含来自不同域的代码，则要么是那个域的所有者，要么是那个域的所有者值得信赖。无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。

1.2.2 标签的位置

按照传统的做法，所有<script>元素都应该放在页面的<head>元素中。这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。在文档的<head>元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现也慢慢时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容的后面。在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了。

1.2.3 延迟&异步脚本

HTML4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕再运行。在<script>t元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

defer属性只适用于外部脚本文件。在HTML5中已经明确规定，因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。把延迟脚本放在页面底部仍然是最佳选择。

HTML5为<script>元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。为此，建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。