如何将JavaScript应用到HTML中

2024-01-01 07:37:35

前言

? ? ? ? JavaScript和HTML几乎可以说是相辅相成，密不可分的两个部分，实际应用到项目中的html页面往往都离不开JavaScript的支持。本文讲述如何在HTML中使用JavaScript，以及使用JavaScript的几种方式。

一、<script>元素?

? ? ? ? 使用方式

? ? ? ? 向HTML中插入?JavaScript的主要方式，就是使用<script>元素，<script>定义了以下6个属性：

? ? ? ? 1、async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或其他待加载的脚本。只对外部文件有效。

? ? ? ? 2、charset：可选。表示外部脚本文件中使用的字符编码。由于大多数浏览器会忽略此属性，所以这个属性基本不被使用。

? ? ? ? 3、defer：可选。表示延迟加载脚本，在文档完全解析完和显示之后执行，只对外部文件有效。

? ? ? ? 4、language：已废弃。原本用来表示编写代码使用的脚本语言，但大多数浏览器会忽略此属性，所以这个属性不会再使用了。

? ? ? ? 5、src：可选。这个属性非常重要，也是在实际项目中用到的最多的属性，这个属性包含要引入的外部JavaScript文件的路径。

? ? ? ? 6、type：可选。language的替代属性。一般将其值设为text/javascript即可，如果不选这个属性，则默认值也为text/javascript。

????????<script>的使用方式有两种：直接嵌入javascript代码和引入外部文件。

? ? ? ? 直接嵌入代码的方式如下：

<script type="text/javascript">
    function hello(){
        alert('hello')
    }
</script>

? ? ? ? 需要注意的是，被嵌入的javascript中的任何位置不能再包含</script>标签，比如以下代码是非法的：

<script type="text/javascript">
    function hello(){
        alert('</script>')
    }
</script>

? ? ? ? 因为当浏览器遇到</script>时，会认为那是结束标签，如果非要加入<script>标签，可以使用转义字符，如下代码是合法的：

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

? ? ? ? 第二种方式是引入外部文件，如下所示：

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

? ? ? ? 当然，也可以引入本地文件，比如：

<script src="../js/jquery-3.7.0.js"></script>

? ? ? ? 如果是在XHTML中，以下写法也是合法的：

<script src="https://code.jquery.com/jquery-3.7.0.js"/>

? ? ? ? 但以上写法在HTML中不适用，原因是这种写法不符合HTML规范。

? ? ? ? 需要注意的是，如果<script>标签是用来引入外部文件的，那么其中就不能再嵌入JavaScript代码了，否则浏览器将忽略嵌入的代码。

????????<script>的位置

? ? ? ? 按照传统方式?，所有<script>标签都应该放到<head>标签中，如下所示：

<html>
    <head>
      <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
      <script src="../js/base.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

? ? ? ? 如果是简单页面，这么做没有问题，但如果加载的外部文件较多，这样做会导致页面加载十分缓慢，因为浏览器需要先把所有外部文件加载完毕之后，再解析<body>中的内容。所以，通常情况下，开发者都把引用放到<body>中的最后，如下所示：

<html>
    <head>
      
    </head>
    <body>
        ....
        <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
        <script src="../js/base.js"></script>
    </body>
</html>

? ? ? ? 如此一来，浏览器首先解析页面内容，将页面呈现出来之后，再加载外部引用，这样就不会出现由于加载缓慢而导致浏览器白屏的情况了。?

????????延迟脚本?

? ? ? ? 如果在<script>标签中使用defer属性，表示该引入脚本会立即下载，延迟执行，意思就是等到页面中的内容都加载完再执行。

<html>
    <head>
      <script defer="defer" src="https://code.jquery.com/jquery-3.7.0.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

? ? ? ? 注意，defer属性只适用于外部文件，如果引入文件过多，同样会出现浏览器白屏的情况，因为虽然是延迟执行，但并不是延迟加载，所以如果想要提高页面的加载速度，还是应该把引入文件放到<body>中的最后。

? ? ? ? 异步脚本

? ? ? ? async属性与defer属性类似，只适用于外部文件，但与defer不同的是，标记为async的脚本并不保证执行顺序，所以，引入的外部文件不能有相互依赖关系，也不要在加载期间修改DOM。

<html>
    <head>
      <script async src="https://code.jquery.com/jquery-3.7.0.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

二、<noscript>元素??

? ? ? ? 在早期，并非所有浏览器都支持JavaScript，为了让不支持JavaScript的浏览器页面不报错，开发者创造了一个<noscript>元素，用以在不支持JavaScript的浏览器中显示替代的内容，<noscript>元素中可以包含任何HTML标签，<noscript>元素中的内容只有在满足以下两个条件中任意一个的时候才会显示出来：

? ? ? ? 1、浏览器不支持JavaScript

? ? ? ? 2、浏览器支持JavaScript，但脚本被禁用

<html>
    <head>
      <script async src="https://code.jquery.com/jquery-3.7.0.js"></script>
    </head>
    <body>
        <noscript>
            <div>本页面不支持JavaScript</div>
        </noscript>
    </body>
</html>

? ? ? ? 以上脚本会在满足两个条件之一的情况下显示：本页面不支持JavaScript

小结?

? ? ? ? 1、在HTML中使用JavaScript脚本的方式有两种，内部嵌入和外部引用。

? ? ? ? 2、<script>元素一般放到页面最后。

? ? ? ? 3、<noscript>元素可以指定在不支持JavaScript脚本的浏览器中显示指定内容。

文章来源:https://blog.csdn.net/leonMary/article/details/135203329
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。