ウインドウに文字列や数字を表示させてみましょう。BASICの場合はPRINTという命令がありました。
JavaScriptでは「document.write」を使います。
「document」とは表示している文章自体を表すドキュメント・オブジェクトで「write」は文字列や数字を書き込むメソッ ドです。
オブジェクト指向のプログラミング言語の一つであるJavaScriptではオブジェクトとメソッドを組み合わせてそのオブ ジェクトに対して行う処理を命令します。
document.write(表示する内容);
サンプル・プログラム
<script type="text/javascript">
document.write(100); // 数字を表示する場合
document.write("<br>"); // は改行を表すHTMLタグです
document.write(1+2+3); // 計算式を入れるのもＯＫ！
document.write("<br>HTMLタグを書き込むことも可能<br><font color='#ff0000'>色をつけます。</font>")
// 「"」の間では「"」を使えないので「'」を使います
</script>
上のサンプル・プログラムを実行すると、このようになります。
☆ アラート・ダイアログを表示させるには：
window.alert(表示する内容);
windowは省略可なので、一般には
alert(表示する内容 );
でも同じように実行される。 改行は「\n」を使います。
サンプル・プログラム
<script type="text/javascript"> window.alert(100); // 数字を表示
window.alert("文字列の場合"); // 文字列を表示
window.alert(1+2+3); // 計算結果を表示
window.alert("改行も\nもできます"); // 改行させる場合
</script>
上のサンプル・プログラムを実行すると、このようになります。
☆ 返答を求める・ダイアログ表示させるには：
window.prompt("質問の文言");
省略形として次のようににも書けます。
prompt("質問の文言");
サンプル・プログラム
<script type="text/javascript">
name = prompt("お名前は何ですか") // 質問に対する答えをnameという変数に代入する
alert(name); // nameという変数に入った応えを表示
</script>
上のサンプル・プログラムを実行すると、このようになります。
変数とは数値や文字列、真偽値、オブジェクトなどを代入して、計算や表示、オブジェクトの指定などを行うプログラ ミングにはなくてはならないものです。
もう少し判り易く言えば、変数とは値を格納する箱のようなもので、箱の名前を変数名といます。
ここに、「徳川家康」という文字があり、この文字を「general」という名前の箱の中に入れることを代入と言います。
変数の定義方法は次のように書きます。
var 変数名 ＝ 値；
上の例としては var general ＝ "乃木希典"；
この場合 ＝ は算数で言うイコールを表すのではなく、右側の値を左側の箱に代入することを意味します。
変数名に使用しても良い文字は：
＊ 予約語（JavaScriptで使われる命令など予め決められている文字）以外の英数字
＊ アンダースコア
＊ ＄サイン
従って、変数名には日本語は使えません。
サンプル・プログラム
<script type="text/javascript">
var general = "乃木希典"; // "乃木希典"という文字列をgeneralという変数に代入する
alert(general); // 変数の中にある"乃木希典"という文字列をalertダイアログで表示する</script>
上のサンプル・プログラムを実行すると、このようになります。
配列とは複数の値を包含出来るプログラミングには非常に便利な変数で、「Array」オブジェクトを使って宣言します。 配列を作るには以下のように色々な方法があります。
配列名=new Array() ・・・配列の宣言
配列名=new Array(e1,e2,e3,・・・,en) ・・・直接代入する場合
配列名=[e1,e2,e3,・・・,en] ・・・new Array()を省略して直接代入する場合
配列名=new Array(n) ・・・この場合はn個の配列を宣言する
配列名["Str"]=e ・・・[ ]内に文字列を使用することもできます （連想配列）
nは配列の要素数。e,e1,e2,e3,・・・enは配列の要素。同じ配列の要素に数値や文字列を混在させることも可能。
猶、連想配列を一般的にオブジェクトといい、次のように定義します。通常の配列は添え字が数字に限られますが、連想配列は添え字を文字列とすることが出来ます。
var general ＝ {}; // オブジェクトgeneralの宣言
var general[1]＝ "織田信長"； // プロパティー１に"織田信長"を代入する
var genera[2]＝ "豊臣秀吉"； // プロパティー２に"豊臣秀吉"を代入する
var general[3]＝ "徳川家康"； // プロパティー３に"徳川家康"を代入する
var general[4]＝ "乃木希典"； // プロパティー４に"乃木希典"を代入する
+ 加算
- 減算
* 乗算
/ 除算
% 剰余 割り算の余り
++var インクリメント 代入前に1加算 ++a
var++ インクリメント 代入後に1加算 a++
--var デクリメント 代入前に1減算 --a
var-- デクリメント 代入後に1減算 a--
& AND ビット演算は４バイト整数と見なす
| OR
^ XOR
~ NOT
! 否定
<< 左シフト
>> 右シフト
>>> 0埋め右シフト
+= 複合代入演算子 a+=1・・・a=a+1 a*=5・・・a=a*5
JavaScriptには下表のような色々なオブジェクトを持っています。JavaScriptもC++のようにオブジェクト指向を継承しており、ドキュメントやフォーム、ウインドウなどをオブジェクト（物）として扱います。オブジェクトはそれぞれ
色々な処理ができたり、色々な情報を持っていたりします。これらのオブジェクトを使うことによって、より複雑なプ ログラムを組むことができるようになります。
Array 配列
image 画像
Date 日付、時刻の情報を持っている
links リンク
document 文書
location URL
form フォーム
Math 数学関数 複雑な計算に使われる
frame フレーム
navigator ブラウザ情報
Function 関数
Number 数値
history 履歴
String 文字列 文字列処理に向いる
メソッドはオブジェクトへの命令で次のように使います。
オブジェクト名．メソッド名（パラメータ）;
for(繰り返しパラメータの初期値；繰り返し条件；繰り返しパラメータの加減算方法
{
〔繰り返し処理する内容〕
}
break《繰り返し処理から抜け出します》
繰り返し処理のサンプルのコーディング
<script type="text/javascript">
for(i=0;i<5;i++) // 繰り返し条件が「i<5」の場合
{
document.write(i+" "); // 変数iの内容を書き出す
}
document.write("<br>"); // 改行する
for(i=0;i<=5;i++)document.write(i+" "); // これは繰り返し条件が「i<=5」の場合
document.write("<br>"); // 改行する
for(i=5;i>=0;i--)document.write(i+" "); // 大きい数値から小さい数値への繰り返しも可能です
</script>
実行結果の表示
01234
012345
543210
if(条件式
{
〔条件が成立したときの処理〕
}else{
〔条件が不成立だった時の処理〕
}
条件分岐処理のサンプルのコーディング
<body>
<br><br><br><br><br>
<b>★数字当てゲーム★</b><br><br>
５回以内で数字を当ててね！<br>
<script type="text/javascript">
a=Math.floor(Math.random()*20)+1; // 答えの設定
color=#3333ff>f=false; // フラグの設定
for(i=1;i<
6;i++)
// ５回繰り返し処理
{
document.write(i+"
回目 ");
b=prompt(" >１から２０の範囲で数字を入れてください","");
if({
document.write("
正解！！");
f=true;
break;
// 正解の場合は繰り返し処理から抜ける
}else{
if(a<
b)
{
document.write("
大きいよ！<br>");
}else{
document.write("
小さいよ！<br>");
}
}
}
if(
f==false)document.write("
正解は"+a+"
でした。");
// ↑フラグが「false」のままなら正解を表示
</script>
<
</body>
イベントとはPC上で「マウスをクリックした」、「ページが読み込まれた」など、何かが起きた時に発生するものです。JavaScriptではそのイベントに対して行う処理（イベントハンドラ）をタグの部分で指定します。
| イベントのトリガ | イベントの種類 |
| onClick |
マウスがクリックされた時 |
| onDbclick |
マウスがダブルクリックされた時 |
| onKeydown |
キーが押された時 |
| onKeypress |
キーがしばらく押された時 |
| onKeyup |
キーが離された時 |
| onMousedown |
マウスボタンが押された時 |
| onMouseup |
マウスボタンが離された時 |
| onMouseover |
マウスカーソルがオブジェクトに重なった時 |
| onMouseout |
マウスカーソルがオブジェクトから離れた時 |
| onMousemove |
マウスカーソルが移動した時 |
| onLoad |
ページが読み込まれた時 |
| onUnload |
他のページに移動する時 |
| onFocus |
選択された状態になった時 |
| onBlur |
フォーカスを失った時 |
| onSubmit |
フォームがサブミットされた時 |
| onReset |
フォームがリセットされた時 |
| onChange |
フォームの内容が変更された時 |
| onResize |
ウインドウがリサイズされた時 |
| onMove |
ウインドウが移動された時 |
| onDragdrop |
ファイルがウインドウにドラッグ＆ドロップされた時 |
| onAbort |
イメージの読み込みが中断された時 |
| onError |
読み込みが失敗した時 |
| onSelect |
テキストが選択された時 |
サンプル プログラム
<img src="sample6.gif" onClick="alert('画像がクリックされました')"> // 画像をクリックするとその旨alertが出る。
<body onLoad="funcInit()"> // ページが読み込まれると同時に関数funcInit()が実行される。
関数とはよく使う処理をサブルーチンとして定義することをいいます。
実行させる処理はfunctionオブジェクトを使って次のように<script type="text/javascript">〜</script>の中に定義します。
関数に引数を与えると、その引数を使って処理を行うことが出来ます。
function 関数名(引数１,引数２,・・・,引数n)
{
処理内容
retuen 戻り値
}
サンプル プログラムは： これをご覧ください。
JavaScriptで自動的に動くプログラムを作ろうとすれば「setInterval」または「setTimeout」というメソッドを使います。
「setInterval」は一定時間（割り込み間隔で指定）ごとにある処理（処理命令で定義）を実行させる。
「setTimeout」は一定時間（割り込み間隔で指定）が経過したのちある処理（処理命令で定義）を実行させる。
timerID= setInterval("処理命令",割り込み間隔）
処理命令はタイマー割り込みで実行される命令や関数名
割り込み間隔は、1/1000秒単位
timerIDは割り込み解除に使う。省略可能
「setTimeout」と違い一度実行すると一定間隔に処理命令を実行し続ける
clearInterval(timerID)
処理続行を中止させるために、タイマー割り込みを解除する
timerID=setTimeout("処理命令",割り込み間隔)
内容は「setInterval」と同じだが、実行すると一定間隔で処理命令を１度だけ実行する。
自動的に動くプログラムにするには呼び出された処理命令のなかで「setTimeout」を実行
しなければならないが、連続的に「setTimeout」を実行すると割り込み間隔がずれてしまう
恐れがある。
clearTimeout(timerID)
処理続行を中止させるために、タイマー割り込みを解除する
サンプル プログラムは： ここをご覧ください。
| サイトのトップへ | JavaScriptの目次へ | 第１章へ戻る | 第３章へ進む |