1

JavaScriptの基礎

ここでは、ビギナーの方を対象とした JavaScriptの解説を行っています。 JavaScriptは、Webページに

組み込んでいろいろなアクションを起こすことができます。計算をしてみたり、メッセージを表示してみた

りと、使い方は色々有ります。是非 JavaScriptを覚えて、一ランク上のWebページ作りに励んでみて下

さい。

当サイトでは主に「初めて JavaScriptを触る人」を対象にしています。 JavaScriptの基本と、簡単なソ

ースを解説していきます。ここで書かれてあることをマスターしたなら、後は色々なサイトでレベルを磨

いていってください。なお最初に断っておきますが、JavaScriptを理解するには HTMLをある程度使え

る必要があります。 HTMLを十分使えない方は、まずそちらを勉強なさって下さい。 HTMLを理解し

ていることを前提として解説していきます。

JavaScript基本編

1. JavaScriptの ON/OFF

2. JavaScriptの記入場所

3. コメント

4. アラート表示

5. 文字を表示させる

6. 変数１

7. 変数２

8. 関数

9. 引数

10. if文１

11. if文２

12. switch文

13. 配列

14. for文

15. while文

16. 外部ファイル

HP運営委員会研修資料

2

JavaScirptダイアログ編

1. confirmで正誤クイズを作る

2. promptで名前を表示する

3. パスワード入力で秘密のページへ

履歴・リンク編

1. location.href（リンク）

2. SelectBoxのナビゲーション

3. 戻る・進む・更新ボタンを作る

4. 戻れないページを作る

5. インラインフレームのリンク指定

ウィンドウ編

1. サブウィンドウを表示する

3

勉強のための準備

これから JavaScriptの解説を行っていきます。なるべく初心者に分かりやすく書くよう心がけたいと思い

ます。

ところで、JavaScript とは何でしょう。一言で言うと、プログラムです。皆さんはこれからプログラマーにな

ろうとしているのです。と言っても、JavaScriptは一般的なプログラムほど難しくありません。１つ１つを覚

えて行く事によって、馴染んでくると思います。どうぞ自分のペースで学習していって下さい。

JavaScriptは幾つもの命令文から成るプログラムです。その命令文のことをスクリプトと言います。これ

からスクリプト（あるいはソース）という言葉が頻繁に出てきますが、それらは命令文の集まりであると

いうことを理解して読み進めていって下さい。

JavaScriptを ONにする

ＯＮになっていたらいいですが、ＯＦＦになっている人はまず JavaScriptを有効にしましょう。２種類のブ

ラウザで設定方法を書いておきます。

Internet Explorerの場合

インターネットオプションの「セキュリティ」タブを開きます。そして「セキュリティのレベル」の所にあるレ

ベルのカスタマイズをクリック。

セキュリティの設定ダイアログが出ます。 スクリプト→アクティブ スクリプトの部分を「有効にする」にし

ます。

ちなみに同じ所の設定を「無効にする」にすれば、

JavaScriptを OFFにできます。しかしこれはネッ

ト上にあるページにのみ有効な設定で、オフライ

ンで無効にすることはできません。

4

JavaScriptを記入する場所と方法

ここでは、JavaScriptを記入する場所について解説します。 JavaScriptはWebページ内に組み込んで

使用します。基本的に、以下の４箇所に記入します。

ヘッダー内に

HTMLのヘッダーに記入します。ここに書いたスクリプトは、body部分より前に読み込まれま

す。関数（処理を１まとめにしたもの）などはここに記入します。

body内に

何かを表示するようなスクリプトの場合、実際に表示する位置に記入します。

タグ内に

タグの中にイベントを組み込んで、そこに直接 JavaScriptを記入できます。関数を呼び出したり、

簡単なスクリプトを記入します。

外部ファイルに

複数のWebページ内で同じ処理を行いたい場合は、外部ファイルにスクリプトを書いて、それ

を各ページが読み込むようにします。

5

HTMLに JavaScriptを組み込む

ヘッダー・body内に

HTMLのヘッダーや body内に JavaScriptを組み込むには、script タグを使用します。以下の文字列を

HTMLに書き込んで、その間に記入していきます。これは決まり事なので、そのまま覚えて下さい。

タグ内に

タグの中に記入するには、Aタグのhref属性を使うか、イベントを用います。以下のような使い方がで

きます。

クリックしてね

A タグの href属性を用いる場合は、そこに JavaScriptが書かれていることを示すために、

JavaScript:を付けてやります。

外部ファイルの場合

こちらの記入方法・読み込み方法は、また別のところで解説しています。

6

コメントの書き方

ここでは、JavaScriptにおけるコメントの挿入方法を説明します。コメントを入れておくと、長い JavaScript

のソースを書いた時に後で編集をするのが楽になります。また他の人にソースを見せる場合、説明書

きを加えるのに用います。

コメントは２通りの方法で挿入できます。

１行だけのコメント

１行だけのコメントは、以下のように記入します。

//１行用のコメントになります。

上のようにスラッシュ「/」を２本続けます。これはそれ以降の文字がコメントになり、処理されなくなりま

す。このコメントは行が変わるまで有効です。

複数行のコメント

複数行にまたがるコメントも記入できます。

/*この間がコメントになります。複数行用。*/

/*～*/の間がコメントになります。複数行に対応しています。長いコメントを入れたい場合に使用しま

す。

JavaScriptを書いていくと、非常に長いスクリプトソースになることがあります。是非コメントを入れて、ス

クリプトを整理しておきましょう。

アラートを表示させる

警告やメッセージを伝えるためのアラートダイアログ（下図）を出す方法について解説します。

7

アラートは他人にメッセージを伝えるだけに用いるのではありません。 JavaScirptのプログラムを組ん

でいてエラーが出る場合に、どこで間違っているのかチェックしていくのにも使えます。そんな訳で使用

頻度が高い機能です。

HTMLの body内に、以下のように打ち込んでみて下さい。

これでブラウザで読み込んでみましょう。ページが開くと同時にダイアログが出て、「ようこそ！」と表示

されると思います。

この alert()というのが、アラートダイアログを出す命令文です。括弧内に書いたものを表示します。

ただし、文字の場合はダブルクォーテーション「”」かシングルクォーテーション「’」で囲まなければなりま

せん。

数字や計算結果を表示させる

