今天試著來了解 Web 前端如何接收使用者操作。一個簡單的網頁最基本是由 HTML、CSS 和 JavaScript 分別負責不同的部分。HTML 負責網頁的結構、CSS 負責畫面的呈現，而 JavaScript 則負責使用者操作後的互動。

HTML 裡面有什麼？

先從 HTML 的基本結構開始了解，其中比較重要的有 Element（元素）和 Attribute（屬性），而不同的 Element 之間的關係是一層層的巢狀結構。我覺得它的結構有點像之前提到的 JSON，都是一層一層包起來的。

舉例來說，<h2>、<button>、<label> 都是 Element，而它們可以被 <div> 這個 Element 包在裡面，因此 Element 之間會形成父元素和子元素的關係。Attribute 則可以先理解成 Element 額外帶有的資訊，例如：
<input type="text" id="questionInput">， type 和 id 就是 Attribute ，而 type="text" 表示這是文字輸入框， id="questionInput" 則是替 <input> 這個 Element 設定一個可辨識的名稱，之後 JavaScript 就可以利用這個 id 找到它。

CSS 裡面有什麼？

CSS 其實是在控制 HTML 裡的 Element 顯示的樣子。其中比較重要的是 Selector (選擇器) 、 Property (屬性) 和 Value (屬性值)。

.container 就是 Selector ， background-color 為 Propert ，而 #ffffff 則是 Value 。前面的 . 代表透過 class 選擇 Element，所以它會找到 HTML 中 class="container" 的部分。
另外還學到可以用 button:hover、input[type="text"]:focus。 :hover 表示滑鼠移動到按鈕上的狀態，而 :focus 則是當輸入框取得焦點時的狀態。因此可以發現 CSS 不只是設定固定的外觀，也可以根據 Element 的狀態改變而有不同的顯示效果。

JavaScript 裡面有什麼？

目前簡單的 JavaScript 主要負責處理使用者按下按鈕後的事。

當使用者點擊「開始分析」時，建立的 analyzeQuestion() 會透過 onclick執行。而 document.getElementById() 會找到輸入框和顯示結果的位置，再透過 .value 取得輸入的文字， .innerText 則可以修改網頁上顯示的內容。

Event 和 DOM
使用者在網頁上的操作，如點擊按鈕、輸入文字，都可能觸發不同的 Event。當按下「開始分析」按鈕後，就會觸發設定的 onclick，接著執行 JavaScript 裡面的 analyzeQuestion() 。而 DOM（Document Object Model）是 Browser 讀取 HTML 後，將網頁內容整理成一個有階層的物件結構，讓 JavaScript 可以找到和操作裡面的 Element。所以前面在 HTML 設定的 id="questionInput" ，就可以透過 document.getElementById() 找到這個輸入框，再取得使用者輸入的內容。

因此可以這樣理解 HTML 和 JavaScript 的連接方式，HTML 先建立網頁的結構，Browser 再將它轉換成 DOM，JavaScript 就可以透過 DOM 操作網頁上的內容。

今天的小成果：