完全に備忘録の自己満足です。
そして初心者なので悪いところ改善すべきところがあればご指摘お願いします。

全体のコードがこちら。

code.js

function outputMoji(){
 var n = document.inputform.moji.value;
 var str = new String(n);
 var code = {
  a:"Alpha",
  b:"Bravo",
  c:"Charlie",
  d:"Delta",
  e:"Echo",
  f:"Foxtrot",
  g:"Golf",
  h:"Hotel",
  i:"India",
  j:"Juliet",
  k:"Kilo",
  l:"Lima",
  m:"Mike",
  n:"November",
  o:"Oscar",
  p:"Papa"
};
var a = new String;

for(var i = 0; i < str.length; i++){
 a += code[str.charAt(i)] + "<br>";
}
document.getElementById("result").innerHTML = a;

code.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="code.js"></script>
  <title>フォネティックコード</title>
</head>
<body>
  <form name="inputform">
    <p>
      文字の入力：<input type="text" name="moji" /><br />
      <input type="button" onclick="outputMoji()" value="入力" />
    </p>
  </form>
  <p id="result">
    文字を入力してください。
  </p>
</body>
</html>

まずJavascriptファイルを上から順に追っていくと…

code.js

function outputMoji()

でフォネティックコードを作っている。
次に

code.js

var n = document.inputform.moji.value;
var str = new String(n);

が外からの入力nをstrに代入していることを表している。
代入された値は次のhtmlファイルの位置

code.html

<body>
  <form name="inputform">
    <p>
      文字の入力：<input type="text" name="moji" /><br />

inputformにあるmojiの値をnに代入しますよ～っつーこと。
outputMoji()関数の中に入ってるcodeはフォネティックコードです、途中までしかないのはめんどくさ(ry

次に行きます。
JavaScriptファイルの

code.js

for(var i = 0; i < str.length; i++){
 a += code[str.charAt(i)] + "<br>";
}
document.getElementById("result").innerHTML = a;

は、入力されたstrの長さstr.lengthだけfor文を実行。
str.charAt(i)はstrのi番目を取り出すという意味。
それをfor文で動かすことで、順に文字を取ってくることができる。
んで、code[]は連想配列だから、str.char[i]をそのままcode[]に入れていけば、対応するフォネティックコードが出てくることになる。(akiを入力したらcode[a]、code[k]、code[i]が表示されるってゆーこと。)

さて、終盤ですね。

code.js

document.getElementById("result").innerHTML = a;

この記事を書いてやり直すまで、これの意味がさっぱりわからなかった…。

JavaScriptのdocument.getElementById()は、ドキュメント内にある、指定したidを持つ要素を1つ取得するメソッドです。存在しない場合はnullが返ります。
(リファレンスを参照　https://syncer.jp/javascript-reference/document-getelementbyid)
ということらしいので、これを使ったみたいです。。。

.innerHTMLはこちらを参考にしました。(http://wp-p.info/tpl_rep.php?cat=js-biginner&fl=r13)

つまり、

code.html

<p id="result">
文字を入力してください。
</p>

を入力した後に出て来るフォネティックコードに置き換えてるってことになります。多分。

実際のページがこちらです。

実行前

実行後

ページが白いので見にくいですが、気にしない気にしない。

これを書いてておもったのが、入力した文字に大文字が含まれていたらどうしよう…ということです。
正規表現を使うべきなのか…。
それはまたいつかできるときにやりたいと思います。

できれば毎日書いていきたいなあ…。