☆JavaScript
【①JavaScriptとは】
動きのあるホームページを作成できるようにする、クライアント用スクリプト言語。
イベント利用のインタラクティブ機能の補完
ユーザ入力補助などにイベント発生
【②JavaScriptとイベントハンドラ】
JavaScriptは動作するタイミング(クリック時、マウスオーバー時・・など)を指定する必要がある。
イベントハンドラ名="実行するJavaScript('コメント')"
●JavaScript(命令)例:
・alert('テキスト') :アラート(ポップアップ)を表示
●イベントハンドラ(命令をするタイミング)例:
・onabort :ブラウザの停止ボタンなどで、画像の読み込みが中断された場合
・onblur :対象の要素からフォーカス(マウスポインタなど)が離れた場合
・onclick :クリックされたら実行
・onchange :値が変更されたら実行
・onerror :ページや画像の読み込みエラーされたら実行
・onfocus :対象の要素にフォーカス(マウスポインタなど)が移動した場合
・onload :HTMLが読み込まれたら実行(ページが表示された直後に実行)
・onmouseover :カーソルホバーされたら実行
・onreset :フォームがリセットされた場合
・onsubmit :フォームのサブミットボタンが押されたら実行
・onselect :テキストボックスなどのエリア内をクリックし、入力が可能になった場合に実行
・onunload :別ページへ移動する場合に実行
【③記述時のルール】
・大文字と小文字が区別される(
HTML・CSSは大文字小文字を区別なく書いてもOK)
・各文の最後に「;」(セミコロン)を記述する必要がある。(ないと命令がずっと続いていると認識される)
・半角、タブによるスペースは無視される。
※コメントはHTMLと同様に<--!と//--> でくくる。
※外部ファイル(外部JS)の場合は、
・//:ラインコメント(1行)
・/*非表示にしたい内容*/:ブロックコメント
【④組み込みかた】
④-1.外部ページ
CSSのようにJavaScript専用の.jsファイルをつくり、そこから呼び出す。
<script type=”text/javascript” src=”パス”></script>
④-2.ページ内(header内)
<script type=”text/javascript” >
処理
</script>
<!-- //-->
var total = 4800;
var a = new Array(3);
a[0] = 2000;
a[1] = 400;
a[2] = 500;
function goukei(i){
if(document.f1.elements[i].checked == true){
total = total + a[i];
}
else{
total = total - a[i];
}
document.f1.elements[3].value = total;
}
</script>
</head>
④-3.タグ内
<要素名 イベント=”処理” >
例:
<body onload="window.alert('オンロードイベント発生')
)
④-4.JavaScriptに対応していないwebブラウザ用に以下の記述をしておくとわかりやすい。
<script language="JavaScript">
<!--
(JavaScriptの処理を記述)
</script>
<nonscript>
このページはJavaScriptが使用されています。<br />
JavaScriptを有効にしてから閲覧してください。
</nonscript>
※<nonscript>~</nonscript>はJavaScriptに対応していないブラウザの場合のみ表示される。
最終更新:2012年01月11日 18:54