非公開：jsShel

jsShel＜一覧

[38][37][36][35][34][33][32][31][30][29][28]

[PR]

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

この記事のURL

...2024.11.22 11:58

jsShel

　前回のエントリーはあまりにあんまりなので、修正版を上げておきます。
　まずはjsShel.html。

<!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>jsShel</title>
<script type="text/javascript" src="jsPlus.js" charset="UTF-8"></script>
<script type="text/javascript"><!--
jsShel = new Object();
jsShel.inpLog = new Array('');
jsShel.inpNo = 0;
jsShel.inpChange = function(direction){
	jsShel.inpNo = jsShel.inpNo + direction;
	if(jsShel.inpNo < 0){jsShel.inpNo++;}
	if(jsShel.inpNo >= jsShel.inpLog.length){jsShel.inpNo--;}
	document.getElementById('comm').value = jsShel.inpLog[jsShel.inpNo]
}
jsShel.submit = function(){
	var command = document.getElementById('comm').value;
	jsShel.inpLog[jsShel.inpLog.length - 1] = command;
	jsShel.inpLog.push('');
	jsShel.inpNo = jsShel.inpLog.length -1;
	jsShel.inpChange(0);
	document.getElementById('P').innerHTML = '';
	var html = '';
	html += '<pre class="comm">';
	html += command.tR().eT();
	html += '</pre>';
	html += '<pre class="res">';
	html += (eval(command) + '').eT();
	html += '</pre>';
	document.getElementById('shell').innerHTML += html;
}
var P = function(value){
	document.getElementById('P').innerHTML += (value + '').eT() + '<br>';
	return(value);
}
//--></script>
<style type="text/css"><!--
pre{
	margin: 0;
}
pre.comm{
	border-left: 0.5em solid;
}
pre.res{}
pre.P{
	padding: 0.5em;
	color: #f00;
	border: 1px solid #000;
}
--></style>
<script type="text/javascript"><!--
CookiePlus.includeFiles();
//--></script>
</head>
<body>
<div>
<div id="shell"></div>
<pre id="P" class="P">The argument of function'P' is displayed one by one here.</pre>
<input type="button" value="submit" onclick="jsShel.submit();">
<input type="button" value="<<" onclick="jsShel.inpChange(-1);">
<input type="button" value=">>" onclick="jsShel.inpChange(1);"><br>
<textarea id="comm" cols="80" rows="15"></textarea>
</div>
</body>
</html>

　続いてjsPlus.js。

