2010年10月08日


JavaScript : リロードボタンとリンクボタン

テストしてみてかなり不思議に思いました。ブラウザによってかなり動作が違います。
INPUT のボタンを A で挟んでいるだけですが、Google Chrome と Opera は、ボタン
をクリックするだけで、A の  href が開きます。Firefox は、何故か二つ開くので、
イベントをキャンセルして、window.open しています。

IE は、昔から click メソッドがあるので、A を呼び出しています。
<INPUT type="button" value="サーバーからリロード" onclick='location.reload(true);'>

<A href="http://winofsql.jp" target="_blank">
<INPUT
	type="button"
	value="ウインドウを開く"
	onClick='
		window.userAgent = navigator.userAgent.toLowerCase();
		if (userAgent.indexOf("msie") > -1) {
			this.parentNode.click();
		}
		if (userAgent.toLowerCase().indexOf("firefox") > -1) {
			event.preventDefault();
			window.open(this.parentNode.href,this.parentNode.target);
		}
		'
></A>



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



JavaScript : 任意の要素からの相対位置にウインドウを開く

<script type="text/javascript">

window._win = document.createElement('div');
_win.setAttribute('id','_win')
_win.style.position='absolute';
_win.style.width='0px';
_win.style.height='0px';
_win.style.left='0px';
_win.style.top='0px';
_win.style.color = '#000000';
_win.style.backgroundColor = '#E0E0E0';
_win.style.display = 'none';
_win.style.borderStyle = 'solid';
_win.style.borderColor = '#303030';
_win.style.borderWidth = '1px';
_win.style.display = 'none';

str="";
str+="<input \n";
str+="	type=\"image\" \n";
str+="	src=\"http://winofsql.jp/image/mcancel.png\" \n";
str+="	style='float:right' \n";
str+="	onClick='this.parentNode.style.display = \"none\";' \n";
str+="> \n";
str+=" ";
_win.innerHTML = str;

document.body.appendChild(_win);

function setWin(target,x,y,w,h) {
	var numY = target.offsetTop;
	var numX = target.offsetLeft;
	var obj = target;
	while( obj = obj.offsetParent ) {
		numY += obj.offsetTop;
		numX += obj.offsetLeft;
		if ( obj.tagName == 'BODY' ) {
			break;
		}
	}
	_win.style.top = (numY+y) + "px";
	_win.style.left = (numX+x) + "px";
	_win.style.width = w + "px";
	_win.style.height = h + "px";
	_win.style.display = "";
}
</script>
<input
	type="button"
	value="ウインドウを開く"
	onClick='setWin(this,0,this.offsetHeight+2,200,150)'
>


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



JavaScript 用リンク(アンカー)とブラウザ判定 / ブックマークレット登録専用リンク

ステータスバーへの表示は本来必要は無いですが、利用可能なので使っています。
但し、Opera は 化けます。

href に、javascript: を使って JavaScript を記述すると、
ブックマークレット登録専用リンクとして利用する事ができます。
JavaScript 用アンカー
<A href="about:ステータスバー用文字列" onclick='aclick( event );'>JavaScript 用アンカー</A>
<script type="text/javascript">

function aclick( ev ) {

	// ユーザ用に window にブロパティを作成( userAgent )
	window.userAgent = navigator.userAgent.toLowerCase();

	if (userAgent.indexOf("msie") > -1) {
		// 本来の処理のキャンセル( URL への移動 )
		ev.returnValue = false;
		alert("IE:"+userAgent);
	}
	else if (userAgent.toLowerCase().indexOf("firefox") > -1) {
		// 本来の処理のキャンセル( URL への移動 )
		ev.preventDefault();
		alert("Firefox");
	}
	else if (userAgent.toLowerCase().indexOf("opera") > -1) {
		ev.preventDefault();
		alert("Opera");
	}
	else if (userAgent.toLowerCase().indexOf("chrome") > -1) {
		ev.preventDefault();
		alert("Google Chrome");
	}
	else if (userAgent.toLowerCase().indexOf("safari") > -1) {
		ev.preventDefault();
		alert("Safari");
	}
	else {
		ev.preventDefault();
		alert("Unknown");
	}
}
</script>



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



JavaScript : ページを半透明にしてプロテクトし、スクロールしない固定ウインドウを開く

幅が固定で表示されているページはの width は、100% では無く固定にする必要があります。
( このページは固定です/document.getElementsByTagName("HTML")[0].scrollWidth+'px')

