【JS】关于script标签

于 2023-06-27 19:16:02 发布
阅读量4.3k 收藏 35
点赞数 15
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62638072/article/details/131422734
版权

1.首先,script标签是什么？

script标签是在web中有一种非常重要的标签，它的存在才使得脚本可以引入dom文档，并且动态网页的实现也需要使用此标签

2.script标签都有哪些属性？（在HTML5当中）

  • 在HTML5当中主要有以下几个属性：
属性属性值
async可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，仅适用于外部脚本，比如启用该选项之后，当脚本下载过程之中，直接渲染之后的html文档，下载完成之后，暂停渲染，执行该外部脚本，但是标记为 async 的脚本并不保证按照指定它们的先后顺序执行，后面的async脚本可能先于之前的async脚本。
charset可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，此属性值很少会被用到
defer可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本有效。跟放在Html文档最后面效果一致，但是defer更灵活。没有特别的位置需求，而且script只能操作在其之前的对象，defer使得此操作变得方便起来。
src可选。表示包含要执行代码的外部文件。
type可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型

3.script标签的常用方法

（1）从外部引入脚本

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

（2）在标签体中插入一个脚本（一段js代码）

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

（3）行内Js

<input type="button" value="测试" onclick="alert('点击')"/>
<a href="javascript:alert('dd')">URL主体</a>

4.script标签放置的位置

  • 在Html文档中可以编写任意多的script标签，编写任意多的js代码。script标签可以放在<body> 或 <head>当中。

5.不同位置的script标签的区别

  • 如果将 JavaScript 放在 head 部分，整个 JavaScript 将在加载任何 HTML 之前加载，可能会导致一些问题：
1.如果JavaScript 中有代码会在 JavaScript 代码加载时立即更改 HTML，那么实际上还没有任何可用的 HTML 元素对其产生影响，因此看起来 JavaScript 代码似乎不起作用，而您可能会出错。
2.如果有很多 JavaScript，它会明显减慢页面的加载速度，因为它会在加载任何 HTML 之前加载所有 JavaScript。

当将 JavaScript 放在 HTML 正文的底部时，它会在任何 JavaScript 加载之前让 HTML 有时间加载，这可以防止错误并加快网站响应时间。

  • 具体显示效果如下：
    在这里插入图片描述
    首先我们将script标签放在head当中进行测试，测试结果如下：
    在这里插入图片描述
    接下来我们将相同的script标签放在body当中，进行测试：
    在这里插入图片描述

测试效果如下：
在这里插入图片描述

而出现以上效果的原因是脚本在h标签之前加载了。在加载脚本的时候，由于无法找到h标签的，最终导致无法改变颜色。

还有一种方式：外部JavaScript

JavaScript 也可用于外部文件。JavaScript 文件的文件扩展名为“.js”。要使用外部脚本，请将脚本文件的名称放在脚本标记的 src 属性中。

  • 外部 JavaScript 有哪些优点：
1.分离 HTML 和 JavaScript 代码将有助于更轻松地管理代码库。
2.设计人员可以与编码人员并行工作而不会发生代码冲突。
3.适用于现代源代码版本控制系统，例如 GIT。这意味着这些文件中的每一个都将维护一个历史记录，并且可以由多个程序员签入、签出。
4.代码和 HTML 都易于阅读。
5。外部 JavaScript 文件由浏览器缓存，可以加快页面加载时间。
6.许多流行的 JavaScript 包都托管在内容交付网络 (cdn) 上，您可以使用src 中的 URL 简单地指向它们，从而避免将 js 文件复制到本地文件夹。

值得注意的是：大多数浏览器在加载含有<script>标签的页面时，会发生如下情形：

1.获取 HTML 页面
2.开始解析 HTML
3.解析器遇到<script>引用外部脚本文件的标记。
4.浏览器请求脚本文件。同时，解析器会阻止并停止解析页面上的其他 HTML。
5.一段时间后，脚本被下载并随后执行。
6.解析器继续解析 HTML 文档的其余部分。

