昨天有提供一個互動式網頁的範例，互動的部份是透過JavaScript完成。其實CSS也有少部分互動的元素，例如之前提到的滑鼠移動到物件上產生動畫等等，但經過昨天的範例可以發現JavaScript能做到的事情更多，目前現行的網頁互動功能多是由JavaScript或相關套件或函式庫構成。

範例解析：建置變數並抓取ID

以下連結為昨天使用之範例：https://codepen.io/hamagawa76/pen/KKRawyM
這邊會針對JavaScript的語法進行說明，首先先看以下的語法：

const newName = document.querySelector('#button');

這邊是建立一個變數，const就是建立變數的一種語法，這裡建立了一個叫做newName的變數。document.querySelector('#button');就是從網頁文件中，選取button這個id，這段語法也等於以下語法：

const newName = document.getElementById(button);

這邊的document指的是網頁，document.後面的querySelector和getElementById就是指定我想要選取的位置。該範例中我要選擇的是button這個ID，這兩種語法都能指定我要選擇的ID。這邊要留意大小寫是固定的，若有錯誤會導致該語法無法判讀。還有HTML的ID具有單一性，如果單一網頁有兩個以上的相同ID，這個語法只會抓取第一個。另外網路上很多人會說querySelector和getElementById是JavaScript的選擇器語法。

範例解析：點擊後執行事件

當newName被點擊時，會執行updateName這個變數的功能。這邊的addEventListener是JavaScript的語法，當事件發生時就執行某件事，也有人稱為監聽器，如以下語法的呈現方式：

newName.addEventListener('click', updateName);

範例解析：執行動作的內容

接下來要說明事件發生後，執行後續動作的內容，相關語法如下所呈現：

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

這邊的function updateName就是要定義變數updateName要執行那些動作，前段語法有定義點了按鈕會執行updateName，這邊就是要描述內容，用{}將內容包起來。
let name = prompt('親愛的勇者請輸入您的名字'); 這邊定義name這個變數，等於彈跳出來的視窗的輸入文字。視窗會跳出文字「親愛的勇者請輸入您的名字」，並會有輸入的欄位。prompt語法會彈跳視窗並且提供輸入欄位。

Name.textContent = name;

就是將ID為Name的文字內容，取代為視窗輸入的內容。textContent為網頁內的元素。

document.getElementById('show').innerHTML ='勇者 '+name+'，歡迎來到我們的世界，這個世界要靠你拯救了!!!';

抓取網頁中ID為show的文字內容(innerHTML)，並修改為等候之後的文字，name 這個function中出現的變數，就是彈跳視窗輸入的名字，要直接呈現變數文字要用兩個加號包起來。

這個範例中可以發現JavaScript語法可以指定事件發生後，再執行不同的動作；同時有抓取物件並取代的功能，也可以設定變數進行更多應用。另外也可以發現，儘管網頁呈現的內容有變，但HTML的內容是沒有任何變化的。

是不是很簡單！明天會透過JavaScript的語法進行計算與迴圈，同時改變網頁呈現的內容，我們明天見囉！