JavaScript

リンク

まじない

HTML文書中でJavaScriptを使うまじない。
<!-- 〜 //-->の範囲にJavaScriptの構文を記述する。
ここに載っている例を使う場合はこのまじないで囲んでおく必要がある。
JavaScript だけ別ファイルにしてHTMLに読み込む場合は後述。
NOSCRIPT タグ内は JavaScript が無効の時に表示される。

<SCRIPT LANGUAGE="JavaScript">
<!--
document.writeln("JavaScriptがONです");
//-->
</SCRIPT>
<NOSCRIPT>JavaScriptがOFFです</NOSCRIPT>

注意点

ウェイト関数がない
他のプログラム言語にあるような wait sleep といった時間待ち関数がない。
そのため10秒待ってから処理を継続、ということが面倒だ。~
「10秒間ループし続ける」ことは簡単にできるものの、~
SetInterval などを使って一旦全部の処理を終了させてから一定時間後に特定の関数を呼び出すってことはできる。~

ソースを読み込む

HTML文書中ですべての命令を済ます場合はSCRIPT タグ内に書くが
別のファイルに書かれたソース(人間が書いた命令文)ファイルから読み込む場合は中に書かない。
<!-- 〜 //-->もいらない。
ソースファイル内で使う文字コードはシフトJISにしておかないとIEでは読むことができないらしい。

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="script.js"></SCRIPT>
<NOSCRIPT>JavaScriptがOFFです</NOSCRIPT>

イベントハンドラ

名前意味
onAbort読み込みが中断された時
onBlurフォームのオブジェクトからフォーカスが離れた時
onChangeフォームのオブジェクトの内容が変更された時
onClickマウスクリック時
onDblClickマウスダブルクリック時
onDragDropウィンドウにファイルがドラッグ&ドロップされた時
onError読み込みが失敗した時
onFocusフォームのオブジェクトにフォーカスが来た時
onKeyDownキーボードのキーが下げられた時
onKeyPressキーボードのキーが下げられ戻された時
onKeyUpキーボードのキーが上げられた(戻された時)
onLoadこのページが読み込まれた時
onMouseDownマウスボタンが下げられた時
onMouseMoveマウスカーソルが動いた時
onMouseOutマウスカーソルが特定の範囲から出た時
onMouseOverマウスカーソルが特定の範囲に入った時
onMouseUpマウスボタンが上げられた(戻された)時
onMoveウィンドウが動いた時
onResetフォームがリセットされた時
onResizeウィンドウがリサイズされた時
onSelectテキストが選択された時
onSubmitフォームが実行(submit)された時
onUnload次のページに移動する時

リンク文字列をマウスオーバーで変える

  • マウスカーソルがリンクに乗ったり離れるとリンク文字列が変わる。
    もっとスマートな方法があるかもしれない。
    innerText は動作しないことがあったので innerHTML にしておく。
    リンク文字列自体は this.text で取得できるが、
    読みだけできて書き込みができない模様。
    <A HREF="" ID="m1" onMouseOver="document.getElementById('m1').innerHTML='over';"onMouseOut="document.getElementById('m1').innerHTML='out';">MOUSE?</A>

基本

thisと親要素

this
this.form
フォームオブジェクトのエレメントから見た親(FORM)要素
<FORM NAME="form1">
<INPUT TYPE="button" NAME="element1" VALUE="form.name" onClick="alert(this.form.name)">
<INPUT TYPE="button" NAME="element2" VALUE="element.name" onClick="alert(this.name)">
</FORM>

ページを開く

location.href=URL

//現在のウィンドウ(もしくはタブ)で Googleを開く
location.href = "http://www.google.co.jp";

//現在開いているページのページ内移動
location.href = "#Anchor";

ウィンドウを開く

