ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）
８/０７日発行 ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.9★
| 関数を作ろう！ |
今回は"自分の関数"を実際に使ってみよう。
このメールマガジンの(vol.6)で関数についてやったね。
今までいくつかの命令を使ってみたけど、それらを組み合わせて自分で関数(命令)を作って使ってみよう。
| ★ 関数を作ろう！Part1 ★ |
まず簡単な関数を作ってみよう。
関数の作り方は、
function 関数名(){ 命令 } |
これが関数を作るプログラムなんだ。
"関数名"は自分の好きな名前を付けていいよ。
（※関数名の右のカッコ()については後でやるので今は丸暗記）
"命令"はその関数の命令を書いてやるんだ。
じゃあ、実際に１つ作ってみよう。
--関数を使った”ボタンを押すと警告ウィンドウ”プログラム--
<HEAD> ←関数は<head>内で作る
<SCRIPT language="JavaScript">
function hello(){ ←helloという名前の関数
alert("こんにちわ"); ←"こんにちわ"と表示する
} ←関数の終わり
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="押して" onClick="hello()">
↑ボタンを押すと"hello()"という関数を実行する。
</FORM>
</BODY>
これはボタンを押すとメッセージが表示されるプログラムだよ。
まず、<head>の中でhello()という関数(命令)を作っているんだ。
書き方はさっき書いたように"function
関数名(){ 命令 }"で作るんだよ。
その関数(命令)の中でalertの命令があるね。
だからこのhello()という関数は、警告ウィンドウに"こんにちわ"と表示するプログラムになるね。
（※今回は短いけど関数の中にはいくらでもプログラムを書いてもいい。）
次にフォームのところを見てごらん、onClickの後の命令がhello()になっているよね。
hello()の中身は、警告ウィンドウで"こんにちわ"って表示する命令だね。
つまり、これはボタンを押したら(onClick)、hello()の命令を実行するということなんだね。
これで”ボタンを押すと「こんにちわ」という警告ウィンドウが表示される”プログラムが作れたよ。
| ★ 関数を作ろう！Part2 ★ |
少し発展すると次のような関数の作り方になる。
function 関数名(引数){ 命令 } |
上のPART1は引数というものがない場合なんだ。
Ｐａｒｔ1の引数がない場合は何も書かなくていいんだけど、()だけは忘れずに書こうね。
（※○：hello() ×：hello ←()がない）
じゃあ、一体引数ってなんだろう？
| 引数（ひきすう） |
引数とは簡単に言うと関数内で使うための変数を持ってくる道具なんだ。
上のプログラムの場合の関数はただ警告を出すだけだったから、別に変数を何も使っていないね。
でももし何かと何かを足したいときや、ユーザー(ページを見てる人)が書いた数字を使って何か処理をしたいときなどはこの引数が必要になるんだ。
次のプログラムを見てみよう。
--関数を使った”足し算”プログラム--
<HEAD>
<SCRIPT language="JavaScript">
function tasu(a,b){ ←tasuという関数にはaとbの変数を使う
document.write(a+b); ←a+b(=3+10)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="a" onClick="tasu(3,10)">
↑上のtasuの関数の(a,b)に入れるのは(3,10)
</FORM>
</BODY>
このように使うんだよ。
上のtasu(a,b)のaとbを引数と言うんだ。
普通なら足し算をするプログラムは、
document.write(3+10)
と書かなくてはいけないね。
でもこのように関数を作っておくと、足し算はtasu(3,10)のようにするだけで3+10を実行してくれるね。
今の場合はそんなに変わらないけど、関数の中身がすごく長い場合、このように関数として作っておくと、たった何文字かでその長い命令が実行できるんだ。
じゃあ、関数を使った問題。
ちょっと難しいかもしれないけど一度考えてみよう！
| ＜問題１＞ [命令]のところを埋めて、１から10まで順に足す命令を作れ <HEAD> ヒント：関数の中で新しい変数をさらに使ってもよい。 |
プログラムは人によっていろいろだからどれが正解というのはない。、
最終的に答えが"55"になれば正解だよ。
| 戻り値 |
次は戻り値についてやってみよう。
戻り値とは、関数内で出てきた結果を元のプログラムに返す(戻す)ための方法なんだ。
戻り値の書き方は次のようになる。
return 戻す値 |
次はdocument.write()を関数の外で書いたときのプログラムだよ。
--関数を使った”足し算”プログラム--
<HEAD>
<SCRIPT language="JavaScript">
function tasu2(a,b){ ←a,bには3,10が入る
c=a+b; ←c=a+b(=3+10)
return c; ←tasu(a,b)からc=13の値が返る(戻る)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<SCRIPT language="JavaScript">
document.write(tasu2(3,10)); ←3,10を上のa,bにいれる。c=13が返ってくる。
</SCRIPT>
</FORM>
</BODY>
横の説明を見ながらプログラムを理解して欲しいんだけど、引数というのは文字(数字)を関数に送るためのものだったけど、
戻り値とは逆に関数から元のプログラムに戻ってくる値のことなんだ。
つまり c
が戻ってくるということは、プログラムとしては
document.write(tasu(3,10)) ⇒ document.write(c) ←return cで戻ってくる。tasu(3,10)がcの値に変わった
になるということだね。
つまり、今回の場合c=13が返ってくるので、
document.write(tasu(3,10)) ⇒ document.write(c) ⇒ document.write(13) ←c=13なので
となる。
少し難しいかもしれないけどここも理解しておこう。
| ★ 変数の範囲 ★ |
最後に変数の範囲についてやっておこう。
変数はどこの変数でも使えるんじゃなくてある範囲が決まっているんだ。
<HEAD>
<SCRIPT language="JavaScript">
a=10; ←関数の外でa=10を宣言した
function sample(){
b=5; ←関数内でb=5を宣言した
document.write(a); ← ○(a=10)
document.write(b); ← ○(b=5)
}
document.write(a); ← ○(a=10)
document.write(b); ← ×（関数の中で宣言しているものを外で使うことはできない）
</SCRIPT>
関数内で宣言した変数は関数の外では使うことができないんだ。
(つまり関数内で宣言している変数は関数内だけでしか使えない)
逆に関数の外で宣言した変数は関数の中でも使うことができるよ。
※関数内の変数を外で使うために"戻り値"というものを使うんだね。
| ＜問題２＞ [命令]のところを埋めて、１から順に足して100を超えた地点で終わる命令を作れ <HEAD> ヒント：100を超えたかどうかはif文を使おう。 |
| ＜まとめ＞ 関数 ：function 関数名(引数){ 命令 } 引数 ：元のプログラムから文字(数字)を渡す手段 変数範囲： |
ヒント