深夜课堂：JavaScript在HTML中的使用

Bertha 。 2022-08-21 07:46 184阅读 0赞

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

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

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

应该写成：

这样就不会遇到问题了。

将js代码放在外部文件中时，页面引入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属性：

加入了该属性，则脚本会被延迟到整个页面解析完成后执行。相当于告诉浏览器：立即下载，但是延迟执行。规定两个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>

当浏览器不支持JavaScript的时候，使用noscript元素可是为用户提供提示，使页面平稳的退化。  
入上面这个例子：当浏览器不支持脚本，或者脚本被禁用的时候，p元素中的内容就会被现实出来了。