JavaScript 及其核心概念：Web 開發初學者指南

什麼是 JavaScript？

JavaScript 是一種程式語言，有助於使網站具有互動性和動態性。 HTML 用於建立網頁內容，CSS 用於設計樣式，而 JavaScript 則添加功能並允許網頁響應使用者操作。

例如：
• 點選按鈕，就會發生一些事情（例如開啟選單）。
• 您捲動，內容就會動態顯示。
• 提交前，表單會檢查您的輸入（例如電子郵件驗證）。

JavaScript 的主要特性（簡單化）

1. 在瀏覽器中運行：JavaScript 直接在 Chrome、Firefox 或 Safari 等瀏覽器中運行，因此無需安裝任何額外的東西即可運行。
2. 動態：您可以變更網頁（其內容或外觀）而無需重新載入。
3. 互動式：它會回應點擊、滑鼠移動或按鍵等事件。
4. 快速：它運行速度很快，因為它直接在瀏覽器中運行。
5. 無所不在：JavaScript 可在瀏覽器（前端）和伺服器（後端，使用 Node.js）上使用。

JavaScript 的工作原理（簡化）

當您造訪網頁時：

1. JavaScript 載入：瀏覽器載入 JavaScript 檔案以及 HTML 和 CSS。
2. 執行程式碼：瀏覽器的 JavaScript 引擎（如 Chrome 中的 V8）逐行執行 JavaScript。
3. 與頁面互動：JavaScript 可以存取並更改頁面的部分內容，例如：

• 新增或刪除元素。
• 動態設計頁面的各個部分。
• 根據使用者操作顯示或隱藏內容。

清晰的範例

更改頁面上的文字
假設您有一個標題，並且您希望 JavaScript 更改其文字。

  <title>JavaScript Example</title>


  <h1>



</h1><p>Explanation:</p>

• The getElementById("heading") selects the 'h1' element.
• .innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

  <title>Click Example</title>


  <button>



<p>What Happens:</p>

<ul>
<li>The button listens for a “click.”</li>
<li>  When clicked, JavaScript updates the <p> tag with a message.</p>
</li>
</ul>

<p>Simple Calculator<br>
 Let’s create a calculator for adding two numbers.<br>
</p>

<pre class="brush:php;toolbar:false">


  <title>Simple Calculator</title>


  <input type="number">



<p>How It Works:</p>

• The user enters numbers in two input fields.
• When the “Add” button is clicked, JavaScript calculates the sum and displays it.

Key Concepts in JavaScript

Variables:
Variables store data that can be used later.

Why Use Variables?

Variables help you:

• Store Information: Keep data in memory for later use.
• Reuse Values: Avoid rewriting the same value multiple times.
• Make Code Dynamic: Change variable values to alter program behavior.

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John

功能：
在 JavaScript 中，函數是可重複使用的程式碼區塊，旨在
執行特定任務。它們允許你寫一段邏輯
一次並多次使用，使您的程式碼更有效率
組織起來。

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

*活動：*
JavaScript 中的事件是瀏覽器中發生的操作或事件，通常由使用者觸發（例如，按一下按鈕、在輸入欄位中鍵入或調整視窗大小）。 JavaScript 可以「監聽」這些事件並執行特定操作作為回應。這是創建互動式動態網頁的關鍵概念。

  <title>JavaScript Example</title>


  <h1>



</h1><p>Explanation:</p>

• The getElementById("heading") selects the 'h1' element.
• .innerText = "Hello, JavaScript!"; changes its text.

Button Click Example
You can make a button do something when clicked.

  <title>Click Example</title>


  <button>



<p>What Happens:</p>

<ul>
<li>The button listens for a “click.”</li>
<li>  When clicked, JavaScript updates the <p> tag with a message.</p>
</li>
</ul>

<p>Simple Calculator<br>
 Let’s create a calculator for adding two numbers.<br>
</p>

<pre class="brush:php;toolbar:false">


  <title>Simple Calculator</title>


  <input type="number">



<p>How It Works:</p>

• The user enters numbers in two input fields.
• When the “Add” button is clicked, JavaScript calculates the sum and displays it.

Key Concepts in JavaScript

Variables:
Variables store data that can be used later.

Why Use Variables?

Variables help you:

• Store Information: Keep data in memory for later use.
• Reuse Values: Avoid rewriting the same value multiple times.
• Make Code Dynamic: Change variable values to alter program behavior.

let name = "John"; // Storing the value "John" in a variable called name
console.log(name); // Outputs: John

循環：
在 JavaScript 中，循環用於多次重複一段程式碼。當您想要多次執行一個操作或一系列操作時，它們非常有用，例如迭代數組中的項目或執行任務直到滿足條件。

JavaScript 中有多種類型的循環，每種循環適用於不同的情況。讓我們回顧一下最常見的

• for 循環：

for 迴圈是最基本的迴圈。它將程式碼區塊重複指定的次數。

function greet(name) {
  return "Hello, " + name;
}

console.log(greet("Alice")); // Output: Hello, Alice
console.log(greet("Bob"));   // Output: Hello, Bob

• while 循環：

只要指定條件為真，while 迴圈就會運作。它在每次迭代之前檢查條件。

<button>



<p><strong>Conditions:</strong><br>
 In JavaScript, conditions are used to perform different actions <br>
 based on whether a specified condition evaluates to true or false. <br>
 This helps control the flow of your program, allowing it to make <br>
 decisions.</p>

<p>Why Use Conditions?</p>

<ul>
<li>Decision Making: Execute code based on specific situations.</li>
<li>Dynamic Behavior: React to user input or external data.</li>
<li>Error Handling: Handle unexpected cases gracefully.
</li>
</ul>
<pre class="brush:php;toolbar:false">let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are not an adult.");
}

• do...while 循環：

do...while 迴圈與 while 迴圈類似，但它保證程式碼至少運行一次，即使條件最初為 false。它在每次迭代後檢查條件。

// Print numbers 1 to 5
for (let i = 1; i 

• for...in 迴圈：

for...in 迴圈用於迭代物件的屬性（鍵）。

// Print numbers 1 to 5 using a while loop
let i = 1;
while (i 

• for...of 循環：

for...of 迴圈用於迭代可迭代物件（如陣列、字串或其他可迭代物件）中的值。

// Print numbers 1 to 5 using do...while loop
let i = 1;
do {
  console.log(i);
  i++;
} while (i 



<h2>
  
  
  JavaScript 的使用場景
</h2>

<ol>
<li>前端開發：
React、Angular 和 Vue.js 等 JavaScript 框架用於
建立互動網站。 </li>
<li>後端開發：
Node.js 允許 JavaScript 在伺服器上運行，為後端邏輯提供支援。 </li>
<li>API：
JavaScript 從遠端伺服器取得資料。 </li>
</ol>

<h2>
  
  
  為什麼要學習 JavaScript？
</h2>

• 廣泛使用：幾乎每個網站都使用 JavaScript。
• 職業機會：對於網頁開發人員至關重要。
• 易於上手：您只需要一個瀏覽器即可編寫和測試 JavaScript。

結論

JavaScript 是一種適合初學者但功能強大的程式語言。
透過練習簡單的範例並理解關鍵概念，您
可以解鎖創建互動式和引人入勝的網路的能力
申請！

以上是JavaScript 及其核心概念：Web 開發初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！