Contents

も く じStep 01 JavaScriptの概要と記述のルール ……………………… 6
1.1 JavaScriptの概要
1.2 JavaScriptを記述する場所
1.3 JavaScriptを記述する際のルール

Step 02 イベントハンドラの利用 …………………………………… 12
2.1
2.2
2.3
2.4
2.5

イベントハンドラとは…？
クリックでJavaScriptを実行 onClick
マウスの移動でJavaScriptを実行 onMouseOver、onMouseOut
ページが表示された直後にJavaScriptを実行する onLoad
その他のイベントハンドラ

Step 03 関数の基本 …………………………………………………… 16
3.1
3.2
3.3
3.4

関数とは…？
関数の作成
関数名に指定できない文字
イベントハンドラから関数を呼び出す

Step 04 変数の宣言 …………………………………………………… 20
4.1
4.2
4.3
4.4

変数の宣言
変数に数値を代入する
変数に文字を代入する
変数の表示

Step 05 変数の演算 …………………………………………………… 25
5.1
5.2
5.3
5.4
5.5

演算子の記述プログラムならではの記述方法
インクリメントとデクリメント
文字の足し算
変数に文字を追加して表示する

Step 06 配列 …………………………………………………………… 29
6.1 配列とは…？
6.2 配列の宣言
6.3 配列に値を代入する

Step 07 関数の引数 …………………………………………………… 32
7.1
7.2
7.3
7.4

関数の引数とは…？
引数の指定方法
引数を活用して関数を汎用化する
複数の引数を指定する場合

Step 08 繰り返し処理 ………………………………………………… 37

8.2 繰り返し処理（for）の記述
8.3 比較演算子
8.4 繰り返し処理の活用例

Step 09 繰り返し処理と文字の表示 ………………………………… 43
9.1
9.2
9.3
9.4

2重ループの繰り返し処理
ホームページに文字を表示する document.write()
document.write()でHTMLタグを出力する
JavaScriptで九九の表を作成する

Step 10 条件分岐−1 ………………………………………………… 49
10.1
10.2
10.3
10.4

条件分岐とは…？

if文の記述方法
if 〜 else で処理を2つに分岐させる
if 〜 else のサンプルプログラム

Step 11 条件分岐−2 ………………………………………………… 54
11.1 else if で処理を3つ以上に分岐させる
11.2 論理演算子
11.3 switch文で処理を分岐させる

Step 12 breakとcontinue……………………………………… 60

12.1 breakの利用方法
12.2 continueの利用方法
12.3 while文による繰り返し

Step 13 関数の戻り値 ………………………………………………… 65
13.1
13.2
13.3
13.4

戻り値とは…？
関数から戻り値を受け取るには…？
returnで戻り値を返す
戻り値を利用したJavaScriptの例

Step 14 文字入力とエラー処理 ……………………………………… 71
14.1 プロンプトの利用方法
14.2 プロンプトを活用したJavaScript
14.3 エラー対策用の処理

Step 15 オブジェクト ………………………………………………… 76
15.1
15.2
15.3
15.4
15.5
15.6

オブジェクトとは…？
オブジェクトモデル
オブジェクトと配列
オブジェクトとname属性
メソッドとは…？
プロパティについて

8.1 繰り返し処理とは…？

2

Contents

3

Contents

Step 16 ウィンドウの操作 …………………………………………… 81
16.1
16.2
16.3
16.4

新しいウィンドウを開く window.open()
ウィンドウを閉じる window.close()
オブジェクト変数の作成
ウィンドウサイズの変更 window.resizeTo()、window.resizeBy()

Step 17 スクロールの操作 …………………………………………… 87
17.1 ページをスクロールさせる window.scrollTo()
17.2 現在位置を基準にページをスクロールさせる window.scrollBy()
17.3 スクロールの活用例

Step 18 文字色、背景色の操作 ……………………………………… 92
18.1 文字色、背景色の変更
18.2 ドキュメント情報を表示する
18.3 文字が浮かび上がってくるホームページ

Step 19 画像の操作−1 ……………………………………………… 97
19.1
19.2
19.3
19.4

