當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript入门【JavaScript专题1】

發布時間：2025/3/19 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript入门【JavaScript专题1】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

JavaScript入門

從今天開始就與大家一起學習JavaScript了

在本系列教程中，您將學習如何制作 JavaScript 驅動的網頁。

JavaScript 入門

在這里，您將了解使用 JavaScript 向網頁添加交互性是多么容易。但是，在我們開始之前，請確保您對 HTML 和 CSS 有一定的了解。

如果不太了解。我不建議，會出一期對html和css的介紹，如果有在評論區需要，請告訴我！

好吧，讓我們開始使用最流行的客戶端腳本語言。

將 JavaScript 添加到您的網頁

向網頁中添加 JavaScript 的方法通常有以下三種：

在一對<script>和</script>標簽之間嵌入 JavaScript 代碼。
創建帶有.js擴展名的外部 JavaScript 文件，然后通過標簽的src屬性將其加載到頁面中<script>。
使用特殊的標記直接放置JavaScript代碼的HTML標記內屬性，例如onclick，onmouseover，onkeypress，onload，等。

以下部分將詳細描述這些過程中的每一個：

嵌入 JavaScript 代碼

您可以通過將 JavaScript 代碼放置在<script>和</script>標記之間，將其直接嵌入到您的網頁中。該<script>標記指示瀏覽器將包含的語句解釋為可執行腳本而不是 HTML。下面是一個例子：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Embedding JavaScript</title> </head> <body><script>var greet = "Hello World!";document.write(greet); // Prints: Hello World!</script> </body> </html>

上面示例中的 JavaScript 代碼將簡單地在網頁上打印一條文本消息。在接下來的章節中，您將了解這些 JavaScript 語句的含義。

調用外部 JavaScript 文件

你也可以將你的 JavaScript 代碼放到一個帶有.js擴展名的單獨文件中，然后通過標簽的src屬性在你的文檔中調用該文件<script>，如下所示：

如果您希望相同的腳本可用于多個文檔，這將非常有用。它使您免于一遍又一遍地重復相同的任務，并使您的網站更易于維護。

好吧，讓我們創建一個名為“hello.js”的 JavaScript 文件，并將以下代碼放入其中：

// A function to display a message function sayHello() {alert("Hello World!"); }// Call function on click of the button document.getElementById("myBtn").onclick = sayHello;

現在，您可以使用<script>標記在網頁中調用此外部 JavaScript 文件，如下所示：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Including External JavaScript File</title> </head> <body> <button type="button" id="myBtn">Click Me</button><script src="js/hello.js"></script> </body> </html>

注意：通常在第一次下載外部 JavaScript 文件時，它會存儲在瀏覽器的緩存中（就像圖像和樣式表一樣），因此不需要從制作網頁的 Web 服務器多次下載加載更快。

內嵌 JavaScript 代碼

您也可以將JavaScript代碼內嵌通過使用特殊標記直接將其插入HTML標記中的屬性，如onclick，onmouseover，onkeypress，onload，等。

但是，您應該避免內聯放置大量 JavaScript 代碼，因為它會使您的 HTML 與 JavaScript 混在一起，并使您的 JavaScript 代碼難以維護。下面是一個例子：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Inlining JavaScript</title> </head> <body> <button onclick="alert('Hello World!')">Click Me</button> </body> </html>

上面的示例將向您顯示單擊按鈕元素時的警報消息。

**提示：**您應該始終將網頁的內容和結構（即 HTML）與表示 (CSS) 和行為 (JavaScript) 分開。

腳本在 HTML 文檔中的定位

該<script>元素可以放置在HTML 文檔的<head>、或<body>部分中。但理想情況下，腳本應該放在 body 部分的末尾，就在結束</body>標記之前，這將使您的網頁加載速度更快，因為它可以防止初始頁面呈現的障礙。

每個<script>標簽都會阻止頁面渲染過程，直到它完全下載并執行了 JavaScript 代碼，因此將它們<head>無任何正當理由放置在文檔的頭部部分（即元素）將顯著影響您的網站性能。

**提示：**您可以<script>在單個文檔中放置任意數量的元素。但是，它們是按照它們在文檔中出現的順序從上到下進行處理的。

客戶端和服務器端腳本之間的區別

客戶端腳本語言如 JavaScript、VBScript 等由 Web 瀏覽器解釋和執行，而服務器端腳本語言如 PHP、ASP、Java、Python、Ruby 等在 Web 服務器上運行并輸出以 HTML 格式發送回 Web 瀏覽器。

