SQLの窓

2014年02月01日


JavaScript オブジェクト作成の4態

1) 通常 JSON 記法
2) 無名 function 記法
3) 有名 function による インスタンス作成
<script type="text/javascript">

var obj1 =  {
	myobj: {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

function obj() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

var obj3 = new obj();

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj3.myobj.func());
console.dir(obj1);
console.dir(obj2);
console.dir(obj3);
</script>


この結果では当然ですが、有名ファンクションでは『型』は function 名となっています。

さらに、もう一つの形として、Object 型の最初から myobj を設定しておくと以下のようになります。
<script type="text/javascript">
Object.prototype.myobj = {
	func: function(){ return this.value },
	value: "OK"
}

var obj1 =  {
}

var obj2 = new function() {
	this.myobj = {
		func: function(){ return this.value },
		value: "OK"
	}
}

console.dir(obj1.myobj.func());
console.dir(obj2.myobj.func());
console.dir(obj1);
console.dir(obj2);
</script>


空のオブジェクトでも、myobj が使用可能になりますが、全てのオブジェクトに対して定義されてしまいます。しかし、同名のプロパティを上書きするとそちらが有効になります。





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

2013年03月22日


JavaScript の function を new したものが、JSON フォーマットで記述した『Object』と同じである事のテスト

function は、他の言語で言うところの『クラス』のようなものですが、実際の扱いはそんなに簡単ではありません。しかし、少なくともこの二つが『インスタンス』である事は間違いなさそうです。

ですから、jQuery の .data メソッドでエレメントに対して『インスタンス』を保存する事ができるという事なので、以下の記事での改造はそれを利用しています。

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。
そもそも、jQuery のプラグインは、jQuery の インスタンスに対してのメソッドの実装です。プラグインは、jQuery の機能を借りて、そのメソッドが特有の振る舞いをするような『オブジェクト』を window の中に作りだします。
そして、再度そのオブジェクトを操作する為にそのオブジェクトを参照する必要があるので、どこかに保存しなければなりません。
当然、再度参照するなら jQuery の インスタンスを介して( 実際はセレクタで選択されたもの )再度参照されるべきだと思います。
しかし、このプラグインでは単純に配列を作ってそこへ push していただけなので、『何番目に何が居る』かをプログラマは番号で呼び出すようになっていました。
これでは意味が無いので プラグインが作った『オブジェクト』を .data で 元の要素に保存しました。
( jQuery で console.log(typeof $("#test")); と実行すると object と表示される )
<script type="text/javascript">
function myJson() {
	this.prop = "JSON";
}

j1 = new myJson();
console.log( typeof j1 );
console.dir( j1 );

j2 = { prop: "JSON" };
console.log( typeof j2 );
console.dir( j2 );
</script>


さらに、new でインスタンスが作成された時に、プロパティとして持っているものは function 内で this で定義する事になっていますが、これは、function の名前に対する prototype に インスタンスをセットしてもいい事になっているので、こんな書き方ができる事になります。
<script type="text/javascript">
function myJson1() {
}
function myJson2() {
	this.prop = "JSON";
}

myJson1.prototype = new myJson2();

j1 = new myJson1();	  // 本体にプロパティは無い
console.dir( j1 );        // プロトタイプに prop があります
console.log( j1.prop );   // JSON と表示される
</script>
さらに、ほんの少し書き方が違いますが、以下のようにしても同じ結果を得る事ができます。

call メソッドは、他の『クラス』の実際に記述されているプロパティに対して効果があるので、継承したいプロパティは function 内に書いておく必要があります。

つまり、結果が同じようでいて、JSON フォーマットの記述である『オブジェクト』ではできない事が function で書くと可能になるという事です。
<script type="text/javascript">
function myJson1() {
	myJson2.call( this );
}
function myJson2() {
	this.prop = "JSON";
}

j1 = new myJson1();	  // 本体にプロパティは無い
console.dir( j1 );        // 本体に prop があります
console.log( j1.prop );   // JSON と表示される
</script>


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

2012年06月16日


JavaScript による半角と全角の相互変換(カタカナを除く)完成版

ちょっと必要だったのでインターネットでライブラリ無いか調べてみたら、特に無い上に完成版が無かったので完成させてみました。

s.charCodeAt(0) - 0xFEE0 というのをやってらっしゃった方が居られたので、これがベストだと思いましたが、何故か数字とアルファベットの範囲指定されておられたので一括で文字範囲指定しました。あと、名前空間で関数名が衝突しないようにしてあります。( lboxtool は自由に変える部分です )

※ 円マークがバックスラッシュになるのは仕様なので必要ならば改造すればいいと思います
<script type="text/javascript">
window.lboxtool={
tohan : function(str) {
	return str.replace(/[!-〜]/g, function(s) {
	    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
	});
}
,
tozen : function(str) {
	return str.replace(/[\!-\~]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
	});
}
}
</script>
<input type="button" value="半角に" onclick='document.getElementById("target").value=lboxtool.tohan(document.getElementById("target").value)'>
<input type="button" value="全角に"onclick='document.getElementById("target").value=lboxtool.tozen(document.getElementById("target").value)'>
<br />
<textarea id="target" style='width:400px;height:80px;'>!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~</textarea>