alert()は数字や計算結果を表示させることもできます。例えば以下のように書くと、10 と表示されま

す。

alert(3+7);

今回は文字ではないので、クォーテーションで囲んでいませんね。もし囲むと、「3+7」という文字が表示

されることになります。

命令文の最後に半角セミコロン「;」が付いていますが、これは１つの処理の終わりを意味するものです。

複数の処理文が出る場合に、セミコロンを忘れると即エラーが出ます。上記のように処理文が１つの場

合は付ける必要はありませんが、付ける癖を付けておくと良いと思うので書いています。

アラートダイアログにおける改行

ところで、アラートダイアログの文字を改行するにはどうしたら良いでしょうか？その場合は、改行位置

に¥nを入れて下さい。

8

alert("ようこそ！\nPoriPori World へ");

サンプルを見ると分かるように、¥nを用いて改行させることができます。間違ってもスクリプト上で

alert括弧内の文字を改行しないようにしてください。エラーが出ますので。

文字を表示するには

このページでは、JavaScriptを使って文字を表示する方法について解説します。と言っても、この機能を

単独で使うことはそんなにありません。 HTMLで普通に文字を書けば表示されますから。しかし、

JavaScriptで計算させた結果を表示したりする場合には必要となります。ということで、まずは基礎的な

命令文として覚えることにしましょう。

document.write()

HTMLの body内に、以下のように記入してみましょう。その文字がブラウザ上で表示されれば成功で

す。

上にある document.write()という部分が、文字を表示する命令です。括弧内にある情報をブラウ

ザで表示します。文字を表示させる場合は、クォーテーションで囲むのが約束でした。

上記のスクリプトは、この解説サイトの一番最初のページにあったチェック枠に使った命令文です。

JavaScript機能が働いていれば、「JavaScriptは ONです！」という文字が表示される仕組みです。

しかし、上の場合だと JavaScriptが OFFの時には何も表示されません。そこで、JavaScriptを切ってい

る時だけ文字を表示させる方法もお伝えしておきたいと思います。それには、以下のようなタグを記入

します。

9

JavaScript は OFF です！

上のように noscript タグで囲んだ部分は、JavaScriptが OFFの時に処理されます。この様にしてお

けば簡単な JavaScriptチェック機能を提供できます。皆さんのＨＰでも、上のソースをコピー→貼り付け

して状態を知らせてあげると親切かも知れません。

文字以外のものも表示できる

document.write()は数字の計算結果を表示させることもできますし、 HTML タグを表示させるこ

ともできます。

document.write("10＋20の答えは");

document.write(10+20);

document.write("です！");

上記のように書くと、「10＋20の答えは 30です！」と表示されます。「10＋20」の部分が太字で表示され

ると思います。本当は１つにまとめて書くことができるのですが、その方法はまた変数の解説をしてか

らにします。

変数－その１

変数はプログラムを組む上で無くてはならないものです。変数とは簡単に言うと、「入れ物」，「箱」のよ

うなものです。ただし中に入れるのは文字とか数字です。

変数という名の通り、入れ物の中身は自由に変えることができます。これをプログラムでどのように使う

のかやってみることにしましょう。

変数の定義

まずは変数の定義の方法を勉強しましょう。これは JavaScriptだけでなく他のプログラムでも同じような

方法が取られます。

10

var Kazu;

上記の varというのが変数を定義するものです。半角スペースを挟んでKazuという文字がありますが、

これは‘Kazu’という変数を定義したことになります。

変数名は自由に付けられます。自分で分かるような名前を付けると良いでしょう。変数名に用いること

ができるのは半角英数字です。ただし、命令文に出てくるような文字は使えません（alert とか document

は駄目）。

HTMLのタグは大文字でも小文字でも OKでしたが、JavaScriptは大文字と小文字は別物と解釈され

ます。 Kazu と KAZU と kazuは全部別なものになります。

変数は、定義の際にすぐ中身を指定することもできます。

var Kazu=10;

上記の例は、変数 Kazuを定義すると同時に、変数 Kazuに 10を入れています。イコール‘=’は代入と

いう意味です。変数に文字や数字を入れるときにはイコールを使います。代入する文字や数字は式の

右側に書き込みます。

変数は数字だけでなく文字も入れることができます。

var Moji="こんにちわ！";

上記のように書くと、変数 Mojiに「こんにちわ！」という文字列を代入できます。文字の場合はクォー

テーションで囲むのが約束です。

11

変数の活用

では、実際に変数を活用してみましょう。 HTMLの body内に以下のように書いて実行してみましょう。

10 と 5が入った変数が順番に計算されてアラート表示されます。最初と２番目は分かると思います。３

番目の*ですが、これは×（かける）のことです。４番目の/は÷（割る）のことです。 JavaScriptでは*や/

を使って計算します。

文字であっても計算式が作れます。以下のように記述してみて下さい。

var Aisatu = "こんにちわ！";

var Namae = "ポリポリです。";

document.write( Aisatu + Namae );

変数の中身が文字列の場合、+を用いて繋げることができます。数字のように「-」（マイナス）とか「/」

（割る）などは使用できません。

最後に、文字列と数字が入った変数を＋で繋げるとどうなるか試してみましょう。

var Feb = 2;

var Moji = "月は英語で February です！";

alert( Feb + Moji );

12

文字と数字が+で結ばれた場合、数字は文字として扱われます。上記の変数 Febは文字となって繋が

りました。多くのプログラムでは数字と文字を繋げるとエラーになりますが、 JavaScriptは臨機応変に

対処してくれます。

変数－その２

前回は変数の宣言と単純な用い方を説明しました。しかし「変数」という名の通り、変数の中身は常に

変わっていきます。今日はその点について見ていくことにしましょう。

変数の中身を変えてみる

変数に値（数字や文字）を入れるには、「=」を用いるということを話しました。これは代入でしたね。数学

のようにイコール（等しい）では無いので気をつけましょう。

では HTMLの body内に以下のように記入してみて下さい。

上記の場合、変数 nの値が３回変わっています。最初に１を代入しています。 document.write()で書き

出してみると 1 となります。

次に変数 nの値に 2を加えてみました。 n=n+2 というのは数学では成り立ちませんが、 JavaScriptで

は代入なのでＯＫです。「変数 nの値に 2を加えたもの（右辺）を変数 n（左辺）に代入しなさい！」と言う

