未経験からのJavaScript入門|出力

HelloWorld を書いて見る

「HelloWorld」って何ですか?
答えは伝統です。誰もがこの伝統の「HelloWorld」がそれぞれのプログラミング言語の入門に採用されました。
なぜなら「HelloWorld」自体がとても単純なプログラミングであり、初心者にはうってつけの文法の学び方だからです。

実際に書いてみる

HelloWorld っといっても書き方はたくさんあります。
当サイトでは私が思う初心者、中級者、上級者の「HelloWorld」を上げたいと思います。

初心者コード

// HelloWorld.html

<html>
<script>
    alert("HelloWorld");
</script>
</html>

私が思う初心者コードです。

タグにJavaScriptを書いています。

html ファイル内に JavaScript を書くことを
インラインスクリプトといいます。
以上のソースコードを、テキストエディタに張り付けファイル名を HelloWorld.html の名前で保存してください。
保存したファイルをプラウザで開いて見てください。
以下のように表示されるはずです。

中級者コード

新規でフォルダを作りその中に
HelloWorld.html と
HelloWorld.js ファイルを作成してください。

// HelloWorld.html
<html>
  <script type="text/javascript" src="HelloWorld.js"></script>
</html>
// HelloWorld.js
alert("HelloWorld");

初心者スクリプトと機能は同じですが、JavaSciript の実装方法が違います。
違いとは JavaScript ファイルと html ファイルを分けています。
これを外部スクリプトと呼びます。
なぜ「ファイルを分けるか」
それは可読性とメンテナンス性を上げるためです。
html ファイルにそのまま js ファイルに書き続けると、非常に読みづらくなりメンテン明日もしずらいダメなコードになってしまう可能性が高いです。
今後外部スクリプトで記載していくので、このコードは書けるようにしておきましょう。

上級者コード

では続けて上級者コードを記載します。
中級者コードと同じく同じフォルダ内に作成してください。

<html>
<head>
  <title>HelloWorld</title>
</head>
<body>
  <p id="HelloWorld"></p>
</body>
  <script type="text/javascript" src="HelloWorld.js"></script>
</html>
document.getElementById("HelloWorld").textContent = "HelloWorld";

実行結果は以下のようになります。

説明すると JavaScript で DOM を操作し、テキストを追加しています。
初心者の方には、難しいかと思いますが今はわからなくて大丈夫です。
一度に説明すると理解しづらいかと思いますので、次項で説明します。

今回作成したコードはダウンロードできますので、以下から参照してください。

https://github.com/asakura-sakura/wiblok