javascript外部ファイルの読み込み(超基本的なことについて)

###質問内容
javascriptは一週間前から学び始めました。
javascriptの外部ファイルの読み込みについて、「bodyタグの一番最後にjavascriptの外部ファイルを張り付ける」のがいいとされていますが、その外部ファイルの使い方がよくわかりません。
とりあえず下のように書きました。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>practice</title>
6</head>
7<body>
8  <!--途中実行するスクリプト-->
9  <script>
10    document.write(m);
11  </script>
12  <script type="text/javascript" src="index.js"></script><!--外部ファイル-->
13</body>
14</html>

そしてindex.jsに下のように書きました。

javascript
1var m="Thank you";

そしてブラウザに読み込むと、何も書かれていません。理由は外部ファイルがbodyタグの中で実行されるscriptより下にあり、変数を読み込めないからです。
試しに外部ファイルをbodyタグ内の一番最初に書いて読み込むとちゃんと表示されます。
このように、外部ファイルに変数を指定すると途中実行するスクリプトに支障が出ます。
とても簡単なことかもしれませんが、どのようなやり方で外部ファイルを指定するのか教えてください。

行動規範の内容に同意します

回答2件

外部ファイルの指定の仕方は間違っていません。
プログラムは基本的に上から順番に処理が行われるので、最初の提示の書き方だと動かないわけです。変数を未定義で使おうとしてますね。
なので、

「bodyタグの一番最後にjavascriptの外部ファイルを張り付ける」

というのはあくまで全て外部ファイルでコードが書かれていた場合です。ただ、これも「定義していないものを使わないように」読み込ませる順番には配慮が必要です(jQuery本体の読み込みでよくあるミスです)
必ず
定義の記述
↓
定義されたものを使う記述
の順番になるように記載してください

投稿2018/12/31 04:59

m.ts10806

総合スコア80850

ベストアンサー

外部ファイルに変数を指定すると途中実行するスクリプトに支障が出ます。

変数の定義の順番については書き方によって支障が出ますが、そこは定義順に左右されないように組めばよいです。
最近の書き方をしたJavaScriptでは、特別な事情が無ければdocument.write を使わないから、特に問題になりません。（外部スクリプトの変数を、DOMを辿って書き換えをするから、外部スクリプト側だけで完結できる）

【document . writeはやめて、innerHTMLを使おう | Web Developers Antenna ウェブ開発者アンテナ [W'ANEB]】
http://web.antenna.work/innerhtml/

【innerHTMLの代わりにinsertAdjacentHTML()を使ってみようか。（DOMおれおれAdvent Calendar 2015 01日目） | Ginpen.com】
http://ginpen.com/2015/12/01/insertadjacenthtml-instead-of-innerhtml/

Google も言ってますね。

【サイトで document.write() を使用しない | Tools for Web Developers | Google Developers】
https://developers.google.com/web/tools/lighthouse/audits/document-write?hl=ja

【Intervening against document.write() | Web | Google Developers】（上記記事のリンク切れしている英語記事）
https://developers.google.com/web/updates/2016/08/removing-document-write

投稿2018/12/31 04:57

編集2018/12/31 05:07