意味になります。この結果、変数 nの値は 3に変わりました。

13

最後に n++というものがあります。これは n=n+1と同じ意味です。 JavaScriptではこんな書き方をしま

す。この++はインクリメントと呼ばれ大変よく用いますので、この書き方を覚えて下さい。変数 nの値は

4になりました。

数字と同じく、文字についても値を変えていくことができます。全然別の文字列を入れることもできます

し、 +で結んで前の文字列と連結させることもできます。文字の場合はクォーテーションで結ぶのを忘

れないで下さい。

関数を使う

JavaScriptの命令は、関数にして１まとめにすることができます。こうすることにより、同じ処理を繰り返

し使用することができます。また何かの計算をさせて、その結果を出力するためにも使うことができま

す。

関数でまとまった処理を行う

まずは処理を１まとめにしてみましょう。 HTMLのヘッダーに以下のように記入して下さい。

次に BODY内にボタンを２つ配置して、以下のように記入して下さい。

14

上記のサンプルを見て下さい。どちらのボタンを押しても同じアラートが表示されたと思います。このよ

うに関数を指定しておくと、簡単に同じ処理を行わせることができます。

関数の記入法

では詳しく見ていきましょう。関数を指定するのは function です。半角空けて、関数名を指定します。

（上の場合は Aisatuが関数名です）。関数名は好きなものを指定できます。

関数名の後に括弧()をつけます。この中には引数と言うものが入りますが、この説明は次ページで行

います。今回は引数を使わないので空のままにしておきます。

次に半角中括弧{}を付け、その中に処理を記入していきます。よくこの半角中括弧を閉じ忘れてエラ

ーが出ることがあるので、気をつけましょう。これで関数の指定は終わりです。

関数の呼び出し方

関数を呼び出す方法ですが、イベント内の場合は関数名を指定するだけでＯＫです。ボタンの onClick

イベントには関数名しか書いていないと思います。イベント以外の場所に記入する場合は、JavaScript

であることを明示しなければいけません。

●Ａタグ内に記入する場合

クリック

●body 内で記入する場合

関数を記入するのはヘッダーでもBODY内でも構いませんが、私はヘッダーをお勧めします。ヘッダー

は BODYより先に読み込まれるからです。もし関数を呼び出す時に、当の関数がまだ読み込まれてい

ないとエラーが出ます。ということで、関数はヘッダーに記入するのがベターと言えるでしょう。

15

引数の使い方

このページでは引数（ひきすう）について解説してみます。引数は関数を柔軟に活用するために用いる

ことができます。では実際どのように引数を使うのか、見てみることにしましょう。

引数のサンプルスクリプト

まずはヘッダーに下記の関数を、body内には点線より下の部分を記入して下さい。

ここで出てきた jijyo()という関数は、ある数字の２乗を計算する関数です。サンプルを見てみると、

「３の２乗は 9です。５の２乗は 25です。」と表示されると思います。

引数と return

では詳しく見ていきましょう。関数 jijyo()のカッコ内に a という文字が入っています。この aが引数で

す。引数は変数の一種です。関数を呼び出す時には、この aにいろいろな値を代入します。

関数 jijyo()の中身は１行です。 return というのは、値を呼び出し元に返す命令文です。返す値

を returnの後に指定しています。この場合は２乗を求めるので、a*a という計算結果を呼び出し元に返

しています。

16

body内では、２回文字の書き出しをしています。１行目は３の２乗を求めています。 jijyo(3)と記入

していますが、引数 aに 3 という数字を代入している訳です。関数 jijyo()を呼び出して 3×3の結果

を returnで返してもらいます。周りの文字列と連結されて表示されることになります。

２行目は５の２乗を求めています。jijyo(5)と記入しています。引数 aに 5が代入された状態で関数

jijyo()が呼び出され、計算結果を返してくれます。

このように引数を用いることによって、関数を使い回しすることができます。

複数の引数を持つ関数

引数は複数持つ場合もあります。例えば以下のように、面積を計算する関数では２つの引数を用いる

ことができます。

function menseki(tate,yoko){

return "面積は" + tate*yoko + "m2です。";

}

document.write( menseki(10,20) );

今回は tate,yoko という２つの引数を用いました。複数の場合はコンマで区切ります。また returnで返す

値は文字列も指定することができます。

さて、２回に分けて関数を説明してきました。関数にも２種類あったことに気付かれたでしょうか？関数

は returnがある場合と無い場合の２つに大別できます。

私の使っている Delphi というプログラムでは、returnがあるのを「関数」、無いものを「手続き」と言って

分けていますが、 JavaScriptではどちらも「関数」と呼んでいます。

returnの意味について最初はなかなか理解しにくいかも知れません。私もDelphiを扱うまで returnの意

味が分かりませんでした。まあ今は何となく分かるかな…と言うくらいで大丈夫だと思います。将来は

両方の種類の関数を使ったサンプルを掲載していきますので、その時理解を深めていって下さい。

17

if文－その１

これから暫くの間、条件分岐の方法について解説します。まずは最も簡単な条件分岐について考えて

みることにしましょう。それは if文と呼ばれるものです。

英語の ifは「もしも…なら」という意味ですが、 JavaScriptでも同じ意味になります。もしも条件に合って

いるなら処理を行う！というソースを書いてみましょう。

if文のサンプルスクリプト

HTMLの body内に以下のように記入してみて下さい。

上記のスクリプトは、まず最初に変数 nに 10を代入しています。そして、if文を使って nが５より大きい

かどうかをチェックしています。５より大きい場合は、中括弧内の処理を行います。

ifに続いて括弧内に条件を書いていきます。括弧の中の「>」は数学で出てくるので分かりますね。 n

が５より大きいという記号です。 JavaScriptでは比較演算子と呼びます。比較演算子には以下のような

ものがあります。メモしておきましょう。

演算子 意味 演算子 意味

== 式が等しい != 式が等しくない

> 左が大きい >= 左が等しいか大きい

< 右が大きい

18

ifの条件文にあっている場合は中括弧内の処理を行います。この中括弧を閉じ忘れるとエラーが起き

るので気をつけましょう。なお、処理文が１行だけの場合は中括弧を使わずに書くことができます。

if ( n > 5 ) alert("５より大きいです！");

上記の if文はこのように書き換えることができます。しかし最初のうちは中括弧を付ける癖を付けてお

