iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
自我挑戰組

從零開始的HTML系列 第 26

Day 26 JavaScript與HTML、CSS的關係

  • 分享至 

  • xImage
  •  

JavaScript 是一種廣泛應用於網頁開發的高階、解釋型編程語言。由於其強大的功能和靈活性,JavaScript 成為了現代互聯網的關鍵技術之一。它能讓靜態的網頁變得動態和互動,增強用戶體驗。

在網頁開發中,HTML、CSS 和 JavaScript 三者相輔相成。HTML(HyperText Markup Language)負責網頁的結構和內容,如文字、圖片和連結的排列。CSS(Cascading Style Sheets)則控制這些內容的外觀和佈局,包括顏色、字體、邊距和對齊方式。JavaScript 則為網頁添加互動性,使得網頁能根據用戶的操作進行動態更新。

例如,考慮一個簡單的網頁按鈕,當用戶點擊它時,顯示一段隱藏的文本。HTML 定義按鈕和文本的位置與結構:

<button id="showTextButton">顯示文本</button>
<p id="hiddenText" style="display:none;">這是隱藏的文本。</p>

CSS 控制該文本初始隱藏的狀態:

#hiddenText {
    display: none;
}

而 JavaScript 則負責在用戶點擊按鈕後顯示該文本:

document.getElementById("showTextButton").addEventListener("click", function() {
    document.getElementById("hiddenText").style.display = "block";
});

當用戶點擊按鈕時,JavaScript 改變了 hiddenText 元素的樣式,使其從隱藏變為顯示。

總之,HTML 提供結構,CSS 美化樣式,而 JavaScript 則賦予網頁互動性,三者協作,共同構成了現代網頁的基礎。


上一篇
Day 25 設定OPG
下一篇
Day 27 Javascript中的var、let、const
系列文
從零開始的HTML30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言