How to use Javascript in Html.

前言

认识 javascript 如何运用在 html 中, 嵌入的多种方式, 还会讨论 javascript 的内容类型(content-type)及其与 <script> 元素的关系.

本篇主要记录:

使用 <script> 元素
嵌入脚本与外部脚本
文档模式对 JavaScript 的影响
考虑禁用 JavaScript 的场景

使用 <script> 元素

向 HTML 中插入 JavaScript 的主要方法, 就是使用 <script>. 这个元素有 NetScape 创造并在 NetScape Navigator2 中首先实现. HTML4.01 为其定义了下列6个属性:

async: 表示立即下载脚本, 但不妨碍页面中的其他操作. 可选
charset: 指定代码的字符集. 可选
defer: 脚本延迟, 表示文档完全被解析和显示之后在执行. 可选
language: 表示编写代码使用的脚本语言, 如: JavaScript, JavaScript1.2 或 VBScript. 已废弃
src: 引入外部文件. 可选
type: 可以看作是 language 的替代属性, 表示编写代码的脚本语言的内容类型(MIME), type="text/javascript". 可选

嵌入脚本与外部脚本

<!-- 内部嵌入 -->
<script type="text/javascript">
  function hello() {
    alert('hello')
  }
</script>

1 2	<!-- 外部引入 --> <script type="text/javascript" src="demo.js"></script>

文档模式对 JavaScript 的影响

文档模式

IE 5.5 引入了文档模式的概念, 是使用文档类型 (doctype) 切换实现的. 最初的文档模式有: 混杂模式 和 标准模式.

`混杂模式` 会让 IE 的行为与 IE5(包含非标准性的) 相同.
`标准模式` 则让IE行为更接近与标准行为.

这两种模式主要影响 CSS 内容的呈现, 但在某些情况下也会影响 JavaScript 的解释执行.

如果在文档开始发现没有文档类型声明, 则所有的浏览器都会默认开启 混杂模式, 在不值得推荐.

对于标准模式, 可以通过使用下面任何一种文档类型来开启:

<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- HTML 5 -->
<!DOCTYPE html>

而对于准标准模式, 则可以通过使用过渡型(transitional)或框架集型(frameset) 文档类型来触发:

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

现在大多数文档渲染模式, 都已倾向于 html5.

考虑禁用 JavaScript 的场景

早期浏览器面临一个特殊的问题, 即当浏览器不支持 JavaScript 时如何让页面平稳的退化. 对这个问题的解决方法是创建一个 <noscript>, 用以在不支持 JavaScript 的浏览器中显示替代的内容.

浏览器不支持脚本
浏览器支持脚本, 但脚本被禁用

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo For NoScript</title>
    <script type="text/javascript" defer="defer" src="demo.js"></script>
    <script type="text/javascript" defer="defer" src="fun.js"></script>
</head>
<body>
<noscript>
    <p>本页面需要浏览器支持或启用 Javascript</p>
</noscript>
</body>
</html>

总结

考虑到页面加载的性能于顺序, 通常我们把 Script 脚本放在页脚, 即主要内容后面, </body> 标签前面.

在 HTML 中使用 Javascript

FEATURED TAGS

FRIENDS