JavaScript 简介和嵌入 HTML 页面的方法

—— 跟我一起学 JavaScript (1)

1 JavaScript 简介

JavaScript 是一种专为网页设计的交互式脚本语言。她由以下三部分组成:

  • ECMAScript:由 ECMA-262 定义,提供核心语言功能。
  • 文档对象模型(DOM):提供访问和操作网页内容的 API。
  • 浏览器对象模型(BOM):提供访问和操作浏览器的 API。

这三个部分,在目前主流的五大浏览器中(Chrome、Firefox、IE、Safari、Opera)都得到了不同程度的支持。

2 嵌入 HTML页面

2.1 script 元素的属性

属性名称 说明 是否可选 是否只对外部文件有效
async 异步下载脚本
charset 指定字符集 (已废弃)
defer 延迟到文档完全被解析并显示后再执行
language 指定脚本语言 (已废弃)
src 指定外部脚本文件
type 指定脚本语言内容类型(MIME 类型)

* type 属性可以看做是 language 属性的替代品。一般是 text/javascript

2.2 script 标签的位置

因为所有的 script 元素(没有使用 defer 或者 async 属性)都会依照它们在页面上出现的位置,依次解析执行。所以我们一般把这些脚本引用放在 body 元素中页面呈现代码的后面。这样在解析脚本之前,页面的内容已经完全被渲染出来了。给用户的感觉就是页面加载的速度变快了,这样做是不是很容易就提升了用户体验 O(∩_∩)O~。


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
head>
<body>

<script type="text/javascript" src="xxx1.js">script>
<script type="text/javascript" src="xxx2.js">script>
body>
html>

2.3 其它需要注意的地方

  • 可以使用 src 属性指定外部脚本文件 URL。这个 URL 既可以是同一个服务器上的文件,也可以是其他域上的文件。
  • 在现实中,defer 属性所设定的延迟脚本不一定会按照定义的顺序执行,所以最好一个页面只包含一个延迟脚本。
  • 使用 async 属性的脚本,表示是异步执行,它不会阻塞其它脚本的下载与执行,也不会阻塞页面的呈现。但这些异步脚本的执行顺序是不确定的。
  • noscript 元素在不支持脚本的浏览器(这在如今几乎不可能)或者在被禁用脚本的浏览器中,会显示替代内容。在支持脚本的情况下,是不会出现在页面上的哦 O(∩_∩)O~。

你可能感兴趣的:(JavaScript,HTML)