【JS幼幼班】Step.02 寫下你人生中第一個 JavaScript 吧


Posted by nancy543 on 2021-07-08

是的,你沒有看錯。現在就開始你人生第一段的 JavaScript 程式碼。
只是在開始寫之前,你必須先了解一下 JS 的建置方式:


JS 要放在哪?

1.放在 <head></head>之間:

2.放在 HTML 最後面, </body> 結尾標籤之前:(此方式最推薦)

在前一個章節就提過 考試會考 的內容:
瀏覽器讀取 HTML 的順序是由上而下讀取,當讀到 <script> 標籤或 JS 檔案時,網頁渲染會暫停,這時瀏覽器會先把 JS 腳本先執行完,再渲染後面的內容。所以 JS 腳本或檔案要放在 HTML 的最後 </body> 結束標籤之前,才不會導致頁面被中斷讀取過久而影響使用者體驗。

而一個 HTML 裡面可以同時存在很多個 JS 或 JQ 腳本,所以優化瀏覽器最有效率的寫法,當然是把 JS、JQ 腳本或引用的檔案,放在 HTML 最後面 </body> 結尾標籤之前囉。


JS 怎麼寫?

1.直接內嵌在 HTML 文件中:

把 JS 程式碼寫在 <script></script> 標籤裡面
舊版 HTML 寫法:
必須在 <script> 標籤內指定 type 屬性,且規定腳本的 MIME 類型為 text/javascript

<script type="text/javascript">
    var a = 5; 
    console.log(a); 
</script>

新版 HTML5 寫法:
<script> 會自動執行並忽略 type 屬性,不需要再多寫 MIME 類型。

<script>
    var a = 5; 
    console.log(a); 
</script>

2.引入外部 JS 命令稿(此方法最推薦)

  • 把 JS 程式碼寫在獨立檔案,以絕對路徑讀取檔案,供 HTML 引入執行。

    <script src="js/xxxxx.js"></script>
    
  • 或是一些含有 JS 或 jQuery(以下簡稱 JQ) 特效的官方 CDN 等,才需要用外部連結引入,如:

    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    

4.HTML 標籤內的嵌入式寫法。(此方法最不推薦!)

早期網頁還沒出現 jQuery 之前,在 HTML 標籤內混寫 JS 語法是當時傳統的做法,你也許見過下面的寫法:

<input type="text" name="date" onchange="validateDate()">

<div onclick="window.open('test.html','_self');" class="btn"></div>

將 JS 嵌入 HTML 標籤裡使用,會導致網站原始碼不易閱讀及維護,原因是 HTML 標籤通常是描述檔案的排版結構,而非網頁操作的程式行為。而「非侵入式 JavaScript」方案,則是以程式碼另外獨立撰寫其需要對應的事件,而不是和網頁元素內嵌在一起。在 JS 腳本事件中的相關元素,在 HTML 標籤中則改用簡單的屬性參數,如:用 id屬性、 class名稱 或 value值等,作為程式碼回應的參數進行執行需要的設定,尤其對網頁內擁有許多相同功能需要傳輸或設定,更是方便許多。

如果把上面範例第一行的 <input> 語法,改為非侵入式寫法,整句話的語意會更加清晰。

<input type="text" name="date" id="date">
<script>
    window.addEventListener('DOMContentLoaded',function(event){
        document.getElementById('date').addEventListener('change',validateDate);
    }); 
</script>

註:<input> 內的 id 元素就是 JS 腳本事件中對應的參數。

(現在語法看不懂沒關係,主要是讓 HTML 和 JS 分開撰寫,以明確解析標籤的功能用法。)

上述 4 種方式各有其用處,除非 JS 程式碼量很短,否則利用外部引入的方式,不僅易於維護,也可在重覆瀏覽時用快取節省網頁載入時間,還更利於維護與修改。若頁面同時存在 JS 和 JQ 檔案,則需要分開引入,以免造成維護上的困難。


以上就是輕鬆學習 JavaScript 的建置方法,接下來就開始教你怎麼寫 JS 吧!

首先打開你的網頁編輯器,如:VS Code、Sublime Text、Atom、Notepad...都可。如果都沒有,可以使用線上編輯器,個人還蠻推薦 CodePenJSBin,畢竟畫面功能直覺,且預覽速度又快,而且 CodePen 免費會員還有存檔功能,及各種大神的作品可以參考。

