Html中的JavaScript

最新推荐文章于 2023-12-28 09:39:49 发布

莫奈尔

最新推荐文章于 2023-12-28 09:39:49 发布

阅读量124

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Muhammadd1/article/details/110679379

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML中的JavaScript

<script元素>

script元素有8个属性：
async，charest,crossorigin,defer,integrity,language,src,type
使用script的方式有两种:通过它直接在网页中嵌入 JavaScript 代码，以及通过它在网页中包含外部 JavaScript 文件。
要嵌入行内 JavaScript 代码，直接把代码放在script元素中就行:

包含在script内的代码会被从上到下解释。

要包含外部文件中的 JavaScript，就必须使用 src 属性。这个属性的值是一个 URL，指向包含 JavaScript 代码的文件，比如:

   <script src="example.js"></script>

这个例子在页面中加载了一个名为 example.js 的外部文件

外部 JavaScript 文件的扩展名是.js。

标签位置

Web 应用程序通常将所有 JavaScript 引用放在元素中的页面内容后面，如下面的例子所示:

    <!DOCTYPE html>
    <html>
<head>
<title>Example HTML Page</title> </head>
<body>
<!-- 这里是页面内容 -->
<script src="example1.js"></script> <script src="example2.js"></script> </body>
</html>

这样一来，页面会在处理 JavaScript 代码之前完全渲染页面。用户会感觉页面加载更快了，因为浏览器显示空白页面的时间短了。

推迟执行脚本

HTML 4.01 为 script元素定义了一个叫 defer 的属性。这个属性表示脚本在执行的时候不会改变页面的结构。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在script元素上设置 defer 属性，相当于告诉浏览器立即下载，但延迟执行。
defer 属性只对外部脚本文件才有效
HTML5 为script元素定义了 async 属性。从改变脚本处理方式上看，async 属性与 defer 类似。当然，它们两者也都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与 defer 不同的是*，标记为 async 的脚本并不保证能按照它们出现的次序执行*
动态加载脚本
除了

行内代码与外部文件

虽然可以直接在 HTML 文件中嵌入 JavaScript 代码，但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。
可维护性。JavaScript 代码如果分散到很多 HTML 页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。
 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次。这最终意味着页面加载更快。
 适应未来。
noscript元素
noscript 元素出现，被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持 JavaScript，但对于禁用 JavaScript 的浏览器来说，这个元素仍然有它的用处。
noscript元素可以包含任何可以出现在body中的 HTML 元素，script除外。在下列两种情况下，浏览器将显示包含在noscript中的内容:
 浏览器不支持脚本;
 浏览器对脚本的支持被关闭。任何一个条件被满足，包含在noscript中的内容就会被渲染。否则，浏览器不会渲染noscript
中的内容。