本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

HTML 4.01 快速導覽 - <script> 腳本程式標籤

<script> 標籤 (tag) ,主要用途為提供網頁的腳本程式。



起始標籤結束標籤
需要需要


<script> 有幾個屬性
屬性Deprecated or Obsolete
src資源網址
typetext/javascript
text/ecmascript
application/javascript
application/ecmascript
language類似 typeDeprecated
defertrue
false
(主流瀏覽器未建置)


腳本程式主要有 JavaScript 與 VBScript 兩種,應用較廣的是 JavaScript 。如下例,我們用 JavaScript 在 guessgame.html 中寫了個猜數字遊戲
<html>
<head>
<title>網頁標題</title>
<script language="JavaScript">
var a = (Math.random() * 10).toFixed();
function guess() {
    var g = document.getElementById("n1").value;
    var v = document.getElementById("n3");
    
    if (a == g) {
        v.innerHTML = "猜對囉!";
    }
    else {
        v.innerHTML = "猜錯咧...";
    }    
}
</script>
</head>
<body>
<input id="n1" type="text" name="input" value="" /> 
<input id="n2" type="button" name="button" value="猜測" 
 onclick="guess();" /> 
<br / ><br / >
<label id="n3">這裡顯示結果</label>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:guessgame.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


其中, language 屬性指定所用的腳本語言 (script language) 種類。


這個遊戲猜 10 以下的整數,利用瀏覽器 (broswer) 開啟如下圖



有關 JavaScript 程式的相關教學說明,請參考本站的 JavaScript 快速導覽HTML DOM 快速導覽


也可以外連腳本程式的檔案,例如我們將猜數字遊戲的程式儲存到 guessgame.js
var a = (Math.random() * 10).toFixed();
function guess() {
    var g = document.getElementById("n1").value;
    var v = document.getElementById("n3");
    
    if (a == g) {
        v.innerHTML = "猜對囉!";
    }
    else {
        v.innerHTML = "猜錯咧...";
    }    
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名:guessgame.js
    功能:示範 HTML 4.01 標記語言的使用 
    作者:張凱慶
    時間:西元 2011 年 5 月 */


然後將 guessgame.html 改成外連
<html>
<head>
<title>網頁標題</title>
<script language="JavaScript"  src="guessgame.js">
</script>
</head>
<body>
<input id="n1" type="text" name="input" value="" /> 
<input id="n2" type="button" name="button" value="猜測" 
 onclick="guess();" /> 
<br / ><br / >
<label id="n3">這裡顯示結果</label>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名:guessgame2.html
     功能:示範 HTML 4.01 標記語言的使用 
     作者:張凱慶
     時間:西元 2011 年 5 月 -->


網頁外觀、執行結果都會是一樣的



嗯,這次答案是 3 哩!


中英文術語對照
標籤tag
腳本語言script language
瀏覽器broswer


您可以繼續參考



相關目錄
HTML 4.01 快速導覽 - 目錄
HTML, CSS 教材
首頁


參考資料

沒有留言: