SQLの窓

2011年11月12日


Object.prototype が window オブジェクトに適用されるおはなし

このコードが IE9 で動きました。IE以外では全部動いてます。


<script type="text/javascript">
Object.prototype.myVersion = "lightbox 1.1"
Object.prototype.log = function(str){try{console.log(str)}catch(e){}}

window.log(window.myVersion);
window.log("おーーい");
</script>


posted by lightbox at 2011-11-12 15:10 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2011年08月18日


JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す

以下には、lightbox.on.coocan.jp/message_cd.htm をIFRAME で埋め込んでいます。
当然このブログはドメインが違うので、本来ならばアクセスできませんが、postMessage
の第二引数に "*" を渡す事によって(本来は個別指定)、 どんなドメインへもメッセージ
を送る事ができます。
( 開発者ツールを開いて実行して下さい : IE8 でも動きます )

ただ、送れるメッセージは文字列で一つだけなので、送り出すほうで JSON の文字列を
用意しておいて、こちら側ではそれを eval して利用しています。お互いのドメインの
管理者か同じまたは信頼し合えるならば、この方法で多くのデータを一度にやりとりで
きるはずです。

または、IFRAME 側を、埋め込むだけでどこでも使えるような一つの完全なユニットと
して設計する為に必要です。
データを受け取る為の定義(get_post_message)
※ 実際は、js ライブラリ化して、script 要素で読み込めば使えるようにします
<script type="text/javascript">
function get_post_message(e) {
	var prop;
	var result = eval(e.data);
	try {
		if ( console.dir ) {
			console.dir(result);
		}
		else {
			for( prop in result ) {
				console.log(prop+":"+result[prop]);
			}
		}
	}
	catch(e){}
}
if ( window.addEventListener ) {
	window.addEventListener('message',get_post_message, false);
}
else {
	window.attachEvent('onmessage',get_post_message);
}

</script>
<iframe
	src="http://lightbox.on.coocan.jp/message_cd.htm"
	name="myframe"
	frameborder="1"
	scrolling="yes"
	width="300"
	height="100"
></iframe>

ユニット側
<!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">
<script type="text/javascript">
function t_message() {
	var value1 = document.getElementById("message1").value;
	var value2 = document.getElementById("message2").value;
	var objString = '({ "message1": "'+value1+'", "message2": "'+value2+'" })';
	parent.postMessage( objString, "*" );
}
</script>
</head>
<body>

<input
	type="text"
	id="message1"
	style='width:200px;'
	value="日本語表示1"
/>
<br />
<input
	type="text"
	id="message2"
	style='width:200px;'
	value="日本語表示2"
/>
<br />
<input
	type="button"
	value="post"
	onclick='t_message();'
/>

</body>
</html>



posted by lightbox at 2011-08-18 22:39 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2011年03月10日


JavaScript : 右から指定した文字数を取りだす right メソッドを String オブジェクトに追加

必要な時に定義しておくだけで良いですが、これを使って文字列の前を指定した文字列で埋めて固定長の長さの文字列を取りだす事ができます。

10文字以内の前ゼロであれば、

("0000000000"+x).right(n) ですね。

unicode メソッドは、right を使って \uxxxx という unicode 形式の文字列を作成します。これは、直接使うのでは無く、日本語文字列をキャラクタセットに依存しない文字列にする為の作業用です。
<script type="text/javascript">
String.prototype.right = function(n){
	var str = this.valueOf();
	str = str.substr(str.length-n,n);
	return str;
}
String.prototype.unicode = function() {
	var str = this.valueOf();
	var re = new RegExp("[^A-Za-z0-9_\f\n\r\t\v]","g");
	str = str.replace(re,function(s){
		var str;
		str = s.charCodeAt(0).toString(16);
		str = "0000"+str;
		str = str.right(4);
		str = "\u"+str;
		return(str);
	})
	return str;
}
</script>




posted by lightbox at 2011-03-10 15:51 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2010年11月03日


JSON と文字列の関係

外部より JSON フォーマットのデータを取得した時点では「文字列」ですから、それを JavaScript で使うようにする方法は一般的ですが、そこから「先」は結構多用で一般的では無いような気がします。

そもそも、JSON の a["a2"] は、連想配列のように見えますが、特殊文字で定義されたプロパティを参照する為の書式ですし。

また、eval 使うにあたって、配列はそのままであるとか、for in も結構実際に使うと面倒な構文であったりします。

JavaScript は、自分が知ってる言語の中では、最も難解で不可思議な機能を持ったものだと思っています。
<script type="text/javascript">
function scriptTest(evt) {

	// JSON 文字列を実体に変える一般的では無い方法
	var x = (new Function( 'return {"a1":"Finction","a2":"オブジェクトの","a3":"テスト"}' ))();
	alert(x.a1+x.a2+x.a3);

	// JSON 文字列
	var str_json = '{"a1":1,"a2":2,"a3":3}';

	// オブジェクト化
	var a = eval('(' + str_json + ')');

	// プロパティとして参照	
	alert( a.a2 );

	// 特殊文字のプロパティを参照する書式
	alert( a["a2"] );

	// 配列文字列
	var arr_str = '["a1","a2","a3"]';

	// 配列化
	a = eval(arr_str);

	// 配列として参照
	alert( a[1] );

	// 文字列リストに変換
	alert( a.join(",") );

	// リスト文字列を配列化
	a = 'a1,a2,a3'.split(",");

	// 配列として参照
	alert( a[1] );

	// 文字列リストに戻す
	alert( a.join(",") );

	// 配列を、JSON 文字列に変換
	var str = "";
	for( i = 0; i < a.length; i++ ) {
		if ( i != 0 ) {
			str += ",";
		}
		str += '"'+i+'":"'+a[i] + '"';
	}

	// オブジェクト化
	a = eval('({' + str + '})');

	// 特殊文字のプロパティを参照
	alert( a["1"] );

	// オブジェクト内のプロパティの一覧
	for( x in a ) {
		alert( x + ":" +a[x]);
	}
}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>



タグ:JSON javascript
posted by lightbox at 2010-11-03 16:15 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2010年10月14日


JavaScript : ネームスペースの作成

記述の仕方によって違ったように見えやすい仕様ですが、結局は、var x = {} で作成する事のできるオブジェクトの配列の定義を、window の下の任意の名前で定義します。

window["myname"] は、window.myname というプロパティとなり、myname.prop_or_method のような形で定義して行きます。
<!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">
<title>JavaScript</title>
<style>
* {
	font-size:16px;
}
</style>
</head>

<body>

<script type="text/javascript">
function scriptTest(obj) {
	createNameSpace("lbox","1.0","lightbox");

	lbox.msgbox("こんにちは。", lbox.version, lbox.author, obj.parentNode.innerHTML );
}
</script>
<div>
<input type="button" value="実行" onclick='scriptTest(this);'>
</div>
<script type="text/javascript">
function createNameSpace(topName,version,author) {
	if ( !window[topName] ) {
		window[topName] = {}
	}
	window[topName].version = version;
	window[topName].author = author;
	window[topName].msgbox = function(){
		var i, s="", numargs = arguments.length;
		for (i = 0; i < numargs; i++) {
			s += arguments[i] + "\n";
		}
		alert(s + "\n\n" + (new Date()).toLocaleString());
	}

}
</script>

</body>
</html>



posted by lightbox at 2010-10-14 13:28 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2010年02月11日


JavaScript : HTMLの要素内のイベント記述で複雑な処理を書く方法( 関数を定義したく無い場合 )

良く使う INPUT 要素のボタン内の onClick イベントのサンプルですが、
他の要素でも同じです。onClick='' のシングルクオート内は、改行が
あってもスクリプトなので、(function(){})() という記述で変数もローカル
扱いで処理できます。

但し、'' 内で '' を使う場合は、&#39;&#39; というように書く必要が
あります。また、(function(){})() 内に要素自身を渡したい場合は、
(function(obj){})(this) で、obj で参照できます。
<INPUT type="button" value="IFRAME追加" onClick='
(function(){
	var str="";
	str+="<IFRAME \n";
	str+="	src=\"http://winofsql.jp/\" \n";
	str+="	name=\"myframe\" \n";
	str+="	frameborder=\"no\" \n";
	str+="	scrolling=\"no\" \n";
	str+="	width=\"590\" \n";
	str+="	height=\"800\" \n";
	str+="></IFRAME> ";
	var txt = document.getElementsByName("txt03")[0].value;

	if ( txt != &#39&#39 ) {
		txt = txt + "\n";
	}

	document.getElementsByName("txt03")[0].value = txt + str;
})();
'
>



タグ:javascript
posted by lightbox at 2010-02-11 16:21 | 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 終わり