【20140425】【jQuery】自由にPOST用のフォームを生成するアプリ
お題
自由にPOST用のフォームを生成するアプリを作成する
アプリ概要
URLとname属性を自由に指定してformを生成し、
送信ボタンを押すとそのURLに対して指定したname属性と値で
POSTリクエストを投げる。
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>POSTフォーム作成</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
body {
background-color: green;
}
</style>
</head>
<body background="">
<h3>POSTフォーム作成</h3>
<input type="text" id="url" placeholder="URLを入力"><br><br>
<input type="text" id="param" placeholder="パラメータ名を入力"><br><br>
<input type="text" id="val" placeholder="パラメータの値を入力"><br><br>
<form id="form1" method="post" action="#">
<div id="div1">
</div>
<div id="div2">
</div>
</form>
<input type="button" id="button1" value="フォームを生成"><br><br>
<input type="button" id="button2" value="サブミットボタンを生成"><br><br>
<script>
$(function() {
$('#button1').click(function() {
var param = $('#param').val();
var val = $('#val').val();
$('#div1').append('<span>name属性：' + param + ' </span>' + '<input type="text" name="' + param + '" value="' + val + '"/><br><br>')
});
$('#button2').click(function() {
var url = $('#url').val();
$('#form1').attr('action', url);
$('#div2').append('<span>URL:' + url + ' </span>' + '<input type="submit" value="送信"><br><br>');
});
});
</script>
</body>
</html>URL
【20140424】【jQuery】シェルソート可視化アプリ
お題
シェルソート可視化アプリを作る
プログラム概要
「続けますか？」と聞かれるので、OKを押すと、
シェルソートによる並べ替えが行われる。
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>シェルソート</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
img {
width: 100px;
height: 100px;
margin: 0px;
}
body {
background-color: yellow;
}
td {
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body background="">
<h3>シェルソート</h3>
<input type="button" id="button" value="開始">
<table border="1">
<tr id="tr0">
<td>55</td>
<td>74</td>
<td>3</td>
<td>45</td>
<td>13</td>
<td>87</td>
<td>46</td>
<td>30</td>
<td>44</td>
<td>55</td>
<td>1</td>
<td>4</td>
</tr>
</table>
<br>
<script>
$(function() {
var N = 12; // 配列の数
// ソート対象の配列
var target = new Array(N);
// 配列の値をセットする
function init() {
var i;
for(i = 0; i < N; i++) {
temp = $('#tr0 > td').eq(i).text();
target[i] = parseInt(temp, 10);
}
}
// シェルソート
function shell_sort() {
var h, i, j, t;
for(h = 1; h < N/9; h = h * 3 + 1) {
}
target_tds = '#tr0 > td';
for(; Math.floor(h) > 0; h = h / 2) {
for(i = h; i < N; i++) {
j = i;
if(confirm('続けますか？')) {
$(target_tds).eq(j-h).css("background-color", "blue");
$(target_tds).eq(j).css("background-color", "blue");
} else {
return;
}
while(j >= h && target[j-h] > target[j]) {
if(confirm('続けますか？')) {
$(target_tds).eq(j-h).css("background-color", "blue");
$(target_tds).eq(j).css("background-color", "blue");
} else {
return;
}
t = target[j]; target[j] = target[j-h]; target[j-h] = t;
if(confirm('続けますか？')) {
$(target_tds).eq(j-h).text(target[j-h]);
$(target_tds).eq(j).text(target[j]);
$(target_tds).eq(j-h).css("background-color", "red");
$(target_tds).eq(j).css("background-color", "red");
} else {
return;
}
if(confirm('続けますか？')) {
$(target_tds).eq(j-h).css("background-color", "yellow");
$(target_tds).eq(j).css("background-color", "yellow");
} else {
return;
}
j = j - h;
}
if(confirm('続けますか？')) {
$(target_tds).eq(j-h).css("background-color", "yellow");
$(target_tds).eq(j).css("background-color", "yellow");
} else {
return;
}
}
}
}
function main() {
init();
shell_sort();
}
$('#button').click(function() {
main();
});
});
</script>
</body>
</html>URL
【20140423】【jQuery】8クイーン問題アプリ
お題
8クイーン問題を解くアプリを開発する
プログラム概要
ボタンを押すと8クイーン問題の解析が始まる。
最終的にクイーンを置いた箇所が赤になり、
盤上にクイーンを置いた回数を表示させる。
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>8クイーン体験アプリ</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
img {
width: 100px;
height: 100px;
margin: 0px;
}
body {
background-color: yellow;
}
td {
width: 50px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body background="">
<h3>8クイーン問題</h3>
<input type="button" id="button" value="開始">
<table border="1">
<tr id="tr0">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr1">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr2">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr3">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr4">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr5">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr6">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="tr7">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<script>
$(function() {
var SUCCESS = 1; // 成功
var FAIL = 0; // 失敗
var FREE = 1; // この場所は利き筋になっていない
var NOT_FREE = 0; // この場所は利き筋になっている
var N = 8; // クイーンの数
// 各行におかれたクイーンの位置
var pos = new Array(N);
// クイーンが垂直方向に利いているかを示す配列
var col = new Array(N);
// クイーンが右斜め下向きに利いているかを示す配列
var down = new Array(2 * N - 1);
// クイーンが右斜め上向きに利いているかを示す配列
var up = new Array(2 * N - 1);
// クイーンを置いた数を示す配列
var count = new Array(N * N);
// スリープ関数
function sleep(t){
var d1 = new Date().getTime();
var d2 = new Date().getTime();
while( d2 < d1+1000*t ){ //T秒待つ
d2=new Date().getTime();
}
return;
}
// クイーンの位置と聞き筋を初期化する
function init_board() {
var i;
for(i = 0; i < N; i++)
pos[i] = -1;
for (i = 0; i < N; i++)
col[i] = FREE;
for (i = 0; i < 2 * N - 1; i++)
down[i] = FREE;
for (i = 0; i < 2 * N - 1; i++)
up[i] = FREE;
for (i = 0; i < N * N; i++) {
count[i] = 0;
}
}
// a行目以降すべての行にクイーンを置いてみる
function execute(a) {
var b;
// 左から右に向かって順番にクイーンがおけるかどうかを調べる
for(b = 0; b < N; b++) {
// a行目のb番目に置けるかどうかを調べる
if (col[b] == FREE && up[a+b] == FREE && down[a-b+(N-1)] == FREE) {
// 置くことができた。場所を記録して、利き筋をセットする
pos[a] = b;
target_tds = '#tr' + a + ' > td';
$(target_tds).eq(b).css("background-color", "red");
count[a * N + b]++;
col[b] = NOT_FREE;
up[a+b] = NOT_FREE;
down[a-b+(N-1)] = NOT_FREE;
// N個のクイーンをすべておくことができれば成功である
if (a + 1 >= N)
return SUCCESS;
else {
// a+1行目以降のすべての行に置けたら成功である
if (execute(a + 1) == SUCCESS)
return SUCCESS;
else {
// 失敗した。クイーンを取り除く
pos[a] = -1;
target_tds = '#tr' + a + ' > td';
$(target_tds).eq(b).css("background-color", "yellow");
col[b] = FREE;
up[a + b] = FREE;
down[a - b + (N-1)] = FREE;
}
}
}
}
// 結局この行には置ける場所がなかった
return FAIL;
}
function main() {
init_board();
if(execute(0) == SUCCESS) {
alert('成功');
} else {
alert('失敗');
}
for(var i = 0; i < N; i++) {
target_tds = '#tr' + i + ' > td';
for(var j = 0; j < N; j++) {
$(target_tds).eq(j).text(count[i * N + j]);
}
}
$('table').after($('<p>テーブルの中の数字はクイーンが置かれた回数です</p>'));
}
$('#button').click(function() {
main();
});
});
</script>
</body>
</html>URL
【20140422】【jQuery】ORA-01555体験アプリ
お題
ORA-01555を体験するためのアプリ
プログラム概要
UNDO領域内が0.5秒ごとに更新される。
0領域のデータに対してselectを投げ、（ボタンを押すだけ）
それから1秒以内に0領域が更新されれば、ORA-01555が発生する。
（selectは1秒かかる前提）
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ORA-01555体験アプリ</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
img {
width: 100px;
height: 100px;
margin: 0px;
}
body {
background-color: yellow;
}
td {
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body background="">
<h3>UNDO領域</h3>
<table border="1">
<tr><td id="td0" align="center">0</td><td id="td1" align="center">1</td></tr>
<tr><td id="td3" align="center">3</td><td id="td2" align="center">2</td></tr>
</table>
<br>
<input type="button" id="button" value="0の領域のデータにselect">
<p>※UNDO内の各領域が0.5秒ごとに更新される前提です。<br> selectは1秒かかる前提です。<br> 従って、0領域が更新される1.0秒前までにselectを行う必要があります<br> でないとORA-01555が発生します。</p>
<script>
$(function() {
var td0Color = "blue";
undo();
function undo(){
var i = 0;
var td;
var $color = "blue";
timerId1 = setInterval(function(){
if(i == 4){
i = 0;
if($color == "blue") {
$color = "red";
//alert(i);
} else {
$color = "blue";
}
}
td = "#td" + i;
$(td).css("background-color", $color);
if(i == 0) {
td0Color = $color;
}
i++;
//alert(i);
},500);
}
$('#button').click(function() {
var startColor = td0Color;
var endColor;
timerId2 = setInterval(function(){
endColor = td0Color;
if(startColor == endColor) {
alert('成功');
clearInterval(timerId2);
} else {
alert('ORA-01555: スナップショットが古すぎます');
clearInterval(timerId2);
}
},1000);
});
});
</script>
</body>
</html>URL
【20140421】【jQuery UI】簡単なパズルアプリ
お題
jQuery UIのsortable関数を使って
簡単なパズルを作る
プログラム概要
画像を並べ替えてパズルが完成していたら正解、
そうでなければ不正解と表示させる
ソース
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>パズル</title>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<style>
img {
width: 283px;
height: 100px;
margin: 0px;
padding: 0px;
border: 0px;
vspace: 0px;
hspace: 0px;
}
ul#testSubject {
list-style: none;
padding: 0;
}
</style>
<script>
$(function() {
$('#testSubject').sortable({});
$('#button').click(function(){
i = 1;
$('li').each(function(){
if($(this).attr('id') == i) {
i++;
} else {
return false;
}
});
if(i == 4) {
alert('正解です');
} else {
alert('不正解です');
}
});
});
</script>
</head>
<body>
<input type="button" id="button" value="画像を並び変えたら押してください"/>
<ul id="testSubject">
<li id="3"><img src="images/c.png" alt="sortable 1"></li>
<li id="2"><img src="images/b.png" alt="sortable 2"></li>
<li id="1"><img src="images/a.png" alt="sortable 3"></li>
</ul>
</body>
</html>URL
【20140419】【Java】Proxyパターンを使った見積もりアプリ
お題
Proxyパターンを使った見積もりアプリ
プログラム概要
見積もりを行うProxyクラスを複数つくり、Clientから呼び出す。
Proxyクラスは四つ（A~Dとする）ありA→B→C→Dの順に呼ばれる。
（ClientからはAとCとDを呼び出す。）
AとCとDに依頼したばあいの見積もりを表示させる。
ソース
※下記からダウンロードしてください。
http://7.gigafile.nu/?331f0ea2ca4b26cce5cb682f58b4d8ea
実行結果
現在依頼している機能数は100です。
【代理人経由で親会社】に見積り依頼をすると223.33333円です。
現在依頼している機能数は100です。
【直接請負会社の下請会社】に見積り依頼をすると220.0円です。
現在依頼している機能数は100です。
【直接請負会社の孫請会社】に見積り依頼をすると210.0円です。
