2011年11月20日 星期日

如何將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 指令 。


張貼者： 於
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)