実行時コンパイル順

私はJavascriptでコーディングしていますが、私は奇妙な例になりました。実行時コンパイル順

例：

<!DOCTYPE html> 
<html> 
<body> 

<canvas id="myCanvas"></canvas> 
<script> 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
ctx.beginPath(); 
ctx.arc(95,50,20,0,2*Math.PI); 
ctx.stroke(); 
</script> 

</body> 
</html>

上記の例では、動作し、円を出力します。

しかし、スクリプトの正確なコードをjavascript.jsファイルにコピーしようとすると、サークルは存在しなくなります。それはなぜですか？

<!DOCTYPE html> 
<html> 
<head> 
<script src="javascriptFile.js"></script> 
</head> 

<body> 
<canvas id="myCanvas"></canvas> 
</body> 

</html>

は、私は、WebブラウザがHTMLコードを発行し、その後、私はjavascriptのコードはHTMLオブジェクトが作成された直後に実行します把握DOMを構築することを優先順位があることだろうと思いました。私は、キャンバスの中に関数createShape（）を入れて、javascriptFile.jsファイルの関数createShape（）{}に残りのコードを挿入しようとしましたが、どちらも動作しませんでした。

私はいつもすべてのキャンバスオブジェクトのhtmlボディにjavascriptコードを入れなければなりませんか？

出典

2016-12-02 Zulu

スクリプトタグがキャンバス要素の下にあることを確認してください。文書が読み込まれた後に処理してください（window.onloadなど） – georg

スクリプト実行時にキャンバスが存在しません。 –

thatsなぜドキュメント準備完了状態が必要なのですか？ロードされる必要があるすべてを知るために:) –

私は、WebブラウザがHTMLコードを公開してから、HTMLオブジェクトを作成した直後に実行するjavascriptコードを描画するDOMを構築すると考えました。

これは間違っています。 JavaScriptコードは、それがアクセスしようとして（と明示的にmarked as deferedではありません）される要素の前に、ソースに表示されている場合、一般的に、それは体の下部にあるスクリプトexecuted before the browser continues to parse the page.

埋め込みとなり、あなたは問題ないはずです。

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <canvas id="myCanvas"></canvas> 
    <script src="javascriptFile.js"></script> 
</body> 
</html>

出典

2016-12-02 14:07:34 Timo

ありがとう！だから私はいつもjavascriptFile.jsをコードの最後に置くべきだと思いますか？/bodyタグの上にある行 – Zulu

どちらか、または 'window.onload'イベントが発生した後にコードを実行してください。これはページが完全にレンダリングされたことを示します。 – Timo

ああ、それはかなり面白いです。私はまだwindow.onloadという概念をまだ理解していません。これをhtml bodyタグに実装していますか？ – Zulu

答えて

関連する問題