script 標籤

要在瀏覽器中執行JavaScript，可在一個HTML/XHTML檔案中撰寫<script></script>，並於兩個標籤間撰寫JavaScript程式碼。例如：

ScriptTag-1.html

<script>
    var name = prompt('Input your name');
    alert('Hello! ' + name + '!');
</script>

你可以按上面標示檔名的部份連至範例檔案，或將內容複製貼至 w3school 的 Tryit Editor，看看執行結果。

上例中，prompt()與alert()是客戶端全域物件上所提供的函式，在瀏覽器中，全域物件就是window物件，代表瀏覽器本身，為Window的實例。當然，上面的JavaScript程式沒什麼作用，只是讓你輸入名稱並顯示而已。你可以將<script></script>放在HTML標籤之中。例如：

ScriptTag-2.html

<html>
  <body>
    JavaScript Example!<br>
    <script>
        var name = prompt('Input your name');
        document.write('Hello!', name, '!');
    </script><br>
    JavaScript Example!
  </body>
</html>

瀏覽器在遇到<script></script>時，會停止文件解析，先執行<script></script>間的JavaScript，document是window全域物件上的特性，代表整份HTML文件，為Document的實例。如果你執行document的write()方法，則會在<body>中目前文件解析點輸出指定的文字，執行完<script></script>間的JavaScript後，再繼續文件的解析。

基本上，瀏覽器會假設你使用的是JavaScript語言，不過你也可以用HTTP Content-Script-Type標頭來指定，標頭可以使用<meta>來摸擬，所以你可以如下指定：

你也可以在<script>上使用type屬性來指定。例如：

type指定的是MIME（Multipurpose Internet Mail Extension）型態，一些可指定的範例有：

text/ecmascript
text/jscript
text/vbscript
...

第一個是JavaScript的官方名稱，其它類型的指定，主要是看瀏覽器是否支援，例如在安裝 IronPython 的情況下，你甚至可以讓 Internet Explorer 支援 text/python 的指定。

HTML4規範了type屬性，但在HTML5中為選用。在早期，<script>上還允許設定language屬性，在HTML 4時標準化<script>標籤時，並沒有採納language屬性，有時會有一些早期撰寫的網頁上看到這樣的設定：

language甚至也允許撰寫版本號，例如：

由於HTML 4並沒有採納language，現在已不建議設定，新版瀏覽器也會忽略這個屬性，僅有時為了與舊版瀏覽器相容，你會看到這樣的設定：

你可以將<script></script>放在整份HTML文件之後，通常會這麼作的JavaScript，是在載入期間不會改變頁面畫面的程式，為了不讓<script></script>中的程式碼影響了載入的速度，可以將<script></script>放在整份HTML文件之後。

你也可以將<script></script>放在<head></head>之間。例如：

ScriptTag-3.html

<html>
  <head>
    <script type="text/javascript">
      var name = prompt('Input your name');
      document.write('Hello!', name, '!');
    </script>
  </head>
  <body>
    JavaScript Example!
  </body>
</html>

要注意的是，瀏覽器處理<head></head>間的JavaScript時，還沒有解析<body>中的標籤，所以上例中，document的write()會直接從<body>的第一行開始。一般初學者常犯的錯誤是：

ScriptTag-4.html

<html>
  <head>
    <script type="text/javascript">
      var welcome = document.getElementById('welcome');
      welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
    </script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

document的getElementById()可以根據Id值取得HTML標籤的實例，innerHTML則可設定實例的HTML內容。在執行上例中的JavaScript時，<body></body>中的文件根本還沒開始解析，所以<span id="welcome"></span>根本還不存在，所以取得的是undefined，根本無從設定innerHTML。

如果你要等到文件解析完成再執行指定的程式碼，可以借助事件。例如：

ScriptTag-5.html

<html>
  <head>
    <script type="text/javascript">
      window.onload = function() {
          var welcome = document.getElementById('welcome');
          welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
      };
    </script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

window物件的onload特性可以指定函式，當瀏覽器完成整份HTML文件的解析後，如果onload特性有設定函式，就會予以呼叫。

有些瀏覽器無法執行JavaScript，此時會使用註解，讓這些瀏覽器看不到JavaScript程式碼：

瀏覽器作為客戶端的時候作了些調整，讓前的//因為是單行註解，所以就看不到之後的-->了。

如果是在XHTML文件中，由於只要是<、&等字元，都會被當作XML標記，所以可將JavaScript安排在//<![CDATA[與//]]>之間。例如：

<![CDATA[與]]>前的//成了單行註解，所以不會被直譯。

你可以將JavaScript程式撰寫在.js檔案中，並使用<script>的src屬性指定檔案名稱。例如：

ScriptTag-6.js

window.onload = function() {
    var welcome = document.getElementById('welcome');
    welcome.innerHTML = 'Hello! ' + prompt('Input your name') + '!';
};

如果上面的.js檔案放在js資料夾中，則你可以如下使用：

ScriptTag-6.html

<html>
  <head>
    <script type="text/javascript" src="js/ScriptTag-6.js"></script>
  </head>
  <body>
    <span id="welcome"></span>
  </body>
</html>

雖然程式都在.js中，但<script></script>還是要成對出現，而<script></script>中出現的程式碼會被忽略。

在這邊要注意編碼的問題，瀏覽器會假設載入的.js檔案編碼與HTML網頁編碼相同。如果你的.js檔案編碼與HTML編碼不同，JavaScript中非ASCII相容字元部份就會出現亂碼。

例如，如果你的.js是Big5編碼，而網頁是UTF-8顯示，則可以在<script>上使用charset指定.js的編碼為Big5：

現在不支援JavaScript的瀏覽器幾不存在，不過瀏覽器上的JavaScript仍可能因一些原因而被禁止使用（例如防毒軟體、安全機制等級之類）。如果想在無法執行JavaScript時，仍可呈現一些基本功能畫面，則可以使用<noscript></noscript>，夾雜在<noscript></noscript>中的內容，會在無法執行JavaScript時出現，為使用者提供替代的頁面內容。