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

前回のもののボタンの位置を横に移動しただけ。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 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 { position: static; top: 0; left: 0; background-color: #008080; overflow: auto; } .test_all { width: 100%; height: 50%; } .test_left { width: 85%; height: 100%; float: left; clear: left; } #test_rtbl { position: static; float: right; clear: right; top: 0; left: 0; width: 15%; height: 100%; border: none; margin: 0; padding: 0; background: transparent; } #test_rtd { position: static; top: 0; left: 0; color: #ffff00; font: bold 12pt; background: transparent; border: none; width: 10%; height: auto; padding: 0; text-align: center; margin: 0; } #test_ta { position: static; top: 0; left: 0; float: left; clear: both; width: 100%; height: 50%; border: 1px solid #00ffff; overflow: auto; word-wrap: normal; background: #002050; color: #ffff00; padding: 5px; font: 12pt; letter-spacing: 2px; margin: 0; } #test_btn { position: static; top: 0; left: 0; width: 120px; height: auto; background: #002050; color: #ffff00; font: bold 12pt; letter-spacing: 1; border: 3px double #00ffff; padding: 0; margin: 0; cursor: pointer; } #test_chk { position: static; top: 0; left: 0; width: auto; height: auto; background: transparent; border: none; margin: 0; } #pre_test { position: static; top:0; left:0; width: 100%; float:; clear: both; word-wrap: normal; } </style> <body onload="strstyle()"> <div class=test_all> <div class=test_left> <textarea id="test_ta" name="h_test" onkeyup="pw()" style="display:block;"></textarea> <textarea id="test_ta" name="s_test" style="display:block;" accesskey="s"></textarea> </div> <table id="test_rtbl"> <tr><td id="test_rtd"><input type="button" id="test_btn" value="JScript" onclick="jrun()" accesskey="j"></td></tr> <tr><td id="test_rtd"><input type="button" id="test_btn" value="VBScript" onclick="vrun()"></td></tr> <tr><td id="test_rtd"><input type="button" id="test_btn" value="HtmlArea" onclick="hwclose()"></td></tr> <tr><td id="test_rtd"><input type="button" id="test_btn" value="ScriptArea" onclick="swclose()"></td></tr> <tr><td id="test_rtd"><input type="button" id="test_btn" value="Clear" onclick="strstyle()"></td></tr> <tr><td id="test_rtd"><input type="checkbox" id="test_chk" name="c_test">OFF</td></tr> </table> </div> <div id="pre_test"></div> <script type="text/javascript"> 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>

2月17日修正

1行目のHTML 4.0を4.01に（何がどう違うかわからんけれど、こっちの方がいい気がしたもんで）

script type="text/jscript"をjavascriptに（何がどう違うかわからんけれど、こっちの方がいい気がしたもんで）

2月20日修正

cssの記述でpositionのstaticに余分な記述があったのを削除

　　(資料からコピペしたから余分な文字も入ってた。動作的には問題なかったようだけれど削除)

2月21日修正

JScriptでも通用するとわかり、catch(e)にdescriptionを追加。（日々これ勉強、というか試してみれば良かった･･･)

　　これでエラーになった場合簡単な説明が出るようになった。
2月22日修正

bodyのスクロールバーをautoに

tdでフォントサイズを変えると、チェックボックスのOFFの字も変わってしまったのを修正。