2014年09月14日

JavaScript から扱う現在の URL ( 移動と再読み込みと情報取得 )

WEB 上のページ間を移動するには、アドレスバーに直接 URL を入力するか、ページ上のリンクをクリックするか、JavaScript で実行される window.open というメソッドが実行されるイベントのあるコントロールを UI 上で操作するか、といういずれかの操作で実現する事ができます。( ブックマークはリンクとおなじです )

window.open は、そもそも JavaScript で行うページ移動のメソッドですが、本来の目的としては、新しいウインドウを開くという処理がデフォルト処理となっています( 第二引数に _self を指定するとそのウインドウ内で移動 )

それに、window.open は移動が一番の目的で、現在の URL の情報を取得する事はできません。そのような目的に適したオブシェクトとして、window.location オブジェクトが存在します。

アドレスバーに直接 URL を入力する

この処理を window.location オブジェクトを使って JavaScript で処理する事ができます。
location = "http://php.net/manual/ja/ini.core.php?param=test#ini.upload-max-filesize";
これを、JavaScript 内で実行すると、右辺に設定された URL がブラウザに表示されます。

他のウインドウの表示場所を変更したい場合は、そのウインドウを参照して、そのウインドウの location オブジェクトを使います

ページをサーバーから再度読み込む

この処理は、WEB アプリケーションとして重要な処理で、location オブジェクトのメソッドで実行します。
location.reload(true);
reload メソッドの引数は、true を指定します。昨今のブラウザはキャッシュの処理に気を使って、true を指定しないでもうまく行く場合がありますが、仕様としては true を指定しないとキャッシュから読み込む事になります。

location オブジェクトの情報

これは、ブラウザのデベロッパーツールで確認できます。上記の URL へ移動した後、各ブラウザのツールでコンソールを開いて、console.dir( location ) で確認する事ができます。

WEBアプリケーションとして特に注意するのは、href と search と hash です。
( location そのものに URL をセットするのと、href にセットするのは同等です )

Google Chrome



IE11




Firefox インスペクタ






posted by at 2014-09-14 00:47 | JavaScript | このブログの読者になる | 更新情報をチェックする

JavaScript : 3秒後に何かを実行する処理

setTimeout メソッドを使います。

IE 関しては、第三引数が使えるのは IE10 からです。第3引数(第4、第5…)は、タイマーをセットした段階で有効な値をタイマー関数に引き渡す事ができます。

使い方 その(3) は、eval と同等なので予期せぬ悪意ある者の影響を受けたかもしれない文字列が含まれている可能性を排除できないので、一般的には使わないように言われています。

ただ、実際問題として文字列として処理を書くのは不便なので使用している場面は少ないものと思われます。
<script type="text/javascript">

// ***********************************
// 使い方 その(1)
// ***********************************
setTimeout( function( a ) {
	console.log("無名 function");
	console.log( a );
}, 3000, "引数1" )

// ***********************************
// 使い方 その(2)
// ***********************************
function my_func(a) {
	console.log("my_func");
	console.log( a );
}
setTimeout( my_func, 3000, "引数2" )

// ***********************************
// 使い方 その(3)
// ***********************************
setTimeout( "console.log('文字列処理');", 3000 )


// ***********************************
// 引数の有効さの確認
// ***********************************
function my_func_v() {

	var local_v = "実行時の値"

	setTimeout( function( a ) {
		console.log("無名 function");
		console.log( a );
	}, 3000, local_v )

}
my_func_v();


</script>


posted by at 2014-09-14 00:44 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年09月13日

JavaScript : コンボボックス(SELECT) の追加と削除の処理

コンボボックスは、WEB アプリケーションで使われる事の多いコントロールです。SELECT 要素は、size 属性を指定しなければ、コンボボックスとなりますが、コンボボックスは場所を取らずに多くのデータを扱えるので、非常に便利です。

WEB アプリケーションでは最初にサーバの指定した内容をそのまま使う事が多いですが、利用価値の高いコントロールでかつ、多少複雑な構成になっているので、リストの内容の追加と削除の方法は確実に知っておく必要があります。

