CSSやJScript、VBScriptのちょっとした確認やテストをブラウザでするHTML

日頃、あちこちのサイトを見て回っていると、興味あるスタイルシートの記述や
スクリプトのコードに良く出くわす。スタイルシートの場合
少し前に書いたHTMLエディタもどきで確認しているけれど
スクリプトの場合はテキストエディタを起動させて確認というか試してる。

なわけで、もっと気軽にテストしたく、それっぽいことができるHTMLファイルを書いた。

上のテキストエリアがスタイルシートなどのテスト、下のテキストエリアがスクリプトのテスト。
JScript、VBScriptのボタンでそれぞれ実行。
チェックボックスは、上のテキストエリアはキーを押すたびに更新するので
それを止めるためのもの。
スタイルシートの方は</style>の後にテストしたいソースを書いて
最初から表示している<style type="text/css">〜</style>の間にCSSのコードなりを書くと確認できる。

下のスクリプトの方のテキストエリアから、上のテキストエリアに記述したclassやidなどは参照できるけれど
その逆は無理。動作確認はIE６だけで、もちろんVBScriptもIEだけ。

JScriptの方はJavaScriptも行けると思うけれど、どうなんだろう？
というより、私が少しずつ覚えているのはJScriptなのかJavaScriptなのかよくわからん。
互換性があるというから、ま、どっちでもいいか･･････。

↓HTMLファイル。
あらかじめ数値を入力しておいたけれど、CSSの記述によってはテキストエリアやボタンなどが崩れる場合もある。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>TEST</title> </head> <style type="text/css"> body { background-color: #008080; } .tb_test, #ta_test, #btn_test, #c_test, #td_test { display: block; font: 12pt; color: #ffff00; letter-spacing: 1; margin: 0; } .test_test { width: 100%; height: 50%; } #ta_test { float: left; background-color: #002050; border: 1px solid #00ffff; width: 100%; height: 50%; text-align: left; padding: 5px; word-wrap: normal; overflow: auto; } #btn_test { float:; clear:left; background-color: #002050; border: 1px solid #00ffff; padding: 0; text-align: center; width: auto; height: 20px; margin: 0; cursor: pointer; } #c_test, #td_test { font: 12pt; float:; clear:left; text-align: left; background: transparent; width: 20px; height: 20px; border: none; padding: 0; } .tb_test { float:; clear:left; text-align: left; width: 25%; height: 15px; padding: 0; background: #002050; border: 1px solid #00ffff; } #pre_test { width: 100%; float:; clear: both; word-wrap: normal; position: relative; top:0; left:0; } </style> <body onload="strstyle()"> <div class="test_test"> <textarea id=ta_test name="h_test" onkeyup="pw()" style="display:block;"></textarea> <textarea id=ta_test name="s_test" style="display:block;"></textarea> <table class="tb_test"> <tr> <td id="td_test"><input id="btn_test" type="button" value="JScript" onclick="jrun()"></td> <td id="td_test"><input id="btn_test" type="button" value="VBScript" onclick="vrun()"></td> <td id="td_test"><input id="btn_test" type="button" value="HTML AREA" onclick="hwclose()"></td> <td id="td_test"><input id="btn_test" type="button" value="SCRIPT AREA" onclick="swclose()"></td> <td id="td_test"><input id="btn_test" type="button" value="CLEAR" onclick="strstyle()"></td> <td id="td_test"><input id="c_test" name="c_test" type="checkbox"></td><td id="td_test">OFF</td> </tr> </table> </div> <div id="pre_test"></div> <script type="text/jscript"> function strstyle() { h_test.value = "<body>\r\n<style type=\"text/css\">\r\n</style>\r\n"; s_test.value = ""; document.getElementById("pre_test").innerHTML = ""; } function pw() { if (c_test.checked){}else{document.getElementById("pre_test").innerHTML = h_test.value;} } function jrun() { try { eval(s_test.value); } catch(e) { alert(e.description); } } function hwclose() { if (h_test.style.display == "block" && s_test.style.display == "block") { h_test.style.display = "none"; s_test.style.height = "100%"; } else if (h_test.style.display == "none") { h_test.style.display = "block"; s_test.style.height = "50%"; } } function swclose() { if (s_test.style.display == "block" && h_test.style.display == "block") { s_test.style.display = "none"; h_test.style.height = "100%"; } else if (s_test.style.display == "none") { s_test.style.display = "block"; h_test.style.height = "50%"; } } </script> <script type="text/vbscript"> sub vrun() on error resume next execute(s_test.value) if err.number <> 0 then msgbox(err.description) end sub </script> </body> </html>
WScript関係は扱えない（sleepとか）。
拡張子をHTMLではなくhtaにしてダブルクリックすれば、セキュリティが無防備になるようで
オブジェクトのScripting.FileSystemObjectなどが使えるようになる。

「おまけ」
幕が開けるように動くテキストエリア（動作確認IE6のみ）
上のテキストエリアに
　（ボタンが横バージョンの場合、環境にもよるんだろうけれど
　　#msgのtopは360px、leftは70pxくらいだった）
<body> <style type="text/css"> textarea { position: relative; width: 300px; overflow: auto; z-index: 1; } #msg { position: absolute; top: 50px; left: 50px; font: bold 50pt; z-index: 0; } </style> <textarea name=ta style="height:200px;display:block;"></textarea> <div id=msg>(*^_^*)</div>

下のテキストエリアに
if (ta.style.height == "200px") { for (var i = 1; i < 200; i ++) { setTimeout("ta.style.height = '" + (200 - i) + "'", i * 10); } setTimeout("ta.style.display = 'none'", 2000); } else { ta.style.display = "block"; for (var i = 1; i < 200; i ++) { setTimeout("ta.style.height = '" + i + "'", i * 10); } setTimeout("ta.style.height = '200px'", 2000); }
をコピペしてJScriptボタンを押すとテキストエリアが動きます（単なる遊びですけれど）

※2月10日　更新

それぞれのウィンドウを閉じたり開いたり出来るようにした。

※2月12日　更新

クリアを押した場合、両方リセットするようにした。

クリアのボタンの位置を変更。

※2月21日　更新

catch(e)のところにdescriptionを追加。エラーで説明が出るようになった。