快捷導(dǎo)航

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

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

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

(一).什么是JS

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

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

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

1.1JS的特點

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

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

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

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

1.2JS的組成

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

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

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

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

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

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

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

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

使用 < script > 標(biāo)簽將 JavaScript 代碼嵌入到 HTML 頁面中?？梢苑胖迷?< 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 代碼編寫在一個獨立的 .js 文件中，并通過

代碼演示：

<!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)簽的屬性中編寫 JavaScript 代碼。例如，使用 onclick 屬性觸發(fā)按鈕點擊事件。

代碼演示：

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

效果展示：