document.write

document就是指當前的網頁，使用 write可以寫入字串。

字串相加

二字串相加，必需使用 “+”，如下

a="Hello";
b="World";
document.write(a+b);

格式化列印

在 javascript 中格式化列印，又稱為模版(Template)。

將要格式化的字串放在 ` ` 之中。請注意，` 為 “~”鍵下面那個字符。然後將變數置於 ${}之中，如下藍色部份。

<script language="javascript">
。   for (i=1;i<=9;i++){
        document.write("<tr>");
            for (j=1;j<=9;j++){
                a=`${i}*${j}=${i*j}`;
                document.write("<td height='20' width='50'>");
                document.write(a);//模版 template, javascript的格式化列印
                document.write("</td>");
            }
        document.write("</tr>");
    }
</script>

按鈕與 radio 事件

按鈕的onclick事件可以調用javascript的函數. radio及button不一定要寫在 <form id=’form_name’>裏面.

但因 form的language會以陣列的方式傳出, 所以才會包含在form裏

<form name="form_name" id="form_name">
    <label><input name="language" type="radio" value="繁中" checked>繁中</label>
    <label><input name="language" type="radio" value="韓文">韓文</label>
    <label><input name="language" type="radio" value="日文">日文</label>
    <button onclick="getLang()">取得語言</button>
</form>
<script>
    function getLang(){
        form = document.getElementById("form_name");
        for(i=0; i<form.language.length;i++){
            if(form.language[i].checked){
               alert(form.language[i].value);
            }
        }
    }
</script>

按鈕與下拉式選單

<html>
    <head>
        <title>Mahal超級網站</title>
    </head>
    <body>
        <form name="countryform" id="countryform">
            <select name="country" id="country">
                <option value="台灣">台灣</option>
                <option value="韓國">韓國</option>
                <option value="日本">日本</option>
            </select>
            <button onclick="getCountry()">取得資料</button>
        </form>
    </body>
    <script>
        function getCountry(){
            f=document.getElementById("countryform");
            alert(f.country.value);
        }
    </script>
</html>

寫入HTML

下面代碼中, 使用 getElementById取得控制項的物件. 然後要改變文字方塊的值, 需變更 value 變數, 但要改變 div的值, 需變更innerHTML變數

<select name="country" id="country">
    <option value="TW">台灣</option>
    <option value="KO">韓國</option>
    <option value="JP">日本</option>
</select>
<div id="showDiv"></div>
<label>結果 : </label><input type="text" name="showText" id="showText"/>
</br>
<button onclick="toText()">文字方塊</button>
<button onclick="toDiv()">Div</button>
<button onclick="toClear()">清除</button>

<script>
function toText(){
    f=document.getElementById("showText");
    f.value=document.getElementById("country").value;
}
function toDiv(){
    f=document.getElementById("showDiv");
    f.innerHTML=document.getElementById("country").value;
}
function toClear(){
    f=document.getElementById("showText");
    f.value=""
    f=document.getElementById("showDiv");
    f.innerHTML=""
} 
</script>

結果 :

九九乘法表

<html>
    <head>
        <title>九九乘法表</title>
    </head>
    <body>
        <table border='1' cellpadding='0' cellspacing='0' align='center'>
            <script>
                for(i = 1; i < 10; i++){
                    document.write('<tr>');
                    for(j = 1; j < 10; j++){ 
                        document.write("<td width='50'>");
                        document.write(i*j);
                        document.write('</td>');
                    }
                    document.write('</tr>');
                }
            </script>
        </table>
    </body>
</html>	
結果

1	2	3	4	5	6	7	8	9
2	4	6	8	10	12	14	16	18
3	6	9	12	15	18	21	24	27
4	8	12	16	20	24	28	32	36
5	10	15	20	25	30	35	40	45
6	12	18	24	30	36	42	48	54
7	14	21	28	35	42	49	56	63
8	16	24	32	40	48	56	64	72
9	18	27	36	45	54	63	72	81

表單與驗証

底下代碼，可以使用 javascript 驗証表單內的元件是否為空白，若資料全都符合，就可傳送表單

<html>
    <head>
        <meta charset="utf-8"/>
    </head>
    <body>
        <form name="mem_form" id="mem_form" onsubmit="return check();" action="member_db.php" method="post">
            <table border="1" cellspacing="0" cellpadding="0" align="center">
                <tr>
                    <td colspan="2" align="center">會員登入系統</td>
                </tr>
                <tr>
                    <td width="70">姓名</td>
                    <td><input type="text" name="txtName"/></td>
                </tr>
                <tr>
                    <td width="70">帳號</td>
                    <td><input type="text" name="txtAccount"/></td>
                </tr>
                <tr>
                    <td width="70">密碼</td>
                    <td><input type="password" name="txtPassword"/></td>
                </tr>
                <tr>
                    <td width="70">確認密碼</td>
                    <td><input type="password" name="txtConfirm"/></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="submit" value="註冊"/>
                    </td>
                </tr>
            </table>
        </form>
    </body>
    <script language="javascript">
        function check(){
            f=document.getElementById('mem_form');
            cols=["姓名","帳號", "密碼", "確認密碼"];
            for(i=0;i<f.length-1;i++){
                if(f[i].value===""){
                    window.alert(cols[i]+"不可為空白");
                    return false;
                }
            }
            if (f['txtPassword'].value!=f['txtConfirm'].value){
                window.alert("\n密碼不符合");
                return false;
            }
            return true;
        }
    </script>
</html>

表單的 onsubmit=”return check();”，check()函數若傳回 false，則不會傳送表單，若傳回true，就會自動傳送表單。

JavaScript