こんにちは,
JavaScriptとHTML
FirefoxのアドオンやサーバーサイドJavaScriptなどの例外をのぞいて,
DOCTYPEとレンダリングモード
HTMLといえば最初に書くのはDOCTYPEです。現在使われているDOCTYPEはHTML4.
特に理由がなければ,
HTML4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="a.css">
<title>HTML4.01 サンプル</title>
</head>
<body>
<h1>sample html 4.01</h1>
</body>
</html>
これをHTML5のDOCTYPEなどを使って書き直すと次のようになります。
HTML5のDOCTYPEとサンプルHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="a.css">
<style>
body{
margin:3px;
}
</style>
<title>HTML5 サンプル</title>
</head>
<body>
<h1>sample HTML5</h1>
<script>
alert(document.doctype);
</script>
</body>
</html>
DOCTYPEのほか,
script要素
script要素といえば,
なお,
また,
HTMLの解釈とJavaScriptの実行
ウェブブラウザはHTMLの解析中にscript要素を見つけたらその場でそのJavaScriptを
特に,
script要素を最後に記述する方法は簡単でわかりやすく,
DOMContentLoadedの利用例
document.addEventListener("DOMContentLoaded", function(){
// HTMLの読み込み後に実行されるので,要素を参照できる
var element = document.getElementById(ID);
}, false);
IEでも動作する読み込み待ち関数は次のとおりです。なお,
DOMContentLoadedの実装例
function dom_ready(callback){
var isLoaded = false;
if (document.addEventListener){
document.addEventListener("DOMContentLoaded",function(){
callback();
isLoaded = true;
}, false);
// addEventListenerをサポートしているが,DOMContentLoadedを
// サポートしていないブラウザ用にloadイベントもセットしておく
window.addEventListener("load", function(){
if (!isLoaded) callback();
}, false);
} else if (window.attachEvent) { // for IE
if (window.ActiveXObject && window === window.top) {
_ie();
} else {
window.attachEvent("onload", callback);
}
} else {
var _onload = window.onload;
window.onload = function(){
if (typeof _onload === 'function') {
_onload();
}
callback();
}
}
function _ie(){
try {
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout(_ie, 0);
return;
}
callback();
}
}
IEの場合,
dom_
dom_ready(function(){
// HTMLの読み込み後に実行されるので,要素を参照できる
var element = document.getElementById(ID);
});