JavaScript 是一種程式語言,有助於使網站具有互動性和動態性。 HTML 用於建立網頁內容,CSS 用於設計樣式,而 JavaScript 則添加功能並允許網頁響應使用者操作。
例如:
• 點選按鈕,就會發生一些事情(例如開啟選單)。
• 您捲動,內容就會動態顯示。
• 提交前,表單會檢查您的輸入(例如電子郵件驗證)。
JavaScript 的主要特性(簡單化)
JavaScript 的工作原理(簡化)
當您造訪網頁時:
清晰的範例
更改頁面上的文字
假設您有一個標題,並且您希望 JavaScript 更改其文字。
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Example</title> </head> <body> <h1> <p>Explanation:</p>
Button Click Example
You can make a button do something when clicked.
<!DOCTYPE html> <html lang="en"> <head> <title>Click Example</title> </head> <body> <button> <p>What Happens:</p>
tag with a message.
Simple Calculator
Let’s create a calculator for adding two numbers.
<!DOCTYPE html> <html lang="en"> <head> <title>Simple Calculator</title> </head> <body> <input type="number"> <p>How It Works:</p>
Variables:
Variables store data that can be used later.
Why Use Variables?
Variables help you:
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 可以「監聽」這些事件並執行特定操作作為回應。這是創建互動式動態網頁的關鍵概念。
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Example</title> </head> <body> <h1> <p>Explanation:</p>
Button Click Example
You can make a button do something when clicked.
<!DOCTYPE html> <html lang="en"> <head> <title>Click Example</title> </head> <body> <button> <p>What Happens:</p>
tag with a message.
Simple Calculator
Let’s create a calculator for adding two numbers.
<!DOCTYPE html> <html lang="en"> <head> <title>Simple Calculator</title> </head> <body> <input type="number"> <p>How It Works:</p>
Variables:
Variables store data that can be used later.
Why Use Variables?
Variables help you:
let name = "John"; // Storing the value "John" in a variable called name console.log(name); // Outputs: John
循環:
在 JavaScript 中,循環用於多次重複一段程式碼。當您想要多次執行一個操作或一系列操作時,它們非常有用,例如迭代數組中的項目或執行任務直到滿足條件。
JavaScript 中有多種類型的循環,每種循環適用於不同的情況。讓我們回顧一下最常見的
for 迴圈是最基本的迴圈。它將程式碼區塊重複指定的次數。
function greet(name) { return "Hello, " + name; } console.log(greet("Alice")); // Output: Hello, Alice console.log(greet("Bob")); // Output: Hello, Bob
只要指定條件為真,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 迴圈與 while 迴圈類似,但它保證程式碼至少運行一次,即使條件最初為 false。它在每次迭代後檢查條件。
// Print numbers 1 to 5 for (let i = 1; i <= 5; i++) { console.log(i); } // Output: 1, 2, 3, 4, 5
for...in 迴圈用於迭代物件的屬性(鍵)。
// Print numbers 1 to 5 using a while loop let i = 1; while (i <= 5) { console.log(i); i++; // Don't forget to increment i! } // Output: 1, 2, 3, 4, 5
for...of 迴圈用於迭代可迭代物件(如陣列、字串或其他可迭代物件)中的值。
// Print numbers 1 to 5 using do...while loop let i = 1; do { console.log(i); i++; } while (i <= 5); // Output: 1, 2, 3, 4, 5
JavaScript 是一種適合初學者但功能強大的程式語言。
透過練習簡單的範例並理解關鍵概念,您
可以解鎖創建互動式和引人入勝的網路的能力
申請!
以上是JavaScript 及其核心概念:Web 開發初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章!