【JavaScript 入門講座】はじめてのプログラム
[JavaScript 入門講座]はじめてのプログラム
本講座では、JavaScriptの書き方から実行するまでを解説する。
JavaScriptの実行手順
では、講座を始めよう。Webブラウザとテキストエディタを用意しただろうか？ 用意していない方は、用意しよう。用意した？よし、はじめよう。 プログラムを実行する手順は次の通りである。
- テキストエディタにJavaScriptを記述する
- テキストエディタを保存する
- そのファイルをWebブラウザで実行
まず、テキストエディタにJavaScriptのプログラムを記述する。
その次に、ファイルに保存する。ファイル名は何でも良い。
ファイルを保存する保存先フォルダは自由に決めてほしい。
ただ、デスクトップ上に「iori」というフォルダを作って、
その中にファイルを保存すると、学習が容易である。
ファイルを保存する際、文字コードに「UTF-8」を選択してほしい。
- ファイル名はなんでもよい。できれば、sample.htmlが良いだろう
- ファイルの保存先はどこでも良い。できれば、「iori」というフォルダを作成して、 そこに保存するのが良いだろう
- ファイルを保存する場合、文字コードを「UTF-8」に指定する
文字コードが難しい。
ファイルを保存する際、「ファイルの保存ダイアログ」が開くだろう。
そのダイアログで「文字コードを指定」というメニューがあるだろう
（利用するテキストエディタにより、文言や詳細は異なる）。
そこで「UTF-8」を指定する。
なぜ「UTF-8」を選択するのか少しだけ解説する。
プログラムを実行した時に、文字化けが発生する事を回避するためである。
「UTF-8」にすると、文字化けの発生確率が低くなる。
さて、ファイルを保存したら、そのファイルをWebブラウザで実行する。
Webブラウザのアドレス欄にファイルのパスをコピーアンドペーストすると、
Webブラウザでファイルを実行できる。
たとえば、ファイルのパスが以下のようなものと仮定する。
c:/xxx/yyy/iori/sample.html
JavaScriptを記述したテキストエディタを、sample.htmlというファイル名で、 「c:/xxx/yyy/iori/」というフォルダに保存したと仮定する。 この場合、上記パスをコピーして、Webブラウザのアドレス欄に貼り付けると、 ファイルに記述したJavaScriptがWebブラウザ上で実行する。 JavaScriptの実行手順は以上である。
JavaScriptの実行方法 Webブラウザで、JavaScriptを記述したファイルを開く
はじめてのJavaScriptプログラム
まず、テキストエディタに次のように記述する。
<script>
alert ( "Hello" ) ;
</script>
テキストエディタにこのように記述して、「sample00.html」という名前でファイルを保存する。 ファイルを保存する時に、文字コードを「UTF-8」に指定してほしい。 つぎに、Webブラウザのアドレス欄にファイルのパスをコピーアンドペーストする。 エンターキーを押下すると、（JavaScriptが実行して）「Hello」と記述されたダイアログが表示する。
では、プログラムを解説する。このプログラムは、 「Hello」と記述されたダイアログを表示するプログラムである。
<script>
alert ( "Hello" ) ;
</script>
まず、<script>と</script>について解説する。 JavaScriptのプログラム（以下、「JavaScript」と表記）を記述する方法は多々存在する。 こんかい最も簡単であろう、「非推奨の実行方法」で記述する。 はっきり言うと、この記述方法は見た事も聞いた事もない野蛮な方法である。 貴方と私は上品な人間ではあるが、いまは上品なプログラムよりも、簡便なプログラムを優先する。
JavaScriptを記載する場所
<script>
★ここにJavaScriptを記述★
</script>
一番簡単にJavaScriptを書く方法である。 <script>と</script>の間にJavaScriptを記述する。 <script>と</script>の間は、JavaScriptを書くスペースである。 今後も、<script>と</script>の間にJavaScriptを書いて学習を進める。
<script>
alert ( "Hello" ) ;
</script>
さて、問題のJavaScriptであるが、JavaScriptのプログラムは、
「alert ( "Hello" ) ;」という部分である。
文字列を表示する alert ( ★表示する文字★ ) ;
ダイアログに文字を表示する場合、alert()という命令を利用する。 「プログラミング言語とはコンピューターに命令する言語」である。 こんかい、「Helloと記述されたダイアログを表示する仕事」をコンピューターにしてほしい、 と思う。 その場合、コンピューターが理解できる言語で命令する必要がある。
ダイアログを表示 「文字が記述されたダイアログを表示する」ためには、 alert()という命令を実行する。
JavaScriptには様々な命令が存在する。 alert()は、その中の一つである。 alert()を実行すると、ダイアログに文字を記載して表示する事ができる。 ダイアログに表示する文字は、括弧の中に記述する。 また、文字を表示する場合は、表示する文字を、ダブルクォーテーションで囲む （通常、文字列はシングルクォーテーションで囲むが、本講座ではダブルクォーテーションを利用する）。 では、プログラムを変更して、動作を確認しよう。 プログラムを次のように変更する。
<script>
alert ( "Building" ) ;
</script>
「Hello」の部分を「Building」へ変更した。このプログラムを実行しよう。 プログラムを実行する場合、Webブラウザを選択して、キーボードの「F5」キーを押下する。 キーボードの「F5」キーは「更新処理」である。 「F5」を押下すると、Webブラウザが更新される。 Webブラウザを更新すると、新しく記述したJavaScriptが実行する。
| 新しいJavaScriptのファイルを 実行する場合 |
Webブラウザのアドレス欄にファイルパスを記述してエンターキーを押下 |
| Webブラウザで実行しているファイルを 変更した場合 |
「F5」キーを押下して、Webブラウザを更新 |
JavaScriptの実行方法である。新しいJavaScriptのファイルを実行する場合
（例えば、「sample20.html」など）、
Webブラウザのアドレス欄に実行するファイルのパスを指定してエンターキーを押下する。
実行中のJavaScriptファイルの内容を変更した場合は、
Webブラウザ上で「F5」キーを押下する。「F5」キーを押下すると、
変更後のJavaScriptファイルがWebブラウザ上で実行する。
では、プログラムへ戻る。
<script>
alert ( "Building" ) ;
</script>
このJavaScriptを実行すると、「Building」と記載されたダイアログが表示する。 試しに、自分の名前を括弧の中に記述すると良いだろう。
<script>
alert ( "Iori Shimizu" ) ;
</script>
このように括弧の中に自分の名前を記述して、Webブラウザ上で「F5」キーを押下しよう。
別の人の名前がダイアログに表示したら、間違ったプログラムを記述している。
しっかり自分の名前をalert()の括弧の中に記述しよう。
どうだろう？alert()の利用方法はご理解頂けただろうか？
文字列の確認
プログラムを次のように変更して、実行してほしい。 変更内容は「ダブルクォーテーションを削除した」という点である。
<script>
alert ( Building ) ;
</script>
このプログラムは正常に動作しない。 Webブラウザは何も反応しない。 JavaScriptの記述が間違っているからである。裏ではエラーが発生している。 コンピューターに誤った方法で命令すると、コンピューターは反応しない。 文字を表示するためには、ダブルクォーテーション（又は、シングルクォーテーション）で 囲む必要がある。 本講座は以上である。
まとめ
- テキストエディタにJavaScriptを記述する
- テキストエディタを保存する
- そのファイルをWebブラウザで実行
JavaScriptを記載する場所
<script>
★ここにJavaScriptを記述★
</script>
文字列を表示する alert ( ★表示する文字★ ) ;
文字を表示する場合は、ダブルクォーテーション（又は、シングルクォーテーション）で囲む。