selectedIndex プロパティ

コンボボックスを扱う上で最も重要なものです。この中には、その時選択されているリストの番号が入っているので、JavaScript で内容を操作する場合に必ず使用されます。

関連する情報
HTML で 最初から任意の OPTION 要素を選択させるには、OPTION 要素内に selected を書きます。これを利用して、PHP ではページを再表示する際に埋め込みます。
<form name="frm"
	action="<?= $_SERVER['SCRIPT_NAME'] ?>"
	target="_self"
	method="get">
	<select name="address">
		<option value="1" <?= $_GET['address'] == "1" ? "selected" : "" ?>>大阪</option>
		<option value="2" <?= $_GET['address'] == "2" ? "selected" : "" ?>>京都</option>
		<option value="3" <?= $_GET['address'] == "3" ? "selected" : "" ?>>神戸</option>
	</select>
	<input type="submit" name="send" value="送信">
</form>
※ その他の FORM 系 PHP 用 埋め込みテンプレート

表示されているテキストの操作 / options コレクション

SELECT 要素は、実際の値を OPTION 要素のリストで保持します。ほとんどの操作は、SELECT 要素に対して直接実行できますが、OPTION 要素に挟まれたテキストだけは、options コレクション経由で操作します

例: alert(target.value + "/" + target.options[target.selectedIndex].text);

target.value は、現在選択されている option の値です。target.selectedIndex は現在選択されている option の番号なので、options[target.selectedIndex] で参照し、text プロパティを使います

selectedIndex が -1 の状態は未選択状態

selectedIndex に -1 を代入すると、何も表示されない『未選択状態』になります。当然この状態で selectedIndex を参照すると -1 になるので、その場合は何も処理をしないようにする注意が必要です。

add メソッドで追加

通常、このようなメソッドは コレクションに実装されるもので、実際に options にもありますが、SELECT 要素のメソッドとして実行が可能です。

引数には、要素のみを指定する場合と、要素と index を指定する場合がありますが、前者はリストの最後に追加され、後者は指定した index 番号のリストとなります。

新規の option 要素は、document.createElement メソッドで作成します。document.createElement で作成された要素は、既存の画面に表示されているいずれかの要素の下に追加するまでは、画面に表示されません。この場合は、SELECT 要素の add メソッドで追加しますが、一般的には appendChild メソッドで他の要素に追加します。






<script type="text/javascript">
function addOption1( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// コレクションに追加
	target.add(option);
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption2( value, text ) {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// option の数を一つ増やす
	target.length = target.length + 1
	// 増やした option を参照する
	var option = target[target.length-1];
	// 属性をセット
	option.value = value;
	option.text = text;
	// 追加した option を選択
	target.selectedIndex = target.length-1;
}
function addOption3( value, text ) {
	// オプション要素を作成
	var option = document.createElement("option");
	// 属性をセット
	option.value = value;
	option.text = text;
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// options コレクションに指定番号で追加
	target.add(option,2);
	// 追加した option を選択
	target.selectedIndex = 2;
}
function removeOption() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択されている index を取得
	var index = target.selectedIndex;
	// -1 の場合何も選択されていない
	if ( index != -1 ) {
		// 選択されている index で削除
		target.remove(index)
	}
}
function displayValueText() {
	// SELECT 要素を name で 取得
	var target = document.getElementsByName("ken")[0];
	// 選択した内容の値を取得
	alert(target.value + "/" + target.options[target.selectedIndex].text);
}
</script>
<form action="http://winofsql.jp/php_get.php"
	target="my_frame">
	<select name="ken">
		<option value="40">大阪</option>
		<option value="41">京都</option>
		<option value="42">兵庫</option>
		<option value="43">和歌山</option>
		<option value="44">奈良</option>
	</select>
	<input type="submit" value="送信">
</form>

<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100"
	style='border:solid 1px #777;'>
