直接ページに記述する場合

<script type="text/javascript"> <!-- // コメント // --> </script> <noscript> <table border="0" bgcolor="#ffff80" cellpadding="5"> <tbody> <tr> <td>JavaScript対応方法 <ul> <li>Internet Explorer <ul> <li>[ツール]→[インターネットオプション]→[セキュリティ] <li>[レベルのカスタマイズ]→[スクリプト]→[アクティブスクリプト] <li>[有効にする] </ul> <li>Netscape Communicator <ul> <li>[編集]→[設定]→[詳細]→[JavaScript を有効にする] </ul> </ul> </td> </tr> </tbody> </table> </noscript>

外部ファイルの場合

<script type="text/javascript" src="xxx/xxxxxx.js"> <!-- // コメント // --> </script> <noscript> <table border="0" bgcolor="#ffff80" cellpadding="5"> <tbody> <tr> <td>JavaScript対応方法 <ul> <li>Internet Explorer <ul> <li>[ツール]→[インターネットオプション]→[セキュリティ] <li>[レベルのカスタマイズ]→[スクリプト]→[アクティブスクリプト] <li>[有効にする] </ul> <li>Netscape Communicator <ul> <li>[編集]→[設定]→[詳細]→[JavaScript を有効にする] </ul> </ul> </td> </tr> </tbody> </table> </noscript>

複数外部ファイル

<script type="text/javascript" src="xxx/xxxxxx.js"></script> <script type="text/javascript" src="yyy/yyyyyy.js"></script>

イベント-ボタン

<button onclick="関数名()">表示文字</button>

イベント-ボタン-input

<input type="submit" value="表示文字" onclick="関数名()">

イベント-ボタン-リンク

<a href="javascript:関数名();">表示文字</a>

イベント-ボタン-生成

document.write('<FORM>'); document.write('<INPUT type="button" name="ボタンID" value="表示文字" onClick="関数名()">'); document.write('</FORM>');

Confirmボックス

if(confirm("メッセージ")){ //[OK]処理 }else{ //[キャンセル]処理 }

アラート

• デバッグに必要

alert("メッセージ");

チェックボックス

<input type="checkbox" id="名前" onchange="関数名()">

チェックボックス-値の受け取り

function 関数名() { if(名前.checked==1) //チェックtrue else //チェックfalse }

セレクトボックス

<select id="名前" onchange="return 関数名()"> <option value="">- 表示文字 -</option> <option id="なまえ1" value="値">表示文字</option> <option id="なまえ2" value="値">表示文字</option> </select>

セレクトボックス-値の受け取り

function 関数名() { var 変数ア=document.getElementById("名前"); var 変数イ="なまえ"+変数ア.selectedIndex; var 変数ウ=document.getElementById(変数イ); var 変数エ="メッセージ"+変数ウ.text+"メッセージ";//表示文字取得 var 変数オ="メッセージ"+変数ウ.value+"メッセージ";//値取得 　　変数ア.selectedIndex=0; }

1-1取得又は表示-id-<td>テキスト

• getElementById
• DOM対応ブラウザ
• id属性を参照
• <table><td id="名前">テキスト</td></table>

document.getElementById("名前").innerText // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementById(id); } $("名前").innerText

1-2取得又は表示-id-<td>タグ

• getElementById
• DOM対応ブラウザ
• id属性を参照
• <table><td id="名前">タグ</td></table>

document.getElementById("名前").innerHTML // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementById(id); } $("名前").innerHTML

1-3取得又は表示-id-<input>テキスト

• getElementById
• DOM対応ブラウザ
• id属性を参照
• <input id="名前">

document.getElementById("名前").value // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementById(id); } $("名前")

2-1取得又は表示-name-<td>テキスト

• getElementsByName
• documentオブジェクトのみ参照可能
• DOM対応ブラウザ
• name属性を参照
• <table><td name="名前">テキスト</td></table>

document.getElementsByName("名前").innerText // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementsByName(id); } $("名前").innerText

2-2取得又は表示-name-<td>タグ

• getElementsByName
• documentオブジェクトのみ参照可能
• DOM対応ブラウザ
• name属性を参照
• <table><td name="名前">タグ</td></table>

document.getElementsByName("名前").innerHTML // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementsByName(id); } $("名前").innerHTML

2-3取得又は表示-name-<input>テキスト

• getElementsByName
• documentオブジェクトのみ参照可能
• DOM対応ブラウザ
• name属性を参照
• <input name="名前">

document.getElementsByName("名前").value // 以降[$("名前")]だけで取得可能にする function $(id){ return document.getElementsByName(id); } $("名前")

取得又は表示-id-<table>配列テキスト

• DOM対応ブラウザ
• id属性を参照
• 複数多数のセル値をもつテーブル参照

document.getElementById('名前').rows[数値].cells[数値].innerText

取得又は表示-id-<table>配列タグ

• DOM対応ブラウザ
• id属性を参照
• 複数多数のセル値をもつテーブル参照

document.getElementById('名前').rows[数値].cells[数値].innerHTML

取得又は表示-タグ名

• DOM対応ブラウザ
• id属性もname属性も無い場合

document.getElementsByTagName("タグ名")

OK/キャンセルメッセージ

var a = confirm("質問");

入力ダイアログ

var a = prompt("メッセージ","デフォルト値");