終於來到JavaScript的部分了！HTML給予網頁內容，CSS套上外觀，JavaScript提供網頁互動的功能！JavaScript提供的互動功能，相較於提供內容或套上樣式，程式的複雜程度也會提高許多，真的會讓人有「寫程式」的感覺，本日將實際應用HTML、CSS、和JavaScript，體驗互動式網頁的魅力。

HTML語法

這邊先提供一個範例讓人理解JavaScript的魅力之處。首先現在HTML的部份輸入以下語法：

<div>勇者名稱:<span id="Name">我叫什麼名字？</span></div>
<div id="button">點我進入世界</div>
<div id="show"></div>

CSS語法

再來在CSS的部份添增樣式，參考語法如下所列：

#button{
  letter-spacing: 5px;
  text-align: center;
  border: 2px solid rgba(180,180,180,0.2);
  background: rgba(200,200,200,0.3);
  color: rgba(0,0,0,1);
  border-radius: 50%;
  padding: 25px 50px;
  display: inline-block;
  }

#button:hover{
  border: 2px solid rgba(200,0,200,0.2);
  background: rgba(150,0,150,0.3);
  color: rgba(100,0,100,0.5);
}

#show{
  font-size:24px;
}

JavaScript語法

接著是新的部分，從HTML的部份可以觀察出我有三個div，第一個我顯示的是我叫什麼名字，第二個似乎是個按鈕，第三個什麼都沒有。我想要新增一個效果是，點下按鈕後，會彈出輸入名字的視窗，同時取代勇者名稱，在第三個div顯示歡迎勇者的文字。
參考的JavaScript語法如下所列：

const newName = document.querySelector('#button');
newName.addEventListener('click', updateName);

function updateName() {
  let name = prompt('親愛的勇者請輸入您的名字');
  Name.textContent = name;  document.getElementById('show').innerHTML ='勇者 '+name+'，歡迎來到我們的世界，這個世界要靠你拯救了!!!';
}

我們可以發現短短幾行JavaScript語法，點下按鈕後卻執行了三個動作，資訊量是不是相較於HTML和CSS語法多了一些？接著會陸續開始說明JavaScript應用的部分，還請大家不要擔心。本日案例可以參考以下連結：https://codepen.io/hamagawa76/pen/KKRawyM

是不是很簡單！明天會針對今天的案例說明JavaScript的語法，我們明天見囉！