《HTML5 精要剖析》- 1.3 HTML 與 JavaScript 初探

2012-03-12

6354
0
HTML5
2012-03-18

這一篇，開始為應用程式加入 JavaScript ，支援使用者的互動式功能

雖然建立基本的HTML 標籤，就可以完成了HTML5 網頁的定義，但即便是簡單的應用程式，只有HTML 標籤是不夠的，更進一步的，你還需要CSS 與JavaScript 才能建立具真正功能的應用程式，以下的圖示解釋這三者的關係：

HTML 標籤負責應用程式的內容定義，CSS 決定最後網頁所要呈現的外觀，也就是使用者應用程式介面。 JavaScript 是整個應用程式的靈魂，使用者透過JavaScript 與應用程式進行互動，而應用程式本身依賴JavaScript 提供程式化控制的功能。

CSS 是一種樣式語言，這一部份的議題後續進行說明，這一節先來談談JavaScript ，這是一種設計非常彈性的程式語言，具備完整的程式語言功能，也是HTML5 最困難的部份，如果你具備使用任何一種程式言語的經驗，學習 JavaScript 會比較容易上手，否則的話必須從頭開始，瞭解個種程式語法元素，並且訓練運算邏輯能力，這也是書中的重點之一。

在我們正式進入 HTML、CSS 與JavaScript 的個別討論之前，先來看一個範例。

按一下SayHello ，這個應用程式回應使用者按下按鈕，出現了一個 Hello 訊息方塊。這是最單純的互動，應用程式加入了JavaScript 之後，開始有了生命，現在來看看其中程式的內容。


<!DOCTYPE html >
<html>
<head>
    <title>說 Hello </title>
    <script>
        function sayHello() {
            alert('Hello !');
        }
    </script>
</head>
<body>
    <button onclick="sayHello();" >SayHello</button>
</body>
</html>

相較於第個純HTML 內容的程式，這一次多了幾個標籤，其中以灰階標示的是<script> 標籤的內容，這段內容即是所謂的JavaScript 程式碼。當使用者按下畫面上的按鈕，即會執行這段程式碼，顯示Hello 訊息。

接下來是<body> 標籤的部份，其中配置了一組<button> 標籤，這一組籤會在網頁上顯示一個按鈕，其中的文字SayHello 將成為你所看到的按鈕表面的提示文字，而在這個標籤中，另外還有一段內容onclick="sayHello();" ，其中的onclick 是一種屬性，這個屬性的意思表示當使用者按下這個按鈕時，要求程式找到其後續雙引號中的sayHello 這個JavaScript 函式，然後執行其中的內容，整個流程如下圖：

在這個流程圖中，onclick 屬性是固定的，你必須指定這個名稱<button> 標籤才會認得，而sayHello() 則必須與<script> 中的sayHello() 相對應，這是自訂名稱，你可以修改這個名稱。

在執行這個範例的過程中，我們看到了一個簡單但是完整的應用程式運作過程，當然，其中還有更多的細節，需要進一步說明，後續的課程將逐一討論，讀者目前具備相關的概念即可，接下來我們要看的是CSS 。

回首頁