window.open( URL, [ウィンドウ名 [,オプション]] )

  • URLは必須。それ以外は省略可能。
  • ウィンドウ名はアンカータグの TARGET 指定で使うものと同等。
    null は "_blank" と同じ動作。
    ウィンドウ名意味
    "_blank"新規のウィンドウ(タブ)
    "_self"開いているウィンドウ(タブ)の現在のフレームに表示
    "_parent"開いているウィンドウ(タブ)の親フレーム(1つ上のフレーム)に表示
    "_top"開いているウィンドウ(タブ)でフレームを解除した状態で開く
    仕様上は開けても、ブラウザの広告抑制機能で _blank のポップアップウィンドウや
    ウィンドウのリサイズなどを禁止されているものもある。
  • オプション
    ウィンドウの位置を数値で指定
    top=数値ウィンドウを開くモニタ上の上端座標(ピクセル)
    left=数値ウィンドウを開くモニタ上の左端座標(ピクセル)
    width=数値ウィンドウの横幅(ピクセル)
    height=数値ウィンドウの縦幅(ピクセル)
    開くウィンドウの状態を yes か no で指定
    menubarメニューバー有無
    toolbarツールバー有無
    locationアドレスバー有無
    statusステータスバー有無
    resizableリサイズ可否
    scrollbarsスクロールバー有無
// 基本
window.open("http://foo.bar/");

// ウィンドウサイズを指定して新しいウィンドウを開く
window.open("http://foo.bar/", null, "width=200,height=200");

window.open("http://foo.bar/",null,"menubar=yes,toolbar=no,location=no");

アンカータグの実行リンクの無効化

普通にアンカータグをクリックすると HTML の動作としてリンク先にジャンプ
もしくは新規ウィンドウ(タブ)開きます。
これは最初から HREF 属性に無効なリンク先URLを指定する場合と、
有効なリンク先を JavaScript がオンのときだけ無効にする手段があります。

  • 名前なしのアンカー名へのジャンプ。
    大きな副作用はないがクリックするとそのページの先頭に移動してしまう。
    <A HREF="#" onClick="window.open('http://www.google.co.jp/');">ページの先頭</A>
  • JavaScript の実行しないリンク先
    <A HREF="javascript:void(0);" onClick="window.open('http://www.google.co.jp/');">無効なリンク</A>
  • JavaScriptが有効ならアンカータグでのジャンプを無効化
    <A HREF="foo.html" onClick="window.open('http://www.google.co.jp/');return false;">JavaScriptで無効化</A>

アンカータグのページの開き方を拡張する

  • 基本。return false; でクリックによるジャンプを抑制して
    JavaScript の window.open でのジャンプを利用している。
    JS がオンでもオフでも結果的にほぼ同じ動作をする。
    <A HREF="bar.jpg" TARGET="_blank" onClick="window.open(this.href); return false;">表示</A>
  • 画像ビューワのような表示。ツールバー等をすべて外して200x200の画像を表示する。
    <A HREF="bar.jpg" onClick="window.open(this.href,null,'width=200,height=200,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars'); return false;">表示</A>

雑多

テキストフォーム内に入力された文字数を表示

キーが上がった時にそのテキストフォームの文字数表示する。
数はバイト数ではなく文字数でカウントされる。
onKeyDown onKeyPress イベントハンドラだと表示のタイミングが若干ずれる。

<FORM>
<INPUT TYPE="text" NAME="str" SIZE=60 onKeyUp="this.form.len.value=this.value.length;">
<INPUT TYPE="text" NAME="len" SIZE=3 style="text-align: right;" DISABLED>
</FORM>

JavaScript有効時のAタグリンクのクリック動作を変える

これはリンク文字をクリックすることで動作する onClick イベント

<A HREF="goto.html" onClick="open.window('goto.html');">GoTo</A>
  • JavaScript が無効時には goto.html に移動する
  • JavaScript が有効時には goto.html を新しいウィンドウに開き、
    さらに goto.html にジャンプする


ここで onClick の最後に return false; を入れると

<A HREF="goto.html" onClick="open.window('goto.html');return false;">GoTo</A>
  • JavaScript無効時には goto.html に移動する
  • JavaScript有効時には goto.html を新しいウィンドウで開くのみ

ランダムに文字列を表示

word に指定した文字列の一覧からランダムで1つを表示する。
最後にカンマを除くことだけ注意すればいくらでも要素を追加できる。

word = new Array(
	"AAA",
	"BBB",
	"CCC"	//ここだけカンマ,を取る
);
document.writeln(word[Math.floor(Math.random() * word.length)]);

選ぶとジャンプ

