2014年07月09日


PHP と JavaScript の関数の引数の後から処理( 可変長引数リスト )

難しく言うと、「可変長引数リスト」の処理方法ですが、引数を定義されている関数に対しても使えるので、いずれも function のオプション機能を内部で使っていると考えたほうが自然です。

PHP : func_get_args
JavaScript : arguments プロパティ
<?php
// 引数の後から処理

function plus() {

	$args = func_get_args();

	$args[0] += $args[1];

	print $args[0];

}

$a = 10;

plus($a, 5);

?>
<!-- JavaScript -->
<script type="text/javascript">
function plus() {

	arguments[0] += arguments[1];

	alert(arguments[0]);

}

var a = 10;
plus(a, 5);

</script>



posted by at 20:05 | Comment(0) | PHP | このブログの読者になる | 更新情報をチェックする


2011年02月03日


showModalDialog の使い方と使う場所

昨今の事情では、jQuery UI のモーダルダイアログを使用するほうがよさそうです。

WEB では一般のテキストエリア毎に機能を持たすより、拡張入力としてテキストエリアを入力する為だけのダイアログを表示させるといいと思います。

※ 単純にページを用意する場合は同一ドメインである必要があります
※ Opera では、showModalDialog を使う事はできません
※ Chrome 36では、window.showModalDialogが削除されるようです

テストページ

http://toolbox.winofsql.jp/sample/callModalDialog.htm

このテストページでは、「参照」ボタンにより現在の内容がダイアログに転送されて、テキストエリア入力が可能になり、ダイアログ側で変更した後に、「OK」ボタンで元のテキストエリアに変更したデータが転送されます。

このダイアログ内では、テキストエリア内で TAB キーが有効で、選択した状態で TAB キーを使うと一括で全ての行に TAB を挿入します。
( SHIFT+TAB で TAB を削除 )

呼び出す側のページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログの呼び出し</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:600px;
	height:200px;
}
</style>
<script type=text/javascript>
// *********************************************************
// 参照用ダイアログを開く
// 
// path へ引き渡す値として、
// 1) win	: このウインドウオブジェクト
// 2) target	: 値を戻してほしい id の文字列
// 3) val	: その id にセットされている現在の値
// *********************************************************
function openModalDialog(path,id) {

	var win_param = "";

	win_param += "dialogHeight:450px;";
	win_param += "dialogWidth:720px;";
	win_param += "dialogLeft:200px;";
	win_param += "dialogTop:200px;";

	window.showModalDialog(
		path,
		{ win: window,target: id, val: document.getElementById(id).value },
		win_param
	);
}

</script>
</head>
<body>
<input type="button" value="参照" onclick='openModalDialog("modalDialog.htm", "text")'>
<br>
<textarea id="text">
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value =
			document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</textarea>

<br><br><br>
※ Opera は showModalDialog が使えません
</body>
</html>


呼び出す場合に注意するのは第二引数で、JavaScript のオブシェクトが渡せます。つまり、{} による JSON データを引き渡す事ができるので自由に多くのやり取りが可能になります。

