JavaScriptコードの配置位置

1406 ワード

JavaScript 機能 chrome スクリプト null ブトン

1.ヘッドに置く
このような方式はページで人を乗せる前にjsコードをロードします.このようにすれば、私達はheadの中でウェブページの要素を取ることができません.ウェブページはまだロードされていないので、下の例を見てください.ボタンの表示値を動的に修正したい時、headの中のコードは一つ申し込みます.
Canot set property'value'of nullの間違い.このエラーはchromeでデバッグして得られたもので、IEでは「document.getElementById(...)」が空か対象でないかのエラーが報告されます.もちろん、jsコードをbodyに入れると大丈夫です.

<html>
<head>
<script type="text/javascript">
document.getElementById('click_button').value = '   ！';
function show_message(){
	alert('Hello!');
}
</script>
</head>
<body>
<input id="click_button" type="button" value="Click me!" onclick="show_message()" >
<script type="text/javascript">
document.getElementById('click_button').value = '   ！';
</script>
</body>
</html>

2.bodyに入れる
jsスクリプトは、配置された位置順に実行されます.例えば上記の例では、jsを元素にロードする前に置くと、エラーが発生します.

<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementById('click_button').value = '   ！';
</script>
<input id="click_button" type="button" value="Click me!" onclick="show_message()" >
</body>
</html>

ヒント:jsファイルが大きい場合は、jsファイルを前の位置にロードすることをお勧めします.これはページのロード速度に影響しません.頭に置くと、jsファイルをロードします.

JavaScript高級プログラム設計の知識点イベントとスクリプトの処理