形から入るWEBアプリ

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$(function(){
	$("#btn")
		.on("click", function(){
			alert("ボタンがクリックされました");
		});
});
</script>

<input
	type="button"
	id="btn"
	value="実行">

<script type="text/javascript">

function scriptTest(evt) {

	// TABLE 要素のコレクション
	var obj = document.getElementsByTagName("TABLE");
	var objcol = null;

	// TABLE 一覧
	for( var i = 0; i < obj.length; i++ ) {

		// テーブル外側の枠線
		obj[i].style.borderStyle = 'solid';
		obj[i].style.borderColor = '#411DB8';
		obj[i].style.borderWidth = '1px';

		// テーブル内の TD の一覧
		objcol = obj[i].getElementsByTagName("TD");
		for( var j = 0; j < objcol.length; j++ ) {
			// テーブル内の TD の枠線
			objcol[j].style.borderStyle = 'solid';
			objcol[j].style.borderColor = '#ffa500';
			objcol[j].style.borderWidth = '1px';
		}

		// テーブル内の TH の一覧
		objcol = obj[i].getElementsByTagName("TH");
		for( var j = 0; j < objcol.length; j++ ) {
			// テーブル内の TH の枠線
			objcol[j].style.borderStyle = 'solid';
			objcol[j].style.borderColor = '#1C8A23';
			objcol[j].style.borderWidth = '1px';
		}
	}

}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>

<input
	type="button"
	value="ページの最後"
	onclick='scroll(
		0,
		Math.max(document.getElementsByTagName("HTML")[0].scrollHeight,document.documentElement.scrollHeight,document.body.scrollHeight)
		);
	'
>

<?php
$path = '/usr/lib/pear';
set_include_path(get_include_path() . PATH_SEPARATOR . $path);
?>

<?php

foreach( $_SERVER as $member ) {

	print $member
	print "OK";

}

?>

<?php
// 条件つきの関数

if ( $_GET['send'] == '' ) {
	function plus( $a, $b ) {
	
		return $a + $b;
	
	}
}

print plus(10,5);

?>
<form
	name="frm"
	action="<?= $_SERVER['SCRIPT_NAME'] ?>"
	target="_self"
	method="get"
	onsubmit='return (function(){return true;})();'
>
<input type="submit" name="send" value="送信">
</form>

<?php
// ********************
// 計算関数のロード
// ********************
function load_compute( ) {

	function plus( $a, $b ) {
		return $a + $b;
	}

	function minus( $a, $b ) {
		return $a - $b;
	}

}

// ここで実行すると未定義エラー
if ( !function_exists( "plus" ) ) {
	print "未定義です<br>";
}

load_compute();
print plus(10,5) . "<br>";

// ここで実行すると定義あり
if ( function_exists( "plus" ) ) {
	print "定義されています<br>";
}


?>

<?php
// ************************
// 定義で参照渡し
// ************************
function plus( &$a, $b ) {

	$a += $b;
}

$x = 10;
plus($x,5);

print $x;
print "<hr>";

// ************************
// global キーワード
// ************************
function plus3() {

	global $z;

	$z[0] += $z[1];
}

$z = array(10,5);
plus3();

print_r( $z );
print "<hr>";

// ************************
// $GLOBALS(スーパーグローバル)
// ************************
function plus4() {

	global $z;

	$GLOBALS['z'][0] += $GLOBALS['z'][1];
}

$z = array(10,5);
plus4();

print_r( $z );
print "<hr>";


?>

// ************************************************
// if ( オプションとして else )
// ************************************************
if ( 条件 ) {
	条件が true である場合の処理記述
}

// ************************************************
// for ( 指定回数繰り返し )
// ************************************************
for (initialization; 条件; increment) {
	条件 が true である間繰り返される処理記述
}

// ************************************************
// while ( 条件繰り返し )
// ************************************************
while (条件) {
	条件 が true である間繰り返される処理記述
}

// ************************************************
// function ( 関数定義 )
// ************************************************
function 名前( 仮引数 ) {
	名前で呼ばれた時に実行される処理記述
}

// ************************************************
// try ( エラー処理 )
// ************************************************
try {
	監視対象の処理記述
}
catch( エラーの値 ) {
	監視対象の処理記述がエラー時に実行する処理記述
}

<?php
// [a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]* 

function ｼﾌﾄｼﾞｽﾉｶﾀｶﾅ( $a, $b ) {

	return $a + $b;

}

print ｼﾌﾄｼﾞｽﾉｶﾀｶﾅ(10,5);

?>

<?
// 関数名は大文字小文字を区別しない

function PLUS( $a, $b ) {

	return $a + $b;

}

print plus(10,5);

?>

<?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>

<!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>

<!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>

<!-- 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>

<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();'>

<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();'>

<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>

<script type="text/javascript">
for( i = 0; i < document.getElementsByTagName("*").length; i++ ) {
	console.log(document.getElementsByTagName("*")[i].tagName );
}
</script>

<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>

<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>

<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>

<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)'
>

<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>

<!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>

<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();'>

<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();'>

<?

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>";

?>

<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" : "" ?>
>

$x = "/";
$a = "abcd{$x}efgh";

$a = array();

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

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