在HTML中使用JavaScript
在前端开发中，HTML是整个页面的基石，用于控制页面的结构，如果没有HTML的话，JavaScript也将无用武之地，所以使用JavaScript的首要问题就是如何将其与HTML页面结合起来。
向HTML中添加JavaScript的方法就是利用<script>标签，使用<script>元素的方法有两种：
-
在页面内直接写JavaScript代码
<script> function sayHi() { alert("Hi"); } </script> -
引用外部JavaScript文件
<script src="example.js"></script>
写在<script>标签中的代码将被从上往下依次解释。在解释器对<script>中的所以代码求值完毕之前，页面中其余内容都不会被浏览器加载或显示。
<script>标签的位置
传统的做法是将<script>标签放到页面的<head>元素中，如：
<!DOCTYPE html>
<html >
<head>
<title>Example HTML Page</title>
<script src="exmpale1.js"></script>
<script src="example2.js"></script>
</head>
<body>
<!-- contents go here -->
</body>
</html>
这种做法与引入CSS文件类似，目的是将引入文件的动作全部集中在一个位置，但是这种做法有一个缺点，那就是在JavaScript代码全部最下载、解析和执行之前，页面中的内容都不会显示。假如我们引用了比较多的js文件，或者是在一个外国的网站，导致下载速度并不快，这就会造成一个的明显延迟，在这期间页面将是一片空白，这显然是非常不好的用户体验。所以，现代的web程序一般将<script>标签放在<body>的结束标签之前，这样在解析包含的JavaScript代码之前，页面内容就会先全部显示在浏览器中。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- contents go here -->
<script src="jquery.min.js"></script>
<script src="example.js"></script>
</body>
</html>
延迟脚本
在HTML4.01中为<script>定义了defer属性，这个属性的用途是表明脚本在执行的时候不会影响页面的构造。在<script>中指定这个属性就是告诉浏览器可以立即下载脚本，但是要延迟执行。
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script defer="defer" src="example.js"></script>
</head>
<body>
<!-- contents go here -->
</body>
</html>
上面这段代码虽然放在<head>中，但是其引用的脚本会在浏览器遇到</html>标签后才执行。
defer属性只有在引用外部JavaScript文件的时候才会起作用，如果给嵌入脚本使用这个属性，则浏览器会直接忽略这个属性。而且并非所有的浏览器都支持这个属性，对于不支持此属性的浏览器也会直接忽略该属性。所以，将会导致延迟的脚本放到页面的底部仍是最佳的选择。
异步脚本
HTML5为<script>定义了async属性，这个属性的目的是让页面不用等待脚本的下载和执行，从而可以异步加载页面的其它内容。与延迟脚本一样，async也只适用于外部脚本。
嵌入代码与外部文件哪家强
一般来讲，引用外部文件的做法会比将代码直接嵌入到HTML文件中更有优势。
虽然JavaScript中没有强调使用外部文件的规定，但是使用外部文件会有更多的优点：
- 可维护性
嵌入性的代码会在遍布在各个HTML文件中，如果项目比较大，并且页面文件比较多，就会造成一定程度的混乱，所以将所有的JavaScript文件都放到同一个目录中，维护起来会比较轻松。说得比较专业一点就是可以将结构与行为相分离。 - 可缓存
如果多个文件使用的是同一套代码，则使用外部文件的时候只需要下载一次代码就够了，这能够加快页面的加载速度。
<noscript>元素
这个元素的作用跟他的名字一样，就是在当浏览器不支持JavaScript的时候用来显示替代的内容。这个元素只有在以下情况中才会被显示出来：
- 浏览器不支持脚本
- 浏览器支持脚本，但是脚本被禁用
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<noscript>
<p>This page does not support javascript</p>
</noscript>
</body>
</html>
这段代码会在浏览器的JavaScript不可用的时候在页面上显示一条消息，而在启用了JavaScript浏览器中，用户则永远不会看到这条消息。