JavaScript入門 プログラムの書き方とHello World

スポンサーリンク

JavaScript

前回の記事(JavaScript入門 JavaScriptとは何?特徴やできることは?)では、JavaScriptについての概要について見てきました。
JavaScriptでどんなことができるのかというのが何となく分かったかと思います。

今回から、いよいよJavaScriptのプログラミングになるのですが…。
まずは、JavaScriptプログラムの書き方について確認します。
そして、最初のプログラム(Hello World)を書いて実行させてみましょう。

スポンサーリンク

JavaScriptのプログラムの書き方

JavaScriptでは、プログラムの書き方が大きく分けると2つあります。
1つはインラインで書く方法。
そして、もう1つは外部ファイルで書く方法です。

インラインで書く場合

インラインというのは、要するにHTMLファイルなどに直接記述するということです。
インラインで書く場合には、scriptタグの中にJavaScriptの処理内容を記述します。

<script type="text/javascript">
// JavaScriptの処理内容
</script>

外部ファイルで書く場合

外部ファイルにJavaScriptファイルを作成して書く場合、scriptタグは不要です。
直接、JavaScriptの処理内容を記述していきます。

ちなみに、外部ファイルを読み込む場合には…。
scriptタグのsrc属性で、読み込みたい外部ファイルのパスを指定します。
JavaScriptファイルの拡張子は「js」です。

例えば、「hello.js」という外部JavaScriptファイルを読み込みたいときには、以下のように記述します。

<script src="hello.js"></script>

JavaScriptの記述場所

JavaScriptは、HTMLファイルのどこででも書いて良いことになっていますが…。
具体的には、head要素の中、body要素の中、bodyタグの閉じタグの直前、が主な場所です。
ただ、ユーザビリティを考慮すると「bodyタグの閉じタグの直前」に書くのが良いとされています。

JavaScript言語でのHello World

それでは、JavaScriptを使って最初のプログラムを書いてみましょう。
ここで作成するのは、ウェブページ上に「Hello World!」という文字列を表示するというものです。
これくらいならHTMLでも十分できるのですが、とりあえず入門ですので。

以下のようなコードを、あなたがお使いのテキストエディタで入力して、「hello.html」というファイル名で保存してください。

<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>document.write("Hello World!");</script>
</body>
</html>

ファイルの保存が終わったら、あなたがお使いのウェブブラウザで「hello.html」を開いてみましょう。
すると、ウェブブラウザの画面に以下の文字列が表示されていますよね。

Hello World!

この結果を見て…。
「おぉ、すごい!」と思うことができたら、あなたはきっとプログラミングが楽しめますね。

JavaScriptのプログラムは以下の部分です。
今回の例では、わずか1行でしたね。

document.write("Hello World!");

これは、document.writeのカッコ内の内容をドキュメントに出力するという意味になります。
この例で言えば、「Hello World!」ということになりますよね。
だから、画面に「Hello World!」と表示されたのです。

予想はつくと思いますが…。
カッコ内の内容を書き換えれば、ドキュメントに書き出す内容を変えることができます。
例えば、「Hello World!」ではなく「Hello JavaScript!」にしたかったら、以下のようにすれば良いですね。

document.write("Hello JavaScript!");

色々な文字列を指定してみて、結果が変わることを確認してみましょう。

まとめ

今回の記事では、JavaScriptのプログラムの書き方と、最初のプログラム(Hello World)を作成するところまでを見てきました。
いかがでしたでしょうか?
意外と簡単にプログラムが作成できたと思いませんか?
わずか1行の処理でしたが、それも立派なプログラムですよ!

今後は、さらにもう少し踏み込んだ内容を扱っていきますので…。
ぜひ続きを楽しみにしていてくださいね!

前回 ≫ JavaScript入門 JavaScriptとは何?特徴やできることは?
次回 ≫ JavaScript入門 変数の宣言・代入方法とデータ型

コメント