快捷導(dǎo)航

JavaScript中三種引入方式的使用詳解

更新時(shí)間：2024年01月03日 09:00:35 作者：Happy?Moment!

JavaScript（簡(jiǎn)稱(chēng)“JS”）是一種具有函數(shù)優(yōu)先的輕量級(jí),解釋型或即時(shí)編譯型的編程語(yǔ)言,本文主要為大家介紹了JavaScript中三種常見(jiàn)引入方式,希望對(duì)大家有所幫助

(一).什么是JS

JavaScript（簡(jiǎn)稱(chēng)“JS”）是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的編程語(yǔ)言。

雖然它是作為開(kāi)發(fā)Web頁(yè)面的腳本語(yǔ)言而出名，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript基于原型編程、多范式的動(dòng)態(tài)腳本語(yǔ)言，并且支持面向?qū)ο?、命令式、聲明式、函?shù)式編程范式。

[1] JavaScript在1995年由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。但實(shí)際上它的語(yǔ)法風(fēng)格與Self及Scheme較為接近。JavaScript的標(biāo)準(zhǔn)是ECMAScript。截至2012年，所有瀏覽器都完整的支持ECMAScript 5.1，舊版本的瀏覽器至少支持ECMAScript 3標(biāo)準(zhǔn)。2015年6月17日，ECMA國(guó)際組織發(fā)布了ECMAScript的第六版，該版本正式名稱(chēng)為ECMAScript 2015，但通常被稱(chēng)為ECMAScript 6或者ES2015。

1.1JS的特點(diǎn)

1.是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）。

2.主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添加交互行為。

3.可以直接嵌入HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離。

4.跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行（如Windows、Linux、Mac、Android、iOS等）

1.2JS的組成

1.ECMASCRIPT: 定義了javascript的語(yǔ)法規(guī)范,描述了語(yǔ)言的基本語(yǔ)法和數(shù)據(jù)類(lèi)型

BOM (Browser Object Model): 瀏覽器對(duì)象模型

2.有一套成熟的可以操作瀏覽器的 API，通過(guò) BOM 可以操作瀏覽器。比如：彈出框、瀏覽器跳轉(zhuǎn)、獲取分辨率等

DOM (Document Object Model): 文檔對(duì)象模型

3.有一套成熟的可以操作頁(yè)面元素的 API，通過(guò) DOM 可以操作頁(yè)面中的元素。比如：增加個(gè) div，減少個(gè) div，給div 換個(gè)位置等

總結(jié)： JS 就是通過(guò)固定的語(yǔ)法去操作瀏覽器和標(biāo)簽結(jié)構(gòu) 來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的各種效果

(二).JS引用的三種方式

2.1標(biāo)簽引用（或嵌入式)

使用 < script > 標(biāo)簽將 JavaScript 代碼嵌入到 HTML 頁(yè)面中?？梢苑胖迷?< head > 或 < body > 中。

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS標(biāo)簽引用方式一：</title>
</head>
<body>

</body>
<!--嵌入式-->
<script type="text/javascript">
    alert("JavaScript!!!")
</script>
</html>

效果展示：

2.2文件引用（外鏈?zhǔn)剑?/h3>

將 JavaScript 代碼編寫(xiě)在一個(gè)獨(dú)立的 .js 文件中，并通過(guò)

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS標(biāo)簽引用方式二：文件引用(外鏈?zhǔn)?</title>
    <script src="JavaScript.js"></script>
</head>
<body>
</body>
</html>

效果展示：

2.3行內(nèi)式

直接在 HTML 標(biāo)簽的屬性中編寫(xiě) JavaScript 代碼。例如，使用 onclick 屬性觸發(fā)按鈕點(diǎn)擊事件。

代碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS標(biāo)簽引用方式三：行內(nèi)式</title>
</head>
<button onclick="alert('Hello, World!')">點(diǎn)擊我</button>
<body>
</body>
</html>

效果展示：

(三).JS三種引用方式的優(yōu)缺點(diǎn)

1.行內(nèi)方式：

優(yōu)點(diǎn)：行內(nèi)方式簡(jiǎn)單快捷，適用于少量簡(jiǎn)單的交互操作。不需要額外的外部文件。

缺點(diǎn)：可讀性差，代碼難以維護(hù)和重用。當(dāng)有多個(gè)元素需要相同的邏輯或函數(shù)時(shí)，需要重復(fù)編寫(xiě)相同的代碼。

2.標(biāo)簽引用（或嵌入式）：

優(yōu)點(diǎn)：內(nèi)部腳本方式可以方便地將 JavaScript 代碼直接嵌入到 HTML 頁(yè)面中，與頁(yè)面元素進(jìn)行交互。適用于較小規(guī)模的項(xiàng)目。

缺點(diǎn)：隨著項(xiàng)目復(fù)雜度增加，內(nèi)部腳本會(huì)導(dǎo)致 HTML 與 JavaScript 代碼交織在一起，可讀性差，難以維護(hù)。在大型項(xiàng)目中，不同的頁(yè)面可能需要相同的邏輯或函數(shù)，需要在多個(gè)頁(yè)面中重復(fù)編寫(xiě)相同的代碼。

3.文件引用（外鏈?zhǔn)剑?/p>

優(yōu)點(diǎn)：外部腳本方式將 JavaScript 代碼分離到獨(dú)立的 .js 文件中，使代碼結(jié)構(gòu)更清晰，易于維護(hù)和重用。多個(gè)頁(yè)面可以共享同一個(gè)外部腳本文件。

缺點(diǎn)：需要單獨(dú)加載外部腳本文件，增加了額外的網(wǎng)絡(luò)請(qǐng)求。在初次加載時(shí)可能會(huì)有一定的延遲。

到此這篇關(guān)于JavaScript中三種引入方式的使用詳解的文章就介紹到這了,更多相關(guān)JavaScript引入內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: