JavaScript是一種基于瀏覽器的腳本語言，可以用來控制網頁的行為和互動。

它的作用非常廣泛，可以用來實現以下幾個方面的功能。

1. 動態效果

JavaScript可以用于實現各種動態效果，讓網站更加生動、有趣。

// 例子1：點擊按鈕切換文字
let button = document.querySelector('button');
let text = document.querySelector('p');
button.addEventListener('click', function(){
text.innerHTML = 'Hello World!';
});
// 例子2：滾動圖片輪播
let container = document.querySelector('.container');
let images = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ];
let currentIndex = 0;
setInterval(function(){
container.style.backgroundImage = 'url(' + images[currentIndex] + ')';
currentIndex++;
if(currentIndex >= images.length){
currentIndex = 0;
}
}, 3000);

2. 表單驗證

在網頁中，表單是用于接收用戶輸入信息最常見的控件之一。JavaScript可以檢查用戶是否已輸入所有必需的信息，或者格式是否正確。

// 例子1：檢查用戶是否輸入了用戶名、密碼
let form = document.querySelector('form');
form.addEventListener('submit', function(event){
let username = document.querySelector('#username').value;
let password = document.querySelector('#password').value;
if(username === '' || password === ''){
alert('用戶名和密碼不能為空！');
event.preventDefault(); // 阻止提交表單
}
});
// 例子2：檢查用戶輸入的手機號格式是否正確
let phoneInput = document.querySelector('#phone');
phoneInput.addEventListener('change', function(){
let phoneReg = /^1[3-9]\d{9}$/;
if(!phoneReg.test(this.value)){
alert('請輸入正確的手機號！');
this.value = '';
}
});

3. 交互功能

JavaScript可以讓網站更加智能，可以用來實現各種交互功能。比如可以讓頁面根據用戶的操作自動更新，或者根據用戶的位置顯示不同的內容。

// 例子1：展開/折疊內容
let container = document.querySelector('.container');
let btn = document.querySelector('.btn');
btn.addEventListener('click', function(){
if(container.classList.contains('active')){
container.classList.remove('active');
btn.textContent = '展開';
} else {
container.classList.add('active');
btn.textContent = '折疊';
}
});
// 例子2：根據用戶的位置顯示不同的內容
let content1 = document.querySelector('.content1');
let content2 = document.querySelector('.content2');
let content3 = document.querySelector('.content3');
window.addEventListener('scroll', function(){
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < 500){
content1.style.display = 'block';
content2.style.display = 'none';
content3.style.display = 'none';
} else if(scrollTop < 1000){
content1.style.display = 'none';
content2.style.display = 'block';
content3.style.display = 'none';
} else {
content1.style.display = 'none';
content2.style.display = 'none';
content3.style.display = 'block';
}
});

4. AJAX請求

AJAX全稱為Asynchronous JavaScript And XML，可以讓網頁實現異步數據交互，無需刷新整個頁面。JavaScript通過AJAX可以向服務器請求數據，并將獲得的數據更新到頁面上。

// 例子：向服務器請求天氣數據
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.weather.com/xxx');
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
let response = JSON.parse(xhr.responseText);
let weather = response.weather;
let temperature = response.temperature;
let weatherInfo = document.querySelector('.weather-info');
weatherInfo.innerHTML = '天氣：' + weather + '<br>氣溫：' + temperature;
} else {
console.log('請求失敗！');
}
}
};

JavaScript在網頁開發中的作用非常重要，可以說是網頁開發的靈魂之一。它不僅可以實現動態效果、表單驗證、交互功能和AJAX請求等常見功能，還可以通過第三方庫和框架擴展它的功能，讓網頁更加強大、更加智能。