呼び出される側のページ
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=shift_jis" http-equiv="Content-Type">
<title>モーダルダイアログ</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script	type="text/javascript" src="http://lightbox.on.coocan.jp/tabtextarea.js"></script>
<script type=text/javascript>
function dialog_opener_access() {
	try {
		// 処理
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		win.document.getElementById(target).value = document.getElementById("text").value
		window.close();
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
}
</script>
</head>
<body>
<input type="button" value="OK" onclick='dialog_opener_access()'>
<br>
<script type="text/javascript">
createTabTextArea("text",100,12,"toolbox","width:700px;font-size:13px;","title=\"タブキーが有効です\"");
</script>

<script type=text/javascript>
(function () {
	try {
		var win = window.dialogArguments.win;
		var target = window.dialogArguments.target;

		document.getElementById("text").value = window.dialogArguments.val;
	}
	catch(e) {
		alert("このページはモーダルダイアログ用です。");
	}
})();
</script>

</body>
</html>

関連する記事

クロスドメインで、showModalDialog を使用する


posted by at 12:10 | Comment(0) | ちょっと特別な JavaScript | このブログの読者になる | 更新情報をチェックする


2010年11月24日


JavaScript : 無名関数を使用してグローバル領域を汚さない

JavaScript で関数の外で変数を定義してしまうと、グローバル領域を使用
してしまうので、他で使用しているかどうか考慮する必要がありますが、無名
関数を使用すると、そこに一時的なローカルブロックを作成できるので便利です
<!-- JavaScript -->
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

<textarea id="result" cols="80" rows=10></textarea>

<script type="text/javascript">
function syain(a,b,c) {

	this.code = a;
	this.name = b;
	this.age = c;
}

var p = Array();

p[0] = new syain("0001","田中", 20 );
p[1] = new syain("0002","鈴木", 21 );
p[2] = new syain("0003","山田", 22 );
p[3] = new syain("0004","中村", 23 );

(function() {
	var work = "";

	for( i = 0; i < p.length; i++ ) {
		work += ( p[i].code + "\t" + p[i].name + "\t" + p[i].age + "\n" );
	}

	$("result").value = work;
})();

try {
	alert(work);
}
catch(e){
	alert(e.message);
}

</script>



posted by at 13:44 | Comment(0) | ちょっと特別な JavaScript | このブログの読者になる | 更新情報をチェックする



JavaScript : Function を同じ種類の入れ物にする

要するに、「オブジェクト」として新たなデータ型を作りたい場合の方法です。
オブジェクトとしては、メソッドも追加できますが、単に「入れ物」で利用する
ところから始めると良いと思います
<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("prototype", "1.6.1.0");
</script>

<script type="text/javascript">
function syain(a,b,c) {

	this.code = a;
	this.name = b;
	this.age = c;
}

var p = Array();

p[0] = new syain("0001","田中", 20 );
p[1] = new syain("0002","鈴木", 21 );
p[2] = new syain("0003","山田", 22 );
p[3] = new syain("0004","中村", 23 );


function test() {

	var work = "";

	for( i = 0; i < p.length; i++ ) {
		work += ( p[i].code + "\t" + p[i].name + "\t" + p[i].age + "\n" );
	}

	$("result").value = work;
}

</script>
<!-- JavaScript 起動用ボタン -->
<pre>
<input type="button" id="btn" value="実行" onclick='test();'>
<textarea id="result" cols="80" rows=10></textarea>
</pre>



posted by at 13:29 | Comment(0) | ちょっと特別な JavaScript | このブログの読者になる | 更新情報をチェックする


2010年11月08日


PHPを書く時に必要な部品( クリップボード用 )

HTML( 主にHEAD部 ) 系

	meta、css、javscript

HTML ( サーバー送信 ) 系

	form、input(text/checkbox/radio)、textarea

HTML ( JavaScript ) 系

	JavaScript 起動用ボタン、オブジェクト参照

HTML ( 一般 ) 系

	table、特殊文字

PHP ( 基本 ) 系

	header、require_once、関数定義、exit

PHP ( 制御構造 ) 系

	foreach、for、if

PHP ( 関数 ) 系

	キャラクタセット変換、ファイル一括入出力、文字列分解
	文字列置換、部分文字列、文字列検索

PHP ( 単純処理関数 ) 系


posted by at 00:35 | Comment(0) | PHP | このブログの読者になる | 更新情報をチェックする


2010年10月11日


JavaScript : コンボボックスの選択状態を操作する

selectedIndex プロパティを使って行います。
通常、先頭の OPTION か、selected 属性を設定した OPTION が
選択されますが、-1 を設定すると未選択状態にする事ができます。
<SCRIPT type="text/javascript">
function selectOption() {

	var combo = document.frm.combo;
	combo.selectedIndex = 2;

}
function noSelectOption() {

	var combo = document.frm.combo;
	combo.selectedIndex = -1;

}
</SCRIPT>

<FORM name="frm">
<SELECT name="combo" style='width:150px;'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>
</FORM>

<INPUT type="button" value="リスト選択" onclick='selectOption();'>
<INPUT type="button" value="未選択" onclick='noSelectOption();'>


posted by at 21:40 | Comment(0) | JavaScript : 要素 | このブログの読者になる | 更新情報をチェックする



JavaScript : コンボボックスのテキスト部分を取得

テキストはそれ自体がノードなので、firstChild.nodeValue で取得します。
<SCRIPT type="text/javascript">
function checkOptionText() {

	var combo = document.frm.combo;
	var options = combo.getElementsByTagName("OPTION");
	var text = ""

	for( i = 0; i < options.length; i++ ) {
		text += options[i].firstChild.nodeValue + "\n";
	}

	alert(text);

}
</SCRIPT>

<FORM name="frm">
<SELECT name="combo" style='width:150px;'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>
</FORM>

<INPUT type="button" value="テキスト取得" onclick='checkOptionText();'>


posted by at 21:26 | Comment(0) | JavaScript : 要素 | このブログの読者になる | 更新情報をチェックする



JavaScript : コンボボックスにリストを挿入する(移動も可)

insertBefore で、目印となるオブジェクトの前に挿入します。
これは、コンボボックスだけでは無く、全ての要素で実行できるので、
一番に最後に追加する appendChild では困る時に使います。
<SCRIPT type="text/javascript">
function insertOption() {

	var combo = document.frm.combo;
	var options = combo.getElementsByTagName("OPTION");
	var target = document.createElement("OPTION");
	target.setAttribute("value", "1.5");
	var text = document.createTextNode("データ1.5")
	target.appendChild(text);
	combo.insertBefore(target,options[1]);
}
</SCRIPT>

<FORM name="frm">
<SELECT name="combo" style='width:150px;'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>
</FORM>

<INPUT type="button" value="リスト挿入" onclick='insertOption();'>
移動するには、そのオブジェクトを挿入するだけで、元あった場所からは消えます。
<SCRIPT type="text/javascript">
function moveOption() {

	var combo = document.frm.combo;
	var options = combo.getElementsByTagName("OPTION");
	combo.insertBefore(options[2],options[1]);

}
</SCRIPT>

<FORM name="frm">
<SELECT name="combo" style='width:150px;'>
<OPTION value="1">データ1</OPTION>
<OPTION value="2">データ2</OPTION>
<OPTION value="3">データ3</OPTION>
<OPTION value="4">データ4</OPTION>
</SELECT>
</FORM>

<INPUT type="button" value="リスト移動" onclick='moveOption();'>


posted by at 21:10 | Comment(0) | JavaScript : 要素 | このブログの読者になる | 更新情報をチェックする



簡単にページの右クリックをできなくする


<script type="text/javascript">
document.oncontextmenu = function(){ return false };
</script>


解除したい場合は、デベロッパーツールで document.oncontextmenu=null を実行します



posted by at 12:38 | Comment(0) | ちょっと特別な JavaScript | このブログの読者になる | 更新情報をチェックする



JavaScript : ページの中の全てを参照する

document オブジェクトに3つのメソッドが用意されています。
これらのメソッドでページ内のエレメント(要素)を直接参照する事ができます

getElementById

IE : http://msdn.microsoft.com/en-us/library/ms536437.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementById

getElementsByName

IE : http://msdn.microsoft.com/en-us/library/ms536438.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementsByName

getElementsByTagName

IE : http://msdn.microsoft.com/en-us/library/ms536439.aspx
mozilla : https://developer.mozilla.org/ja/DOM/document.getElementsByTagName

getElementsByTagName は、各要素にも存在するメソッドなので、TABLE 内の TD 要素のみを全て
取得して、ループで全TD 内のテキストを取得するというような事に使う事ができます
また、getElementsByTagName では、特定要素のかわりに "*" を使う事ができます
( 全ての要素です )
<script type="text/javascript">
for( i = 0; i < document.getElementsByTagName("*").length; i++ ) {
	console.log(document.getElementsByTagName("*")[i].tagName );
}
</script>

フォーム内の要素

フォームとフォーム内の入力用要素に name 属性が設定されていると、
document.フォーム名.入力要素名で参照する事ができます。
<form name=myForm>
<input type="text" name="myFld" value="日本語表示">
</form>
<script type="text/javascript">
alert(document.myForm.myFld.value);

alert(document["myForm"]["myFld"].value);
</script>

document.フォーム名.入力要素名 は、
document["フォーム名"]["入力要素名"] と書きかえる事もできます

特別な定義済の body 要素

document.body で、document.getElementsByTagName("BODY")[0] と
同じものを参照する事ができます。


parentNode メソッドで一つ上の要素を参照

HTML エレメントは、階層構造になっているので、自分自身を示す this から
一つ上の要素を介して、他の要素を参照する事も可能です。
<div>
<span>a</span>
<span onclick='this.parentNode.getElementsByTagName("SPAN")[0].style.color="#ff0000"'>b</span>
<span onclick='this.parentNode.getElementsByTagName("SPAN")[3].style.color="#0000ff"'>c</span>
<span>d</span>
</div>


posted by at 10:58 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする