JavaScript 什么是external

JavaScript 什么是external

JavaScript 是最受欢迎的一种解释型、轻量级和编译型编程语言 之一。它是同步且单线程的。JavaScript中的程序被称为脚本,将它们作为纯文本执行。我们可以直接在HTML页面上编写这些脚本,或者使用外部的JavaScript文件。JavaScript可以在浏览器中执行,也可以在服务器上执行,或者实际上在任何具备特殊程序(称为JavaScript引擎)的设备上执行。JavaScript被用于服务器端和客户端开发。

在HTML文件中使用JavaScript有两种方法:

  • 内部JavaScript :可以直接在HTML文件中通过在<script>标签中编写代码来添加JavaScript代码。根据需要,我们可以将<script>标签放置在标签中。
  • 外部JavaScript :另一种方法是将JavaScript代码编写在一个扩展名为.js的文件中,然后将该文件链接到我们想要添加这段代码的HTML文件的标签中。

示例: 此示例描述了Internal Javascript的使用。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Internal JS</title> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2> 
    <script> 
      
    /*Internal Javascript*/     
    console.log("Hi Geeks, Welcome to GfG"); 
    </script> 
</body> 
  
</html>
JavaScript

输出:

Hi Geeks, Welcome to GfG
JavaScript

示例: 该示例描述了外部Javascript的使用方法。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>External JS</title> 
</head> 
  
<body> 
    <h2>GeeksforGeeks</h2>  
      
    <script src="GfG.js"></script> /* External Javascript */ 
</body> 
  
</html>
JavaScript

外部文件 :GfG.js

Javascript

console.log("Hi Geeks, Welcome to GfG");
JavaScript

输出

Hi Geeks, Welcome to GfG
JavaScript

外部JavaScript是什么?

外部JavaScript 是指将JavaScript代码(脚本)编写在扩展名为.js的另一个文件中,然后我们将这个文件链接到我们HTML文件的<head><body>标签中以添加代码。当同样的代码要在许多不同的网页中使用时,使用外部JavaScript更为实用。使用外部脚本很简单,只需将脚本文件的名称(我们的.js文件)放在<script>标签的src(源文件)属性中。外部JavaScript 文件不能包含<script>标签。

语法:

<script type="media_type" src="URL"> </script>
JavaScript

属性值:

  • type:用于指定脚本的MIME类型并标识标签的内容。它有一个默认值,为“text/javascript”
  • src:用于指定外部JavaScript文件的URL。
  • async:它是一个布尔属性。当存在时,它指定脚本将在可用时异步执行。
  • defer :它是一个布尔属性,用于指定脚本在页面解析完成后执行。
  • integrity:用于让浏览器检查获取的脚本,确保源代码未被篡改。
  • referrerpolicy:在获取脚本时,用于指定要发送到服务器的参考信息。

可以使用多个<script>标签将多个脚本文件添加到一个页面中。

<script src="file1.js"> </script>
<script src="file2.js"> >/script>
JavaScript

示例 :该示例描述了外部JavaScript文件的使用,其中当指针悬停在特定文本上时,文本会更改为不同的文本。

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>External JavaScript</title> 
    <style> 
    h2 { 
        box-sizing: border-box; 
        width: 250px; 
        height: 150px; 
        background-color: green; 
        color: white; 
        margin: auto; 
        font-size: 15px; 
        font-family: sans-serif; 
        text-align: center; 
        padding: 20px; 
    } 
    </style> 
</head> 
  
<body> 
    <h2 class="external">GeeksforGeeks</h2> 
    <script src="GfG.js"></script> 
</body> 
  
</html>
JavaScript

JS代码:

GfG.js

let h2 = document.querySelector(".external"); 
h2.addEventListener("mouseenter", function (e) { 
  h2.innerText = "Hi Geeks, Welcome to GfG"; 
});
JavaScript

输出 :当指针悬停在元素上时,元素内的文本(即GeeksforGeeks)将变为“嗨,Geeks,欢迎来到GfG”。

JavaScript 什么是external

使用内部JS的优势:

  • 浏览器不需要为JavaScript代码发出额外的HTTP请求。
  • 不允许缓存。

使用内部JS的劣势:

  • 代码的可读性变差。
  • 当有大量代码时,代码的维护变得困难。

使用外部JS的优势:

  • HTML和JavaScript文件变得更可读,更易于维护。
  • 由于缓存的JavaScript文件,页面加载速度加快。

使用外部JS的劣势:

  • 程序员可以通过脚本(.js)文件的url轻易下载你的代码。
  • 浏览器需要发出额外的HTTP请求来获取这个JavaScript代码。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册