見出し画像

【JavaScript】書くときの注意点

関野泰宏

JavaScriptは書く場所によってエラーになる！

まずは基本的なことですが、HTMLのソースコードは上から下へ順番に読み込まれて解析されていきます。

当然ながら、HTMLの中にはJavaScriptも存在しており、どの場所に書くかによって結果が変化することがあります。

エラーになるサンプル

<html>
<head>
    <title>これはエラーになります</title>
</head>
<script>
    var memo = document.getElementById('message');

    message.textContent = 'こちらの表示でOK？';
</script>
</head>
<body>
    <p id="message"></p>
</body>
</html>

HTMLは上から下へ順番に読み込まれて解析されます。

つまり、JavaScriptを読み込んだ時点では、まだ「pタグ」が存在していないのに文字列を代入しようとしているため、「pタグなんてないよ！」というエラーになるわけです。

エラー解決方法

<html>
<head>
    <title>大丈夫です</title>
</head>

<body>
    <p id="message"></p>
    <script>
        var memo = document.getElementById('message');

        message.textContent = 'こちらの表示でOK？';
    </script>
</body>
</html>

サンプルプログラム

こちらはエラーになりません。

JavaScriptが読み込まれる前にDOMがレンダリングされており、「pタグ(idがmessage)」が既に読み込まれている状態だからです。

もっとJavaScriptを学びたい人は！こちらの本がおすすめです

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？