当浏览器请求脚本文件时会导致网页停止加载，带给用户不好的体验，而现在有解决办法如下：

  • 异步和延迟

异步async：具有 async 属性的脚本是异步执行的。这意味着脚本在下载后立即执行，同时不会阻止浏览器。这意味着可以在脚本 1 之前下载和执行脚本 2。

<script src="path/script1.js" defer></script>
<script src="path/script2.js" defer></script>

延迟defer：具有 defer 属性的脚本按顺序执行（即第一个脚本 1，然后是脚本 2）。这也不会阻止浏览器。与异步脚本不同，延迟脚本仅在整个文档加载后才执行。

<script src="path/script1.js" defer></script>
<script src="path/script2.js" defer></script>
有理想的西瓜
关注
  • 15
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
＜script＞标签使用
never_33的博客
02-17 1492
标签使用
JavaScript中输出/script标签的方法
12-10
问题的根源在于JavaScript引擎将`</script>`视为一个结束标签，这会导致当前的`<script>`元素提前关闭，从而影响到后续的JavaScript代码执行。例如，下面的代码会引发问题： ```javascript <script> alert('</...
全面了解js中的script标签
11-22
在页面中用script标签引入javascript文件（[removed][removed]），浏览器在渲染页面的时候，当读取到script元素时，浏览器不会以HTML或XHTML的方式处理其内容，浏览器会通知浏览器的脚本引擎来接管script元素中的内容。 script元素的type属性定义脚本类型，type类型有： 1.text/ecmascript(表示以ECMAScript方式解析这段脚本,即基于ECMA-262脚本标准) 2.text/jscript(表示以JScript方式解析这段脚本，它是微软在IE浏览器中所实
script标签4种的四种用法，你知道几种？
weixin_44384265的博客
11-24 8356
本文主要是基于《HTML标准》4.12节讲解script元素，主要的内容是script标签的4种用法：js传统脚本、js模块脚本、importmap、数据块。
【零基础学JS -4】深入剖析script标签
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
04-28 9212
大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！ 原文链接 ==>http://sylblog.xin/archives/6 前言 在开始学习之前，最好了解过一些Html的基础知识。因为这一章节介绍的是script标签，如果你还不了解少么是标签，还需要去了解html的基础知识。 script 标签 在 HTML .
彻底弄懂＜script＞标签
热门推荐
a577473253的博客
09-11 2万+
文章目录一、script 标签特性二、script特性验证三、script标签优化 一、script 标签特性 script标签主要用于从服务器端加载一段javascript脚本并在当前页面中执行。因为其需要从服务器端中加载，所以会在一定程度上影响到web的性能。在性能优化中，script标签的优化至关重要。 ① script标签默认是同步加载的。当HTML页面在加载的过程中，遇到了一个script标签，就会中断HTML页面的加载，然后根据对应的src地址向服务器发起请求，当对应的javascript脚本加
javascript 的script标签
yjwlike的博客
12-14 5405
script元素 script标签的作用就是将js插入到HTML 属性表示不同的场景 async defer src type crossorigin charset 使用script标签的注意点 不要出现在字符串中出现 </script> , 浏览器会当成结束标签解析 解决方案 : 转义 <\/script> script的标签位置 放在<head></head>标签中, 就意味
js原生跨域_用script标签的简单实现
10-21
下面小编就为大家带来一篇js原生跨域_用script标签的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
script标签属性用type还是language
09-03
为了确保脚本在所有现代浏览器中正常运行，应当遵循最佳实践，将`<script>`标签的`type`属性设置为`"text/javascript"`，并避免使用已废弃的`language`属性。这样可以提高代码的兼容性和可维护性。
HTML的script标签
LBJ8888888的博客
04-04 1万+
在 HTML 页面中插入一段 JavaScript： 这句话可能大家一开始根本不了解JavaScript，是什么？ 在我的了解中JavaScript并不是用java语言开发的，人家用的是c语言和另外一种语言的结合体，就像印度和印度尼西亚根本不是同一个地方。 在页面中插入脚本，意味着页面可以实现更多的和用户交互的内容，更高级 <script type="text/javascript">...
script标签的知识
在下魔王ii的博客
06-17 1228
script标签的知识 script标签的执行顺序 script 是按照它们出现的顺序被执行的，执行时会阻塞程序运行，建议页面实现类的js放到body之前，动作、交互、事件驱动、对于dom属性的访问操作可以放在body的dom之后尾标签之前。这样会加快网页的加载速度。 script标签的async和defer属性 HTML5 添加了两个工具来控制脚本的执行。 async 表示“不用马上执行它”。更具体地它表示：我不介意你在整个网页加载完成之后执行这个脚本，把它放在其他脚本执行之后。这对于统计
JavaScript获取标签的几种方式
若有所执，必有所成，心之所向，必显光芒
01-20 7900
JavaScript获取标签：1.通过标签id来获取标签，2.通过标签名获取标签，3.通过class获取标签，4.通过选择器找到所有符合条件，5.几种获取特殊标签的写法
JS中script标签详细介绍
WKY_CSDN的博客
03-17 3943
Script标签介绍向HTML页面中插入JavaScript的主要方法，就是使用<script>元素HTML4.01为这个元素定义了下列6个属性。 - async：可选。表示应该立即下载脚本，但不应该妨碍页面中的其他操作。比如下载其他资源或者等待加载的其他脚本。只对外部脚本文件有效。 - charset：可选。表示通过src属性指定的代码的字符集。但由于大多数浏览器会忽略它的值。因此这个属性
＜script＞元素的8个属性
weixin_45646245的博客
11-16 784
async：可选。表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载。只对外部脚本文件有效。 charset：可选。使用 src 属性指定的代码字符集。这个属性很少使用，因为大多数浏览器不在乎它的值。 crossorigin：可选。配置相关请求的CORS（跨源资源共享）设置。默认不使用CORS。crossorigin= "anonymous"配置文件请求不必设置凭据标志。crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据。 def.
script标签
lengye7的博客
01-28 1261
在web中有一种非常重要的标签，它的存在才使得脚本可以引入dom文档，并且动态网页也才能实现。 &lt;script&gt;标签 script标签是在html文档中引入脚本的主要方法： H5主要有以下几个属性： async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，仅适用于外部脚本，比如启用该选项之后，当脚本下载过程之中，直接渲染之后的html文档，下载完成之后，暂停渲染...
JavaScript快速入门
Light_shoot的博客
04-04 461
标签在HTML网页中插入JavaScript代码，标签成对出现，并把JavaScript代码写在之间，例如，
HTML中的JavaScript
行如逆水行舟，不进则退
08-16 3070
HTML中的JavaScript
详细理解script标签
前端精髓
07-06 1万+
说到script标签，大家耳熟能详的就是src属性了，但是你是否记得它有一些其它属性呢？接下来我仔细盘点，看看是否知道它们的含义。
react webpack script标签引入js文件
最新发布
05-27
如果要在React项目中使用Webpack，并且想要在HTML文件中使用script标签引入打包后生成的JS文件，可以按照以下步骤进行操作： 1. 在Webpack配置文件中，添加以下配置： ```javascript module.exports = { // ...其他配置 output: { path: path.join(__dirname, 'dist'), filename: 'bundle.js', publicPath: '/' } }; ``` 这里通过output配置指定了打包后生成的JS文件的输出路径和文件名，以及publicPath配置，这个配置用于指定Webpack生成的资源文件（比如打包后的JS文件）在浏览器中的访问路径。 2. 在HTML文件中使用以下代码引入打包后的JS文件： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React App</title> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html> ``` 这里通过script标签的src属性指定了Webpack生成的JS文件的访问路径，这个路径就是在Webpack配置中指定的publicPath。 3. 在React项目中，可以通过ReactDOM.render()方法将组件渲染到页面上。 ```javascript import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); ``` 这里使用ReactDOM.render()方法将一个React元素渲染到页面上，具体的渲染内容可以根据实际需求修改。最后，在浏览器中打开HTML文件，即可看到渲染后的内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值