iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 3
0
自我挑戰組

溫故知新 JavaScript系列 第 3

Day3- Hello 來寫第一個 JS 吧!

https://ithelp.ithome.com.tw/upload/images/20200916/201294398T1NEtKoYc.jpg

首先我們要先知道怎麼創造一個 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 的效果,明天我們再繼續吧!


上一篇
Day2- 什麼是 JavaScript
下一篇
Day4- 透過 JS 去更動網頁內容
系列文
溫故知新 JavaScript30

尚未有邦友留言

立即登入留言