※ IEは標準モードで動作します
※ position:fixed が使えるのは IE7 以降です。opacity プロパティが使えるのは IE9 からのようです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
</head>
<body>
<script type="text/javascript">
function scriptTest(evt) {

	// ページ全体を覆う DIV の作成
	window.ds = document.createElement('div');
	ds.setAttribute('id','ds')
	ds.style.position='absolute';
	ds.style.width='100%';
	ds.style.height=document.getElementsByTagName("HTML")[0].scrollHeight+1600+'px';
	ds.style.left='0px';
	ds.style.top='0px';

	// IE8 までは、opacity プロパティが使えないようです
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = 'none';
		ds.style.backgroundColor = '#000000';
		ds.style.filter='alpha(opacity=50)';
	}
	else {
		ds.style.backgroundColor = '#000000';
		ds.style.opacity=.5;
	}

	// ページの最後に追加
	document.body.appendChild(ds);

	// IEのみ後表示
	if (userAgent.indexOf("msie") > -1) {
		ds.style.display = '';
	}

	// ページの手前で固定位置で動かない div を作成
	window.ds2 = document.createElement('div');
	ds2.setAttribute('id','ds2')
	ds2.style.position='fixed';
	ds2.style.width='400px';
	ds2.style.height='200px';
	ds2.style.left='100px';
	ds2.style.top='100px';
	ds2.style.backgroundColor = '#ffffff';
	document.body.appendChild(ds2);

	// div 内のコンテンツ( 元の状態に戻すボタン )	
	ds2.innerHTML = 
		'<INPUT type=button value="close" onclick="document.body.removeChild(ds);document.body.removeChild(ds2)">'

}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>
<br><br>
<img src="http://lightbox.cocolog-nifty.com/photos/app003/twitlink_b1.jpg" galleryimg="no" style='border-style:solid;border-width:1px;border-color:#000000' alt="Twitlink_b1" />
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>
</html>



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


2010年10月07日


JavaScript : コンボボックスにリストを追加する

<SCRIPT type="text/javascript">
function addCombo() {

	var combo = document.frm.combo;
	var option = null;
	var text = null;

	for( i = 0; i < 4; i++ ) {
		option = document.createElement("OPTION");
		option.setAttribute("value", i+1);
		text = document.createTextNode("オプション"+(i+1));
		option.appendChild(text)
		combo.appendChild(option)
	}

}
</SCRIPT>

<FORM name="frm">
<SELECT name="combo" style='width:150px;'>
</SELECT>
</FORM>

<INPUT type="button" value="データ追加" onclick='addCombo();'>



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



JavaScript : コンボボックスのリストを全て削除

options.item( i ) は、options[i] とする事もできます
<SCRIPT type="text/javascript">
function resetCombo() {

	var combo = document.frm.combo;
	var options = combo.getElementsByTagName("OPTION");
	var len = options.length;
	for( i = len-1; i >= 0; i-- ) {
		 combo.removeChild( options.item( i ) );
	}

}
</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='resetCombo();'>


削除を最後から行っているのは、削除するたびにオブジェクト内のリスト
が更新されるので、前から削除できないからです。前から削除するには、
自分で配列に保存しておく必要があります
<SCRIPT type="text/javascript">
function resetCombo() {

	var combo = document.frm.combo;
	var options = combo.getElementsByTagName("OPTION");
	var len = options.length;
	var save = [];
	for( i = 0; i < len; i++ ) {
		save[i] = options.item( i );
	}
	for( i = 0; i < len; i++ ) {
		combo.removeChild( save[i] );
	}

}
</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='resetCombo();'>


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


2010年10月06日


F12 で起動する IE の「開発者ツール」

最新の情報は以下の英文ページで知る事ができますが、日本語ページと同じではありません(なんか、英文のほうが古いです、IEからのHELP のリンクなのに)。

Using the F12 developer tools in IE11

▼ The DOM Explorer tool (CTRL + 1)

ここでよく使いそうな大きな変更は、color picker が追加された事です





▼ The Debugger tool

デバッガで知っておきたいのは、ソースマップを使って圧縮した JavaScript を圧縮前のソースコードとしてデバッグする方法です。






単に整形したいだけならば、{三} アイコンをクリックするだけです





