網頁中如何加入JavaScript

在網頁中加入JavaScript有三種方式，分成使用行內(inline)方式、標籤script方式與外部的JavaScript檔案方式在網頁中加入JavaScript，以下分別介紹。

(1)使用行內(inline)方式在網頁中加入JavaScript

將JavaScript撰寫在按鈕的屬性onclick內，點選按鈕執行此程式，稱作行內(inline)，以下範例會顯示目前時間到js1的元素內。

<p id="js1">按下按鈕在此顯示時間</p>

<button type="button" onclick="document.getElementById('js1').innerHTML = Date()">點選顯示時間</button>

以下範例除了顯示時間範例外，另一個範例可以點選按鈕改變字型大小。

Step1)新增區塊div包含標籤p設定id為js1，與「點選顯示時間」按鈕，該按鈕可以顯示目前時間到id為js1的元件內。

<div>

<p id="js1">按下按鈕在此顯示時間</p>

<button type="button" onclick="document.getElementById('js1').innerHTML = Date()">點選顯示時間</button>

</div>

(a)網頁預覽結果如下，點選「點選顯示時間」按鈕。

(2)以標籤script在網頁中加入JavaScript

將JavaScript撰寫在標籤script內，標籤script可以放在標籤head或標籤body內，以下範例會在載入網頁時(window.onload)，取代id為js1的文字為「這些文字來自JavaScript」，這時的JavaScript放在標籤script內。

新增div區塊，內含id命名為js1的標籤p。

<div>

<p id="js1">這些文字不會出現</p>

</div>

在標籤script內新增以下JavaScript程式碼，接著將標籤script放在標籤head內，在網頁載入時，自動取代js1的文字為「這些文字來自JavaScript」。

<script>

window.onload = function(){

document.getElementById("js1").innerHTML = "這些文字來自JavaScript";

}

</script>

以下範例除了自動取代文字外，另一個範例可以經由點選按鈕，顯示與隱藏文字，完整操作步驟如下。

Step1)首先設定標籤div的CSS，設定寬度為400px，邊線寬度為1px、紅色與實線，margin為10px。

div {

width:400px;

border: 1px red solid;

margin: 10px;

}

Step2)新增區塊div包含標籤p設定id為js1，標籤p文字為「這些文字不會出現」。

<div>

<p id="js1">這些文字不會出現</p>

</div>

在標籤script內，新增windows.onload函式，接著將整個標籤script放置於標籤head內，函式功能為取代id為js1的文字為「這些文字來自JavaScript」。

<script>

window.onload = function(){

document.getElementById("js1").innerHTML = "這些文字來自JavaScript";

}

</script>

網頁預覽結果如下。

Step3)新增區塊div包含標籤p設定id為js2、「點選隱藏文字」與「點選顯示文字」按鈕，點選這兩個按鈕分別呼叫函式hide與show。

<div>

<p id="js2">按下按鈕顯示隱藏此段文字</p>

<button type="button" onclick=hide()>點選隱藏文字</button>

<button type="button" onclick=show()>點選顯示文字</button>

</div>

在標籤script內定義函式hide與show，函式hide設定js2的屬性display為none，表示隱藏js2，函式show設定js2的屬性display為block，表示顯示js2。

<script>

function hide(){

document.getElementById('js2').style.display='none';

}

function show(){

document.getElementById('js2').style.display='block';

}

</script>

(3)以標籤script在網頁中加入外部的JavaScript檔

將JavaScript撰寫在外部的JavaScript檔案內，使用標籤script匯入到網頁，以下範例匯入檔案「ex.js」到網頁內。

<script src="ex.js"></script>

修改前一節的範例，將JavaScript放在外部的JavaScript檔案，經由點選按鈕顯示與隱藏文字。

Step1)在此網頁的資料夾下，新增檔案「ex.js」，內容如下，定義函式hide與show，函式hide設定js1的屬性display為none，表示隱藏js1，函式show設定js1的屬性display為block，表示顯示js1。

function hide(){

document.getElementById('js1').style.display='none';

}

function show(){

document.getElementById('js1').style.display='block';

}

Step2)在標籤head內使用標籤script匯入「ex.js」。

<script src="ex.js"></script>

Step3)設定標籤div的CSS，設定寬度為400px，邊線寬度為1px、紅色與實線。

div {

width:400px;

border: 1px red solid;

}

Step4)新增區塊div包含標籤p設定id為js1、「點選隱藏文字」與「點選顯示文字」按鈕，點選這兩個按鈕分別呼叫函式hide與show，這兩個函式定義在外部JavaScript檔案「ex.js」內。

<div>

<p id="js1">按下按鈕隱藏此段文字</p>

<button type="button" onclick=hide()>點選隱藏文字</button>

<button type="button" onclick=show()>點選顯示文字</button>

</div>