iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記 系列 第 2

初探JavaScript - JS程式的進入方式

  • 分享至 

  • xImage
  •  

每個程式語言都有自己的程式進入點,要如何進入JavaScript的程式碼?如何讓JS在網頁中跑起來?可以使用下面的方式:

  1. 在HTML中插入<script></script>的標籤

可將<script ></script>標籤插入在<head></head>或是<body></body>中:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert('Hello JS');
    </script>
</head>

或是

<body>
    <script>
        alert('Hello JS');
    </script>
</body>

需注意的是,因HTML檔案,通常都是由上往下逐行去執行程式碼,所以如果是將<script ></script>插入在body標籤結尾上方</body>,則能加快網頁頁面顯示的速度。


  1. 另起一個JS檔案作為連結

如果不希望HTML與JS參雜寫的話,可以另外開一個JS檔與給HTML檔案參考連結即可。舉例檔名為xxx.js,則在HTML<body></body>或是<head></head>中插入<script src="xxx.js"></script>,src為要參考的JS檔的位置(連結)。若一個HTML檔有使用到多個JS檔案,則全部都要載入,如下:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="xxx.js"></script>
    <script src="xx1.js"></script>
    <script src="xx2.js"></script>
    <script src="xx3.js"></script> 
</head>

或是

<body>

    <script src="xxx.js"></script>
    <script src="xx1.js"></script>
    <script src="xx2.js"></script>
    <script src="xx3.js"></script> 
</body>

另起一個JS檔的好處是:
• 可將HTML與JS程式碼分開,使得HTML與JS在觀看和維護上更為容易。
• 網頁的下載速度會比較快。


另外,不管是<script >或是<script src="">擺放的位置都需要特別注意,記得之前有看到網友發問一個問題,他想要使用JS改變HTML標籤內的內容,不過卻怎麼都無法改變,原來,只是他的順序擺放錯了,例如:欲將原<h1>的名字'蕾希'改成'Lexi L'卻一直無法顯示正確,不過將順序調換後,就成功了,因為程式碼是由上往下執行,且一樣的標籤下面的會覆蓋掉上面的,所以順序的擺放也需要留意喔。

<無法改變h1內容>
https://ithelp.ithome.com.tw/upload/images/20200902/20115106dVQPNwiq0c.png

<順序調整後,成功改變h1內容>
https://ithelp.ithome.com.tw/upload/images/20200902/20115106qifXVHsn40.png

資料參考來源:w3schools.com


上一篇
初探 JavaScript - 簡介
下一篇
初探JavaScript - JS註解的寫法
系列文
「 Nice to meet you , JavaScript . 」- 學習日記 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言