CodeGym /課程 /Frontend SELF TW /認識 JavaScript

認識 JavaScript

Frontend SELF TW

等級 2 , 課堂 5

開放

1. 標籤 `<script>`

在我們深入學習 HTML 之前，我想先介紹另一個很酷的東西 —— 語言 JavaScript。

JavaScript 是一個強大的程式語言，用於創建動態和互動的網頁。它可以對用戶操作做出反應、修改網頁內容、與伺服器交互以及通過許多其他方式提高用戶在網站上的互動體驗。

現在我們不會深入學習 JavaScript，但在一些範例中我還是會用到它，所以讓我來說說如何將 JavaScript 嵌入到 HTML 文件中。

標籤 <script>: 用於在 HTML 文件中嵌入 JavaScript 代碼。

CSS+HTML+JavaScript

      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>認識 JavaScript</title>
</head>
<body>
    <h1>歡迎來到我的網站！</h1>
    <script>
        // 你的 JavaScript 程式碼 alert('你好，世界！');
    </script>
</body>
</html>

在這個例子中，標籤 <script> 用於嵌入簡單的 JavaScript 程式碼，會彈出一個包含訊息 "你好，世界！" 的視窗。

2. 添加腳本

有時候最好將 JavaScript 程式碼儲存在單獨的文件中。這可以提高程式碼的組織性和重用性。添加 JavaScript 文件時仍然使用 <script> 標籤，而通過屬性 src 可以指定 JavaScript 文件的名稱。

添加外部 JavaScript 文件:

HTML

      
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>認識 JavaScript</title>
    <script src="script.js" defer></script>
</head>
<body>
    <h1>歡迎來到我的網站！</h1>
</body>
</html>

該 HTML 文件要求瀏覽器加載名為 script.js 的 JavaScript 文件，該文件可以包含與上例相同的程式碼:

JavaScript

      
//script.js:
// 你的 JavaScript 程式碼
alert('你好，世界！');

屬性 defer 用於告訴瀏覽器在 HTML 文檔完全加載和顯示後執行腳本。

3. Inline 程式碼

還記得我們如何直接在元素的 style 屬性內寫 css 樣式嗎？

HTML

      
<p style="color:red"> 紅色</p>

我們也可以照樣寫 JavaScript 程式碼。

假設我們希望元素在點擊時將顏色更改為藍色，那麼我們需要寫這樣的代碼:

HTML

      
<p style="color:red" onclick="this.style.color = 'blue';">紅色</p>

以綠色標出的部分是 JavaScript 程式碼，它將在用戶點擊元素 <p> 時執行。簡單吧？

認識 JavaScript

1. 標籤 <script>

2. 添加腳本

3. Inline 程式碼

1. 標籤 `<script>`