SQLの窓

2014年03月06日


JavaScript による2会話アプリケーションのコントロール(2)

▼ pass1 開始 ボタンと pass2 開始 ボタンをクリックして下さい。


 
------------------------------






class 属性を使用して、会話グループ単位に使用可能にしたり使用不能にしたりします

<script type="text/javascript">
function passControl(idstr,pass,enable) {
	var x = window[idstr];
	for( var i = 0; i < x.length; i++ ) {
		if ( x[i].className == pass ) {
			if ( (x[i].tagName).toUpperCase() == 'INPUT' ) {
				if ( (x[i].type).toUpperCase() == 'TEXT' ) {
					if ( enable ) {
						x[i].readOnly = false;
						x[i].style.backgroundColor = "#DCF2F5";
					}
					else {
						x[i].readOnly = true;
						x[i].style.backgroundColor = "#ccc";
					}
				}
				if ( (x[i].type).toUpperCase() == 'BUTTON' ) {
					if ( enable ) {
						x[i].disabled = false;
					}
					else {
						x[i].disabled = true;
					}
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'TEXTAREA' ) {
				if ( enable ) {
					x[i].readOnly = false;
					x[i].style.backgroundColor = "#DCF2F5";
				}
				else {
					x[i].readOnly = true;
					x[i].style.backgroundColor = "#ccc";
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'SELECT' ) {
				if ( enable ) {
					x[i].disabled = false;
				}
				else {
					x[i].disabled = true;
				}
			}
		}
	}
}
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	var wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	var wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form2 {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<input type="button" value="pass1 開始" onclick='passControl("js_form2","pass1",true);passControl("js_form2","pass2",false)'>
<input type="button" value="pass2 開始" onclick='passControl("js_form2","pass1",false);passControl("js_form2","pass2",true)'>
<br><br>
<pre id="js_form2">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第1会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第2会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form2");
</script>
関連する記事

JavaScript による2会話アプリケーションのコントロール(1)


posted by lightbox at 2014-03-06 21:25 | JavaScript | このブログの読者になる | 更新情報をチェックする

JavaScript による2会話アプリケーションのコントロール(1)

以下のような画面から、まず対象となるコントロールとして、INPUT、TEXTAREA、SELECT の一覧を配列として取得します
 
------------------------------






getFormEntry("js_form"); で取得した配列は、window.js_form として参照可能です。( つまり、js_form というグローバルスコープの変数になります )
<script type="text/javascript">
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<pre id="js_form">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第1会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第2会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form");
</script>

関連する記事

JavaScript による2会話アプリケーションのコントロール(2)


posted by lightbox at 2014-03-06 21:24 | JavaScript | このブログの読者になる | 更新情報をチェックする

2014年01月23日


JavaScript : Global な undefined 変数に絡むいろいろ

undefined プロパティ

上のリンクは、Microsoft のドキュメントですが、undefined という変数が最初から定義されていて、undefined という特殊な値が入っている事を意味します。

但し、この変数は内容を変更できてしまいますので、確実な値は void( 0 ) を使います。また、ブラウザでは Global オブジェクトと window オブジェクトは同じものであるという事も以下の例で確かめる事ができます。

さらに、定義済の変数は、直接 undefined という値で比較できまかすが、未定義の値は typeof(未定義変数) == 'undefined' という比較方法になります。
<script type="text/javascript">
// テスト用の alert
function alertx(message) {
	console.log(message);
//	alert(message);
}

try {
	// 定義済なので実行可能です
	alertx("定義した未設定の変数の中身 = " + undefined);
	// 未定義なのでエラーになります
	alertx(un_defined);
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

(function(){
	// 中身を書き換える事ができます
	// ※ ローカルからグローバルにアクセスしています
	window.undefined = "undefined 変数の書き換え";
	// un_defined を定義して、undefined 値をセット
	window.un_defined = void(0);
})();

// ローカルからセットした値が有効です
alertx("undefined の内容 = "+undefined);
alertx("un_defined の内容 = "+un_defined);

var x;
if ( x === un_defined ) {
	alertx("未設定の変数の中身は、void(0)の結果と同じ(定義済の変数とは比較可能)");
}

try {
	if ( y === un_defined ) {
		alertx("if で 未定義の y を参照してエラーになり、ここは実行されません");
	}
}catch(e){alertx("未定義変数の参照エラー = "+e.message)}

if ( typeof(y) == 'undefined' ) {
	alertx("未定義変数かどうかのチェックです");
}




</script>



posted by lightbox at 2014-01-23 02:43 | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年12月26日


簡易縦書き変換

縦書きに向かない文字をいくつか違う記号に変換します。
(Yahoo! ニュースを変換してテストしていました。)



一行の文字数
句点で改行を入れる
改行数
改行は自分で入れる
( 縦書き変換後の文字列を貼り付けて、改行を一つ入れると投稿可能になります )


し電  る時り▲ィ前  ると話晦ルモ電
て話そ と間にや|後各 べかが日コ、気
いのの しにく▼チか社 くらつかムK通
る利た てわくおャらに 控、なら、D信
。用め いたなめ|約よ え▼が元イD事
 を、 るりるでフ3れ るおり日|I業
 一場 。配ことォ0ば よめにに・、者
 時合  信とうン分、 うでくかアソ協
 的に  遅がメに間大 アとくけクフ会
 によ  延予|よは晦 ナうなてセト▼
 制っ  が想ルる、日 ウコるのスバT
 限て  発さ▲▼スか ン|こ約はンC
 すは  生れがおマら スルと21クA
 るユ  す、集め|元 し・が時2モ▲
 こ|  るメ中でト日 たメ予間月バ、
 とザ  可|しとフの 。|想は2イN
 も|  能ル、うォ午  ルさ、5ルT
 あの  性もつコン前  ▲れ携日、T
 る携  が約な|や0  をる帯、ウド
 と帯  あ2がルフ時  なこ電大ィコ

http://headlines.yahoo.co.jp/hl?a=20131225-35041886-cnetj-sci


	text = text.replace(/[”“]/g, "●");
	text = text.replace(/[(【[{『《≪]/g, "▼");
	text = text.replace(/[)】]}』》≫]/g, "▲");
	text = text.replace(/「/g, "▼");
	text = text.replace(/」/g, "▲");
	text = text.replace(/…/g, ":");
	text = text.replace(/[ー〜]/g, "|");

関連する記事

Twitter 縦書き intent



posted by lightbox at 2013-12-26 11:34 | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年12月10日


ブラウザの WebGL チェック : jQuery 名前空間へ変数($.is_webgl)追加

以下のチェック部分のコードは、実際に Three.js のデモで使われていたものです。再度検証していますが正しく動いています。しかし、将来的に正しく動作するかどうかは解らないので、document.implementation.hasFeature("webgl","") でチェックする方法もいずれは考慮する必要があるかもしれません。

document.implementation.hasFeature("webgl","") は、IE を含めた主要なブラウザで動作する事を確認はしていますが、Opera NEXT のみ実装と hasFeature が一致しない可能性があります。
<script>
if ( window[window.location.hostname+'.loadjQuery'] !== true ) {
	window[window.location.hostname+'.loadjQuery'] = true;
	if ( !window.jQuery ) {
		document.write("<"+"script src=\"//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js\"></"+"script>");
	}
}
</script>
<script>
$.extend({
	is_webgl: (function() {
		try {
			return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); 
		}
		catch( e ) {
			return false;
		}
	})()
});

console.log( $.is_webgl );
</script>




posted by lightbox at 2013-12-10 02:00 | JavaScript | このブログの読者になる | 更新情報をチェックする

2013年11月13日


JSONP の原理と、簡単な利用方法の実際のコード( 実装は jQuery が良いですが、Access-Control-Allow-Origin: * のほうが楽だし読込み先を制限できます )

まずは、クロスドメインでもなんでも無く、JavaScript として自分のコードでその動作の基本を作成するとこうなります。
<script type="text/javascript">
var myfunc = new Function("obj", "window.mydata = obj");

myfunc({
 "jsonp1": "ようするに",
 "jsonp2": "こういうこと"
})

alert(mydata.jsonp1 + "|" + mydata.jsonp2);
</script>

次に、JSONP と呼ばれている部分を外部にしてクロスドメインするとなるとこういう事になります
<script type="text/javascript">
var myfunc = new Function("obj", "window.mydata = obj");
</script>

<script src="http://toolbox.winofsql.jp/jsonp.php" type="text/javascript"></script>

<script type="text/javascript">
alert(mydata.jsonp1 + "|" + mydata.jsonp2);
</script>
その際、jsonp.php の中はこうなっています。
<?php
header( "Content-Type: text/javascript; Charset=utf-8" );
?>
myfunc({
 "jsonp1": "ようするに",
 "jsonp2": "こういうこと"
})

さらにこれを実用的にするには、もっといろいろテクニックがいるわけですが、jsonp.php のようなコードは、そのサイトに置くだけで誰からもアクセスする事ができるようになります。

が。

そういうスクリプトはWEBサーバが管理できない場合に使えばいいと思うので、実際は PHP 内部にでも 「Access-Control-Allow-Origin: *」 をヘッダで返すようにすればいいと思うのですが。


関連する Microsoft ドキュメント

Function オブジェクト

関連する記事

jQuery で JSONP。なるほど、良くできてる。



posted by lightbox at 2013-11-13 00:22 | JavaScript | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり