HTML的script标签

最新推荐文章于 2024-09-23 16:08:41 发布

LBJ8888888

最新推荐文章于 2024-09-23 16:08:41 发布

阅读量1.4w

点赞数 8

分类专栏： HTML5

本文链接：https://blog.csdn.net/LBJ8888888/article/details/105318563

版权

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在HTML页面中使用JavaScript，包括脚本的插入方式、延迟执行、异步执行以及处理不支持JavaScript的浏览器。同时，还探讨了JavaScript与HTML执行顺序的关系。

摘要由CSDN通过智能技术生成

在 HTML 页面中插入一段 JavaScript：

这句话可能大家一开始根本不了解JavaScript，是什么？

在我的了解中JavaScript并不是用java语言开发的，人家用的是c语言和另外一种语言的结合体，就像印度和印度尼西亚根本不是同一个地方。

在页面中插入脚本，意味着页面可以实现更多的和用户交互的内容，更高级

<script type="text/javascript">
document.write("Hello World!")
</script>

这段代码在HTML中可以插入到你想要的指定位置，意味着页面执行时一行一行扫描下来的时候，到底是先执行脚本语句还是先执行html语句是由代码编写者来决定的。

<script></script> 标签用于定义客户端脚本，比如：上面的是这段代码，写在html 内部发挥作用，也可以通过 src 属性插入外部脚本文件(xxx.js)

延迟执行脚本

HTML的操作是单线操作的，当一行一行扫描代码的时候一旦触碰到脚本语句就会先去执行脚本语句的内容，执行结束后再解析下一行HTML内容。但是有时候，我们可能需要让HTML文档先完成解析，最后再执行脚本…，也就是说将整个网页的DOM对象执行一遍后，再执行中间嵌入的脚本，因此我们只需要在<script type="text/javascript" src="xxx.js" defer ></script> 属性中引入defer属性对其延迟执行即可,不过需要注意的一点是，defer属性只能用于外部脚本文件，对文档直接内嵌根本不起作用
在这里插入图片描述

异步执行脚本

上面说到HTML的操作是单线操作的，如果说为了执行脚本就暂停加载对用户的体验无疑使非常差的，因此可以<script type="text/javascript" src="xxx.js" async ></script> 引入async属性，用于告诉浏览器该脚本可以异步执行，因此HTML的解析就不会停下来等待，因为HTML解析的过程是怎么的呢？先是获取脚本，CPU再执行脚本，但是获取脚本的时候CPU并没有执行，相当于空闲出来了。同样async属性只能用于外部脚本文件，对文档直接内嵌根本不起作用
在这里插入图片描述

当浏览器不支持JavaScript的时候

HTML <noscript></noscript> 标签,因为有些老老老版本的确不支持JavaScript，或者不小心在浏览器设置中关闭了

<body>
  ...
  ...

  <script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
  </script>
  
  <noscript>Your browser does not support JavaScript!</noscript>
  ...
  ...
</body>

在谷歌浏览器的高级–>内容设置/网站设置–>JavaScript–>屏蔽

在这里插入图片描述