Imageオブジェクトのプロパティ
thisの利用
onMouseOverイベントで画像を変更する
onMouseOutイベントで画像を元に戻す

Step 20 画像の操作−2 …………………………………………… 101
20.1 Imageオブジェクトの指定
20.2 サムネール画像のマウスオーバーで拡大画像を変更する
20.3 ボタンのクリックで画像の表示サイズを変更する

Step 21 日付、時刻の操作−1 …………………………………… 106
21.1
21.2
21.3
21.4

Dateオブジェクトの作成
Dateオブジェクトから年月日、時分秒を取り出す
現在の日時を表示するJavaScript
更新日時を表示する

Step 22 日付、時刻の操作−2 …………………………………… 111
22.1 日時を指定するメソッド
22.2 指定日までの残り日数を計算するJavaScript

Step 23 フォームの操作−1 ……………………………………… 115
23.1
23.2
23.3
23.4
23.5

4

Formオブジェクトの指定
Formオブジェクトの下位オブジェクトを指定する
テキストボックスとテキストエリア
チェックボックス
テキストボックスとチェックボックスの活用例

Step 24 フォームの操作−2 ……………………………………… 121
24.1
24.2
24.3
24.4

ラジオボタン
ラジオボタンの活用例
セレクトボックス
セレクトボックスの活用例

Step 25 URLと履歴の操作……………………………………… 127

25.1 locationオブジェクト
25.2 locationオブジェクトの活用例
25.3 historyオブジェクト

Step 26 Mathオブジェクト ……………………………………… 131
26.1
26.2
26.3
26.4

Mathオブジェクトとは…？
Mathオブジェクトのプロパティ
Mathオブジェクトのメソッド
乱数を利用したJavaScript

Step 27 stringオブジェクト …………………………………… 137
27.1 stringオブジェクトのプロパティ
27.2 メソッドで文字の書式を指定する
27.3 メソッドで文字にさまざまな処理を行う

Step 28 一定間隔で処理を繰り返し実行する …………………… 141
28.1
28.2
28.3
28.4

setTimeout()の活用
setInterval()の活用
setInterval()の中断
スライドショーの作成

Step 29 クッキーの操作−1 ……………………………………… 147
29.1
29.2
29.3
29.4

クッキー（Cookie）とは…？
クッキーの利用方法
クッキーの有効期限を指定する
クッキーの活用例

Step 30 クッキーの操作−2 ……………………………………… 153
30.1
30.2
30.3
30.4
30.5

複数の値をクッキーに保存するクッキーへの入出力を汎用化するクッキーへ値を書き込む関数「setCookie()」
クッキーから値を読み出す関数「getCookie()」
クッキーに訪問回数と名前を保存する

さくいん ………………………………………………………………………………… 160
演習問題の解答 ………………………………………………………………………… 161

Contents5

Step01

JavaScriptの概要と記述のルール

また、『選択された項目について合計金額を算出する』など、実用的な仕組みをJavaScriptで実現することも可能です。

JavaScriptは、一般的なプログラムのような動作をホームページ上で実現できるスクリプト言語です。JavaScript学習の第一歩となるステップ
01では、JavaScriptの概要、およびJavaScriptの記述方法について学習します。

● 1.1 JavaScriptの概要
必要なオプションをチェックすると…

合計金額が自動的に算出される

ホームページを作成するには、テキストエディタなどでHTMLを記述し、HTMLファイルを図1-2 JavaScriptを利用した実用的なホームページ作成するのが一般的です。また、HTMLファイル内にCSSを記述し、ホームページ内の各要素について書式を指定することも可能です。これらをまとめると、HTMLファイルは以下の2つの

このように、閲覧者の操作に応じて、ホームページにさまざまな処理をプログラミングできる言語から構成されると考えられます。