</iframe>
<br>
<input type="button"
	value="追加1"
	onclick='addOption1(45,"滋賀1");'>
<input type="button"
	value="追加2"
	onclick='addOption2(45,"滋賀2");'>
<input type="button"
	value="途中追加"
	onclick='addOption3(45,"滋賀3");'>
<br>
<input type="button"
	value="選択を削除"
	onclick='removeOption();'>
<input type="button"
	value="選択した内容を表示"
	onclick='displayValueText();'>



posted by at 2014-09-13 20:08 | JavaScript | このブログの読者になる | 更新情報をチェックする

FORM の送信と JavaScript

WEB アプリケーションでサーバーへデータを送信する際、操作している人に確認を求める必要がある場合があります。一般的な WEB アプリケーションでは、サーバ側でチェックしてエラーがあればその内容を表示しますが、それは不特定多数を対象にしているので、失敗を可能な限り避けたいのであって、決して操作している人には親切な仕様ではありません。

信頼された WEB アプリケーションであれば、クライアントの環境や運用ルールも事前に話し合っているので、できる限り操作する人に親切な仕様として、送信前に可能なチェックを行います。チェックが全て通った後に、再度送信して良いかを尋ねるのが一般的です。

FORM を送信する

FORM を送信する方法はいくつかありますが、オーソドックスなのは FORM の中に送信用のボタンを配置する方法です。しかし、JavaScript を使うのであれば、必ずしも 送信用のボタンは必要ありません。

その場合、FORM オブジェクトに対して submit メソッドを実行します。

オブジェクトの参照では、FORM 要素に name 属性が設定されておれば、『document.名前』で参照可能です。もちろん、他の参照方法でも可能で、document.名前 は比較的古い方法です。

JavaScript のイベント

要素の中に直接書くイベントは、JavaScript の『無名関数』と同じものとなります。通常、インラインで書く場合は長い処理を書かずに関数を呼び出して処理します。関数は、別の場所に定義されるわけですが、それらと同等な処理が、無名関数によって行う事ができ、関数名を使わずに処理が可能です。

一般的な JavaScript のソースコードで、無名関数を使う事はあまりありませんが、jQuery を使う場合は、jQuery のイベント定義とし無名関数を使う事のほうが一般的となりますFORM 要素の中に書く onsubmit イベントは注意

onsubmit='return 関数名()' のように、最初に return がある事が重要です。ここは、無名関数なので、無名関数からシステムに結果を返す必要があるからです。この結果が false であれば、システムはフォームを送信しません

onsubmit イベント より先に発生する onclick イベント

onsubmit イベントは、操作的に最後に処理されます。明確なのは、ボタンをクリックしてから onsubmit イベントが実行されるという事です。ですから、ボタンのインラインで変数に値をセットしておけば、onsubmit イベントではその値を使っていろいろな処理分岐が行えます




<script>
function submitForm() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.frm.submit();
}

function submitForm2() {
	if ( !confirm( "Submit ボタンで送信しますか?" ) ) {
		return false;
	}
	return true;
}
</script>
<form name="frm"
	id="my_form"
	target="iframe_win"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	value="JavaScript送信"
	onclick='submitForm();'>
<br>
<iframe id="iframe_win"
	name="iframe_win"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form onsubmit='return submitForm2()'
	target="iframe_win2"
	action="http://toolbox.winofsql.jp/info2.php">
	<input type="submit"
		value="submitボタン送信">
</form>
<iframe id="iframe_win2"
	name="iframe_win2"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>
<form id="js_form"
	target="iframe_win3"
	action="http://toolbox.winofsql.jp/info2.php">
</form>
<input type="button"
	id="my_button"
	value="無名関数イベント登録">
<script>
// WEB ページでは通常上から下へど実行されるので、
// コントロールの下で無いと参照できません
document.getElementById("my_button").onclick = function() {
	if ( !confirm( "送信しますか?" ) ) {
		return;
	}

	document.getElementById("js_form").submit();
};
// 無名関数は、INPUT 要素内で onclick イベントで関数を呼び出すのと同等です
</script>
<br>
<iframe id="iframe_win3"
	name="iframe_win3"
	frameborder="0"
	scrolling="no"
	width="400"
	height="100"
	style="border:solid 1px #000;">
