iT邦幫忙

2025 iThome 鐵人賽

DAY 19
0
自我挑戰組

網頁設計自我挑戰 - 從零開始系列 第 19

讓網頁活起來:簡單的 JavaScript 互動

  • 分享至 

  • xImage
  •  

網頁不只是靜態的,它也可以是動態的、可互動的。JavaScript 可以讓網頁進行一些簡單的互動。今天學習如何用簡單的 JavaScript,實現一個基本的互動功能。

JavaScript 的程式碼通常會放在 <script> 標籤中,可以放在 <head> <body> 裡面。不影響頁面載入速度,通常會放在 <body> 的最下方。

最簡單的互動:點擊按鈕後改變文字內容。
在 index.html 中加入:

HTML

<p id="my-text">點擊下面的按鈕,看看會發生什麼!</p>
<button onclick="changeText()">點我!</button>

<script>
  function changeText() {
    const textElement = document.getElementById('my-text');
    textElement.textContent = '哈囉!你成功了!';
  }
</script>

這段程式碼中:

  • document.getElementById('my-text') 找到 id 為 my-text 的元素。
  • textContent 屬性用來獲取或設定元素的文字內容。
  • onclick="changeText()" 則是在按鈕被點擊時,呼叫 changeText 這個函式。

這只是 JavaScript 的冰山一角,但它打開了網頁互動的大門。

執行成果 :
https://ithelp.ithome.com.tw/upload/images/20250826/20171037VQR3GYDJi6.png
https://ithelp.ithome.com.tw/upload/images/20250826/20171037pHEBaS1Loh.png


上一篇
響應式設計的第一步:Media Queries 媒體查詢
下一篇
中場總結與挑戰:打造一個完整的作品集單頁
系列文
網頁設計自我挑戰 - 從零開始27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言