いた方が良いような気がします。上記のソースを書き直して、nが５以下にしてみましょうか。この場合

は条件に合っていないので、続く処理が行われません。

var n=10;

if ( n

19

サンプルを見ると、「３以上です！」と表示されたと思います。条件に当てはまらなかったので、else とい

う部分の後の処理が実行されたことになります。では詳しく見てみましょう。

まずは変数 nに 5を代入しています。そして if文の条件に「n

20

switch文

今まで勉強してきた条件分岐の if文は、2通りにしか分岐できませんでした。即ち「条件に合っている」

「条件に合っていない」の 2種類です。これ以上分岐させるには、if文を何重にも重ねて書く必要があり

ます。

ここで解説する swich文は、一回で何通りにも分岐させることができる条件分岐命令です。では switch

文を使って、「本日の曜日」を表示する方法について学んでみることにしましょう。

switch文のサンプルスクリプト

HTMLの body内に、以下のように記入してみて下さい。

上記のサンプルを見てみると、本日の曜日が表示されると思います。曜日取得の部分は別のところで

詳しく説明しますが、変数 TODAYに今日の日付データ一式を格納し、変数WEEKに TODAYの中の

「曜日」にあたるデータを代入しています。

曜日に該当するデータは数字で表されます。日曜日が 0で月曜が 1，…，土曜日が 6 となります。この

数字を調べて条件分岐させると、本日の曜日を表示させることができるわけです。

21

switch文の説明

では switch文を見てみましょう。switchの後に括弧があって、そこに条件となる変数等を指定します。

上の場合は、WEEKに入っている数字が分岐対象となります。 switchによる条件分岐群一まとまりは、

中括弧で囲みます。

次に、各条件は case という文字の後ろに指定します。上記の場合は、６つの条件に分けています。

caseの後に空白を挟み、WEEKの値を記入します。そして半角コロン「:」を記入し、その後に条件に合

った場合の処理を記入します。

case内の条件の最後に break というのがあります。これは、switch文を抜け出しなさいという命令文で

す。 break は必ず記入しなければなりません。例えば上記の式で WEEK の値が日曜日（0）だとします。

まず case 0:内の処理を実行します。ここで breakが無いと、後の case 1,2,3…と全ての条件の処理も実

行してしまいます。そうならないよう、breakで抜け出すようにします。

最後の行に、default というのがあります。これは、その他の条件という意味です。 case文でWEEK値

が0～5まで分岐していますが、それ以外の数字の場合はdefault内の処理を実行することになります。

土曜日はWEEKの値が 6になるので、defaultの処理が実行されるわけです。

上記では case文（default文）を１行で書いていますが、別に複数行に分けて書いても構いません。最後

に breakを入れるのを忘れないようにしてください。

以上で条件分岐文は終わりです。次から繰り返し文を説明しますが、その前に配列変数について述べ

ます。配列と繰り返し文は相性が良く、一緒に用いることもよくあります。

配列

今回は配列について解説していきます。配列は、順番の付いた変数だと思って下さい。配列は

JavaScriptにおいてよく用います。配列を上手に使うと、すっきりしたスクリプトを書くことができます。

22

配列を使ってみる

では HTML ファイルを作って、body内に以下のように記入してみて下さい。

サンプルを見てみると、本日の曜日が表示されると思います。

配列の説明

では上記のスクリプトを詳しく見ていきましょう。

まず配列 YOBIを、YOBI = new Array()と書いて宣言しています。これで配列 YOBIは、連番の

付された変数を持つことができます。

次に配列 YOBIへ順番に値を代入していっています。配列の時には変数のあとに大括弧[]を記入し、

その中に配列の何番目かを記入します。間違えやすい点ですが、配列は 0から数え始めます。これで

配列 YOBIには日曜日～土曜日までの値が格納されました。

23

その次は前項で出てきた曜日を求めるスクリプトです。変数WEEKに曜日に該当する数字が代入され

ます。

最後に曜日の書き出しです。配列YOBIの何番目を書き出すかを指定するのに、やはり大括弧[]を用

います。大括弧の中には変数WEEKが入っています。もし今日が木曜日であればWEEKの値は 4に

なるので、 YOBI[4]を指定していることと同じになります。予め配列には該当する曜日を代入してい

るので、すんなりと今日の曜日を書き出してくれるわけです。

配列の値を指定する方法

上記のように配列の各値を１つずつ代入することもできますが、ダイレクトに値を指定することもできま

す。その場合は下のように記述します。

YOBI = new Array("日曜日","月曜日","火曜日",…,"土曜日");

new Arrayの括弧の中に順番に値を記入していきます。値と値の間は半角コンマで区切ります。こち

らの方が楽に値を代入できると思います。

また下のようにカッコ内で改行することができます。ただし値と値の間で改行しないとエラーになりま

す。

YOBI = new Array(

"日曜日",

"月曜日",

"火曜日",

"水曜日",

"木曜日",

"金曜日",

"土曜日"

);

このような記述方法を取る時によくミスをするのは、一番最後の値の後ろに勢い余ってコンマを入てし

まうことです。そうするとエラーになるので、気をつけて下さい。コンマは値と値の区切りであることを忘

れないで下さい。

24

このようにして配列を指定することができます。配列は次に出てくる for文（繰り返し文）と組み合わせる

ことにより威力を発揮します。プログラムにおいて配列と繰り返し文は避けて通れない重要な命令です。

しっかり理解できるよう頑張って下さい。

繰り返し１－for文

ここでは繰り返し文を解説していきます。繰り返しは for文とwhile文といったものがありますが、このペ

ージでは for文を説明します。

for文のサンプルスクリプト

では HTML ファイルを作って body内に以下のように記入なさって下さい。

サンプルを見てみると、「繰り返し文です。」と言う文字が 10行表示されたと思います。これは for文で

同じ処理を 10回繰り返したからです。では詳しく見ることにしましょう。

for文の説明

上記のスクリプトにあるように、繰り返しを指定するのは forを用います。中括弧内の処理を繰り返す

ことになります。 forの後の小括弧内に、繰り返し方法を指定します。カッコ内は３つの区分がありま

す。

最初の区分では、「i」という変数に 1を代入しています。繰り返しの指定では iを用いるのが普通です

が、他の文字でも構いません。そして半角セミコロン;で区切ります。

次の区分では、繰り返しの条件を指定します。上記の例では、iの値が 10以下の場合に繰り返すよう

指定しています。そしてまた半角セミコロンで区切ります。

25

最後の区分は、iの値の増減を決めています。通常は上記のように i++にします。この結果 for文内の

処理を１回繰り返すごとに iの値が 1プラスされていきます。 iの値が１から始まって、10になるまで

（つまり 10回）繰り返されることになります。以下にまとめてみます。

for ( iの初期値 ; 繰り返し条件 ; iの値の増加方法 ) { 処理 }

for文の意味は分かったでしょうか？しかし上記のようにただ同じ文字を繰り返すのも能が無いですよ

ね。そこで登場するのが配列です。 for文は配列と組み合わせると非常に効率的に処理を行えます。

配列との組み合わせ

for文と配列を組み合わせたスクリプトはよく出てきます。以下に、簡単に表を作る方法を載せてみる事

にしましょう。

var rank=1;

var Mt = new Array(

"富士山",

"白根山",

"奥穂高岳",

"間ノ岳",

"槍ヶ岳"

);

document.write('');

for (i=0;i

26

別に rank という変数を使って順位の部分を書き出しています。 for文の最後に rank++を入れて、一回

処理されるごとに１ずつ増やしているわけです。わざわざ変数 rankを指定しなくても iを使えばいいの

ですが、ちょっと細工がいるので今回はこのようにしました。

continue と break

繰り返し文では、繰り返し処理から抜ける breakと、繰り返し処理の先頭に戻る continueというものがあ

ります。実際にソースを見てみると、分かりやすいと思います。

for(i=1;i

27

while文－条件に合うまで繰り返す

繰り返し回数が分からない場合は、ある一定の条件を指定し、その条件を満たしている間繰り返すと

いう方法をとります。例えば「1+2+3+…で幾つまで足すと合計が５桁になるか」と言う問題を解いてみま

しょう。

HTML ファイルを作り、body内に以下のように記入してみて下さい。

サンプルを見てみると、１４１という答えが得られました。では上のソースについて詳しく見てみましょ

う。

while文の書き方

まずは２つの変数の宣言です。 numには連番を、gokeiには numを加えていった合計を代入していき

ます。

次に while文が登場します。 whileの後に括弧( )がありますが、その中に条件を記入します。上記の

場合は、gokeiが 10000より少なければ、 中括弧内の処理を繰り返すことになります。 whileの書き方

をまとめると、下のようになります。

while ( 繰り返しの条件 ) { 処理 }

28

中括弧内の処理を見てみると、まず最初に numの値に１加えています。そして gokeiに加えています。

この処理の順番をひっくり返すと、 numの値が１つ大きくなってしまうので失敗です。どうしてそうなる

かは考えてみて下さい。

最後に、５桁になった時点での numの値を書き出しています。

このような while文は、ローン返済の計算をしたり、ページ内のリンク数を調べたりといった色々なケー

スで活用することができます。 for文と共にしっかり覚えておきましょう。

次のページでは基礎編の最後として、 JavaScriptを外部ファイルに記入する方法を説明いたします。

JavaScriptの外部ファイル

このページでは JavaScriptを外部ファイルで指定する方法について解説します。外部ファイルにソース

を書いておくと色々なページから参照することができるので、良く使う関数などを記入しておくと非常に

便利です。

例えば更新履歴を書き出す関数や、サブウィンドウを出す関数などは、様々なページで使える関数で

す。これらを外部ファイルに記入しておけば、あとはリンクを張るだけで関数を呼び出せます。

外部ファイルの使用方法

記入と保存

外部ファイルは JavaScript専用のファイルになります。従って、HTMLの中に JavaScriptを埋め込む時

に使った下のタグを記入する必要はありません。直接 JavaScriptのソースを書いていきます。

外部ファイルを保存する時に、拡張子を.jsにします。こうすることによって、JavaScript専用ファイルに

なります。 WindowsXPでは下のようなアイコンのファイルになります。

29

外部ファイルの参照の仕方

外部ファイルを参照する場合は、HTMLのヘッダーに以下のリンクを挿入するだけです。

複数の外部ファイルを参照したい場合は、上記のリンクを２つ，３つ…と並べればＯＫです。あとはイベ

ントタグや A タグなどで関数を呼び出すことができます。

外部ファイルを使ったサンプル

では更新履歴を表示する関数を外部ファイルで書いてみましょう。まずは外部ファイルの方を作ってみ

たいと思います。以下の４行を書いて、「modi.js」というファイル名で保存して下さい。

function Koshin(){

var hiduke=document.lastModified;

document.write(hiduke);

}

上記の document.lastModified というのがファイルの更新日時を調べるスクリプトです。それを変数

hidukeに入れて、document.writeで書き出しています。

30

次に、JS ファイルを保存したのと同じ場所に HTML ファイルを作ってみましょう。 HTMLに以下のよう

に記入してみて下さい。

（ヘッダーに）

（body 内に）

サンプルのように、更新日時が表示されていますか？表示されていれば成功です。因みに日時の表示

形式はブラウザによって違うので、実際に活用するにはもう一工夫必要かもしれません。

ここまでで JavaScriptの基本編は終わりです。

31

JavaScirptダイアログ編

confirmで正誤クイズを作る

さて、ここからダイアログを使ったプログラムを組む練習をしてみましょう。すでに alertは基礎編で出て

きたので割愛します。ここでは confirm というダイアログを使ってみます。これはユーザーに選択を促す

ダイアログです。

上図のようなダイアログがでます。処理の前に確認を取ったりする時に使います。

confirmの使い方

まずは confirmを使い方を解説しておきます。以下のように HTMLの body内に書いて下さい。

解説しますと、まずユーザーの選択（ＯＫかキャンセルか）を入れる flg という変数を宣言しています。

この変数は boolean型という型にしようと思います。この型は真（true）か偽（false）のどちらかしか入ら

ないものです。

32

次に confirm()が出てきます。この括弧内の文字がダイアログで表示されます。文字列はクォーテ

ーションで囲むのが約束ですね。そしてユーザーがＯＫを押すと、変数 flgに真（true）が、キャンセル

を押すと偽（false）が代入されます。

最後に if文を使って変数 flgを判断します。 trueであれば、背景を変更します。上述の

document.bgColorでページ背景色を変更できます。

正誤クイズを作ってみる

では、正誤クイズを作ってみたいと思います。５問連続で出してみましょう。 HTMLのヘッダーに以下

の関数を記入してみて下さい。

//問題を配列に入れる

var Q=new Array(

"水を電気分解すると水素と酸素が出る。",

"地球上で最も多い元素は炭素である。",

"金の元素記号は Gd である。",

"血液は骨の内部で作られる。",

"動物細胞に細胞壁は無い。"

);

//答え（正誤）を配列に入れる

var A=new Array(true,false,false,true,true);

function Quiz(){

var ten=0; //点数を入れる変数

//５問連続出題

for(i=0;i

33

あとは、body内で関数 Quiz()を呼び出します。

では解説してみます。まずは配列 Qに問題を、配列 Aに解答（trueか falseか）を入れています。 配列

を使うのは、for文と共に連続出題するためです。

そして、関数 Quiz()の宣言です。関数内でまず点数を入れる変数の宣言をしています。変数 tenを宣

言し、初期値 0を代入します。

次に for文を使って５連続で問題を出します。（配列を使っているのでiの取る値は 0から始まります）。

そして confirmのカッコ内には Q[i]を指定し、問題をダイアログで表示します。

今回は cnfirmの選択結果を変数に代入せず、ダイレクトにif文で真偽を判断します。判断値はA[i]

となっています。配列Aは配列Qの問題の答えに対応していなければいけません。正誤が一致すれば、

変数 tenの値に 20を加えます。

最後に alertで結果を出力しています。

あとは tenを判断して 100点ならパスワードを出したり、 0点なら罰ゲームをさせたりすることもできま

す。いろいろ工夫してみましょう。

promptで名前を表示する

あるサイトを訪れた時、インプットボックスが現れて名前の入力が求められたという経験はありません

か？入力すると自分の名前がサイト内に表示されたりしますね。ここではそんなインプットボックスを出

す方法について解説してみます。

インプットボックスはうちのサイトのクロスワードとか、パズル全般のパスワードを表示するのに用いて

います。色々と使い道があるので、是非覚えて下さい。

Amazonベストセラー

DVD付 モムチャンダイエット～カラダが変われば、人生が変わる!チョン・ダヨン (著)

インプットボックスを出すには、prompt という命令を使います。 prompt を使って名前を入力してもらい、

入力文字をページ上に表示するサンプルを作ってみることにしましょう。

promptのサンプルソース

HTMLの body内に以下のように記入して下さい。

34

サンプル（別窓）

上から順に解説してみましょう。まず変数 strを宣言します。これはビジターが入力してくれた文字を

入れるための変数です。

次に prompt()でインプットボックスを出します。括弧内は２つの区分があります。最初の部分は説明

文を記入し、後ろの部分は入力枠に表示する文字を指定します。今回は入力枠に何も表示する必要

が無いので、空にしています。文字列ですからクォーテーションで囲み、２つの区分の間は半角コンマ

で区切ります。

prompt("説明文","最初に表示する文字");

次に、ビジターが何も入力せずにＯＫを押した場合の処理を書きます。 if文で strを調べ、空であれば

「名無しの権兵衛」を代わりに代入します。

最後に document.writeで歓迎文を書き出します。上のサンプルでは３回に分けて書いていますが、こ

れは画面の横幅の関係で１行で書けなかったためです。別に１つにまとめて書いてくださって構いませ

ん。

35

キャンセルを押された時の処理

さて、上記のソースのままだと、インプットボックス上でキャンセルを押された場合に不具合が出ます。

試しにやってみると分かりますが、null と表示されると思います。

この null というのは、データが無い状態を表します。ＯＫを押した場合は、空ですが一応文字列デー

タ""が代入されます。しかしキャンセルを押された時はそのデータすら無い状態なのです。

ということで、上記ソースの if文の後に、もう１つチェック文を付け加えましょう。

if (str=="") str="名無しの権兵衛";

if (str==null) str="名無しの権兵衛";

以下のようにまとめて書くことも可能です。‘||’は or（どちらか）という意味です。

if ( (str=="") || (str==null) ) str="名無しの権兵衛";

これでキャンセルを押されても大丈夫です。 promptでキャンセルを押された場合は null という状態に

なることを覚えておきましょう。

パスワード入力で秘密のページへ

ここでは promptを用いてパスワードを入力してもらい、秘密のページへジャンプさせる方法について解

説してみます。と言っても、JavaScriptで作るものはお遊び程度なので、ちょっと知識のある人であれば

簡単に見破られてしまいます。あまり重要なページには用いないようにしましょう。

パスワード入力による移動

では、「abcde」というパスワードを入力すると隠れページにジャンプするソースを書いてみましょう。

36

location.href = "kakure.html";

}else{

alert("パスワードが違います！");

}

// -->

ソースを見ていきましょう。最初に変数 pwを宣言しています。そして promptでインプットダイアログを出

し、パスワードを入力してもらいます。入力された文字は、変数 pwに代入されます。

次に if文で、pwがパスワード「abcde」と等しいかチェックします。等しい場合は location.hrefで隠れペー

ジに移動し、等しくない場合はアラートを出します。

しかしご覧の通り、ソースを見るとパスワードも隠れページの URL もバレバレですね。 外部ファイルに

記入すれば少しはマシですが、ちょっと知識のある人であれば外部ファイルを覗けますからあまり意味

がありません。では、もう少しバレ難い方法について調べてみましょう。

バレ難いパスワード移動方法

ここで紹介する方法は、私が JavaScirptを勉強した「イヌでもわかる JavaScirpt」で紹介されていた方法

です。なかなか考え抜かれた方法だと思います。

37

promptでパスワードを入力してもらうまでは同じです。違うのは飛び先指定の所です。 「パスワードの

文字＋拡張子」がそのまま飛び先URLになっていますね。これだとソースを見てもパスワードがバレる

ことはありません。当然隠れページはパスワードと同じファイル名になります。（パスワードが「abcde」な

ら、隠れページは abcde.html とします）。

まあこれで完璧なように見えますが、実際はフリーの解析ソフトなどを使っても隠れページが見つかっ

たりすることがあります。遊び程度に用いるのが無難でしょう。

履歴・リンク編

location.href（リンク）

ここから、リンク関係の JavaScriptについて解説していきます。まず始めは、普通にリンクを貼る方法で

す。 と動作は同じです。 FORMのボタンにリンク指定したりする場合に使います。

location.hrefの記述

ではボタンにリンクを指定してみたいと思います。 HTMLの body内に以下のように記入してみて下さ

い。

38

上記のサンプルは、関数 JUMP()を作成しています。 confirmでリンク先にジャンプするか確認するダ

イアログを表示します。

確認ダイアログでＯＫが押された場合、location.href=で指定したURLにジャンプします。 URLは文字

列なので、クォーテーションで囲む必要があります。

最後に FORM内にボタンを配置し、 onclick イベントで関数 JUMP()を呼び出します。

フレームの場合

フレームの場合は、location.hrefを使ってフレームを解除することができます。以下のように先頭に文

字を付け足します。

//全フレームを解除する場合

top.location.href="URL";

//親フレームを解除する場合

parent.location.href="URL";

HTMLの target属性に指定する値を思い浮かべれば、簡単だと思います。このように location.hrefは

HTMLの A タグと同様の働きをさせることができます。

location.hrefは単独で用いることもあれば、いろいろな処理と組み合わせて用いることもできます。例え

ばクイズを作ったとしましょう。全問正解するとパスワードが載せられた特定のページにジャンプさせた

りすることができます。このように使い道は色々とあるので、しっかり覚えて下さい。

セレクトボックスでナビゲーション作成

前回 location.hrefでリンクを貼る方法について学びました。ではそれを応用して、セレクトボックスによ

るナビゲーションを作ってみましょう。セレクトボックスによるナビは時々見かけますよね。

HOME

↑こんなタイプのナビです。目的のものを選択すると、そのページに飛びます（上記のセレクトボックスに

はリンクを張っていません）。

セレクトボックスでリンク先を指定する

39

では実際にソースの書き方を解説します。以下のような関数とフォームを、body内の表示したい部分に

記入しましょう。勿論関数類はヘッダーでも構いません。

HOME

JavaScript 入門

さくさくＨＰ作り

40

ではまず formから解説していきます。 JavaScript と formを連動させる場合は、 form タグと select タ

グに name属性を指定しなければいけません。上記では form タグに「navi」，select タグに「contents」と

いう名前を付けました（名前は何でも構いません）。そして選択項目（option タグ）を３つ設けています。

選択項目が変更になった時 onchangeイベントが発生するので、そこで関数 SelectNavi()を呼び出

します。

次に、JavaScirpt部分を見ていきます。まずは配列に、ジャンプ先の URLを指定していきます。配列

jpURLに、option タグの上から順に対応する URLを記入していって下さい。

次に、リンク先へジャンプさせる関数 SelectNavi()の宣言です。最初に変数 numを宣言しました。

これは何番目の項目が選択されたかを入れる変数です。

次にセレクトボックスの何番目の項目が選択されたかを調べます。 documentの後に、formと selectボ

ックスの name属性値が続きます。最後に selectedIndexを記入します。これが選択項目の番号を

取得するものです。 Iが大文字ですから気をつけましょう。

document.(formの name属性値).(selectの name属性値).selectedIndex;

最後は location.hrefでジャンプさせます。ジャンプ先に jpURL[num]を指定することによって、セレクトボ

ックスの選択項目番号が配列の何番目の URLに該当するかを決定する仕組みです。

ナビゲーションは外部ファイルで

こうしたナビゲーションを全てのページに置いておくと、ビジターに親切ですね。しかし全てのページに

form,select,optionを記入するのも面倒です。 optionの数が上記のように３つということは無く、普通は

もっと多いからです。コンテンツを追加した場合は全てのページを修正することになり大変です。

そんな時は、全てを外部ファイルで操作しましょう。フォーム関連のタグも document.write()で書

き出してしまえばいいわけです。外部ファイルを１つ作っておけば、各ページから読み込んですぐにナ

ビを設置できます。修正も外部ファイルのみ変えればＯＫです。

しかし、全てのページに同じタグを書くと不具合が生じる場合があります。例えば上記のサンプルで

HOMEを選んで下さい。ジャンプしませんね。これは選択項目が変更されなかったので、onchangeイベ

ントが発生しないからです。 HOME以外のページから HOMEに戻ろうとしても、戻ることができませ

ん。

41

ということでこの問題を解決するために、 option タグの１番目は「コンテンツ一覧」とかにし、リンクを張

らないでおくと良いでしょう。以下のリンク先に、問題を修正した状態の外部ファイルの記入例を載せて

おきます。

option タグに１項目追加しています。連動して jpURL配列も１番目にダミーを作ります。リンクさせると

きは、 if文を使って１番目の項目（numが 0）が選択された場合はリンクしないようにしています。

あとは各ページから外部ファイルにリンクし、目的の場所で関数 FormWrite()を呼び出せばＯＫです

ね。因みに FormWrite()内で document.write()が頻出していますが、配列と for文を使えばも

う少しすっきりしますよ。

戻る・進む・更新ボタンを作る

ここでは、ブラウザの戻る・進む・更新といったボタンと同じ機能を持ったボタンを、 JavaScriptで作って

みたいと思います。特に「戻る」ボタンなどは、色々な所からリンクされているページに使うと威力を発

揮します。

「更新」ボタンはリンクなどで出てきた locationを使いますが、「戻る」と「進む」は history というものを使

います。英語で「履歴」という意味ですね。

戻る・進む・更新ボタンの作り方

戻るや進むボタンのソースは１行なので、 HTMLのボタン内に直接書きこむことができます。が、ペー

ジの横幅の関係上、一応関数形式にして書いています。 外部ファイルに関数を記入しておけば、全て

のページで使えるので便利かな？まあそんなに変わらないでしょうけどね。

42

}

//更新

function Koshin(){

location.reload();

}

// -->

上記のように、history.back()が「戻る」， history.forward()が「進む」，

location.relord()が「更新」を意味します。それぞれ関数にしています。それをフォームのボタン

内にある onclick イベントで呼び出してやればＯＫです。

当然ながら、戻るページが無い（進むページが無い）という時には移動できません。ということで、今回

サンプルページは用意していません。新しいページを開いた場合、戻るも進むも使えませんのでね。こ

のページ内のボタンでテストしてみて下さい。

複数ページ飛び越えて移動する

historyには、複数のページを飛び越えて戻ったり進んだりする機能もあります。何に使えるかは分かり

ませんが、知識として取り入れておくと良いでしょう。

43

}

// -->

履歴を指定数だけ移動するには、history.go()を使います。 カッコ内には移動ページ数を入れま

す。負の数を入れると戻り、正の数を入れると進みます。上記の場合は引数 numを指定し、関数呼び

出し時に numに移動数を代入しています。それが history.goのカッコ内に代入される仕組みです。

戻れないページ

ここでは、ブラウザの「戻るボタン」を押しても戻ることのできないページを作ってみたいと思います。こ

の機能は検索エンジンなどで望まないページにアクセスされた時に、強制的に TOPページへジャンプ

させたりする時に使います。

戻れないページを作るには、ブラウザの履歴に URLを登録させないようにします。Ａタグや

location.hrefを使うと現在のページが履歴に残るので、 location.replace()というものを使います。

location.replace()でリンクさせる

では、location.replace()を使ってリンクボタンを作ってみましょう。 HTMLの body内に以下のように記

入してみましょう。

44

上記のサンプルボタンを押すと、うちのサイトの TOPページへ移動します。そこでブラウザの戻るボタ

ンを押しても、このページに戻ることができません。確認して下さい。戻れなくなりますが（汗）

location.replace()の場合は、後ろの括弧内にジャンプ先を記入します。 location.hrefは「=」で指定しま

すが、方法が違うので注意しましょう（私もよく間違えます）。

ページの強制移動

では検索エンジンで下層ページに来た場合に、 TOPへ強制移動させる方法について掲載してみま

す。

この場合はまずどこからリンクしてきたかを調べて、 URLに「search」という文字が含まれていると TOP

ページに強制移動させます。戻るボタンを押されても履歴にURLは登録されていないので、ジャンプ元

のページではなくその前の検索結果ページに戻ります。

強制移動するページの body内の一番上に、次のように書いておきます。

45

// -->

では上から解説していきます。まず直前のページの URLを調べるには、document.referrerを使いま

す。 URLを変数 strに代入しています。

次に、特定の文字が含まれているかどうか確かめるため indexOf()を使います。調べたい文字列を

前に書き、ピリオドで結んで indexOfを書きます。カッコ内は最初に調べたい文字列を、次に文字列

の検索スタート位置を書きます。スタート位置は通常 0でＯＫです。

検索対象文字列.indexOf(検索文字列,検索スタート位置)

もしも検索文字列が見つかったなら、変数 sflgに文字列の位置（前から何番目の文字か）が入ります。

見つからない場合は-1が入ります。

最後に if文で、sflgを調べます。 slfgが-1（search と言う文字が見つからなかった場合）はそのまま、

見つかった場合は location.replace()で強制移動します。移動先はご自身のサイトの TOPページ URL

にして下さい。

まあこのようにして強制移動させられますが、たいていの場合はお客さんを逃がすことになります（汗）。

ということで、あまり多用しない方が良いでしょう。

インラインフレームのリンク指定

インラインフレームに表示するサイト URLを変更する方法について見ていきましょう。インラインフレー

ム内のURLを変更するのは、簡単そうで実はHTMLでできません。ただのフレームではできるのに変

ですね。

JavaScriptを用いると、インラインフレーム内の URLを自由に変更できます。比較的実用性の高いテク

ニックだと思うので、是非覚えて下さい。ただし、他人のサイトを表示するのはご法度なので、あくまで

自分のサイト内のページに留めておきましょう。

Amazonベストセラー

10年前の顔になる『造顔マッサージ』を一挙に紹介。田中宥久子の造顔マッサージ (DVD付)

リンク変更のサンプル

では HTMLのヘッダーに、以下のように記入してみて下さい。

46

次いで、body内に以下のソースを書き込みましょう。

パズルの部屋へ

サンプルをご覧下さい。最初はうちのサイトの TOPページが表示されていますが、「パズルの部屋へ」

というリンクを押すと、パズルの部屋が表示されますね。インラインフレーム内のリンク先が変更された

からです。

リンク変更の仕組み

では上記のソースを詳しく見ていきましょう。

最初は関数 ifrの宣言をしています（関数名は iframeの略号のつもり…）。 引数 jpURLを指定し、こ

こにリンク先を記入するようにしています。

関数内は１行だけです。最初の waku というのは、インラインフレームの name属性で指定した値です。

該当のインラインフレームのリンク先（location）に、jpURLを指定します。 locationを location.hrefにし

てもＯＫです。

47

あとは a タグ内で関数 ifrを呼び出して、引数にパズルの部屋の URLを指定してやっています。クリッ

クすると、パズルの部屋に飛びます。

ウィンドウ編

サブウィンドウを表示する

ここでは、JavaScriptでサブウィンドウを表示する方法について解説します。 HTMLでも別ウィンドウは

出せますが、 JavaScriptを利用するとウィンドウの位置や大きさを指定できます。何かと使い道の多い

スクリプトですので、是非マスターして下さい。

Amazonベストセラー

10年前の顔になる『造顔マッサージ』を一挙に紹介。田中宥久子の造顔マッサージ (DVD付)

普通にサブウィンドウを表示する

まずは普通にサブウィンドウを出してみたいと思います。 HTMLの target属性と同じ働きをします。ヘ

ッダーに以下の関数を記入してみて下さい。

そして、BODY内で関数を呼び出します。（下記例のように）

上記ボタンを押すと、1つ上の階層の index.html、ここでは JavaScript入門の TOPページが表示されま

す。ではサブウィンドウを出すスクリプトを解説してみることにします。

48

window.openの解説

上記スクリプトに出てくる window.open()というのが、サブウィンドウを出す命令です。カッコ内には、最

初に移動先のURLを、次はウィンドウ名を指定します。どちらも文字列ですから、クォーテーションで囲

います。

window.open("移動先 URL","ウィンドウ名")

ウィンドウ名は、HTMLのターゲット名と同じです。同じウィンドウ名を指定すると、そのウィンドウに指

定したページが表示されます。ウィンドウ名を空にすると、target="_blank"と同じことになります（下記）。

window.open("../index.html","");

また、サブウィンドウを開く関数は汎用性を持たせるため、普通は引数を用いて以下のようにします。

これで関数を呼び出す時、引数に URLを指定すればどのページでも表示できます。よく使う関数は外

部ファイルにしておくと便利です。