如何將JavaScript嵌入HTML碼中 :
要於HTML碼中嵌入JavaScript其實很簡單,JavaScrip的程式碼必須被包在<SCRIPT>及</SCRIPT>標籤之間。
例:
|
<SCRIPT>
JavaScript 程式碼
...
...
</SCRIPT> |
|
<SCRIPT></SCRIPT> 標籤屬性:
|
LANGUAGE
|
指出SCRIPT所使用的語言。
例:
<SCRIPT LANGUAGE="JavaScript">JavaScript程式碼</SCRIPT>
<SCRIPT LANGUAGE="Text/JavaScript">JavaScript程式碼</SCRIPT>
對於較小的程式及基本的HTML而言,直接把 JavaScript 放在網頁檔案中的HTML程式碼中是很方便的 |
SRC
|
導向內含Javascript原始程式碼檔案的URL位址。此檔案副檔名必須是為
.js 的檔案。
例:
<SCRIPT LANGAGE="JavaScript"
SRC="filename.js"> </SCRIPT>
但當碰到常而複雜的程式時,為了使網頁檔案中的HTML程式碼和 JavaScript程式碼皆能較易於開發、維護,或多個網頁共用共一個Javascript程式碼檔案,您可以將JavaScript程式碼放於外部檔案如:filename.js。然後在網頁檔案的HTML程式碼中以:
<SCRIPT LANGAGE="JavaScript" SRC="filename.js">
</SCRIPT>,將filename.js嵌入網頁檔案的HTML程式碼中。
|
|
JavaScript嵌入HTML碼中實例:
|
<HTML>
<HEAD>
<TITLE>9 Walker Studio-9W個人設計工作室</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/jsl;
charset=Big5" >
<META NAME="AUTHOR" CONTENT="Ping Yang,Hui-Ping
Yang">
<link href="mt_style.css" rel="stylesheet"
type="text/css">
<!-- 直接把 JavaScript 放在網頁檔案中的HTML程式碼中
-->
<script language="JavaScript">
<!--
function MM_reloadPage(init) {
//reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4))
{
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage;
}}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
// -->
</script>
</HEAD>
<BODY >
<table width="790" border="0" height="70">
<tr>
<td>
<table id="Table_01" width="790" height="71"
border="0">
<tr>
<td colspan="2" rowspan="2">
<a href="default.asp">9W個人設計工作室</a>
</td>
</tr>
<tr>
<td>
<div align="center">
<!-- 導向內含Javascript原始程式碼檔案的URL位址
-->
<script type="text/javascript"
src="show_ads.js"></script>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</BODY >
</HTML>
<script language=JavaScript>
if(document.all){
var tags=document.all.tags("a")
for (var i=0;i<tags.length;i++)
tags(i).outerHTML=tags(i).outerHTML.replace(">","
hidefocus=true>")}
</script> |
|
適合於HTML碼中嵌入JavaScript的位置有三個:
第一:寫在<head></head>之間,好處是可以保證在載入<body>內容之前已經完全載入<head>的JavaScript。
第二:寫在<body></body>範圍間,當你要用JavaScript顯示物件到<body></body>範圍間時就會用到。
第三:寫在 </html>之後,好處是不會影響 <html> 範圍的內容,適合一般免費網頁供應商在網頁加入廣告窗
(pop-up window) 。
程式範例(直接於HTML碼中嵌入JavaScript): 看程式samp01.html執行結果
|
<html>
<body>
<script type="text/javascript">
document.write("Hello World!")
</script>
</body>
</html> |
|
JavaScript有幾種方法可以輸出文字,在這裡我們先用document.write()來輸出文字到瀏覽器視窗中。
程式範例(導向內含Javascript原始程式碼檔案的URL位址): 看程式samp02.html執行結果
samp02.html原始碼:
|
<html>
<body>
<SCRIPT LANGAGE="JavaScript"
SRC="test.js"> </SCRIPT>
</body>
</html> |
|
test.js原始碼:
|
document.write("Hello
World! JAVASCRIPT TEST!");
document.write("<i>Hello World! JAVASCRIPT TEST!</i>"); |
|
document是一個物件,write是document物件的一個方法,它們中間有一點
(.),是用來連貫它們的。
"Hello World! JAVASCRIPT TEST!"是write的參數,Hello
World! JAVASCRIPT TEST!字串被雙引號括著, 即是說Hello
World! JAVASCRIPT TEST!是一個字串。句尾的分號 (;)
是用來表示該行的結尾。
總括來說, 這一行的作用就是叫瀏覽器在顯示中的一頁 (document) 寫 (write) 一句 Hello
World! JAVASCRIPT TEST!的字串。當然你也可以用document.write產生HTML標記,這就可以動態地造出HTML網頁了。上例中的:
document.write("<i>Hello
World! JAVASCRIPT TEST!</i>");
能於瀏覽器中顯示斜體的Hello World! JAVASCRIPT TEST!字串。
|
文件編輯的函數指令為 document.method(
),method 為有關文件編輯的各種執行方法,以句點與 document 分開,後面括號裡面則為執行的內容。
與文件編輯相關的 method 有很多種,常見的 method 如下:
輸出文件:document.write 指令。
開啟檔案: document.open 指令、window.open 指令、window.location 指令。
關閉檔案: document.close 指令、window.close 指令、self.close 指令 。 |
|
兩種於JavaScript中加入程式註解的方式:
第一種:使用雙斜線 //來作註解( //右邊的東西都是註解):
例:
|
<SCRIPT>
JavaScript 程式碼
//字型顏色設定
...
//字型尺寸設定
...
</SCRIPT> |
|
第二種:使用/*和*/來作註解(所有放在
/*及*/範圍內的東西都是註解,如果你想打很多行註解,用這款比較方便):
例:
|
<SCRIPT>
JavaScript 程式碼
/*
字型顏色設定及字型尺寸設定
如果你想打很多行註解,用這款比較方便
*/
...
</SCRIPT> |
|
如何讓不支援JavaScript舊瀏覽器跳過程式碼:
在Javascript是使用
<!--
JavaScript 程式碼
...
...
//-->
讓不支援JavaScript舊瀏覽器跳過程式碼。
例:
|
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Hello World!")
//-->
</SCRIPT> |
|
<noscript> 和 </noscript>:
在兩個原因下瀏覽器不能夠執行JavaScript: 第一是舊的瀏覽器無法辨識JavaScript,第二就是使用者關閉了JavaScript功能。這時瀏覽器就會顯示<noscript>
範圍的內容,讓網頁瀏覽者知道該網頁有些內容不能如常運作。
例:
|
<NOSCRIPT>
當 JavaScript 無法正常顯示時,使用NOSCRIPT標籤可以顯示NOSCRIPT標籤中的內容。
</NOSCRIPT> |
|
|