のがJavaScriptです。
・HTML …… ホームページに掲載する文章や画像を指定したり、ホームページ全体のレイアウトを指定したりする・CSS ……… ホームページ内の各要素について、色やサイズ、枠線などの書式を指定する● 1.2 JavaScriptを記述する場所
もちろん、これらの2言語だけでもホームページは十分に作成できます。ただし、このようにして作成されたホームページは 動きのないホームページ にしかなりません。一方、続いては、JavaScriptの記述方法について解説します。通常、JavaScriptを利用したホームJavaScriptを利用してホームページを作成すると、閲覧者の操作に応じて 動きのあるホーム

ページは、HTMLファイル内にJavaScriptを記述するのが一般的です。たとえば、図1-2の場ページ を作成できるようになります。

合、HTMLファイルの内容は以下のようになります。

たとえば、『ボタンをクリックすると画像表示を変更する』などの演出をJavaScriptで実現す※現時点では、JavaScriptの記述内容を理解できなくても構いません。JavaScriptの記述内容については、後のステップで詳しく解説していきます。

ることも可能です。

▼Sample1̲1.html

ボタンをクリックすると…

図1-1 JavaScriptを利用したホームページの演出表示される画像が変更される

01
02
03
0405060708
0910111213
1415<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><TITLE>体育館の利用料金</TITLE><META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"><STYLE type="text/css"><!-H1{
border:solid 3px #993300;
padding:3px;
color:#993300;

CSS（次ページへ続く）

6

Step 01 JavaScriptの概要と記述のルール

7

16171819202122232425262728293031323334353637383940414243
4445464748
49
50
51

width:400px;}
DIV.st1{
font-size:14pt;
font-weight:bold;}
FORM{margin-left:20px;}--></STYLE>

このように、HTMLファイルには以下の3つの言語を含むことが可能です。
（HTMLファイルに必須となる言語）
CSS・HTML …… ホームページに掲載する文章や画像を指定したり、ホームページ全体のレイアウトを指定したりする（必要に応じてHTMLに追記する言語）
・CSS …………… ホームページ内の各要素について書式を指定する
・JavaScript<SCRIPT language="JavaScript"><!-var total = 4800;
var a = new Array(3);a[0] = 2000;
a[1] = 400;a[2] = 500;
function goukei(i){if(document.f1.elements[i].checked == true){
total = total + a[i];} else {total = total - a[i];}document.f1.elements[3].value = total;}//--></SCRIPT>… 閲覧者の操作に応じて、ホームページの処理をプログラミングする● 1.3 JavaScriptを記述する際のルール
これで、JavaScriptを記述する場所は理解できたと思います。続いては、JavaScriptを記述する際のルールについて解説します。命令文や各種指定などを半角英数字で記述する点はHTML
JavaScript

やCSSと同じですが、JavaScriptでは大文字／小文字が区別されることに注意してください。
そのほか、JavaScriptを記述する際のルールは以下のとおりです。
・<SCRIPT>〜</SCRIPT>の間にJavaScriptを記述する
H T M L フ ァ イ ル 内 に J a v a S c r i p t を 記 述 す る 場 合 は 、 <SCRIPT> 〜 </SCRIPT> 内 にJavaScriptを記述しなければいけません。また、language属性に"JavaScript"を指定し、タグ内の記述がJavaScriptであることを示しておく必要があります。
・コメントを示す<!--〜//-->を記述する</HEAD>SCRIPTタグに対応していないWebブラウザでは、JavaScriptの記述がそのまま画面に表示されてしまう場合があります。これを防ぐには、JavaScriptの記述を<!--と//-->で挟み、<BODY><H1>体育館の利用料金</H1><DIV class="st1">基本使用料（2面、4時間） 4,800円</DIV><FORM name="f1"><INPUT type="checkbox" onClick="goukei(0)">夜間照明（2,000円）<BR><INPUT type="checkbox" onClick="goukei(1)">バレーボール用ネット×2面（400円）<BR><INPUT type="checkbox" onClick="goukei(2)">バレーボール×10個（500円）<BR><BR>
合計金額 <INPUT type="text" size="6" value="4800">円</FORM></BODY>JavaScriptの記述をコメント文として処理する必要があります。

52535455
565758 </HTML><SCRIPT language="JavaScript"><!-：：（ここにJavaScriptを記述）：：//--></SCRIPT>

