在HTML中使用JavaScript有两种方法:直接在页面中嵌入和引入外部的JS脚本。
直接嵌入和引入都需要用到,这里先介绍一下该标签:
<script></script>标签是双标记,需要成对出现(在XHTML中,可以简写成<script />,但是HTML标准不支持),该标签可以出现在页面的任何位置,该标签的可选参数有6个,废弃的和不常用的不再研究,部分如下:
async:异步脚本,只针对于引入外部脚本,表示立即下载脚本,因为在使用时如果要有多个异步脚本要确保或不依赖,所以一般不推荐使用,也不经常使用,了解就好;
defer:延迟脚本,等文档完全被加载后在下载该脚本,也是只对于外部脚本有效,因为HTML5会忽略,所以不必使用,了解就好;
src**:外部脚本的路径地址,引入脚本必须;
type:使用脚本语言的内容类型(MIME类型),一般为t,也会用text/javascript,在非IE系的浏览器,也可以是application/javascript或application/ecmascript,但是除了text/javascrip都不常用,其在HTML5里面,这一项可以省略,而且推荐省略。
在页面中直接嵌入JavaScript代码,实例如下:
<script>
//javascripe code
</script>
//如果是HTML5以前一般指定type
<script type="text/javascript">
//javascripe code
</script>
因为JavaScript是从上往下依次解释的, 所以在嵌入时要考虑到逻辑顺序(例如在获取一个节点的时候不可以在主体加载以前)
引入外部的脚本,实例代码如下:
<script src="xx/xxx.js"></script>
不要在引入的<script></script>标签 之间写脚本代码,会被忽略,且加载外部脚本也是从上向下加载的,要注意逻辑关系。
因为自上往下加载的特性,我们一般将脚本的加载放在主体的最后,以避免加载JS的时候造成HTML无法加载,造成的浏览器长时间空白造成的不良好用户体验(虽然这一点可以用defer延迟脚本实现,但是不推荐):
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
<noscript>元素,指在不支持JavaScript或脚本被禁止的时候,显示,否则,不会显示,现在已经很少使用了,因为目前绝大多数浏览器都默认支持JavaScript,使用如下:
<noscript>
<p>本页面需要浏览器支持(启用) JavaScript。
</noscript>