参考书籍：《JavaScript 权威指南----ECMAScript5+HTML5DOM+HTML5BOM》编著：张亚飞

1.使用<script>元素定义JavaScript脚本代码

在HTML文档中，可以使用使用<script>元素向HTML页面中插入JavaScript脚本，<script>元素的语法格式如下：

<script type="脚本语言类型" src="外部脚本文件的URL"defer="defer" async="async"charset="外部脚本文件的字符编码">//<!--JavaScript代码//-->
</script>

参数说明：

● language="脚本语言类型"

已废弃。原来用于指定<script>元素的内容所使用的脚本语言，现已使用type属性来代替。

● type="脚本语言类型"

必需。该属性可以看成是language 的替代属性，用于指定<script>元素的内容所使用的脚本语言，属性值是W3C标准定义的内容类型（也称为MIME 类型），例如：“text/tcl”、“text/javascript”和“text/vbscript”。该属性在HTML4时没有默认值，HTML5规定其默认值是“text/javascript”。

● src="外部脚本文件的URL"

可选。该属性指定了所引用的外部脚本文件的URL。

● defer="defer"

可选。该属性用来通知浏览器，这段脚本代码不会产生任何文档内容，可以延迟到文档完全被解析和显示之后再执行。例如 javascript 脚本中的document.write()方法可以用来在当前的文档中创建内容，但也不是所有的javascript 脚本都会改变文档的内容。如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

● async="async"

可选。该属性用来指示是否异步加载所引用的外部脚本文件(仅适用于引入外部脚本)。

在HTML中，使用<script>元素插入JavaScript脚本代码时，必需将代码放在 <script type="text/javascript"> 和 </script> 标记对之间，有以下两种方式：

在<script>元素中嵌入脚本代码

<script>
//<!--
这里书写JavaScript代码
//-->
</script>

例如下面的HTML代码片段：

<script>
//<!--
function popupMsg(msg){
alert(msg);
}
//-->
</script>

通过<script>元素中的"src"属性引入外部脚本文件

<script src="这里书写JavaScript脚本文件的文件路径">
</script>

例如在HTML页面中引入JQuery函数库文件：

<script type="text/JavaScript" src="scripts/jquery-1.5.2.min.js"></script>

使用<script>元素定义的JavaScript脚本代码可以出现在HTML页面的<head></head>和<body></body>元素中，脚本代码写在这两个位置的区别如下：

在<head></head>元素中的脚本代码会在被调用的时候才执行。

在<body></body>元素中的脚本代码会在页面加载的时候被执行。

当然，你还可以把<script>元素定义的JavaScript脚本代码写到<html></html>元素的外面，不过这样的用法一般并不常见。

2.在事件属性中定义JavaScript脚本代码

JavaScript脚本代码也可以定义在事件属性值中，当用户和浏览器交互时，只要事件被触发，相应的脚本就会被执行。

例如下面这段HTML脚本代码：

<div onclick="alert('这个div被点击了！');">请点击这里！</div>

3.超链接中定义JavaScript脚本代码

用户还可以为超链接元素<a></a>的"href"属性定义JavaScript脚本代码，这就相当于是在浏览器的地址栏中执行JavaScript脚本代码。

例如下面的代码，前一个链接使用了一个事件属性配合，而第二个链接没有使用事件属性，二者可以实现相同的功能：

<script>
//<!--
function popupMsg(msg){
alert(msg);
}
//-->
</script>
<a href="javascript:void(0);" onclick="popupMsg('这是一个空链接')">这是一个空链接</a>
<a href="javascript:popupMsg('这是一个空链接');" onclick="">这是一个空链接</a>

当单击该链接时，都会调用一个自定义的函数popupMsg()，该函数会弹出一个警告框。

该方法还可以用来实现打开新窗口这样的操作，例如下面的代码将会打开一个新的空窗口：

<a href="javascript:window.open('about:blank');">打开新窗口</a>

甚至于，用户可以在浏览器地址栏中输入一段以 "javascript:" 作为前缀的脚本代码，都会被执行，例如下面的代码：

javascript:window.open('about:blank');

对于一些浏览器，如果在浏览器地址栏中输入以上语句，将会打开一个新窗口或新标签页，如图所示。

