iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

前言

這次主要是要說明練習所使用的工具,以及練習環境的架設

工具

開始練習之前當然需要工具,基本上會以 VSCode 為主,若自己想單純練習也可以直接使用線上工具,線上工具基本上已做好關聯性,也會直接呈現結果

架構

練習的檔案架構如下圖
(若使用線上工具練習基本上不用以下這些步驟)

  • 在桌面建立一個 JSPROJECT 的專案資料夾(名稱與檔名皆可自訂)
  • JSPROJECT 裡面建立一個 index.html 的檔案與 JS 的資料夾
  • JS 資料夾裡面再建立一個 test.js 的檔案
  • 開啟 VSCode
  • 把整個 JSPROJECT 的資料夾拖曳至 VSCode

連結檔案

為了將 JS 能與網頁( index.html )連結,進行互動
(若使用線上工具練習基本上不用以下這些步驟)

  • 點選 VSCode 左側欄的"index.html"
  • 輸入 ! + tab鍵,快速展開網頁架構
  • 在 <body> 內加入 <script>相關連結,如下
<body>
    <script   src="JS/test.js"></script>
    // src="JS/test.js" 表示會去讀跟"index.html"同層的JS資料夾內的"test.js"
    //因此若"test.js"跟"index.html"同層,則src="test.js"
</body>
  • 儲存檔案

發問

  • 是否可以在 HTML 直接執行 JS?
    • 可以的,在下面兩個<script>之間是可以打上 JS 的程式讓他進行,只是程式碼變長會變得比較混亂,因此會另存一個檔案將他隔離開來,建立一個 JS 的專用資料夾也是為了這個目的
<script>
// JS 程式碼
</script>
  • <script>的擺放位置?
    • 基本上是放在</body>前,因為在讀取 HTML 時是從上而下,因此若放在最前面可能會因為 HTML 尚未讀取,導致 JS 的結果無法順利呈現在網頁上

次回

來練習第一個 JS 的程式吧!


上一篇
Day01 - 說明
下一篇
Day03 - Hello World!
系列文
JavaScript 新手筆記31

尚未有邦友留言

立即登入留言