|
|
難しく言うと、「可変長引数リスト」の処理方法ですが、引数を定義されている関数に対しても使えるので、いずれも 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>
|
|
昨今の事情では、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 を使用する
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>
要するに、「オブジェクト」として新たなデータ型を作りたい場合の方法です。 オブジェクトとしては、メソッドも追加できますが、単に「入れ物」で利用する ところから始めると良いと思います
<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>
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 ( 単純処理関数 ) 系
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();'>
テキストはそれ自体がノードなので、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();'>
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();'>
<script type="text/javascript">
document.oncontextmenu = function(){ return false };
</script>
解除したい場合は、デベロッパーツールで document.oncontextmenu=null を実行します
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>
