2019-01-09js4 分钟读完 (大约 633 个字)

《JavaScript高级程序设计》：第二章

如何在在html文档中使用javascript。

script标签

script标签定义了6个属性：

async：可选，立即下载但不妨碍页面中的其他操作，只对外部脚本文件有效。
charset：可选，表示src指定的代码字符集，基本不用这个属性。
defer：可选，表示延迟到文档完全解析和渲染后执行，只对外部脚本文件有效。
language：已废弃。
src：可选，外部脚本路径。
type：可选，可以看成language的替代品，表示MIME类型，值可以为”text/javascript”或者不写。

只要不包含async和defer，浏览器会从上到下依次解析js文件。

引入js的方式

html文件中嵌入js代码。

1
2
3

<script type="text/javascript">
    // js code
</script>

html文件中包含外部js代码。

1	<script type="text/javascript" src="main.js"></script>

以上方式若在标签中嵌入js代码会被浏览器忽略。

可以包含来自外域的js文件，利用这点可以包含位于cdn上的js文件来提高下载速度。

标签的位置

为了避免因为下载js文件带来的阻塞，一般将<script>放在body标签中的最后面。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- html code -->
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

延迟脚本

defer属性：表明脚本执行不影响页面构造，会延迟到页面解析完运行。浏览器会立刻下载但延迟执行。

最好只包含一个带defer属性的脚本。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
    <script type="text/javascript" src="main.js" defer="defer"></script>
</head>
<body>
	<!-- html code -->
</body>
</html>

一般不使用defer而是将标签放在body中最后面。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- html code -->
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

异步脚本

async也只用于外部脚本文件，作用是告诉浏览器立刻下载但是不能保证按照指定的顺序下载。

故而只能用于不依赖脚本顺序的情况。

html中使用async：

1	<script type="text/javascript" src="main.js" async></script>

XHTML中使用async：

1	<script type="text/javascript" src="main.js" async="async"></script>

一般不用async。

在XHTML中用法

本节内容可以跳过，应该遵循html5标准。

嵌入脚本与外部脚本

推荐使用包含外部脚本。

优点：可维护，可缓存，适应未来。

noscript标签

让页面平稳退化，只有浏览器不支持或未开启js的时候会显示<noscript>中的内容，放在body中。

1
2
3

<body>
    <noscript>javascript没有开启或浏览器不支持</noscript>
</body>

记笔记太浪费时间，从第三章开始就不记了。

支付宝

微信