深夜课堂：JavaScript在HTML中的使用_[深夜长文]javascript-CSDN博客

本文链接：https://blog.csdn.net/u014328357/article/details/51224493

1.HTML中的script元素
现上栗子：

<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

其实，script元素有6个属性：
async：表示立即下载脚本，但是不妨碍页面中的其它操作。
charset：通过src属性指定的代码的字符集。很少使用。
defer：延迟到文档被完全解析和显示之后执行。
language：已经废弃不用…
src：外部文件地址。
type：表示编写代码使用的脚本语言的类型。如果没有写，默认是text/javascript。

需要注意的是，在代码中不要出现</script>，否则会报错：

<script type="text/javascript">
    function sayScript(){
        alert("</script>");
}
</script>

应该写成：

<script type="text/javascript">
    function sayScript(){
        alert("<\/script>");
}
</script>

这样就不会遇到问题了。

将js代码放在外部文件中时，页面引入js则需要：

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

浏览器会按先后顺序依次解析这些嵌入的文件（不包含defer、async属性时）。

标签的位置：
第一种，可以放在head标签里：

<!DOCTYPE html>
    <html>
      <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" src="example1.js"></script>
        <script type="text/javascript" src="example2.js"></script>
        </head>
        <body>
            <!--       --> 
        </body>
</html>

但是，这样意味着所有的js代码都被加载解析完成后，才开始加载页面，在解析js代码的过程中，页面将会是一片空白的。为了解决这个问题：

<!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>

这样，在解析js代码之前，页面就可以先呈现出来。

defer属性：

<script type="text/javascript" defer="defer" src="example1.js"></script>

加入了该属性，则脚本会被延迟到整个页面解析完成后执行。相当于告诉浏览器：立即下载，但是延迟执行。规定两个defer文件执行的顺序是按照它们的先后次序的。（但是现实中，两个defer文件则不一定会按顺序执行，因此最好只包含一个defer文件）
另外，defer属性只适用于外部文件。

async，异步脚本：
与defer相同，async只适用于外部js文件。
与defer不同的是，两个async文件执行的顺序不一定。
async属性的作用是不让页面等待js文件的下载和执行，去异步的加载其它内容，因此，最好不要在async的js文件中修改DOM对象。

另外，建议js文件最好都可以写成外部文件的形式，如下优点是人们一直强调的：
1、可维护性好。
2、可缓存，这样就加快了页面的加载速度。
3、适应XHTML。
还有一点是我个人比较喜欢外部嵌入js文件的原因：在外部嵌入js可以在浏览器的控制台方便的进行调试，然而在jsp中写入js文件则不方便使用断点调试的功能。

noscript元素：

<html>
      <head>
        <title>Example HTML Page</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>本页面需要浏览器支持JavaScript </p>
        </noscript> 
      </body>
</html>