#JavaScript 関数の代入でつまづいたこと

最近学校でAjaxとかSevletでWebアプリを作るプロジェクトが始まったので自分でも色々勉強してみる。

###【問題】getElemenByIdでnullしか返ってこない

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <script type="text/javascript" src="index.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id textに文字を表示する</title>
  </head>
  <body>
    <p id="text"></p>
  </body>
</html>

index.js

window.onload = start();

function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

###【結論】関数を参照するときは"()"はつけない
お先に結論。
はい。すごい初歩的なことでした。。

index.js

// window.onload = start(); 代入するときにこの時点で実行してしまっている
window.onload = start; //参照するときは()をつけてはいけない(戒め)

function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

ということでございますね。。

###【理由】htmlファイルを解析する前に要素を取得している
Ajaxとかやり始めた初心者がつまづくテンプレみたいなことですよ。
解析し終わる前に要素取ってこれないことは知ってたんですよ？えぇ。
自分の場合は、それよりJavaScriptの基礎の基礎が分かってなかったってことなんですよね。。。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <script type="text/javascript" src="index.js"></script> <!-- jsはここで読み込まれる -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id textに文字を表示する</title>
  </head>
  <body>
    <p id="text"></p>
  </body>
</html>

再掲でございますが。。
まずHTMLと別ファイルのJavaScriptを読み込むタイミングってのは、当たり前ですがscriptタグを描いたところで読み込まれるわけですね。
上のソースだとheadの中で読み込んでいるので、結構早いタイミングで読み込まれるわけです。
そうするとhtmlをすべて解析し終わる前にjavaScriptの解析が終わり、先に実行されてしまうわけですね。
ここで、まだ解析も終わっていないのに下のbodyの中にあるpタグを取ってこれるわけがありません。
なので、window.onloadで全てhtml解析が終わってから実行しようとしたわけですが。。。

index.js

// window.onload = start(); 代入するときにこの時点で実行してしまっている
window.onload = start; //参照するときは()をつけてはいけない(戒め)

これですよ。
代入する時点で実行しちゃだめでしょ！！
JavaScriptってのは関数も変数に代入してやり取りができるんですね。
そのシステムをよく理解していなかった。。。

関数に()をつけるとその関数を実行するよ！って意味になるんです。

つまりwindow.onloadが呼び出されるときに代入した変数を実行しなきゃいけないんですが。
その前に代入する時点で実行してしまっていて、HTMLの解釈が追い付いていないのに、関数Start内の

index.js

function start() {
    var eTex = document.getElementById("text");
    eTex.innerHTML = "Hello";
}

getElementByIdが実行されてしまい、クライアント側のjavascriptは"text"なんでidはありまへんで、
と解釈してしまっていたというわけですね。。。はい。。。。。。。