//○String.prototype拡張
//・全般
//strの前後の空白及び改行を削除／str.tR()
String.prototype.tR = function(){
	var str = this;
	str = str.replace(/^\s+/, '');
	str = str.replace(/\s+$/, '');
	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.tG(tag, attribute)
String.prototype.tG = function(tag, attribute){
	return('<' + tag + attribute + '>' + this + '</' + tag + '>');
}
//strをタグのアトリビュート値に※tag関数のattributeに使用／str.tA(name)
String.prototype.tA = function(name){
	return(' ' + name + '="' + this + '"');
}

//○整形リスト文字列処理（Lstr）
//※JavaScriptの多次元（複次元？）配列データ構造と文字列との相互変換処理群
//※多次元配列をクッキーやCGIへの送信データとして扱う際での利用を想定
Lstr = new Object();

//str（リスト文字列）を整形リスト文字列に／Lstr.wash(str)
Lstr.wash = function(str){
	str = str.replace(/\(/g, ' ( ');
	str = str.replace(/\)/g, ' ) ');
	str = str.replace(/[ \t\r\n]+/g, ' ');
	return(str.tR());
}

//undefined、数値、文字列またはそれらの線形配列を整形リスト文字列に／Lstr.from(obj)
//※配列要素にundefinedが含まれても可
//※配列要素にundefined、数値、文字列と
//　それらの配列以外のオブジェクトが含まれていた場合はfalse
Lstr.from = function(obj){

atomFrom = function(obj){
	if(typeof(obj) == 'number'){
		return('&0' + obj);
	}else{
		if(obj == ''){
			return('&N');
		}
		obj = obj.replace(/&/g, '&a');
		obj = obj.replace(/ /g, '&s');
		obj = obj.replace(/\(/g, '&o');
		obj = obj.replace(/\)/g, '&c');
		obj = obj.replace(/\t/g, '&t');
		obj = obj.replace(/\r\n/g, '&n');
		obj = obj.replace(/\n/g, '&n');
		obj = obj.replace(/\r/g, '&n');
		return(obj);
	}
}
lstrFrom = function(array){
	var str = '(';
	for(var i = 0; i < array.length; i++){
		if(array[i] == undefined){
			str += ' &U';
		}else if((typeof(array[i]) == 'number')||(typeof(array[i]) == 'string')){
			str += ' ' + atomFrom(array[i]);
		}else if(array[i] instanceof Array){
			var tmpStr = lstrFrom(array[i]);
			if(tmpStr == false){
				return(false);
			}
			str += ' ' + tmpStr;
		}else{
			return(false);
		}
	}
	str += ' )';
	return(str);
}

	if(obj == undefined){
		return('&U');
	}else if((typeof(obj) == 'number')||(typeof(obj) == 'string')){
		return(atomFrom(obj));
	}else if(obj instanceof Array){
		var tmpStr = lstrFrom(obj);
		if(tmpStr == false){
			return(undefined);
		}
		return(tmpStr);
	}
	return(false);
}

//str（整形リスト文字列）をオブジェクトに／Lstr.toObj(str)
//※アトムだった場合はundefined、数値、文字列
//※リストに矛盾があった場合はfalse
//※アトム内の改行文字は\r\n
Lstr.toObj = function(str){

atomToObj = function(atom){
	if(atom == '&U'){
		return(undefined);
	}
	if(atom.substr(0, 2) == '&0'){
		return(atom.substring(2) - 0);
	}
	if(atom == '&N'){
		return('');
	}
	atom = atom.replace(/&n/g, '\r\n');
	atom = atom.replace(/&t/g, '\t');
	atom = atom.replace(/&c/g, ')');
	atom = atom.replace(/&o/g, '(');
	atom = atom.replace(/&s/g, ' ');
	atom = atom.replace(/&a/g, '&');
	return(atom);
}
listToObj = function(dStr){
	var tmpArray = new Array();
	while(true){
		var attribute = dStr.shift();
		if(attribute == undefined){
			return(false);
		}else if(attribute == '('){
			tmpArray.push(listToObj(dStr));
		}else if(attribute == ')'){
			return(tmpArray);
		}else{
			tmpArray.push(attribute.atomToObj());
		}
	}
}

	var obj;
	var dStr = str.split(' ');
	var attribute = dStr.shift();
	if(attribute == '('){
		obj = listToObj(dStr);
		if(obj == false){
			return(false);
		}
	}else{
		if(dStr.shift() == undefined){
			return(atomToObj(attribute));
		}else{
			return(false);
		}
	}
	if(dStr.shift() == undefined){
		return(obj);
	}
	return(false);
}

//○クッキー操作拡張（CookiePlus）
CookiePlus = new Object();

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

//・オブジェクト
//オブジェクトをクッキーに記憶させる／CookiePlus.set(name, obj)
//※オブジェクトはundefined、数値、文字列またはそれらの線形配列
//※戻り値はクッキーが設定できなかったときfalse、できたらtrue
//※複数バイト文字の扱いはescape、unescape関数に依存（使用しないほうが無難、か？）
CookiePlus.set = function(name, obj){
	var tmpStr = Lstr.from(obj);
	if(tmpStr == undefined){
		return(false);
	}
	tmpStr = escape(tmpStr);
	document.cookie = name + '=' + tmpStr + ';';
	if(document.cookie.indexOf(name) > -1){
		return(true);
	}
	return(false);
}

//CookiePlus.setで記憶させたクッキーからオブジェクトを取り出す／CookiePlus.get(name)
//※クッキーが設定されていなかったときはfalse
//※クッキーの内容に整形リスト文字列としての矛盾があったときはfalse
CookiePlus.get = function(name){
	var tmpCookies = document.cookie.split(';');
	for(var i = 0; i < tmpCookies.length; i++){
		var tmp = tmpCookies[i].split('=');
		if(tmp[0].tR() == name){
			return(Lstr.toObj(unescape(tmp[1]).tR()));
		}
	}
	return(false);
}

//・外部ファイルのインクルード
//CookiePlus.includeFilesでインクルードするファイルを
//クッキーにセット／CookiePlus.setIncludeFiles(obj)
//※ファイル名の一次元線形配列を指定（ファイルが一つの場合は文字列でも可）
//※戻り値はクッキーにセットしたオブジェクト
//※クッキーのセットに失敗したときはfalseを返す
CookiePlus.setIncludeFiles = function(obj){
	if(CookiePlus.set('filesByCP', obj)){
		return(obj);
	}else{
		return(false);
	}
}

//CookiePlus.setInclideFilesで指定したファイルを順次インクルードするための
//HTMLヘッダ文字列をdocument.write／CookiePlus.includeFiles(defaultFiles, charset)
//※配列はファイル名の一次元線形配列
//※拡張子.jsと.css以外のファイルは無視
//※クッキーが設定されていなかった場合はdefaultFilesを読み込む
//※HTMLのヘッダ部分で呼び出し
//※戻り値はインクルードされたファイル名の配列
//※クッキーの設定に異常があった場合はfalseを返す
CookiePlus.includeFiles = function(defaultFiles, charset){
	files = CookiePlus.get('filesByCP');
	if(files == false){
		files = defaultFiles;
	}
	if(files == undefined){
		return(new Array());
	}else if(typeof(files) == 'string'){
		files = new Array(files)
	}
	if((files instanceof Array) == false){
		return(false);
	}
	var includedFiles = new Array();
	var html = '';
	for(var i = 0; i < files.length; i++){
		if(typeof(files[i]) == 'string'){
			if(files[i].slice(-4) == '.css'){
				includedFiles.push(files[i]);
				html += '<link rel="stylesheet" type="text/css" href="';
				html += files[i];
				if(charset != undefined){
					html += '" charset="' + charset;
				}
				html += '">';
			}else if(files[i].slice(-3) == '.js'){
				includedFiles.push(files[i]);
				html += '<script type="text/javascript" src="';
				html += files[i];
				if(charset != undefined){
					html += '" charset="' + charset;
				}
				html += '"></script>';
			}
		}
	}
	document.write(html);
	return(includedFiles);
}

　主な変更点は以下の通り。
・jsShel.htmlで使われる関数をjsShellのハッシュにまとめました（これはオブジェクト指向云々とは全然関係なくて、単に名前の重複を避けるための措置）
・処理の途中の値を参照するため、引数の値を順次表示する関数Pを定義しました（Pが大文字なのは、これも名前の重複を避けるため）
・jsPlus.js内でのオブジェクトの汚染を極力減らしました（一部残っていますが、これは記述しやすさを優先した意図的なものです。またこれらのメソッドがヘンテコリンな文字使いになっていますが、これも例によって名前の重複を避けるための措置です）
・リロードした際にクッキーにセットした外部JavaScriptファイルを読み込ませることが可能になりました（詳しくはjsPlus.js内CookiePlus.setIncludeFiles関数のコメントを参照してください）

　オフライン版jsShel。
　うーん、まだなんだかいろいろと意図しない挙動をすることがあるが、現在の私の知識では対処できませぬー。

　つか、もっとステキなのがあるじゃん。

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

[38][37][36][35][34][33][32][31][30][29][28]

忍者ブログ [PR]

非公開：jsShel

[PR]

jsShel

コンテンツ

カテゴリ別アーカイブ

月別アーカイブ

最新コメント

ブログ内検索