1.打開 CodePen 之後,不需登入一樣可以使用,請點擊左上方的「Start Coding」按鈕

2.接下來出現有「HTML、CSS、JS」這3個編輯窗格,和一個大大的「預覽」窗格。
如果你的欄位編排方式和我的長得不一樣也沒差,畢竟這是個人喜好。如果想跟我一樣,請按右上方的「Change View」更改你喜歡的編輯方式,滑出一組三選一欄位,請改為中間那個。

3.然後請在右上角的「JS」窗格內寫下以下程式碼。

alert("這是我的第一個 JavaScript");

4.滑鼠游標點擊下方的「預覽」窗格,1-2秒後就可以看到畫面上方跳出一個小視窗,內容寫著:「這是我的第一個 JavaScript」

然後...你就完成了你人生中第一支的 JavaScript了。


如果你是用自己的編輯器,以 VS Code 為例,方法如下:
1.打開 VS Code,點擊 File (檔案) -> New File (新增檔案)

2.接下來要把從無法辨識的文件改成 html。請在圖的最下排藍色功能列(圖寫1)上,點擊「Plain Text 純文字」,圖上方跳出搜尋列(圖寫2)打上「html」,然後按 Enter 鍵

3.接著在文件內容打上半形的「!」,按 Enter 鍵

4.出現 html5 的標準結構之後,在 <body></body>之間打入下方程式碼:

<script>
    alert("這是我的第一個 JavaScript");
</script>

如圖:

5.接著點擊 File (檔案) -> Save (儲存),隨便取個 test.html

6.接著從檔案總管直接雙擊剛儲存的檔案,它便會使用你電腦預設的瀏覽器開啟,這裡以 Google Chrome 瀏覽器為例。你可以看到網頁上方出現一個彈跳視窗,寫著「這是我的第一個 JavaScript」,這樣就完成了。


What?!!!
沒錯,JavaScript 的入門門檻就這麼低,剩下就是要詳加了解它的語法和邏輯運用而已。
其實它還能以很多種不同的方式來顯示,以下再介紹幾個初學者最常使用的簡易寫法:

1.用 innerHTML() 寫入 HTML 元素

innerHTML 是 W3C 規定的標準寫法,主要是用來取得 HTML 元素或寫入字串到 HTML 的語法,它還有個特性,就是會覆蓋原本寫的內容。另外,它還可以搭配 Element Object 來執行,如語法 getElementById() (取得 id值 )或 getElementsByName() (取得 name值 )等,這也是多數人常用來使用網頁互動特效的方法之一,而且幾乎所有主流的瀏覽器都支援此功能。寫法如下:

<div id="Num"></div>
<script>
    document.getElementById('Num').innerHTML = 5;
    //JS翻譯:把數字 5 寫入到 HTML 標籤內含有 id 叫做 Num 的地方
</script>

你可以使用 CodePen 測試看看,把上方的程式碼,複製貼到 CodePen 左上角的 「HTML」 欄位內,下方的預覽窗格就會出現 5 的數字。


2.用 console.log() 寫入瀏覽器控制台。(最多人用這個 Debug 偵錯)

幾乎各家瀏覽器都有 console 控制台(或稱「主控台」)的功能,大多都是按 F12,或是在瀏覽器的網頁內容按右鍵,選擇「檢查」或「檢查原始碼」就可以開啟「開發者工具」這個神奇的介面,不管是基礎或資深開發者都需要使用這個無敵好用的偵錯功能。

1.以 Chrome 瀏覽器為例,按 F12,開啟「開發者工具」介面,點擊左上方的「Console

3.在上圖「Console 控制台」內,看到一個正在閃爍的游標,這時在游標處打入下方程式碼:

console.log(5 + 2);

然後按 Enter 鍵,則會看到下方會自動輸出數字 7

然後我們又完成了二種寫 JS 的方法了。
以上就是 JavaScript 的超入門建置方式,接下來就是開始進入基本概念和語法囉。


參考資料:


上一篇:【JS幼幼班】Step.01 學習,從「不要害怕」開始
下一篇:【JS幼幼班】Step.03 JavaScript 的基本概念


#javascript #JS幼幼班 #learningJS







Related Posts

Go json and embedded struct

Go json and embedded struct

[2] Hello, World!

[2] Hello, World!

React - Netlify Depolyment

React - Netlify Depolyment


Comments