Day02 - 工具 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 2

自我挑戰組

JavaScript 新手筆記系列第 2 篇

Day02 - 工具

11th鐵人賽 javascript

hokou

2019-09-17 22:47:07

1585 瀏覽

分享至

前言

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

工具

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

VSCode(Visual Studio Code)：https://code.visualstudio.com/
線上工具
- JSBin: https://jsbin.com/
- Codepen: https://codepen.io/
- Chrome：快捷"F12"/右鍵"檢查"，選擇 console

架構

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

在桌面建立一個 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>