非公開

非公開	Powered by NinjaBlog

一覧

[1][2][3][4][5][6][7][8]

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

この記事のURL

...2024.11.23 17:25

△

プロパティとオブジェクトの関係

オレのためのJavaScript入門、その１

next : 代入式の中で何が起こっているか | back : オレのためのJavaScript入門

　まず以下にサンプルコードを挙げる（一部）。

ry)...
桃月学園.レベッカ宮本 = new Object();
桃月学園.レベッカ宮本.通称 = 'ベッキー';
桃月学園.レベッカ宮本.特徴 = new Array('天才', 'ハーフ');
...(ry

　ここではグローバルオブジェクト桃月学園のレベッカ宮本プロパティにオブジェクトを定義している。
　ここでプロパティレベッカ宮本に保存されるのはnew Object()で生成されるオブジェクトへの参照である。より具体的に言うとレベッカ宮本プロパティの下に定義されるプロパティ群を持つもの（＝オブジェクト）のJavaScript内部における保存先の名前である。この名前はJavaScript内部でこのオブジェクトが使われる際のタグとして利用される。そしてプログラマは、彼がレベッカ宮本と名付けて定義したオブジェクトがJavaScript内部で何と呼ばれているかを知ることはできない。
　このようにプロパティレベッカ宮本とここで定義されたオブジェクトとの結びつきはJavaScript内部では間接的なものである。一般的にオブジェクトを扱う言語では大抵このような仕様になっている。
　なぜこのような一見無駄に思える複雑な仕様になっているのかといえば、そうすることによる利点がそれなりにあるからで、また、そうした方が実装がラクだから、ということも理由の一つかもしれない。ただこのような仕様であるがために話がややこしくなってしまう場合があるのもまた事実である。

　具体的な例を挙げよう。上のサンプルコードにおいて、レベッカ宮本プロパティの指すオブジェクトにJavaScriptが「オブジェクト一号」という名前をつけたとする。その後片桐姫子プロパティや橘怜プロパティにオブジェクトを定義していくと、それぞれに内部では「二号」「三号」という名前がつけられるだろう。こうなると問題が出てくる。鈴木さやかのオブジェクトを定義する番になったときそれがたまたま６番目なら良いが、そうでなかった場合にはなにがなんだかわからなくなってしまう。（意味がわからない人はこの段落は読み飛ばしてください）
　で、現実的にこの仕様が原因で問題が起こるのは主に代入処理を伴うときである。
　以下のサンプルコードは（大々的に端折ってあるが）上の続きである。

ry)...
桃月学園.柏木優奈 = 桃月学園.柏木優麻;
桃月学園.柏木優奈.通称 = '優奈ちゃん';
...(ry

　ここでは柏木優奈プロパティにオブジェクトを定義している。その際に彼女の双子の姉である柏木優麻プロパティの値を代入演算子=で柏木優奈プロパティに代入することによって柏木優麻プロパティに柏木優奈プロパティが参照するオブジェクトをコピーして、その後二人の異なるプロパティだけを書き換えようとしている。しかしこれは意図通りの結果にはなってくれない。この処理で柏木優奈プロパティに代入されるのは柏木優麻プロパティにオブジェクトを定義したときに作られたそのオブジェクトのJavaScript内部における保存先の名前なのである。つまりJavaScriptはプロパティ柏木優奈とプロパティ柏木優麻において同じオブジェクトを参照する。そして次の行で通称プロパティが代入されるオブジェクトは柏木優麻プロパティを定義したときに作られたオブジェクトの通称プロパティになる。これでは柏木優奈のオブジェクトを定義したことにはならない。
　ではどうすればよいか。柏木優麻プロパティが指すオブジェクトを柏木優奈プロパティに正しくコピーすることができればよい……、のではあるのだが、実はオブジェクトのコピーという問題はその方法云々以前に、そもそもオブジェクトというものをコピーすることが許されるのか、という倫理的な面を含めいろいろと考慮しなければならいことが多く、とにかくメンド臭い。それはそれで興味深い問題ではあるのだけれど、とりあえずここでは保留しておく。
　そんなわけで柏木優奈のオブジェクトを定義するには、たとえ柏木優麻のオブジェクトと似た要素が多くてコードを書くのが面倒でも、柏木優奈のためのプロパティを彼女のためにひとつひとつ定義していくのが最善ではないかと思う。このことはひとりの人間の定義は単に似ているからといって簡単にコピーできるものではない、ということを改めて思い出させてくれる。JavaScriptにおいて新しいオブジェクトを定義するということはつまりはそういう面倒なことであり、またそうすることによって優奈ちゃんへの愛着もまた一層深まるというものである。

　まとめてみる。
　JavaScript言語において新しいオブジェクトを生成するためにはnew演算子をつけてオブジェクトのコンストラクタ関数を呼び出さなければならない。こうすることがJavaScript言語における正しいオブジェクトの生成方法である。（ただしこのサンプルで桃月学園.柏木優奈 = new Object(桃月学園.柏木優麻);とやってもうまくいかない。これはオブジェクトのコンストラクタ関数Objectがそういう仕様になっているのが原因だろうと思うのだが、個人的にはちょっと納得しにくい）
　そしてオブジェクトをプロパティに代入するときに代入式で扱われる値はそのオブジェクトの内容ではなく、オブジェクトが生成されたときにJavaScriptによって付けられた名前である。
　このオブジェクトとプロパティとの関係は、オブジェクトをファイルみたいなものだと考えるとわかりやすいかもしれない。プロパティに保存されるのはJavaScriptによって付けられたファイル名であり、プロパティ名が直接ファイルを指すわけではない、と。

　さて次回は、この問題が起こる根本的な原因を考えてみる（予定）。

関連リンク
・ぱにぽに氷川へきる - Google 検索

この記事のURL
パソコンとかネットとか
...2007.01.14 05:21

△

JavaScriptのシェル、らしきもの(JavaScript Shel)

　JavaScriptでちょっとした実験や簡単なテストをしたい、なんてとき、いちいち外部JavaScriptファイルを読み込むHTML組んでテストスクリプト書いてwindow.alert()とかさせるのがメンドくさーい。ので、ブラウザにシェルっぽい動作をさせるスクリプトを書いてみた。
　といっても<textarea>の内容をeval()だけ、というアホみたいな内容。
　ファイルはふたつ。ひとつめはHTML部。ファイル名はなんでも。文字コードはUTF-8。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript Shel(UTF-8)</title>
<script type="text/javascript" src="jsPlus.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
var submit = function(){
	var html = '';
	html += '<div class="comm">';
	html += document.getElementById('comm').value.trim().et();
	html += '</div>';
	html += '<div class="res">';
	html += (eval(document.getElementById('comm').value) + '').et();
	html += '</div>';
	document.getElementById('shell').innerHTML += html;
	document.getElementById('comm').value = '';
}
//--></script>
<style type="text/css"><!--
div.comm{
	border-left: 0.5em solid;
}
div.res{}
--></style>
</head>
<body>
<div>
<div id="shell"></div>
<input type="button" value="submit" onclick="submit();"><br>
<textarea id="comm" cols="80" rows="15"></textarea>
</div>
</body>
</html>

　もうひとつはJavaScriptファイル。ファイル名'jsPlus.js'で上のHTMLと同じフォルダに。文字コードは同じくUTF-8。（簡単な文字列操作の関数やらが入ってます。詳しくはソース内のコメントに）

//○JavaScript拡張
//strの前後の空白及び改行を削除／str.trim()
String.prototype.trim = function(){
	var str = this;
	str = str.replace(/^[ \t\r\n]+/, '');
	str = str.replace(/[ \t\r\n]+$/, '');
	return(str);
}

//○HTML関連
//strのタグ文字をエスケープ（<文字、>文字、&文字）／str.et()
String.prototype.et = function(){
	var str = this;
	str = str.replace(/&/g, '&amp;');
	str = str.replace(/</g, '&lt;');
	str = str.replace(/>/g, '&gt;');
	str = str.replace(/\r\n/g, '\n');
	str = str.replace(/\r/g, '\n');
	str = str.replace(/\n/g, '<br>');
	return(str);
}

//strをtagタグで囲む／str.tag(tag, attribute)
String.prototype.tag = function(tag, attribute){
	return('<' + tag + attribute + '>' + this + '</' + tag + '>');
}

//strをタグのアトリビュートに※tag関数のattributeに使用／str.ta(name)
String.prototype.ta = function(name){
	return(' ' + name + '="' + this + '"');
}

//○リスト処理
//objをアトム文字列に／obj.toAtom()
//※undefined、数値、文字列以外はundefined
Object.prototype.toAtom = function(){
	return(undefined);
}
Number.prototype.toAtom = function(){
	return('&0' + this);
}
String.prototype.toAtom = function(){
	var str = this;
	if(str == ''){
		return('&N');
	}
	str = str.replace(/&/g, '&a');
	str = str.replace(/ /g, '&s');
	str = str.replace(/\(/g, '&o');
	str = str.replace(/\)/g, '&c');
	str = str.replace(/\t/g, '&t');
	str = str.replace(/\r\n/g, '&n');
	str = str.replace(/\n/g, '&n');
	str = str.replace(/\r/g, '&n');
	return(str);
}

//str（アトム文字列）をundefined、数値、文字列に※改行文字は\r\n／str.atomTo()
String.prototype.atomTo = function(){
	var str = this;
	if(str == '&U'){
		return(undefined);
	}
	if(str.substr(0, 2) == '&0'){
		return(str.substring(2) - 0);
	}
	if(str == '&N'){
		return('');
	}
	str = str.replace(/&n/g, '\r\n');
	str = str.replace(/&t/g, '\t');
	str = str.replace(/&c/g, ')');
	str = str.replace(/&o/g, '(');
	str = str.replace(/&s/g, ' ');
	str = str.replace(/&a/g, '&');
	return(str);
}

//str（リスト文字列）を整形リスト文字列に／str.washListstr()
String.prototype.washListstr = function(){
	var str = this;
	str = str.replace(/\(/g, ' ( ');
	str = str.replace(/\)/g, ' ) ');
	str = str.replace(/[ \t\r\n]+/g, ' ');
	return(str.trim());
}

//str（整形リスト文字列）を配列に／str.liststrTo()
//※アトムだった場合はundefined、数値、文字列
//※リストに矛盾があった場合はundefined
String.prototype.liststrTo = function(){

listArray = function(dStr){
	var tmpArray = new Array();
	while(true){
		var attribute = dStr.shift();
		if(attribute == undefined){
			return(false);
		}else if(attribute == '('){
			tmpArray.push(listArray(dStr));
		}else if(attribute == ')'){
			return(tmpArray);
		}else{
			tmpArray.push(attribute.atomTo());
		}
	}
}

	var listData = new Object();
	var dStr = this.split(' ');
	var attribute = dStr.shift();
	if(attribute == '('){
		listData = listArray(dStr);
		if(!listData){
			return(undefined);
		}
	}else{
		if(dStr.shift() == undefined){
			return(attribute.atomTo());
		}else{
			return(undefined);
		}
	}
	if(dStr.shift() == undefined){
		return(listData);
	}
	return(undefined);
}

//objectを整形リスト文字列に／object.toListstr()
//※undefined、数値、文字列とそれらの配列以外のオブジェクトが含まれていた場合はundefined
Object.prototype.toListstr = function(){
	return(this.toAtom());
}
Array.prototype.toListstr = function(){

Array.prototype.makeListstr = function(){
	var str = '';
	for(var i = 0; i < this.length; i++){
		if(this[i] == undefined){
			str += ' &U';
		}else if((typeof(this[i]) == 'number')||(typeof(this[i]) == 'string')){
			str += ' ' + this[i].toAtom();
		}else if(typeof(this[i]) == 'object'){
			if(this[i] instanceof Array){
				var tmpStr = this[i].makeListstr();
				if(!tmpStr){
					return(false);
				}
				str += ' (' + tmp;
			}
		}else{
			return(false);
		}
	}
	str += ' )';
	return(str);
}

	var tmpStr = this.makeListstr();
	if(!tmpStr){
		return(undefined);
	}
	return('(' + tmpStr);
}

//○クッキー関連
//配列をクッキーに記憶させる／array.setCookie(name)
//※配列の値はundefined、数値、文字列とそれらの配列
//※戻り値はクッキーが設定できなかったときfalse、できたらtrue
//※複数バイト文字の扱いはescape、unescape関数に依存（使用しないほうが無難、か？）
Array.prototype.setCookie = function(name){
	var tmpStr = this.toListstr();
	if(tmpStr == undefined){
		return(false);
	}
	tmpStr = escape(tmpStr);
	document.cookie = name + '=' + tmpStr + ';';
	if(document.cookie.indexOf(name) > -1){
		return(true);
	}
	return(false);
}

//setCookieで記憶させたクッキーから配列を取り出す／getCookie(name)
//※クッキーが設定されていなかったときは空配列
//※クッキーの内容に整形リスト文字列としての矛盾があったときはundefined
getCookie = function(name){
	var tmpCookies = document.cookie.split(';');
	for(var i = 0; i < tmpCookies.length; i++){
		var tmp = tmpCookies[i].split('=');
		if(tmp[0].trim() == name){
			return(unescape(tmp[1]).trim().liststrTo());
		}
	}
	return(new Array());
}

//クッキーを削除／deleteCookie(name)
deleteCookie = function(name){
	document.cookie = name + '=dammy; expires=Thu, 1-Jan-1970 00:00:00 GMT';
	return(name);
}

//○arrayに指定したファイル配列をインクルード／array.include()
//※配列はファイル名の一次元配列
//※拡張子.jsと.css以外のファイルは無視
//※HTMLのヘッダ部分で呼び出し
Array.prototype.includeFilse = function(charset){
	var html = '';
	for(var i = 0; i < this.length; i++){
		if(typeof(this[i]) == 'string'){
			if(this[i].slice(-4) == '.css'){
				html += '<link rel="stylesheet" type="text/css" href="';
				html += this[i];
				if(charset != undefined){
					html += '" charset="' + charset;
				}
				html += '">';
			}else if(this[i].slice(-3) == '.js'){
				html += '<script type="text/javascript" src="';
				html += this[i];
				if(charset != undefined){
					html += '" charset="' + charset;
				}
				html += '"></script>';
			}
		}
	}
	document.write(html);
	return(this);
}

　ひとつめのHTMLをブラウザで開くとシェル起動。<textarea>にJavaScriptのコード入力してsubmitボタンをー、なんてことは書くまでもないな。
　見ての通り機能なんてものはなんにもナッシング。あまりにも機能がないのでタイトルはJavaScript Shel。さらにマウスを手放せない仕様のためとっても使いづらーい。まあしかし、すでにJavaScriptを使っている人ならもっとマシなもんを自分で作る（あるいはすでに作っている？）だろうし、現在勉強中という人も自分であれこれ試してみながら作ったほうがためになるのだろう。そんなに時間がかかるものでもないし。
　しかしこのままではあまりにも役立たずなので、とりあえずHTMLを書き換えなくても外部JavaScriptファイルを選択読み込みできるようにする予定。

　サバに上げてみた。jsShel.html。
　画像は実行中画面のスクリーンショット。

　（追記）いろいろと意図しない挙動をするのでサバに上げてある分については随時更新。ただこの記事のソースは自戒の意も込め更新はしないつもり。ある程度カタチになったらまた新たな記事を書く予定。

この記事のURL
パソコンとかネットとか
...2007.01.08 05:09

△

外部JavaScriptファイルの選択読み込み

　HTMLを読み込むたびに異なるJavaSciptファイルを読み込ませる方法を考えてみた。Cookieに読み込みファイルを指定してリロード、みたいな使い方を想定。で、作ったスクリプトが以下。（一部。HTMLファイルのヘッダ部分）

<script type="text/javascript"><!--
var fileName = Math.floor(Math.random() * 3) + '.js';
var html = '';
html += '<script type="text/javascript" src="';
html += fileName;
html += '"></script>';
document.write(html);
//--></script>

　ページを読み込む度に３つの外部JavaScriptファイルのどれかをランダムで読み込む、というばかばかしくも微笑ましいスクリプトなんだけど（いや、これ自体すでに反則くさいのだけれど。JavaScriptからscriptタグを書くちうのは実際のところ、どうなん？）、Firefoxでなんだかヘンテコリンな挙動（IEとOperaでは意図通りに動いた。こういうときにひとりだけおかしな動きをして私を困惑させるのは大抵IEなんだけどねぇ、ははは）。あれこれ手を尽くしてやっとこさ解決。解決版スクリプトは以下。

<script type="text/javascript"><!--
var fileName = Math.floor(Math.random() * 3) + '.js';
var html = '';
html += '<script type="text/javascript" src="';
html += fileName;
html += '"></' + 'script>';	//for Firefox
document.write(html);
//--></script>

　要するにFirefoxでは、スクリプト中文字列リテラル内のスクリプト閉じタグをHTMLが食っちゃった、ということでした。Forefoxから「ページのソースを表示」すればブラウザが食うタグは色分けされるのですぐわかることだったんだが、なかなかそこにたどり着けずけっこうてこずりました。
　これはファイル選択スクリプトを外部ファイルにすれば初めから起こらない問題。とはいえ、いずれは足をとられるであろう問題ではあったので早めに遭遇できて良かった、ともいえるわけで。

　この処理にCookieを組み合わせることで複数のスクリプトファイルのうち必要なものを選択して読み込ませようと目論んでいるのだが、この処理を使ってページを作るとブラウザの「戻る」ボタンとの相性がものすごく悪くなるんよね。
　この処理に限らず、クライアント側のスクリプトでHTMLを動的に動かす処理は全般的にブラウザの「戻る」とリロード機能とは相性が悪いものなんだけど、さて、どうしたもんか。

この記事のURL
パソコンとかネットとか
...2007.01.04 05:48

△

あけましておめでとうございます

　月日が経つのが早く感じられるのは最近ますますモノ忘れがひどくなってきたような気がすることと関係あるのかも。ないのかも。でも時の感じかたが若い頃と変わったのかどうかはよくわからない。なぜなら若い頃のことなんて、すでに忘れてしまったからー。
　とか思いつつ、２００７年も無事始まりました。ともあれめでたし。

　とりあえず今年一発目の目標、「大晦日から正月３日までお金を一銭も使わない」、は無事達成。微妙な達成感を肴に安酒をちびり。とかなんとか。正月からみみっちいことゆーな。
　ちなみに今年一年の目標は世界征服です。いやマジマジ。

　３０日はそれなりにお掃除なんかして、３１日はおそばを食べて。正月気分を盛り上げたところで、元旦にはお雑煮食って酒飲んで。でもおせちらしいものといえば田作りのようなものを作って（年越しそばのだしをとった残り）、あとはかまぼこ（すんごくやっすいヤツ）食ったくらい。
　とまあこんな感じで例年通りの冴えなくも楽しい年末年始でした。

この記事のURL
カテゴリ無し
...2007.01.04 05:33

△

皆々様、

　どうか良いお年を～。

...続きを読む？

この記事のURL
カテゴリ無し
...2006.12.30 08:12

△

その２

　あまりにも説明不足。

この記事のURL
カテゴリ無し
...2006.11.27 07:04

△

結局

　ペイン太でいろいろ試行錯誤しつつやっていましたが、行き詰まり。結局前回と同じくPixiaとAzPainterの二刀流メインで。
　こっちはPixiaで描いてるときのスクショ。

　んでもって、こっちはAzPainter。

この記事のURL
カテゴリ無し
...2006.11.27 07:02

△

ペイン太君

　あれこれとソフトを使い分けて描くのもまあ楽しいっちゃ楽しいのだけど、面倒臭いし、なにより時間が掛かるのが問題。だもんで今回はタブレットに付属のPainter Classic一本で描いてみることに。
　で、いろいろやってみんだが、バンドル品だけに（？）機能がものすごく中途半端。描き味は確かに悪くないしキャンバスを回しながら描けるのはものすごく魅力（個人的にはこの機能がないソフトは「お絵描き」のソフトとしては認められん。この機能がないソフトは私の中ではあくまで「画像編集」ソフト）。ただ気に入ったブラシがないのと、乗算レイヤーが使えないのが致命的。
　というわけで（←言い訳）、今週は未完成。

　とりあえず編集中の画面を上げてみる。（原寸、256色に減色）
　あ、このスクショだとPC何使ってるかバレバレじゃん（汗

この記事のURL
カテゴリ無し
...2006.11.20 06:55

△

続き

　続き。
　色の濃さとかが前回と変わっていたりするが、まあ気にしないで。

　見せ方とかももうちょっとなんとかしたいのだけど、なかなかいい知恵出ないのよ。とりあえず記事自体を増やしてからいろいろ試しつつ、みたいな予定で。

この記事のURL
カテゴリ無し
...2006.11.12 07:44

△

こんなんやってる

　ダウンロードしたペイントソフトのテストも兼ねて、最近こんなんやっとります。
　使ったソフトは「わんぱくペイント」（下描き）、「Pixia」（ペン入れ、ベタ）、「AzPainter」（コマ割り、写植）、「Yukari」（リサイズ）。
　とにかく効率悪過ぎ。時間ばっかり掛かってどうにもならん。
　まあいろいろと試行錯誤しつつ。