コメントアウトは「//」（単行）、「/* ... */」（複数行可能）
各行末にはセミコロン（ ; ）を記述。
JavaScriptのコードをhtmlファイルとは別に作成して呼び出す手順。head要素内にscript要素を置いて記述する。
【htmlファイル】
...
<head>
...
<script type="text/javascript" src="JavaScriptファイル名"></script>
...
</head>
htmlファイル内に直接JavaScriptコードを記述する書式は以下の通り[2]。
<script type="text/javascript"> <!-- // ここにコードを記述する //--> </script>
JavaScriptコードは、古いブラウザでJavaScriptコードがそのまま表示されてしまわないよう、「<!--」と「//-->」で囲んでhtmlコメントアウトしておく。
外部ファイルにJavaScriptコードを記述し、それを読み込む場合の書式は以下の通り。記載場所は通常 head 要素の中。
<head>
...
<script type="text/javascript" src="読み込みたいJavaScriptファイルのパス"></script>
...
</head>
比較演算子、論理演算子は以下の通り7 28 - 演算子 39_05。
| 種別 | 記述方法 | 備考・例 |
|---|---|---|
| 論理積（and） | && |
【例】 expr1 && expr2 |
| 論理和（or） | || |
【例】 expr1 || expr2 |
| 否定（not） | ! |
【例】
!expr
|
| プロパティ名 | 内容 |
|---|---|
| window.innerWidth | ウインドウ内側の幅 |
| window.innerHeight | ウインドウ内側の高さ |
| window.outerWidth | ウインドウ外側の幅 |
| window.outerHeight | ウインドウ外側の高さ |
| 値 | 内容 | 例 |
|---|---|---|
| navigator.userAgent | ユーザエージェント情報 | Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:12.0) Gecko/20100101 Firefox/12.0 |
| navigator.appName | ブラウザ名 | Netscape |
| navigator.appCodeName | ブラウザのコード名 | Mozilla |
| navigator.appVersion | ブラウザのバージョン | 5.0 (Macintosh) |
| navigator.platform | OSプラットフォーム | MacIntel |
| navigator.language | ブラウザの使用言語 | ja |
| navigator.plugins | ブラウザのプラグイン。各プラグイン情報を要素とする配列。個数はnavigator.plugins.lengthで、各要素はnavigator.plugins[n]（nは0〜length-1） |
例：
<table class="bordertbl">
<tr>
<th>値</th>
<th>あなたの値</th>
</tr>
<tr>
<td>navigator.userAgent</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.userAgent);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.appName</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.appName);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.codeName</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.codeName);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.appVersion</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.appVersion);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.platform</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.platform);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.language</td>
<td>
<script type="text/javascript"><!--
document.write(navigator.language);
-->
</script>
</td>
</tr>
<tr>
<td>navigator.languages</td>
<td>
<script type="text/javascript"><!--
for (let i in navigator.languages) {
document.write(navigator.languages[i] + ', ');
}
-->
</script>
</td>
</tr>
<tr>
<td>navigator.plugins</td>
<td>
<script type="text/javascript"><!--
for (let i in navigator.plugins) {
document.write(navigator.plugins[i] + ', ');
}
-->
</script>
</td>
</tr>
</table>
出力結果：
| 値 | あなたの値 |
|---|---|
| navigator.userAgent | |
| navigator.appName | |
| navigator.codeName | |
| navigator.appVersion | |
| navigator.platform | |
| navigator.language | |
| navigator.languages | |
| navigator.plugins |
参考文献・サイト[18]
location.href で取得可能[1]
例：
また、値を設定することでページを移動させることも可能[2]
【コード】
<button onclick="location.href='http://www.cudo29.org/'">ページを移動</button>
【表示】
どこか他のページからリンクをたどって現在のページにやってきた場合、リンク元ページのURLを得るにはdocument.refererが使える[2-3]。
【コード】
<script type="text/javascript"><!--
document.write('このページには ' + document.referrer + ' から来られましたね');
//-->
</script>
【表示】
location.search で、?を含むGETクエリ部分を取得できる。これを使って配列にGET引数を受け取ることができる。[30]
// GET引数受領
var getargs = {};
if (window.location.search.length > 1) {
// 先頭の?を除去して受領
var querystr = window.location.search.substring( 1 );
// & で分割して配列に格納
var params = querystr.split('&');
// 各要素を処理
for (var i = 0; i < params.length; i++ ) {
// キーと値に分割
var elem = params[i].split('=');
var key = decodeURIComponent(elem[0]);
var value = decodeURIComponent(elem[1]);
// キーセットを連想配列に追加
getargs[ key ] = value;
}
}
location.host でホスト名とポート番号、location.hostnameでホスト名のみ、location.portでポート番号のみを取得できる[26][38]
【コード】
| コード | 内容 | 例 |
|---|---|---|
| location.host | ホスト名とポート番号 | example.org:80 |
| location.hostname | ホスト名のみ | example.org |
| location.port | ポート番号のみ | 80 |
| location.pathname | パス | / |
| location.protocol | プロトコル | http: |
【例】
<script type="text/javascript"><!--
document.write('<p>このページのホスト名は「' + location.hostname + '」です</p>' + "\n");
document.write('<p>このページのホスト名＋ポート番号は「' + location.host + '」です</p>' + "\n");
document.write('<p>このページのポート番号は「' + location.port + '」です</p>' + "\n");
document.write('<p>このページのプロトコルは「' + location.protocol + '」です</p>' + "\n");
document.write('<p>このページのパスは「' + location.pathname + '」です</p>' + "\n");
//-->
</script>
【表示】
| 書式 | 検索キー | 返り値 |
|---|---|---|
| getElementsByTagName(タグ名)[2-7]、[01] | タグ名 | 指定タグ要素を全て含む配列 |
| getElementsByName(name属性値)[2-5]、[15]、[1] | name属性値 | 指定したname属性値を持つ要素を全て含む配列 |
| getElementById(id属性値) | id属性値 | 指定したid属性値を持つ要素（オブジェクト） |
【例】指定タグの数、指定name属性値を持つ要素の数、指定id属性値を持つ要素のvalue属性値
<script type="text/javascript"><!--
function counter(type,arg) {
if (type == 'TagName') {
alert('このページには' + document.getElementsByTagName(arg).length + '個の' + arg + 'タグがあります');
} else if (type == 'Name') {
alert('このページにはname属性値が' + arg + 'である要素が' + document.getElementsByName(arg).length + '個あります。');
} else if (type == 'Id') {
alert('このページでid属性値に' + arg + 'が設定されている要素のvalue属性値は' + document.getElementById(arg).value + 'です。');
}
}
-->
</script>
<p>
<input type="hidden" name="hoge" value=""/>
<input type="hidden" name="pooh" id="pooh" value=""/>
<input type="button" value="aタグの数" onclick="counter('TagName','a')"/>
<input type="button" value="name属性値hogeを持つ要素の数" onclick="counter('Name','hoge')"/>
<input type="button" value="id属性値にpoohを持つ要素の内容" onclick="counter('Id','pooh')"/>
<p>
| 書式 | 備考 |
|---|---|
| getAttribute(属性名) | 指定した属性の値を返す |
| setAttribute(属性名,属性値) | 指定した属性を追加する |
| removeAttribute(属性名) | 指定した属性を削除する |
【例】チェックボックスのON/OFFに対応してボタンの有効/無効が切り替わる
<script type="text/javascript"><!--
function control_attribute() {
if (document.getElementById('attrcontroller').checked) {
document.getElementById('control_receiver').removeAttribute('disabled');
} else {
document.getElementById('control_receiver').setAttribute('disabled','disabled');
}
}
-->
</script>
<p>
<label><input type="checkbox" id="attrcontroller" onchange="control_attribute()"/>チェックをONにすると右のボタンが有効になり、OFFにすると無効になります。</label>
<input type="button" value="ボタン" id="control_receiver"/>
</p>
参考文献・サイト[2-8]
要素ノード.getAttribute(属性キー値)
innerHTMLは要素の中に含まれるhtmlを返す
【書式】 要素.innerHTML; 【例】
outerHTMLは要素自体も含むhtmlを返す
【書式】 要素.outerHTML; 【例】
document.writeは指定したドキュメントに文字列や値を書き込む。document.writelnはdocument.writeとほぼ同じだが、最後に改行コードが出力される点が異なる。書き込みが完了した後はdocument.closeで書き込みを閉じること（閉じないと正しく出力されないことがある）。
【書式】 document.write(文字列); document.writeln(文字列); document.close(); 【例】 document.writeln("<div>"); document.writeln("ほげ"); document.writeln("</div>");
【書式】
window.open("ファイル名","フレーム名",オプション);
フレーム名
スタイル
別ウインドウで開くには、スタイルを指定する必要があるよう。指定しないで、別のフレーム名を指定して開くと、別タブで開かれる（タブブラウザの場合、Mac OS X 10.4.11＋Firefox 3.0.11で確認）。
window.openを使うと、target属性値で開くフレームを指定する方法がとれない Strict やXHTML 1.1で開く先のフレームを指定できる。
<a href="http://www.hoge.com/" onclick="javascript:window.open(this.href,'fuga');return false">
hogeをfugaフレームに開きます</a>
this.href: 自己要素（a要素）のhref属性の値＝http://www.hoge.com/
return false: htmlとしてのハイパーリンクを無効化する（有効だとhtmlのハイパーリンクが効いて自己フレームに開いてしまう）
参考文献・サイト：
ブラウザの「戻る」ボタンを押すのと同じ挙動をする。
window.back();
location.hrefで実現可能。
【書式】
location.href='リダイレクト先URL';
【例】ボタンをクリックするとトップページに移動 <input type="button" value="クリックするとトップページに移動します" onclick="location.href='index.html'"/>
[13]
【書式】
document.forms[値].submit();
値にはform要素の登場順序を示す数値（最初が0）または対象form要素のid属性値を指定（xhtml1.1より前ではform要素にname属性を指定しこれで示すこともできるが、xhtml1.1ではform要素にname属性を指定するのはNG）。
【例】
<form method="post" action="hoge.cgi" id="fuga">
<input type="text" name="name" value="Thomus" />
<input type="text" name="number" value="1" />
<a href="" onclick="document.forms['fuga'].submit();return false;">submit</a>
</form> ↑戻り値にfalseを指定するとhref要素に記述された先へのリンクが無効化される
プルダウンリストの選択内容変更などのイベントを検知する。選択内容に応じたページ内容を表示することなどに使える。
<select onchange="alert(this.options[this.selectedIndex].value);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
this: select要素全体
selectedIndex: 選択されているインデックス番号（最初が0番）
options[番号].value: 指定インデックス番号の値（表示値を指定したいならvalueの代わりにtext）
テキストボックスに入力された値は下記書式にて取得できる。
【書式】 document.forms[対象フォーム要素のページ内の出現順序].element['対象input要素のid属性値'].value
【例】
<form method="post" action="#" id="myform">
<input type="text" size="4" maxlength="4" value="" id="pdbid"/>
<input type="button" value="Display PDBj Mine Summary Page"
onclick="window.open('http://service.pdbj.org/mine/summary_j/' + document.forms[0].element['pdbid'].value)"/>
</form>
フォームのリクエスト送信結果を表示するターゲットフレームを指定するには、form要素のtarget属性を指定する方法があるが、この方法はHTML1.0 Transitional/Framesetでしか使えない。XHTML1.1などではonsubmit属性で指定すればよい41。
<form method="get" name="searchform" action="https://example.com/form" onsubmit="document.searchform.target='_blank'return true"> </form>
ボタンは「OK」ボタン１つだけである「警告ダイアログ」を表示するには、windows.alertを用いる。
【書式】
window.alert("表示メッセージ");
表示メッセージ中での改行は"\n"、タブは"\t"。
function test(id){
window.confirm("OKボタンをクリックして下さい。");
}
参考文献・サイト[2-9]
別のページに移動しようとした時やページを閉じようとした時に発生するイベント。 returnで何か値を返すと、イベントが発生した時確認ダイアログが表示される[1]。
例：
<script type="text/javascript"><!--
window.onbeforeunload = function () {
return "本当に離れますか？";
}
--></script>
【書式】 if (条件) { 処理内容 } else if (条件) { 処理内容 ... } else { 処理内容 }
【書式】 switch (変数) { case 値1: 処理内容 break; case 値2: 処理内容 break; ... default: 処理内容 break; }
switch文の場合、break文を入れないと引き続き後続のcase文まで実行されていく。逆にそれを利用して複数の条件を束ねることもできる。
【例】
switch (3) {
case 1:
case 2:
echo 'Less than 3.';
break;
case 3:
echo 'Equal to 3.';
break;
default:
echo 'Larger than 3.';
}
参考文献・サイト[25]
for を使って繰り返し処理を記述することができる[2]。