HOOPSII MOBILE

3冊目 JavaScriptのことはじめ。

JavaScriptの最も基本的な文法について説明をします。
あの有名な最初に学ぶHello Worldみたいなプログラムです。
JavaScriptプログラムの基本となりますので確実に抑えておくポイントになります。
基本的な方法は主に２つあります。
HTMLに埋め込む方法と、JSファイルに記述して読み込む方法です。

[1] HTMLファイルに埋め込む方法

まずは、HTMLファイルにJavaScriptを埋め込む方法です。
説明をする前に以下のプログラムをメモ帳等を記述し、ファイルを保存してください。

ファイル JS01_01.html

<script type="text/javascript">
<!--
document.write("ほぷしぃへようこそ");
-->
</script>

上記プログラムを記述して、ファイルを保存したら、Webブラウザで開きます。
真っ白な画面に「ほぷしぃへようこそ」と表示されると思います。
JavaScriptのコードはHTMLファイル内で、<script>タグ内に書き込みます。
また、「」はHTMLファイルのコメントですが
JavaScript未対応のブラウザに対応するための記述方法です。
現在使用しているブラウザはあまり気にする必要もないような気がします。

[2] JSファイルに記述してHTMLファイルで読み込む方法

このほかにもJSファイルを記載し、HTMLファイルから呼び出す方法があります。
この場合は、ファイルを２つ用意します。
このとき２つのファイルは同じフォルダ内に入れておいてください

ファイル JS01_02.html

<script type="text/javascript" src="JS01_02.js">
</script>

ファイル JS01_02.js

document.write("ほぷしぃへようこそ");

htmlファイル形式のファイルをWebブラウザで確認してみると同じように画面に出力されます。
HTMLファイルとJSファイルを上記のように分けて記述します。
JSファイルはHTMLファイルの<script>タグのsrc属性にファイルパスを記載します。
これで、最初に書いたプログラムと同等な機能を実現できます。
HTMLとJavaScriptは基本的に役割が違うのでわけたほうがよいでしょう。

[3] ２種類の方法を同時に使う場合の注意点

上記の２種類を同時に使用するときには注意しておかないといけないことがあります。
プログラムを見てください

ファイル JS01_03.html

<script type="text/javascript" src="JS01_03.js">
<!--
document.write("これは出力されません");
-->
</script>
<script type="text/javascript">
<!--
document.write("埋め込みの方法");
-->
</script>

ファイル JS01_03.js

document.write("外部ファイルの参照");

実行していただければわかると思いますが、"これは出力されません"は出力されません。
外部ファイルの参照をしているタグの中にJavaScriptのコードを書いた場合には無効です
これ以降のコンテンツでは省略して記載いたしますので、ご自由に記述してください

[4] JavaScriptプログラムの注意点

JavaScriptプログラムにおいて抑えておきたい点についていくつか説明します。
JavaScriptプログラム実行順は基本的に上から下に実行されます。
ただ、関数などが実行する場合には異なります。
関数につきましては、別の機会に取り扱います。

文末のセミコロン(;)

文末には基本セミコロン(;)がありますが、あってもなくても動作します。
書くのは面倒かもしれませんが、書いておいたほうがよけいな不具合を防ぐことができます。

document.writeln("ほぷしぃへようこそ");

document.writeln("ほぷしぃへようこそ")

改行やスペース

セミコロンがなくても動作するように下記のようなプログラムでも動作します。
読みにくくする原因になるだけなので、基本的にはやめておくべきです。


document.writeln("ほぷしぃへようこそ");

document.
writeln("ほぷしぃへようこそ");

document.	writeln("ほぷしぃへようこそ");

大文字と小文字は区別される

JavaScriptプログラムにおいて大文字と小文字は別物として扱われます。

document.writeln("ほぷしぃへようこそ");

// 上とは別物なのでエラー
//DOCUMENT.WRITELN("ほぷしぃへようこそ");

[5] 更新履歴

日付	詳細
2011/05/20	コンテンツ公開