今天在練習中碰到“引用外部的一個js文件但是卻失效”的情況，實在不懂，百度后才知是引用的位置不對，錯誤的代碼如下：
<head> <meta charset="UTF-8"> <title>Day16</title> <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script> </head> <body> <input id="first-number" type="number" value="0" placeholder="第一個數字"> <input id="second-number" type="number" value="0" placeholder="第二個數字"> <button id="add-btn">加</button> <button id="minus-btn">減</button> <button id="times-btn">乘</button> <button id="divide-btn">除</button> <p id="result">運算結果</p>
原本是需要沒點擊一個按鈕，相應的運算后的結果要在下方的result中顯示，但是結果毫無反應，瀏覽器報錯，但是把引用的位置調到body中就ok了
<head> <meta charset="UTF-8"> <title>Day16</title> </head> <body> <input id="first-number" type="number" value="0" placeholder="第一個數字"> <input id="second-number" type="number" value="0" placeholder="第二個數字"> <button id="add-btn">加</button> <button id="minus-btn">減</button> <button id="times-btn">乘</button> <button id="divide-btn">除</button> <p id="result">運算結果</p> <script type="text/javascript" language="javascript" src="Day16.js" charset="utf-8"></script> </body>
結果就OK了，由於js文件中多次從Body中獲取元素，而我們知道，HTML文檔在瀏覽器中的解析順序是自上而下，所以，如果把js文件放在header中會報錯，無效；
再一方面來說，由於瀏覽器解析的特性，將js文件放在頭部中，當我們的js文件中內容很多時加載需要一定時間，意味着后面的內容還未解析在界面，此時瀏覽器的界面一片空白，容易造成體驗差；
如有不對，歡迎指正，謝謝！
，