</iframe>


posted by at 2014-09-13 15:37 | JavaScript | このブログの読者になる | 更新情報をチェックする

JavaScript : コントロールの参照

以下のテストは、コントロールの参照方法のバリエーションのテストです。

document.getElementById("id")

コントロールを ID 属性で参照します。対象は必ず1つしか無い事を前提として用います。

document.getElementsByName("name")

結果はコレクションである事が前提なので、FORM 内の 入力フィールドを参照する場合は、[n] を使って、配列のように扱って参照します。

例)
document.getElementsByName("right")[0].style.backgroundColor = "skyblue"

document.getElementsByTagName("tagName")

結果はコレクションである事が前提で、当然複数の要素が対象です。ページ全体に影響するアクセスとなりますので注意が必要です。このメソッドは、要素でも使用可能で、特定の要素の子孫内を探す事ができます。

例)
var div2 = document.getElementById("div2")
var div2Paras = div2.getElementsByTagName("p");

▼ 以下のメソッドは、getElementsByTagName と同様に、特定の要素の子孫を対象にできます

document.getElementsByClassName("tagName")

結果はコレクションである事が前提で、一番アプリケーションとして有用なグループ処理となります。

document.querySelectorAll("セレクタ")

セレクタで示された対象を取得します。最も強力で有用なメソッドです。

MDN 参照

getElementsByClassName
element.querySelectorAll


▼ 実際の実行





<style>
#test_unit div {
	padding: 5px;
	border: solid 1px #000;
	margin: 3px;
	display: inline-table;
}
#test_unit div input {
	width: 60px;
}
</style>
<input type="button"
	value="ID"
	onclick='document.getElementById("center").style.backgroundColor = "pink"'>

<input type="button"
	value="NAME 0"
	onclick='document.getElementsByName("right")[0].style.backgroundColor = "skyblue"'>

<input type="button"
	value="NAME all"
	onclick='
		target = document.getElementsByName("left");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "khaki";
		}
	'>

<input type="button"
	value="CLASS all"
	onclick='
		target = document.getElementsByClassName("p2");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "lightsalmon";
		}
	'>

<input type="button"
	value="TAG all"
	onclick='
		target = document.getElementsByTagName("input");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "palegreen";
		}
	'>

<br>

<div id="test_unit">
<div class="p1">
	<input name="left">
</div>
<div class="p1">
	<input name="middle">
</div>
<div class="p1">
	<input name="right">
</div>
<br>

<div class="p2">
  <input name="left">
</div>
<div id="center" class="p2">
	<input name="middle">
</div>
<div class="p2">
	<input name="right">
</div>
<br>

<div class="p3">
	<input name="left">
</div>
<div class="p3">
	<input name="middle">
</div>
<div class="p3">
	<input name="right">
</div>
</div>
<input type="button"
	value="clear"
	onclick='
		target = document.getElementsByTagName("input");
		for( i = 0; i < target.length; i++ ) {
			if ( (target[i].type).toLowerCase() == "button" ) {
				target[i].style.backgroundColor = "#c0c0c0";
			}
			else {
				target[i].style.backgroundColor = "#ffffff";
			}
		}

		target_sel = document.querySelectorAll("#test_unit div");
		for( i = 0; i < target_sel.length; i++ ) {
			target_sel[i].style.backgroundColor = "#ffffff";
		}

	'>
コントロールのスタイル(CSS) のプロパティにアクセスする場合、通常 CSS でハイフン(-) で表現されているワードの区切りですが( 例: background-color )、JavaScript では、そのかわりにハイフンを取り除いてワードの先頭を大文字で記述します( 例: backgroundColor )



posted by at 2014-09-13 14:30 | JavaScript | このブログの読者になる | 更新情報をチェックする