专业编程基础技术教程

网站首页 > 基础教程 正文

2 JavaScript核心 script标签 营养标签中的核心营养素

ccvgpt 2024-10-12 13:40:57 基础教程 12 ℃

第1节 script标签

script常用5个属性

  • async：立即开始下载脚本，但不能阻止其他页面动作。只对外部脚本文件有效。
  • charset：使用src属性指定的代码字符集。
  • defer：脚本可以延迟到文档完全被解析和显示之后再执行。
  • src：外部js文件。
  • type：脚本语言的内容类型MIME(text/javascript)
<script>
   function sayHello() {
       console.log("Hello world!");
   }
</script>

知识点：

2 JavaScript核心 script标签 营养标签中的核心营养素

1. 包含在<script>内的代码会被从上到下解释。意味着<script>后的内容不会被加载，也不会被显示。

2. 外部js文件扩展名为.js。这不是必需的，只需服务器响应正确的MIME类型即可。

3. 使用src属性的<script>元素不应该再在<script>和</script>标签中再包含其他js代码。如果都提供的话，浏览器只会下载并执行脚本文件，而忽略行内代码。

<script src="src.js"> 
  console.log("HTML中的JS");
</script>

4. 所有js文件都放在<head>里，意味着必须把所有js代码都下载、解析和解释完成后，才能开始渲染页面。为解决这个问题，方法一：Web应用通常将所有js引用放在<body>元素中的最后。方法二：通过向DOM中动态添加script元素同样可以加载指定的脚本。这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性。

<script> 
let script = document.createElement("script"); 
script.src = "outscript.js"; 
document.body.appendChild(script); 
</script>

使用外部文件的优势：

  • 可缓存。正常浏览器会缓存外部js，同一个js多个页面使用只需下载一次，意味着页面加载更快。
  • 可维护性。Js集中管理，便于维护。

两种情况下显示<noscript>中的内容：

  • 浏览器不支持脚本
  • 浏览器对脚本的支持被关闭
<noscript>
  <p>浏览器不支持JS</p>
</noscript>

Tags：

猜你喜欢

最近发表
标签列表