▼ 以下は IE8 に関する古い記事です Ie8_tool1 F12 で起動すると、最初はこのようにウインドウが開きますが、これはこのままで 使うものでは無く、ブラウザのページとドッキングして使うものです。 ドッキングするには、赤い部分をクリックするか CTRL+P で切り替え可能です。 ( ドッキング状態では、CTRL+M で擬似的な最小化を行います ) Ie8_tool2
そして一番最初に試すのはこのボタンか CTRL+B で、このモードになって
ページ上でマウスカーソルを動かす事によって、HTML の要素をアウトライン
で探す事が出来、クリックで決定すると IE 開発者ツール側にその要素が選択
されます

Ie8_tool4

Ie_devtool
特定要素の輪郭を常に強調 後、メニューから簡単にテーブル等、構造が解りにくい要素の位置を常に アウトラインで表示できるようにする事ができます。 Ie8_tool_outline ※ 任意の要素も可能です Ie_devtool2 Microsoft ドキュメント Internet Explorer 開発者ツールを理解する
posted by at 13:30 | Comment(0) | ツール | このブログの読者になる | 更新情報をチェックする


2010年09月15日


WEBアプリケーションにおける「JavaScript」の役割

本来、WEB アプリケーションに JavaScript は必要ありません。

WEB アプリケーションの目的は、ブラウザから入力した情報をサーバーに送る事
が本来の目的ですので、サーバーサイドの PHP がその送られた情報をサーバーに
記録するという役割を持つ以上、JavaScript を必要としません。

極端な話、ブラウザは JavaScript の動作を禁止する事ができるので、ユーザに
よって、動くかどうか解らないものに頼るわけにはいかないのです。

しかし。

それで良いかと言えばそうでは無く、WEB アプリケーションの目的の殆どはビジ
ネスです。顧客をより多く得る為には、より豊かな表現力が必要になって来ます。
その際に活躍する「技術のうちの一つ」である事は誰も否定できないのです。

技術的には、JavaScript が活躍する部分は JavaScript のプログラマが作成し、
そのページは固定的にブラウザに送信する場合と、PHP がデータを元に動的に
JavaScript のコードを出力する場合があります。

当然後者は PHP と JavaScript を両方熟知したプログラマが作成する必要があり、
場合によっては、Flash の知識も必要ですし、基本的な HTML の知識も有している
必要があります。

よって、JavaScript だけのプログラマというのは WEB アプリケーションでは存在
せず、JavaScript の扱いを支援する為のライブラリばかりを作るプログラマという
人達が、かろうじて存在します。この人達は JavaScript の深淵にまで精通し、とて
も一般のプログラマが入っていけない領域を担当しています。

実は、実用レベルでは JavaScript のほうが他の言語よりもはるかに難解なのです。

ですから、WEB アプリケーションを目指すという事は、JavaScript に関しては、
それらの優秀なライブラリ群を使える人になるという事と同義であって、優先順位は
低いという事になります。

まず、PHP ですね。


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



php のエッセンスのサンプル



csv を入力してテーブルとして表示するアプリケーションのサンプルですが、
できる限り PHP のエッセンスを組み込みました。配列が二つあって、二重
ループになっていますが、完成した状態から省いてシンプルにしていけば、
いいと思います。
完成形
<?

require_once("css.php");

$text = file_get_contents("data.csv");

$row = explode( "\r\n", $text );

echo "<pre>", print_r( $row, true ), "</pre>";

print "<TABLE border=1>";
for( $i = 0; $i < count($row)-1; $i++ ) {
	$col = explode( ",", $row[$i] );

	debug_data( $col, $i );

	// 行の作成
	$buffer = "";
	for( $j = 0; $j < count($col); $j++ ) {
		// 列の作成
		$buffer .= "<TD>{$col[$j]}</TD>";
	}

	print "<TR";
	print " style='cursor:crosshair' onmouseover='document.getElementById(\"data$i\").style.display=\"\"'";
	print " onmouseout='document.getElementById(\"data$i\").style.display=\"none\"'";
	print ">{$buffer}</TR>";
}
print "</TABLE>";

print $work;

function debug_data( $data, $no ) {

	global $work;

	$work .= "<pre id='data$no' style='display:none;position:absolute;left:300px;top:160px;'>";
	$work .= print_r( $data, true );
	$work .= "</pre>";

}

?>

上のソースコードから、デバッグ用の表示部分を省くと以下のようになります
デバッグなし
<?

require_once("css.php");

$text = file_get_contents("data.csv");

$row = explode( "\r\n", $text );