・JavaScriptは半角文字で記述する
JavaScriptの命令文や各種指定は半角文字で記述します。これらの記述に全角文字を使用すると、正しくJavaScriptが動作しません。

8

Step 01 JavaScriptの概要と記述のルール

9

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

演 習

JavaScriptでは、大文字と小文字が別の文字として認識されます。たとえば「ABC」「abc」「Abc」は、いずれも別の文字となります。HTMLやCSSのように、大文字／小文字を無視し（1）P7の「Sample1̲1.html」に示したHTMLファイルを作成してみましょう。

て記述できない点に十分注意してください。
（2）演習（1）で作成したHTMLファイルをWebブラウザに表示し、チェックボックスの操作に応じて合計金額が変化することを確認してみましょう。

・命令文の最後にセミコロン（セミコロン）を記述し、文の区切りを明確に示す必要が
JavaScriptでは、各文の最後に「;」あります。CSSの場合と同様、改行は無視される点に注意してください。
○正しい記述×間違った記述

var a = 1;
var b = 2;
var c;
c= a + b;

var a = 1
var b = 2var cc= a + b

ワンポイントInternet ExplorerでJavaScriptの実行を許可する
ハードディスクに保存されているHTMファイルをInternet Explorerで閲覧した場合、以下のようなメッセージが表示される場合もあります。

・半角スペース、タブ文字の扱い
JavaScriptでは、連続した半角スペースおよびタブ文字は無視されます。このため、行頭に半角スペースやタブ文字でインデント（余白）を設け、JavaScriptを見やすく記述することも可能です。
このメッセージが表示された場合は、Internet Explorerのセキュリティ保護によりJava

function abc(){
c= a + b;
d= c * 1.05;alert(a);}Scriptが無効になっています。よって、記述したJavaScriptも実行されません。JavaScriptを実行させるには、以下のように操作してセキュリティ保護を解除する必要があります。

クリック

ワンポイント
これを選択

JavaScriptに対応していないWebブラウザへの対応
JavaScriptに対応していないWebブラウザに対して、ページにJavaScriptが含まれていることを示す場合は、<NOSCRIPT>〜</NOSCRIPT>を利用します。このタグ内に記述された内容は、JavaScriptに対応していないWebブラウザにだけ表示されます。
情報バーをクリックし、「ブロックされているコンテンツを許可」を選択します。

<SCRIPT language="JavaScript"><!-：（JavaScriptの記述）：

このようなウィンドウが表示されるので、「はい」ボタンをクリックします。すると、セキュリティ保護が解除され、JavaScriptが実行可能となります。

//--></SCRIPT><NOSCRIPT>
このページにはJavaScriptが使用されています。<BR>
JavaScriptを有効にしてから閲覧してください。
</NOSCRIPT>

10クリック

Step 01 JavaScriptの概要と記述のルール

11

Step02

イベントハンドラの利用
マウス操作などに応じてJavaScriptを実行するには、「どのタイミングでJavaScriptを実行するか？」をHTMLファイル内で指定しておく必要があります。このタイミングを指定するのがイベントハンドラです。ステップ02では、イベントハンドラの指定方法について学習します。

● 2.3 マウスの移動でJavaScriptを実行onMouseOver、onMouseOut

要素の上にマウスポインタが来た際にJavaScriptを実行させるには、onMouseOverイベン
トを利用します。以下の例の場合、マウスポインタを画像の上に移動させると、「北海道の風景写真です！」というメッセージウィンドウが表示されます。

<IMG src="photo01.jpg" onMouseOver="alert('北海道の風景写真です！')">

画像の上にマウスポインタを移動すると…

● 2.1 イベントハンドラとは…？
HTMLファイル内に記述したJavaScriptを正しく動作させるには、JavaScriptを実行するタイミングを指定しておく必要があります。このタイミング指定に利用するのがイベントハンドラです。イベントハンドラには、「マウスでクリックしたとき」「マウスポインタを移動したとき」など、操作内容ごとに個別のイベントハンドラ名が決められています。そして、HTMLのタグ内に以下のような形式でイベントハンドラを記述することにより、JavaScriptを実行するタイミング、および実行するJavaScriptを指定します。

