JavaScriptの勉強を始めよう、まずは環境だ

JavaScript

ライブラリ(jQuery)依存では、やっぱりこの先辛いだろうと言うことで、JavaScript(ブラウザ実装)を勉強します。

まずは快適に勉強する環境を作る

勉強となるとブラウザの更新頻度はかなり上がると思うので、ファイルが更新されたら自動的に更新される環境にしてみたいと思います。

最初だけちょっとPHPの力を借りて、cometっぽい方法でファイルの更新をチェック、更新されたらブラウザを更新。

index.phpを以下の内容で作成。

<?php
ini_set('max_execution_time', -1);
if (isset($_GET['time'])) {
	$js  = dirname(__FILE__) . '/study.js';
	$old = $new = filemtime($js)
	            . filemtime(__FILE__);
	while ($old === $new) {
		sleep(1);
		$new = filemtime($js)
		     . filemtime(__FILE__);
	}
	exit(0);
}
?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>JavaScriptのお勉強</title>
	<script type="text/javascript" src="study.js?<?php echo $_SERVER['REQUEST_TIME']; ?>"></script>
</head>
<body>


<div id="debug">debug</div>


<script type="text/javascript">
var xhr = window.ActiveXObject
        ? new ActiveXObject("Microsoft.XMLHTTP")
        : new XMLHttpRequest();
xhr.open('GET', '/?time=<?php echo $_SERVER['REQUEST_TIME']; ?>', true);
xhr.onreadystatechange = function (aEvt) {
    if (xhr.readyState == 4) {
        location.reload(true);
    }
};
xhr.send(null);
</script>
</body>
</html>

後はstudy.jsにJavaScriptを書いていけば保存(更新)と同時にブラウザが更新される。

ついでにindex.phpを保存(更新)してもブラウザが更新される。

もっといい方法あるかも知れないけど、メインはここじゃないから取り敢えずこれでいい。