print "<TABLE border=1>";
for( $i = 0; $i < count($row)-1; $i++ ) {
	$col = explode( ",", $row[$i] );

	// 行の作成
	$buffer = "";
	for( $j = 0; $j < count($col); $j++ ) {
		// 列の作成
		$buffer .= "<TD>{$col[$j]}</TD>";
	}

	print "<TR>{$buffer}</TR>";
}
print "</TABLE>";

?>

さらに、表示を行だけにすると簡単になります。
行表示のみ
<?

require_once("css.php");

$text = file_get_contents("data.csv");

$row = explode( "\r\n", $text );

print "<TABLE border=1>";
for( $i = 0; $i < count($row)-1; $i++ ) {

	// 行の作成
	$buffer = "";
	$buffer .= "<TD>{$row[$i]}</TD>";

	print "<TR>{$buffer}</TR>";
}
print "</TABLE>";

?>

※ 注意
このサンプルはあくまで、PHP としてのサンプルであって、WEB アプリケーション
として望ましい形ではありません。実際の WEB アプリケーションでは、print や
echo で画面を表現する事をしないからです。


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


2010年09月13日


PHP における「現実的な」変数の意味

データを保存する場所

プログラミング言語において、「変数」は、データを一時的に保存する場所です。
また、殆どの場合保存する場所は PC のメモリになるのですが、WEB アプリケー
ションという特性上、PHP に限った事ではありませんが、ブラウザが表示している
HTMLの「FORM」内の「INPUT要素の値」も PHP にとっては変数と同じ役目を持って
います。

$_GET は、入力値を保持する「変数」ですが、PHP 側の処理が終了すると消えて
無くなってしまいます。しかし、画面のデフォルト値に埋め込めば、再び PHP が
呼び出された時にその値は保持されているはずです
<INPUT
	type="text"
	name="InTel"
	value="<?= $_GET['InTel'] ?>"
>

<SELECT name="InAddress">
<OPTION value="1" <?= $_GET['InAddress'] == "1" ? "selected" : "" ?>>大阪
<OPTION value="2" <?= $_GET['InAddress'] == "2" ? "selected" : "" ?>>京都
<OPTION value="3" <?= $_GET['InAddress'] == "3" ? "selected" : "" ?>>神戸
</SELECT>

<INPUT
	type="radio"
	name="InSex"
	value="0"
	<?= $_GET['InSex'] != "1" ? "checked" : "" ?>
>
<INPUT 
	type="radio"
	name="InSex"
	value="1"
	<?= $_GET['InSex'] == "1" ? "checked" : "" ?>
>

<INPUT
	type="checkbox"
	name="InCheck"
	value="1"
	<?= $_GET['InCheck'] == "1" ? "checked" : "" ?>
>
変数である事の主張

PHP では、変数は必ず $ からはじまるようになっています。これは、"" の
中で変数が記述された場合に、中身で置き換える事ができるようにする為です。
但し、この場合、変数の終わりの位置を決める必要がありますが、何もしなくても
「あきらかに」変数の終わりが解る場合は PHP が判断してくれます。ですが、
もし、PHP が判断できないような文字列があった場合は、以下のように {} で
挟むように決められています。
$x = "/";
$a = "abcd{$x}efgh";
変数の3つの形

プログラミング言語では、変数には「型」という種類が必ず存在しますが、
込み入ったものでも無い限り、PHP で最も意識する「型」は「文字列」と
言う型です。

文字列はたいていにおいて、「見たまま」の内容で、入力された値を最も
意識する必要があるのが WEB アプリケーションでもあります。そんな中、
変数の「ありかた」と言うものを3種類意識して処理を書く事が殆どとな
ります。

1) 単独

 $a というように、変数名一つに対して、値が一つ存在するものです。

2) 単純配列

 $a[0]、$a[1]、$a[2] ... と言うように、変数名一つに対して、複数
 値が存在しますが、複数の値を管理するのに「整数」を使うものです。

3) 連想配列

 $a["住所"]、$a["電話番号"]、$a["氏名"] ... と言うように、変数名
 一つに対して複数の値が存在し、複数の値を管理するのに「文字列」を
 使います

 結果的には、「連想配列」が他の「ありかた」を全て含むので、配列の
 内容を一括で取り出すような場合は、以下のような方法を取ることにな
 ります。
$a = array();

$a[] = "123";
$a[] = "456";
$a["山"] = "富士山";
$a[] = "789";
$a["湖"] = "琵琶湖";

foreach( $a as $Key => $Value ) {
	print "$Key : {$a[$Key]}<br />";
}

関連する記事

変数は乗り物で、function は部屋です。
PHPの「連想配列」: associative array


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