iT邦幫忙

2024 iThome 鐵人賽

DAY 5
0
JavaScript

入門JavaScript系列 第 5

變數與值應用

  • 分享至 

  • xImage
  •  

變數和數據值在 JavaScript 中的應用非常廣泛。
以下是一些具體的例子,展示如何在實際編程中使用變數和數據值:

1. 基本計算

可以使用變數來儲存數值,進行基本的算術計算。

let a = 10;
let b = 5;
let sum = a + b; // 加法
console.log('Sum:', sum); // Sum: 15

2. 用戶輸入

利用變數來儲存用戶輸入的數據。

let userName = prompt('Please enter your name:');
console.log('Hello, ' + userName + '!'); // Hello, [用戶名]!

3. 條件判斷

根據變數的值執行不同的操作。

let age = 18;
if (age >= 18) {
    console.log('You are an adult.');
} else {
    console.log('You are a minor.');
}

4. 對象與數組

使用變數來儲存複雜數據結構,如對象和數組。

let person = {
    name: 'Alice',
    age: 30,
    hobbies: ['reading', 'traveling']
};

console.log(person.name); // Alice
console.log(person.hobbies[0]); // reading

5. 函數使用

變數可以作為函數的參數,也可以在函數內部被使用和修改。

function calculateArea(width, height) {
    return width * height;
}

let area = calculateArea(5, 10);
console.log('Area:', area); // Area: 50

6. 循環操作

在循環中使用變數來儲存和操作數據。

let total = 0;
let numbers = [1, 2, 3, 4, 5];

for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
}
console.log('Total:', total); // Total: 15

7. 事件處理

使用變數來儲存和處理事件。

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
    let message = 'Button clicked!';
    alert(message); // 顯示對話框
});

8. 數據可視化

使用變數來儲存數據並進行可視化展示。

let data = [12, 19, 3, 5, 2, 3];
let ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: data,
            backgroundColor: ['rgba(255, 99, 132, 0.2)', ...],
        }]
    }
});

9. 狀態管理

在應用程序中使用變數來管理狀態。

let isLoggedIn = false;

function toggleLogin() {
    isLoggedIn = !isLoggedIn;
    console.log(isLoggedIn ? 'User is logged in.' : 'User is logged out.');
}
toggleLogin(); // User is logged in.
toggleLogin(); // User is logged out.

10. 調試

使用變數來跟踪和輸出調試信息。

let errorMessage = 'An error occurred!';
console.error(errorMessage); // 在控制台顯示錯誤信息

這些例子展示了變數和數據值在 JavaScript 中的多種應用,從基本計算到事件處理,幫助開發者編寫靈活和可讀的代碼。


上一篇
變數與值簡介
下一篇
資料型態簡介
系列文
入門JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言