<SCRIPT LANGUAGE="JavaScript">
<!--
// 選択されているオプションオブジェクトの要素を取得する
function getSelect(sel){
	return sel.options[sel.selectedIndex].value;
}
//-->
</SCRIPT>
<FORM>
<SELECT onChange="location.href=getSelect(this);">
<OPTION>【選択してください】</OPTION>
<OPTION VALUE="../index.html">戻る</OPTION>
<OPTION VALUE="html.html">HTML</OPTION>
<OPTION VALUE="css.html">CSS</OPTION>
<OPTION VALUE="perl.html">Perl</OPTION>
</SELECT>
</FORM>

開いた複数のウィンドウ一括クローズ

自分で開いたウィンドウを一括で閉じる。
このページをリロードすると開いたウィンドウの場所忘れるので無効。

<SCRIPT NAME="JavaScript">
<!--
win_obj = new Array();	//開いたウィンドウオブジェクト
win_cnt = 0;			//ウィンドウカウンタ
//新規ウィンドウを開き、ウィンドウオブジェクトを保存
function openWindow(url,target,style){
	win_obj[win_cnt] = window.open(url,target,style);
	win_cnt++;
	win_close.count.value = win_cnt;
}
//開いたウィンドウをすべて閉じる
function closeAllWindow(){
	for(i=0 ; i<win_cnt ; i++){
		win_obj[i].close();
	}
	win_obj = new Array();
	win_close.count.value = win_cnt = 0;	//カウンタリセット
}
//-->
</SCRIPT>
<FORM NAME="win_close">
Count:<INPUT TYPE="text" VALUE="0" NAME="count" SIZE=4>
<INPUT TYPE="button" VALUE="openWindow" onClick="openWindow('index.html','_blank',
'width=100,height=100,directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no');">
<INPUT TYPE="button" VALUE="closeAllWindow" onClick="closeAllWindow()">
</FORM>

フォームからの取得

<SCRIPT LANGUAGE="JavaScript">
<!--
// ラジオボタンから値を取得
// obj = ラジオボタンオブジェクト
function getRadio(obj){
	if(obj.length){
		for(i=0;i<obj.length;i++){
			if(obj[i].checked)
				return obj[i].value;
		}
	}else{
		return obj.value;
	}
}
//選択肢からの取得
// obj = セレクトオブジェクト
function getSelect(obj){
	return obj.options[obj.selectedIndex].value;
}
//チェックボックスからの取得
//チェックされていなければ空
// obj = チェックボックスオブジェクト
function getCheckbox(obj){
	if(obj.checked) return obj.value;
	return "";
}
//現状のフォーム状態の表示
function getResult(){
	p = document.form_input;
	p.result.value = "t=" + p.t.value //テキスト
	 + " / r=" + getRadio(p.r) //ラジオボタン
	 + " / s=" + getSelect(p.s) //セレクト
	 + " / c1=" + getCheckbox(p.c1) //チェックボックス1
	 + " / c2=" + getCheckbox(p.c2) //チェックボックス2
	 + " / c3=" + getCheckbox(p.c3); //チェックボックス3
}
//-->
</SCRIPT>
<FORM NAME="form_input">
t = <INPUT TYPE="text" NAME="t" VALUE="??"><BR>
r = <INPUT TYPE="radio" NAME="r" VALUE="A">A
<INPUT TYPE="radio" NAME="r" VALUE="B">B
<INPUT TYPE="radio" NAME="r" VALUE="C" CHECKED>C<BR>
s = <SELECT NAME="s">
<OPTION VALUE="X">X</OPTION>
<OPTION VALUE="Y">Y</OPTION>
<OPTION VALUE="Z" SELECTED>Z</OPTION>
</SELECT><BR>
c1=<INPUT TYPE="checkbox" NAME="c1" VALUE="on">
c2=<INPUT TYPE="checkbox" NAME="c2" VALUE="on" CHECKED>
c3=<INPUT TYPE="checkbox" NAME="c3" VALUE="on"><BR>
<BR>
<INPUT TYPE="button" VALUE="現在の状態" onClick="getResult()"><BR>
<INPUT TYPE="text" NAME="result" SIZE=60>
</FORM>

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規新規下位 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-10-19 (水) 21:52:36 (2042d)