iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
自我挑戰組

Head First!從頭開始學JS 《深入淺出 JavaScript 程式設計》讀書筆記系列 第 4

Day.04 到底要放哪裏?JavaScript你搞得我好亂啊!

  • 分享至 

  • xImage
  •  

本日閱讀進度:
第一章 JavaScript 快速導覽(22~42頁)

重點摘要:

  1. JavaScript和使用者溝通的4種介面:
  • alert:可以透過一個跳出的對話框,送出一個簡短的訊息,使用者必須停下動作,點擊OK,才能繼續他的動作。(就像Day02最後的範例)

  • document.write:把網頁視為一份文件,可在任何時刻把任意的HTML和內容寫到頁面。不是個好的形式,但適合入門操作。

  • console.log:是一個進行程式碼除錯的好工具。可以把console視為一個具有記錄功能的物件,訊息則記錄在控制台。但因一般使用者不會去看控制台,所以也不是很好的形式。

  • 文件物件模型:和使用者溝通的最佳方式,可以存取實際的網頁、讀取並變更它的內容,甚至是改變結構和樣式。需要了解頁面的結構以及程式設計介面才有辦法撰寫。

  1. 如何把程式碼加入頁面

A. 把程式碼內嵌在<head>元素裡:最常見的方法,可以讓程式碼較容易被找到。瀏覽器載入頁面時,會先載入<head>的所有內容,但因<body>還沒載入,使用者可能需要等一段時間才會看到頁面。

B. 把程式碼內嵌在文件的本文中:需要將程式碼放在<script>元素裡,並把<script>元素擺到頁面的<body>中(通常放在本文結尾處)。使用者可在等待程式碼被載入的時候看到頁面的內容。

C. 把程式碼放到另一個檔案,並從<head>來連結它:就像連結CSS檔案一樣,差別在於會使用<script>標記的src屬性,將url指向JavaScript檔案,此檔案可用於多個頁面,且較容易維護。在本文載入前,程式碼就先被載入了。

D. 在頁面的本文裡連結外部的檔案:和上一點一樣,外部的JavaScript檔案較易維護,而擺在本文底部可以讓它在本文之後才被載入。
JS擺放位置

本文同步發表於cichen


上一篇
Day03. 你有JavaScriptStyle嗎?
下一篇
Day05. 公海到了沒?JS戰艦的賭盤要開啦!
系列文
Head First!從頭開始學JS 《深入淺出 JavaScript 程式設計》讀書筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言