posted by lightbox at 2012-06-16 09:42 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2012年04月19日


Three.js で行われている整然としたクラス作成

Three.js は、Canvas や WebGL を使った 3D を表現するライブラリですが、中を読むのに
このようなクラス定義が基本なので非常に解りやすいです。
<!doctype html>
<html lang="en">
	<head>
		<title>サンプル</title>
		<meta charset="utf-8">
		<style>
		</style>
	</head>

<body>
<script>
var R101 = {};
R101.Class = function(){
	this.version = "1.01";
	this.colors = [];
	this.flg = false;
};
R101.Class.prototype = {
	constructor: R101.Class,
	method1: function() {
		alert("method1:"+this.version);
	},
	method2: function() {
		alert("method2:"+(this.data||"未定義です"));
	},
	method3: function() {
		alert("method3:"+this.flg);
		this.data = {};
	}
}

var obj = new R101.Class();

</script>

<input type="button" value="method1" onclick="obj.method1();" />
<input type="button" value="method2" onclick="obj.method2();" />
<input type="button" value="method3" onclick="obj.method3();" />
</body>
</html>
まず、R101 と言う名前空間を作成していますが、一般的にライブラリを作成する時に有効で、
変数が他から独立して作成されるようになります。R101 は、一般的な JavaScript のオブジェク
トになります。そこに、R101.Class として、function を定義しています。
( ※ R101.Class では、this で変数を作成して、後に作成されるインスタンスで参照されます。)

R101.Class.prototype に、JavaScript のオブジェクトを設定し、そのメンバとして、コンストラ
クタとメソッドを定義しています。ここで、たとえ prototype の設定をしなくても、コンストラ
クタは R101.Class になり、以下の実行を行うと一致します

if ( R101.Class === obj.constructor ) {
	console.log("一致");
}

しかし、それではメソッドの定義を R101.Class 内でする事になり、記述上コンストラクタとメソ
ッドとプロパティの定義がごちゃ混ぜになってしまいますが、この場合だと見事に3か所に分けて
定義できますし、後から見ても一目瞭然となります。

Windows8 Metro JS SDK でもよく使われていた || の意味

alert("method2:"+(this.data||"未定義です"));

この || は最後に true 扱いになったものを利用すると言う意味で、this.data が
定義されていた場合はその中を表示しますが、未定義の場合は "未定義です" のみを
表示します


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

2012年02月11日


JSON オブジェクトの stringify メソッドの第3引数の使い方

JSON.stringify Function (JavaScript)

上記リンク先は Microsoft の英文ドキュメントです。IE に関しては、IE8 と IE9 の
標準モードで動作します。
Supported in the following document modes: Internet Explorer 8 standards,
Internet Explorer 9 standards. Not supported in the following document 
modes: Quirks, Internet Explorer 6 standards, Internet Explorer 7 standards.
Firefox、Google Chrome、Opera、Safari のいずれでも動作します。
<script type="text/javascript">
alert(JSON.stringify( {"type": 1, "name": "test", "obj":{"level": 2,"value": 1},"arr": [1,2,3]},null,4));
</script>
コードのテスト

■ 第3引数は省略されると、スペース無しで文字列が作成されます
■ 第3引数が数字の場合は、その数のスペースでインデントされて整形されます
■ 第3引数に何か文字列が入っている場合は、その文字列でインデントされます
(その際、"\t" 等が適当です)
■ 第3引数が文字列の場合、最初の10文字が使用されます



タグ:JSON
posted by lightbox at 2012-02-11 20:25 | JavaScript オブジェクト | このブログの読者になる | 更新情報をチェックする

2011年11月26日


JS : 自分用名前空間を使ってページのロードイベントを登録

IE8 までは、attachEvent しかありませんでしたが、IE9 では
addEventListener が使えるのでこんな感じでいいかと思います

window['文字列'] は、
var 文字列 と同等です。その中に {} でオブジェクトを作成して onload
プロパティを定義しています。中身は function で無名関数を登録です。

※ 使用時は、lightbox.onload で参照しています
<script type="text/javascript">
window['lightbox'] = { onload: function() {
		alert('ロードされました');
	}
};

if ( window.addEventListener ) {
	window.addEventListener('load', lightbox.onload, false);
}
else {
	window.attachEvent('onload', lightbox.onload);
}
</script>


posted by lightbox at 2011-11-26 22:45 | 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 終わり