1.4.1　為什么需要JavaScript

如果將一個網頁類比為一個人，HTML構建了其骨架，CSS為其著裝打扮，而JavaScript則為其賦予了靈魂。不夸張地說，JavaScript就是網頁應用的靈魂。通過前面的學習，我們知道，HTML和CSS的主要作用是對網頁的渲染進行布局和調整，要使得網頁擁有強大的功能并且可以與用戶進行復雜的交互，都需要使用JavaScript來完成。

首先，JavaScript能夠動態改變HTML組件的內容。創建一個名為js.html的文件，在其中編寫如下示例代碼：

上面的代碼中使用到了幾個核心的知識點，在HTML標簽中可以直接內嵌CSS樣式表，為其設置style屬性即可，內嵌的樣式表要比外聯的樣式表優先級更高。button標簽是HTML中定義按鈕的標簽，其中onclick屬性可以設置一段JavaScript代碼，當用戶單擊按鈕組件時會調用這段代碼。如以上代碼所示，當用戶單擊按鈕時，我們讓其執行了clickFunc函數。clickFunc函數定義在script標簽中，其實現了簡單的計數功能，document對象是當前的文檔對象，調用其getElementById方法可以通過元素標簽的id屬性的值來獲取對應元素，調用innerText可以對元素標簽內的文本進行設置。運行代碼，可以看到網頁上渲染了一個標題和按鈕，通過單擊按鈕，標題上顯示的數字會進行累加，如圖1-14所示。

使用JavaScript也可以方便地對標簽元素的屬性進行設置和修改。例如，我們在頁面中再添加一個圖片元素，通過單擊按鈕來設置其顯示和隱藏狀態：

HTML標簽：

JavaScript代碼：

可以看到，使用JavaScript獲取標簽的屬性非常簡單，直接使用點語法即可。同理，我們也可以通過這種方式來靈活地控制網頁上元素的樣式，只需要修改元素的style屬性即可。運行上面的代碼，在網頁中單擊按鈕，可以看到圖片元素會交替地進行顯示與隱藏。

使用JavaScript也可以非常容易地對HTML文檔中的元素進行增刪，有時一個非常簡單的HTML文檔能夠實現非常復雜的頁面，其實都是通過JavaScript來動態渲染的。