図2-2 onMouseOverイベント
メッセージが表示される

イベントハンドラ名="実行するJavaScript"
これとは逆に、要素の外へマウスポインタを移動した際にJavaScriptを実行させるには、onMouseOutイベントを使用します。
● 2.2 クリックでJavaScriptを実行

onClick<IMG src="photo01.jpg" onMouseOut="alert('北海道の風景写真です！')">

ホームページにある要素をクリックした際にJavaScriptを実行させるには、onClickイベン

画像の外へマウスポインタを移動すると…

トを利用します。たとえば、画像をクリックした際にJavaScriptを実行させる場合、そのIMGタグにonClickイベントを追加し、その値にJavaScriptを記述します。

<IMG src="photo01.jpg" onClick="alert('北海道の風景写真です！')">上の例では、「onClick」の部分がイベントハンドラ名、「alert('北海道の風景写真です！
') 」の部分がJavaScriptとなります。なお、 alert() はメッセージウィンドウを表示する（シングJavaScript命令（メソッド）であり、メッセージとして表示する文字をカッコ内に「'」

図2-3 onMouseOutイベントメッセージが表示されるルクォーテーション）で挟んで記述します。

画像をクリックすると…

● 2.4 ページが表示された直後にJavaScriptを実行する onLoad
ページが表示された直後にJavaScriptを実行する場合は、onLoadイベントを使用します。
onLoadイベントはBODYタグに記述するのが普通であり、この場合、特に操作を行わなくてもメッセージが表示される

自動的にJavaScriptが実行されます。たとえば、次ページの例では、ホームページ全体が表示された直後に「ようこそホームページへ」というメッセージウィンドウが表示されます。

図2-1 onClickイベント

12

Step 02 イベントハンドラの利用

13

<BODY onLoad="alert('ようこそホームページへ')">・onSubmit
フォームのsubmitボタンをクリックした際にJavaScriptを実行します。
・onUnload別のページへ移動する際にJavaScriptを実行します。

ホームページが表示された直後にメッセージが表示される

演 習

図2-4 onLoadイベント（1）以下のようなHTMLファイルを作成し、画像をクリックすると、メッセージウィンドウが表示されることを確認してみましょう。

● 2.5 その他のイベントハンドラ
これらのほかにも、JavaScriptを実行するタイミングに応じて以下のようなイベントハンドラが用意されています。
・onAbort
Webブラウザの［停止］ボタンをクリックした場合などで、画像の読み込みが中断された場合にJavaScriptを実行します。
・onBlur
その要素からフォーカスが離れた際にJavaScriptを実行します。
※フォーカスは、［Tab］キーやマウスのクリックで移動できます。

・onChange

01
02
03
04
05
06
07
08
09
10111213
14
15<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><HTML><HEAD><TITLE>イベントハンドラの練習</TITLE><META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"></HEAD><BODY><IMG src="tahiti01.jpg" onClick="alert('タヒチの写真です！')"></BODY></HTML>

フォームの内容を変更した際にJavaScriptを実行します。
※この演習で使用する画像「tahiti01.jpg」は、以下のURLからダウンロードできます。

・onError

http://www.cutt.co.jp/book/html_818.html

ページや画像の読み込み時にエラーが発生した場合にJavaScriptを実行します。
（2）onClickイベントをonMouseOverイベントに変更し、メッセージウィンドウが表示されるタ・onFocus

イミングがどのように変化するかを確認してみましょう。

その要素にフォーカスが移動した際にJavaScriptを実行します。
（3）onMouseOverイベントをonMouseOutイベントに変更し、メッセージウィンドウが表示される・onReset

タイミングがどのように変化するかを確認してみましょう。

フォームがリセットされた場合にJavaScriptを実行します。
（4）ページが表示された直後にメッセージウィンドウが表示されるようにイベントハンドラを書き換
・onSelectえてみましょう。

テキストボックスやテキストエリア内をクリックし、フォームへの入力が可能になった際にJavaScriptを実行します。

14

Step 02 イベントハンドラの利用

15