4.浏览器不支持脚本时应注意的问题

在HTML4中，规定可以在<script>元素中使用注释包含JavaScript代码，例如：

<script>
//<!-- JavaScript代码
function square(i){
return i*i;
}
document.write("结果是： ",square(5));
//-->
</script>

或者：

<script>
<!-- JavaScript代码
function square(i){
return i*i;
}
document.write("结果是： ",square(5));
-->
</script>

HTML4之所以这样规定，是因为当时还有很多浏览器不支持JavaScript，甚至也不支持<script>元素，当浏览器不支持<script>元素时，这样做就可以避免这些代码直接呈现为文本。

但是，当前不会再存在这种情况，<script>元素是HTML5标准所明确规定的，凡支持HTML5的浏览器都会支持<script>元素。

另外，还可以在HTML网页中在定义<script>元素的同时定义<noscript>元素，如果客户端浏览器可以识别脚本但设置了禁止执行脚本，那么就会执行<noscript>元素中的内容。例如：

<noscript>
<p>浏览器不支持JavaScript...</p>
</noscript>

5.声明脚本语言

因为HTML并不依赖于某个特定的脚本语言，所以文档创作者必须显式地告诉浏览器每个脚本所使用的语言，可以通过一个默认声明或者本地声明来完成。

默认的脚本语言

一般，应该在文档头部定义所使用脚本的默认语言，可以通过<meta>元素来实现。指定默认语言的<meta>元素声明的格式如下：

<meta http-equiv="Content-Script-Type" content="脚本语言类型"></meta>

这里，content属性的值是W3C标准定义的内容类型，比较常用的就是:"text/tcl"，"text/javascript"和"text/vbscript"。

如果没有使用<meta>元素指定默认语言，还可以通过HTTP报头的Content-Script-Type来设置默认语言。如下所示：

Content-Script-Type：脚本语言类型

脚本语言的本地声明

通过<script>元素的"type"属性可以指定其中的脚本代码所使用的脚本语言，这被称为本地声明。本地声明的脚本语言将会覆盖文档默认的脚本语言。

在HTML网页中书写JavaScript相关推荐

网页中插入javascript的几种方法
网页中插入javascript的方法常见的有两种: 一.直接使用html标记 JavaScript 可以出现在 html的任意地方.使用标记<script>-</script> ...
JavaScript程序基础（一）网页中引入Javascript的三种方法
JavaScript是一种基于对象的脚本编程语言,具有动态.跨平台.基于对象和安全等特性.它不需要经过编译,而是直接嵌入在HTML页面中运行,可把单纯的HTML页面转变成支持用户交互和事件响应的动态页 ...
网页中嵌入JavaScript+事件触发程序
嵌入方式: 1.JavaScript代码与HTML写在同一个文档中 JavaScript代码要放在<script>和</script>标签之间而且整个JavaScript代码 ...
python爬取js动态网页_Python 爬取网页中JavaScript动态添加的内容（一）
当我们进行网页爬虫时,我们会利用一定的规则从返回的 HTML 数据中提取出有效的信息.但是如果网页中含有 JavaScript 代码,我们必须经过渲染处理才能获得原始数据.此时,如果我们仍采用常规方法 ...
响应式网页设计之JavaScript基础
JavaScript 一.认识JavaScript 1.什么是JavaScript? 2.JavaScript的组成? 3.JavaScript用来做些什么? 2.JavaScript与java有什么 ...
python抓取网页信息_python抓取网页中的动态数据
一.概念网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器 ...
要Java显示script文字_Javasrcipt---HTML中使用Javascript
在HTML中使用Javascript: -------------------------------------------------------- 主要内容; 一. 二.嵌入脚本和外部引入脚本. ...
网页中加载flash的方法
自06年4月IE升级之后,网页中的flash就需要先激活ActiveX控件才能使用.不爽.SWFObject是有效解决这个问题的js代码(原来叫 FlashObject),目前版本是1.4,完全开源的 ...
P2-前端基础-网页中的实体（转义字符）
P2-前端基础-网页中的实体(转义字符) 1.概述在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格在HTML中有些时候,我们不能直接书写一些特殊符号比如:多个连续的空格,比如字母两侧的 ...

在HTML网页中书写JavaScript