與傳統的服務器端腳本方法相比，客戶端腳本有許多優點。例如，您可以使用 JavaScript 檢查用戶是否在表單字段中輸入了無效數據，并在將表單提交到 Web 服務器以進行最終數據驗證和進一步處理之前，實時顯示相應的輸入錯誤通知，以防止不必要的網絡帶寬使用和服務器系統資源的利用。

此外，與客戶端腳本相比，來自服務器端腳本的響應速度較慢，因為服務器端腳本是在遠程計算機上而不是在用戶的本地計算機上處理的。

Hello, world！

本教程的這一部分是關于核心 JavaScript，即語言本身。

但是我們需要一個工作環境來運行我們的腳本，而且由于本書是在線的，瀏覽器是一個不錯的選擇。我們會將特定于瀏覽器的命令（例如alert）的數量保持在最低限度，這樣如果您打算專注于另一個環境（例如 Node.js），就不會在這些命令上花費時間。在本教程的下一部分，我們將重點介紹瀏覽器中的 JavaScript 。

首先，讓我們看看如何將腳本附加到網頁上。對于服務器端環境（如 Node.js），您可以使用類似"node my.js".

“腳本”標簽

JavaScript 程序幾乎可以使用<script>標簽插入到 HTML 文檔的任何位置。

例如：

<!DOCTYPE HTML> <html><body><p>Before the script...</p><script>alert( 'Hello, world!' );</script><p>...After the script.</p></body></html>

該<script>標簽包含當瀏覽器處理標簽，其被自動執行JavaScript代碼。

現代標記

該<script>標簽具有很少采用時下，但仍可以在舊代碼中發現了幾個屬性：

該type屬性：<script type=…>

舊的 HTML 標準 HTML4 要求腳本具有type. 通常是type="text/javascript"。它不再需要了。此外，現代 HTML 標準完全改變了該屬性的含義。現在，它可以用于 JavaScript 模塊。但這是一個高級主題，我們將在教程的另一部分討論模塊。
該language屬性：<script language=…>

此屬性旨在顯示腳本的語言。此屬性不再有意義，因為 JavaScript 是默認語言。沒有必要使用它。
腳本前后的注釋。

在真正古老的書籍和指南中，您可能會在<script>標簽中找到注釋，如下所示：<script type="text/javascript"></script>這個技巧在現代 JavaScript 中沒有使用。這些注釋對不知道如何處理<script>標簽的舊瀏覽器隱藏了 JavaScript 代碼。由于過去 15 年發布的瀏覽器沒有這個問題，這種注釋可以幫助您識別真正的舊代碼。

外部腳本

如果我們有很多 JavaScript 代碼，我們可以把它放到一個單獨的文件中。

腳本文件通過以下src屬性附加到 HTML ：

這里，/path/to/script.js是從站點根目錄到腳本的絕對路徑。還可以提供當前頁面的相對路徑。例如，src="script.js"表示"script.js"當前文件夾中的一個文件。

我們也可以提供完整的 URL。例如：

要附加多個腳本，請使用多個標簽：

請注意：

通常，只將最簡單的腳本放入 HTML。更復雜的文件駐留在單獨的文件中。

單獨文件的好處是瀏覽器將下載它并將其存儲在其緩存中。

引用相同腳本的其他頁面將從緩存中獲取它而不是下載它，因此該文件實際上只下載一次。

這減少了流量并使頁面更快。

如果src設置，腳本內容將被忽略。

單個<script>標簽不能同時包含src屬性和代碼。

這行不通：

我們必須選擇外部<script src="…">或常規<script>代碼。

上面的例子可以分成兩個腳本來工作：

概括

我們可以使用<script>標簽向頁面添加 JavaScript 代碼。
將type和language屬性不是必需的。
外部文件中的腳本可以插入<script src="path/to/script.js"></script>.

關于瀏覽器腳本及其與網頁的交互，還有更多內容需要了解。但是請記住，本教程的這一部分專門針對 JavaScript 語言，因此我們不應該通過瀏覽器特定的實現來分散自己的注意力。我們將使用瀏覽器作為運行 JavaScript 的一種方式，這對于在線閱讀非常方便，但只是眾多方式中的一種。
下一節帶來JavaScript語法
關注我，繼續追更！

總結

以上是生活随笔為你收集整理的JavaScript入门【JavaScript专题1】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Dart Hello World 示例程
下一篇： SpringBoot整合SpringBa