JavaScript在HTML中的執行次序

目錄 : 網頁設計學習課程參考

為了加強了解JavaScript在HTML中的執行次序, 我們接下來一同做一個實驗.

首先我們在Workspace中加入一個新的網頁, 命為lesson6.html

接下來我們設定一下本頁的標題及連回首頁index.html的連結, 如下圖

然後在首頁index.html中放置一個連結前往lesson6.html, 如此首頁就提供}一個課程的總覽, 如下圖

現在可以用lesson6.html來做實驗了. 請在head區段內加入下列內容

                                       <script type="text/javascript>

                                             alert("pause");

                                       </script>

如下圖.

此處的alert()會產出一個彈出視窗以展示所提供的字串.

接下來把整個script區段複製至下方放置在nav區段下, 並在下方之div區段內加入一段文字, 如下圖.

現在開始預覽測試.

首先出現的是head區段內的alert(),  網頁的內容完全空白, 因此是執行至head區段內的script區段,尚未解析下方之body區段.

當我們在彈出視窗中按下確定鍵後, 彈出視窗立即消失並且出現網頁中的標題及連結. 然後隨即出現第二個alert()彈出視窗, div區段內的內容則沒有出現.

在第二個alert()彈出視窗中按下確定鍵後,div區段內的內容隨即出現.

由以上的實驗, 可以確認JavaScript與HTML的解析與執行真的是依照在HTML檔案中位置, 由上往下執行.