非公開：JavaScriptのシェル、らしきもの(JavaScript Shel)

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

[35][34][33][32][31][30][29][28][27][26][25]

[PR]

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

この記事のURL

...2024.11.22 16:55

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

[35][34][33][32][31][30][29][28][27][26][25]

忍者ブログ [PR]

非公開：JavaScriptのシェル、らしきもの(JavaScript Shel)

[PR]

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

コンテンツ

カテゴリ別アーカイブ

月別アーカイブ

最新コメント

ブログ内検索