ホーム ＞ HTMLに役立つヒント＞ JavaScript学習帳
ホーム ＞ HTMLに役立つヒント＞ JavaScript学習帳
ここは僕のJavaScript虎の巻。勉強中です。内容は貧弱<(_ _)>
■■ 目次 ■■
●オブジェクト・メソッド・プロパティ
●条件分岐例
●イベントハンドラ
●関数の定義と呼び出し
●戻るボタン
●閉じるボタン
●役立つリンク
オブジェクトは対象を意味していて、documentなどがそれ。メソッドは「何をするか」を表すもので、writeなんかがそれ。めそっどと似ているけど、プロパティは「性質」を表す。bgColorなんていうのがそれに当たる。
並び順はオブジェクト.メソッド、またはオブジェクト.プロパティが基本。
document.write("hello!"); //オブジェクト.メソッド
document.bgColor = "#ffffff"; //オブジェクト.プロパティ
こんな風にメソッドは()、プロパティは=で書くのでキチンと区別しておくこと。
<SCRIPT language="JavaScript">
<!--
if ( window.confirm("この画像は700KBあります。表示しますか？") ) {
document.write("<img src='abc.jpg'>");
} else {
document.write("表示中止。");
}
// -->
</SCRIPT>
window.confirmはconfirmと省略可能。
イベントは起こったことを指していて、イベントハンドラはイベントに対応して処理を実行する命令を指している。onMouseOverなどがそれ。イベントハンドラはHTMLタグの中に書く。
イベントハンドラを複数書くときは、「;」で区切ればよい。
例 <a href="index.shtml" onMouseOver="status='インデックスに戻るよ';return true" onMouseOut="status='';return true">元に戻る</a>
イベントハンドラ簡易一覧表 ▲トップ
（詳しく知りたい場合は「とほほのWWW入門」のイベント関連やHTMLサポート状況一覧参照）
|
イベントハンドラ |
イベント内容 |
記述するタグ |
| onAbort | 画像読み込み中止した。 | <img> |
| onBlur | フォームの入力フィールドの外にカーソルがでた。 | <input><frameset><body> |
| onChange | フォームの入力フィールドの中を書き換えた。 | <input> |
| onClick | リンクやボタンをクリックした。 | <input><a> |
| onDragDrop | ブラウザにファイルをドッグ＆ドロップしたとき。 | windowオブジェクト |
| onError | スクリプトにエラーがあった。 | windowオブジェクト |
| onFocus | フォーカスを得た時。 | <input><frameset><body> |
| onKeyDown | キーが押された時。 | documentオブジェクトなど |
| onKeyPress | キーが押されたままでオートリピートが発生した時。 | documentオブジェクトなど |
| onKeyUp | キーが離された時。 | documentオブジェクトなど |
| onLoad | ページが読込まれた時。 | <input><frameset><body> |
| onMouseDown | マウスボタンが押された時。 | documentオブジェクトなど |
| onMouseOut | マウスが離れた時。 | <a><area> |
| onMouseOver | マウスが上に来た時。 | <a><area> |
| onMouseUp | マウスボタンが離された時。 | documentオブジェクトなど |
| onMouseMove | マウスが動いたとき。 | documentオブジェクトなど |
| onMove | ウィンドウを移動した時。 | windowオブジェクト |
| onReset | フォームのリセットボタンが押された時。 | <form> |
| onResize | ウィンドウがリサイズされた時。 | windowオブジェクト |
| onSelect | テキストが選択された時。 | <input><textarea> |
| onSubmit | 送信ボタンが押された時。 | <form> |
| onUnload | 他のページに移動する時。 | <frameset><body> |
関数の定義は<head>の中に「funtion 関数名()」で書く。
<SCRIPT language="JavaScript">
<!--
//チェンジカラー関数
function chColor(IRO)
{
document.bgColor = IRO;
}
// -->
</SCRIPT>
呼び出し側は
<input type="button" value="背景をこの色にする" onclick="chColor('#ffccff')">
なんて感じで変数を引き渡す。このルーチンは「配色」で使ってます。
<head>の中にJavaScriptの宣言は必要ないです。
<A HREF="JavaScript:history.go(-1)">前のページへ戻る</a>
（-1）が-2だと2つ前のページ、1だと次のページへ進む。
<head>の中にJavaScriptの宣言は必要ないです。
リンクタイプ
<a href="javascript:window.close();">CLOSE</a>
ボタンタイプ
<form action="javascript:window.close();"><input type=submit value="閉じる"></form>
■スクリプトのお勉強をしましょう JAVA、VBスクリプト有り。htmlタグ一覧
■ネットサーフレスキュー[Ｗｅｂ裏技] - 技の裏 - CGI-BBS - JAVA/JavaScript - JavaScript わかりやすいです。
■CJ-ClubJAVAスクリプト 対応ブラウザのバージョンも併記されていて便利。
■JAVAスクリプト サンプルいろいろ。