ＪＡＶＡスクリプトに限らず、プログラム言語には、関数というものが良く登場します。
もちろんＪＡＶＡスクリプトも、一応プログラム言語です。関数が良く登場します。
その関数とは、「良く使う一連のプログラムをひとまとめにしたもの」の事です。
では、具体的に見ていきましょう。
まず、具体的にＪＡＶＡスクリプトの例をあげましょう。
パソコンのモニターやテレビの画面は１５インチとか１７インチとか言いますね。
それは、縦の長さは何センチ、横の長さは何センチなのか？・・それを計算するＪＡＶＡスクリプトです。
従来からの画面は縦と横が、３対４だそうです。
ワイド画面は、縦と横が、９対１６か、１０対１６だそうです。（ま、９対１６としておきましょう）。
それに基づいて、下のＪＡＶＡスクリプトでは、
関数を使わずに、それを計算します。
<head>
<script language="JavaScript">
<!--
var s,ta,yo,g,x,y,ms;
//１５インチ３：４画面の場合
s=15;//sは画面のサイズ（インチ）
ta=3; yo=4;//縦横比
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ、このややこしい式は理解しなくて良いですよ。
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
//msは画面のサイズと縦横の長さを表示するための文字列
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
//１５インチ９：１６画面の場合
s=15;//sは画面のサイズ（インチ）
ta=9; yo=16;//縦横比
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
//１７インチ３：４画面の場合
s=17;//sは画面のサイズ（インチ）
ta=3; yo=4;//縦横比
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
//１７インチ９：１６画面の場合
s=17;//sは画面のサイズ（インチ）
ta=9; yo=16;//縦横比
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
//-->
</script>
</head>
<body>
<!--結果を表示するタグ（背景は黄色）-->
<div id="ans" style="background-color:yellow"></div>
<script language="JavaScript">
<!--
ans.innerText = ms;
//-->
</script>
</body>
|
１５インチ、１７インチそれぞれのサイズについて、３：４の画面と９：１６の画面を計算しています。
結果は下の通りです。
これでも一応、動作するので良いのですが、
ピンク色の背景色の部分をもう一度見比べてみてください。
よ～～く見ると大変よく似てます。
特に
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
これは全く共通です。そして何度も同じ事をやっています。これを関数にしてみるとどうなるでしょうか？
関数の書き方は・・・
function 関数の名前(){・・関数の中身・・}です。
関数の名前は半角ローマ字で好きなように決めて良いです。ただし、他の関数と同じ名前にならないように！
関数の名前の後にかっこ
()は必ず必要です。
そして、通常、関数は何行かに及びますので、行を分けて・・
function 関数の名前() {
・・関数の中身・・
・・関数の中身・・
・・関数の中身・・
}
というふうに書いたりします。
では、上記のＪＡＶＡスクリプトに関数を使ってみましょう。<head>～</head>のみ
<head>
<script language="JavaScript">
<!--
var s,ta,yo,g,x,y,ms;
//共通部分の関数
function keisan() {
g=s*2.54;//インチをセンチメートルに変える。
//xは横の長さ
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
}
//１５インチ３：４画面の場合
s=15; //sは画面のサイズ（インチ）
ta=3; yo=4; //縦横比
keisan(); //このように書くとこの関数が実行される！＊注釈あり
//１５インチ９：１６画面の場合
s=15; //sは画面のサイズ（インチ）
ta=9; yo=16; //縦横比
keisan();
//１７インチ３：４画面の場合
s=17; //sは画面のサイズ（インチ）
ta=3; yo=4; //縦横比
keisan();
//１７インチ９：１６画面の場合
s=17; //sは画面のサイズ（インチ）
ta=9; yo=16; //縦横比
keisan();
//-->
</script>
</head>
|
＊注・・このように関数を実行させることを「関数を呼び出す」などと言ふ。(ー⊿ー)b
そして、呼び出すより先に関数が書かれていなければいけません。
ＪＡＶＡスクリプトは、それが書かれたページを読み込まれると同時に実行されるのですが、関数は読み込まれただけでは実行されません。
関数が呼び出されたときに実行されるのです。
これで、同じ内容を何度も書かない分だけ、ＪＡＶＡスクリプトが短くなりました。
ちょっと楽ちん！
関数の初歩的な理解としてはこれで十分です。この様に一連の同じ作業を、関数としておくと、ＪＡＶＡスクリプトの記述が楽になるのです。
そして、必要なときに、
関数名()と書くだけで関数が働きます。
以下は、さらに関数について詳しく書いています。
しかし、変数に数字を代入している部分・・・
s=15;//sは画面のサイズ（インチ）
ta=3; yo=4;//縦横比
毎回、別の数字を代入しているのですが、使っているのは同じ変数です。
そして、この変数は関数の中で使われています。つまり、これは関数の中で使われている変数の中身を代入しているのです。
こんな時、関数には、もっと手っ取り早い書き方があります。
<head>
<script language="JavaScript">
<!--
var ms;
//共通部分の関数
function keisan(s,ta,yo) {
var g,x,y;
g=s*2.54;//インチをセンチメートルに変える。
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
//xは横の長さ
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
}
//１５インチ３：４画面の場合
keisan(15,3,4);
//１５インチ９：１６画面の場合
keisan(15,9,16);
//１７インチ３：４画面の場合
keisan(17,3,4);
//１７インチ９：１６画面の場合
keisan(17,9,16);
//-->
</script>
</head>
|
これで、同じ作業をすべてひとまとめの関数にしたので、めちゃくちゃ短くなりました。
これでも、このページの一番上に書いているＪＡＶＡスクリプトと同じ動作をします。
//共通部分の関数
function
keisan(s,ta,yo) {
var g,x,y;
g=s*2.54;//インチをセンチメートルに変える。
x=Math.sqrt(Math.pow(g*yo,2)/(Math.pow(yo,2)+Math.pow(ta,2)));
//xは横の長さ
y=x*ta/yo;//yは縦の長さ
ms=ms+s+"インチ、"+ta+"："+yo+"の画面は、縦"+y+"cm、横"+x+"cmです。\n";
}
この関数の中身には、ややこしい計算が含まれてわかりにくいかもしれません。
重要なのは、
keisan(s,ta,yo)の
()の中に、
s,ta,yoがあると言うことです。
これは、関数の中で使われている変数です。このような変数を「引数(ひきすうと読む)」と言います。
たとえば、
keisan(15,3,4);だと・・
s=15; ta=3; yo=4;が自動的に行われているのです。
このように引数は、関数の中で使う変数に値を取り込む機能を果たしてくれるわけです。
このように関数にしておくと・・「じゃあ２１インチの時は？」とか、「２８インチの時は？」とか・・引数の部分に適宜 数値を入れるだけで、簡単にいろいろなケースに対応できて楽になります。
◆
関数について、さらに理解を深めるために、今度はもっと単純な例を挙げてみましょう。
var x;
function plus5( h) {
x=h+5;
}
|
hが引数です。この関数の引数に入れた数字に５を足すだけの関数です。
そして、
|
plus5(2);//これでxは７になる（x=2+5）
plus5(6);//これならxは11になる（x=6+5）
|
引数に数字を入れると、それに５を足すという働きです。
たとえば、関数が、何かを加工する工場だとしたら、引数は材料の搬入口に当たります。
上の例だと、２という材料を搬入口（引数）に！
すると工場（関数）の中で加工（５を足す）されるわけです。
そして、できあがった製品は７です。
この場合はその製品（７）を、変数xに代入しています。つまり、xが７になります。
ま、これでも、もちろん問題はないのですが、関数のもう一つの機能として、製品の搬出口をもうけることが出来るのです。
var x;
function plus5no1(h) {
var i=h+5;
return i;//これが搬出口！
}
//上の関数も下の関数も同じ働きです。
function plus5no2(h) {
return h+5;//これが搬出口！
}
//すると、関数は実行後、 return で指定した値に変わる！この値を 戻り値と言う
//もしも・・
x= plus5no1(3);
//と書かれていると、 plus5no1(3)が実行 (i=3+5)されて、さらに 8(iの値)に変わる
// plus5no1(3)が 8に変わっちゃうので、
//x= 8;と同じ！だからxは8になる・・ plus5no1(3)の、引数は 3、 戻り値は 8
//もしも・・
x= plus5no2(3);
//と書かれていると、 plus5no2(3)が実行されて、さらに 8(3+5の値)に変わる
//つまり、x= 8;と同じ！・・ plus5no2(3)の、引数は 3、 戻り値は 8
|
このように、戻り値がある関数だと、変数にまるで関数を代入するような書き方（
x=plus5no2(3)）で、その関数の戻り値を、変数に代入できるのです。
その場合、戻り値が代入されるだけでなく、関数自体も実行されます。
ところで、
returnには、戻り値を指定するだけでなく、
その関数を終わらせる働きがあります。
var y;
function f(x) {
y=x+5; //実行される
return ; //関数の終了。戻り値は、なくても良い！
y=x+6; //実行されない！
y=x+4; //実行されない！
}
function f2(x) {
if(x<0){ //もしｘが０より小さいとき
return "負の数です"; //戻り値は"負の数です"という文字列。関数終わり
}
var msg=x+"の平方根は"+Math.sqrt(x)+"です。";
return msg; //戻り値はmsgに代入された文字列。関数終わり。
}
|
f(x)では、
y=x+5が実行された後、
returnが実行され、そこで関数が終わります。
この例のように、戻り値が必要ない場合戻り値を指定せず、
returnだけを書いても良いのです。
その場合、戻り値なしで関数を終わらせる機能だけが働きます。
その後に書かれている
y=x+6や
y=x+4は、書かれてあっても実行はされません。
f2(x)では、
returnが、２つ書かれていますが、よく見ると実質的に実行されるのは、どちらか一つです。
もし、引数が０よりも小さい負の数の場合、
if(x<0){ }の中の
return "負の数です"が実行され、そこでこの関数は終わります。
引数が０以上の場合は
if(x<0){ }の中は実行されず、
その後に書かれた
var msg=x+"の平方根は"+Math.sqrt(x)+"です。"、
そして、
return msgが実行されます。
◆
引数と戻り値があるのが、本来の関数の姿です。
しかし、それらが必要なければ省略してもかまわないのです。
先述の関数の書き方は、引数も戻り値もない、省略した書き方です。
（引数を省略した場合でも、関数名には
()だけはつけておく必要があります）
引数ありの関数では、まず・・
function 関数名(引数名,引数名,・・・・) {
引数を使った一連のＪＡＶＡスクリプト
}
と言うふうに関数を記述します。
引数名は、変数と同様に、半角ローマ字で、好きな名前にします。
そして、それを呼び出すとき・・・
関数名(引数の値,引数の値,・・・)と言うふうにします。
このとき、引数の値には、実際の値（定数）を入れても変数を入れても式を入れてもかまいません。
戻り値がある関数なら、それも引数の値として入れてもかまいません。
そして、戻り値も、実際の値（定数）で指定しても変数で指定しても式で指定してもかまいません。
さらに関数を指定してもかまいません。
以下に例を書いておきます。
var k,h;
function jijou(x) { //引数を２乗する関数
var i;
i=x*x;
return i;//変数iが戻り値。結果はxの２乗になる
}
function bai(x) { //引数を２倍する関数
return x*2;//戻り値は、x*2という式の結果になる。
}
function waru(x,y) { //引数xを引数yで割る関数
return x/y;
}
function itumo8() {
return 8;//戻り値は、８という定数、結果はいつも８になる
}
function fugouhanten(x) { //引数に－１をかける関数
return x*(-1);
}
function zettaiti(x) { //引数の絶対値を求める関数
if(x<0){
return fugouhanten(x); //引数が０より小さいと関数を実行
//fugouhanten(x)の戻り値が、zettaiti(x)の戻り値になる
}
return x; //引数に何もせず、そのまま戻り値となる
}
function goukei(w,x,y,z) { //４つの引数をすべて足す関数
return w+x+y+z;
}
h=5;
k=jijou(h)+jijou(2); //引数にhという変数、また２という定数
//kは５の２乗＋２の２乗で、２９になる。
k=k-itumo8(); //itumo8()の戻り値はいつも８
//kは２９－８で２１になる
h=bai(jijou(3)); //jijou(3)の戻り値（３の２乗）が、bai(引数)の引数になる
//hは１８になる
h=waru(h,3); //hを３で割る。hは６になる
k=waru(k,h+1) //引数に変数と式！２１を７で割って、kは３になる
h=h+fugouhanten(itumo8()+1); //引数に関数の混じった式。hは－３になる
h=zettaiti(h); //hの絶対値をhに代入。hは３になる。
k=goukei(h,jijou(k),2,bai(h)-2); //引数は３，９，２，４
//kは１８になる
|