初探JavaScript - JS程式的進入方式 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 2

自我挑戰組

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

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

12th鐵人賽 javascript

Linn

2020-09-02 14:25:22

5010 瀏覽

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

在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>，則能加快網頁頁面顯示的速度。

另起一個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內容>