mrgarita/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
	<title>Terminal</title>
	<!--
		ver 0.9
			jQueryを使わずに素のJavaScriptでの処理に変更

		ver 0.85
			画面をリサイズ（縮小）したときに右端と下端に白い余白が出る部分をとりあえず修正（window.innerWidthでうまくいった）

		ver 0.8 制作開始:
			ターミナルの見た目とプロンプト表示
			プロンプトに文字入力後、Enterキーで再度プロンプト表示
	-->
</head>
<body>
	<textarea id="terminal" spellcheck="false"></textarea>
</body>
</html>

## main.js
/*
 * main.js : ターミナルを再現
 */
var terminal = null;					// ターミナル画面をtextareaタグで再現
var screenWidth, screenHeight;	// ターミナルの幅と高さ（ブラウザの幅と高さ取得用）
var operater = "Command> ";		// コマンド入力時のプロンプト文字
var value = "";							// ターミナル画面上の文字列取得用

/*
 * ターミナルのサイズをブラウザ画面いっぱいに設定する関数
 */
function setTerminal(){
	// ブラウザのウインドウサイズを取得
	let innerWidth =  window.innerWidth;
	let innerHeight = window.innerHeight;

	// textareaのサイズをウインドウにフィットさせる
	terminal.style.innerWidth  = innerWidth + "px";
	terminal.style.innerHeight = innerHeight + "px";
}

/*
 * 起動時の処理
 */
window.addEventListener("load", function(){
	// textareaのDOM取得
	terminal = document.getElementById("terminal");

	// ターミナルのサイズをブラウザ画面いっぱいに設定
	setTerminal();

	// ターミナルの初期状態（textareaタグの文字列にプロンプトを表示）
	terminal.value = operater;

	// ターミナル（textareaタグ）にフォーカス ==>カーソルが点滅する
	terminal.focus();
});

/*
 * ブラウザ画面をリサイズした際に再度ターミナルのサイズをブラウザ画面いっぱいにする関数
 */
window.addEventListener("resize", function(){
	setTerminal();
});


/*
 * ターミナル上（textareaタグ）でキー入力した際のイベント処理
 */
window.addEventListener("keyup", function(e){
	// キー番号を取得
	let key = e.keyCode;

	// Enterキーが押されたとき
	if(key == 13){
		value = terminal.value;	// textareaの文字列を取得

		if(value.match(/\n$/) == null){	// 漢字変換でEnterキーを押した場合
			return;										// 取得した文字の最後が改行文字ではないので何もしない
		}
		// 新しいプロンプトを追加表示
		terminal.value = value + operater;
		console.log("[" + value + "]");

		// フォーカスを常にtextareaにしておく
		terminal.focus();
	}
});

## style.css
/* style.css */
*{
	margin: 0;
	padding: 0;
}
body, p, form, ul, ol, input, button{
	font-size: 16pt;
}

/* 無くても大丈夫なようだが、一応めいっぱいに広げておく */
html, body{
	width: 100%;
	height: 100%;
}

/* ブラウザ側で勝手に追加する青い枠線を消す */
:focus{
	outline: none;
}
/*
	ターミナル表示用textareaタグ
*/
#terminal{
	font-family: 'courier new', Futura, Helvetica, '游ゴシック', 'メイリオ', Osaka;
	width: 100%;
	height: 100%;
	overflow: auto;	/* IEでは設定しておかないとスクロールバーが表示されしまう */
	display: block;	/* 指定しないとスクロールバーが表示される */
	border: none;	/* 変な余白が出ないように */
	resize: none;		/* リサイズできると格好悪いので */
	background-color: black;
	color: white;
	font-size: 12pt;
	line-height: 1.4em;	/* 全角文字を入力時にこれ以上の高さがないと入力時にぎくしゃくするため */
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,user-scalable=no">
	<link rel="stylesheet" href="style.css">
	<script src="main.js" type="text/javascript"></script>
	<title>Terminal</title>
	<!--
	ver 0.9
	jQueryを使わずに素のJavaScriptでの処理に変更

	ver 0.85
	画面をリサイズ（縮小）したときに右端と下端に白い余白が出る部分をとりあえず修正（window.innerWidthでうまくいった）

	ver 0.8 制作開始:
	ターミナルの見た目とプロンプト表示
	プロンプトに文字入力後、Enterキーで再度プロンプト表示
	-->
	</head>
	<body>
	<textarea id="terminal" spellcheck="false"></textarea>
	</body>
	</html>
	/*
	* main.js : ターミナルを再現
	*/
	var terminal = null; // ターミナル画面をtextareaタグで再現
	var screenWidth, screenHeight; // ターミナルの幅と高さ（ブラウザの幅と高さ取得用）
	var operater = "Command> "; // コマンド入力時のプロンプト文字
	var value = ""; // ターミナル画面上の文字列取得用

	/*
	* ターミナルのサイズをブラウザ画面いっぱいに設定する関数
	*/
	function setTerminal(){
	// ブラウザのウインドウサイズを取得
	let innerWidth = window.innerWidth;
	let innerHeight = window.innerHeight;

	// textareaのサイズをウインドウにフィットさせる
	terminal.style.innerWidth = innerWidth + "px";
	terminal.style.innerHeight = innerHeight + "px";
	}

	/*
	* 起動時の処理
	*/
	window.addEventListener("load", function(){
	// textareaのDOM取得
	terminal = document.getElementById("terminal");

	// ターミナルのサイズをブラウザ画面いっぱいに設定
	setTerminal();

	// ターミナルの初期状態（textareaタグの文字列にプロンプトを表示）
	terminal.value = operater;

	// ターミナル（textareaタグ）にフォーカス ==>カーソルが点滅する
	terminal.focus();
	});

	/*
	* ブラウザ画面をリサイズした際に再度ターミナルのサイズをブラウザ画面いっぱいにする関数
	*/
	window.addEventListener("resize", function(){
	setTerminal();
	});


	/*
	* ターミナル上（textareaタグ）でキー入力した際のイベント処理
	*/
	window.addEventListener("keyup", function(e){
	// キー番号を取得
	let key = e.keyCode;

	// Enterキーが押されたとき
	if(key == 13){
	value = terminal.value; // textareaの文字列を取得

	if(value.match(/\n$/) == null){ // 漢字変換でEnterキーを押した場合
	return; // 取得した文字の最後が改行文字ではないので何もしない
	}
	// 新しいプロンプトを追加表示
	terminal.value = value + operater;
	console.log("[" + value + "]");

	// フォーカスを常にtextareaにしておく
	terminal.focus();
	}
	});
	/* style.css */
	*{
	margin: 0;
	padding: 0;
	}
	body, p, form, ul, ol, input, button{
	font-size: 16pt;
	}

	/* 無くても大丈夫なようだが、一応めいっぱいに広げておく */
	html, body{
	width: 100%;
	height: 100%;
	}

	/* ブラウザ側で勝手に追加する青い枠線を消す */
	:focus{
	outline: none;
	}
	/*
	ターミナル表示用textareaタグ
	*/
	#terminal{
	font-family: 'courier new', Futura, Helvetica, '游ゴシック', 'メイリオ', Osaka;
	width: 100%;
	height: 100%;
	overflow: auto; /* IEでは設定しておかないとスクロールバーが表示されしまう */
	display: block; /* 指定しないとスクロールバーが表示される */
	border: none; /* 変な余白が出ないように */
	resize: none; /* リサイズできると格好悪いので */
	background-color: black;
	color: white;
	font-size: 12pt;
	line-height: 1.4em; /* 全角文字を入力時にこれ以上の高さがないと入力時にぎくしゃくするため */
	}