首先我們要先知道怎麼創造一個 JS 環境，可以打開你的 IDE 寫程式的編輯器，這邊我是用 vscode。
第一步
創建一個檔案，這邊我取名為 all.js 副檔名一定要叫做 js 這樣瀏覽器才知道這是一個 JS 檔案。
第二步
在創建一個 HTML 檔，並且在 head 這個區塊內引入剛剛建立的 JS 檔案，方法就像下面這樣。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>溫故知新 JS</title>
</head>
<body>
<script src="all.js"></script>
</body>
</html>
為什麼放在 </body> 前面而不是放在 head 內呢？
原因是通常 JS 都會去操作 html 的內容，我們得先確保所有的 html 都載入再去載入 JS 程式，不然 JS 載入進來結果 html 還沒載入根本不知道要操作哪個元素會導致程式出錯，所以建議是放在最後一個 </body> 前面。
第三步
接著就可以開始撰寫第一個 JS 效果了，我們可以在剛剛的 js 檔寫這樣的語法。
alert('hello');
最後我們打開瀏覽器把剛剛的 index.html 檔案丟進去或是直接雙擊 index.html 檔案，應該會發現彈出一個視窗！沒錯這就是你的第一個 JS 效果，alert 是 JS 彈出視窗的函式，而在括弧內則是你要顯示的內容，你也可以隨意在裡面打任何字試試看會有什麼效果喔！
這邊額外補充一下在撰寫 JS 時，有時候我們需要知道目前寫的這段語法是不是有抓到我們要的數值，常用兩種語法去查看一個叫做 console.log 一個叫做 alert ，我是比較常用 console.log 因為這樣可以直接在瀏覽器開發者工具看到結果，alert 會一直彈出視窗會有點麻煩。
今天就這樣輕輕鬆鬆地實現了一個 JS 的效果，明天我們再繼續吧！
iThome鐵人賽
看影片追技術