処理をまとめて、その名前を書くと呼び出せるようにする
公開日:
:
最終更新日:2015/10/29
javaScript ユーザー定義, 関数
ユーザー定義関数
関数とは、何かしらの粗利を1つにまとめて、後から関数名という名前で呼び出せるようにしたものです。以前の記事で触れました。文字列を数値に変換する「Number」など、javaScriptには、たくさんの関数が用意されています。
今回は、javaScriptで予め用意されている関数ではなく、自作したオリジナルの関数(ユーザー定義関数)を作成する方法を記載していきます。
よく使う処理を関数にすることで、後から何度でも好きな時に呼び出すことができます。
今回の例としては、「ユーロ」と為替レートという2つの数値を引数として受け取り、円に換算する関数「euroToYen」を書いていきます。
サンプルコードの実行結果はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>関数を作成する</title> <script> //使用する関数の定義を行います。 //10~14行目が実際の処理を書きます。 function euroToYen(euro,rate){ var yen; yen = euro * rate; return yen; } </script> <style> body{ background-color:aqua; } </style> </head> <body> <script> //ユーロ→円に換算した値を変数に入れています。 var yen1 = euroToYen(10,134); document.write( yen1 ,"円<br>"); var euro2 = 50; var ChangeRate2 = 135; //変数を引数に関数を呼び出すことができます。 yen1 = euroToYen(euro2,ChangeRate2); document.write( yen1 ,"円<br>"); </script> </body> </html> |
関数定義の書き方
関数という言葉は英語の「function」からきています。functionというキーワードを使い、次のような書き方をして、関数を定義します。
1 2 3 4 |
function 関数名(引数1,引数2, ...){ <実際の処理を書く> return 戻り値; } |
引数の数は、関数が行う処理によって違います。引数が複数ある場合は、カンマ「,」で区切ります。「{」「}」で囲まれたブロック内に記述します。ブロック内にあるreturn文では、関数が行った処理の結果である戻り値を
指定します。return文が実行されると、呼び出した側に「戻り値」が戻され関数ブロックから脱出します。
関数の呼び出し
関数を呼び出す時は「関数名(引数1,引数2,…)」という具合に書きます。関数を定義するときに書く引数を仮引数、呼び出す時に記述する引数を実引数といいます。関数を呼び出したとき実引数が仮引数に代入されます。
1 2 3 4 |
//10と134の部分は実引数 var yen1 = euroToYen(10,134); //euroとrateは仮引数 function euroToYen(euro,rate){} |
関連記事
-
-
簡単な計算結果を表示してみる
ステートメント プログラムでは、1つの命令の単位のことをステートメントと呼びます。 日本語に
-
-
javaScriptのプロパティの使い方
プロパティに値を設定する 「=」の左辺にプロパティを、右辺に設定する値を書きます。
-
-
変数で文字列をつかう
変数には文字も格納できます。 前回、前々回の記事では、数値を変数に代入しました。変数という名前のせ
-
-
リンクや文字を設定してみる
HTMLには、書体、色、文字、リンクの設定を行うタグが用意されています。Stringオブジェクトには
-
-
日付や時刻を操作する
前回の記事でnew演算子とDateコンストラクタを使い、利用可能なオブジェクトであるインスタンスを生
-
-
switch文を使って条件を細かく設定する。
以前は複数のifelse文を用いて月の入力を促して、その結果を踏まえた季節を表示するサンプルプログラ
-
-
フォームの部品を利用する
HTMLフォームは、javaScriptからみれば、formオブジェクトです。フォームのGUI部品で
-
-
javaScriptのifelseステートメント
プログラムの流れを変える命令を制御構造と呼びます。制御構造の代用が条件判断や繰り返しと言われるもので
- PREV
- <audio>タグは音声を再生するとき使う
- NEXT
- 変数の有効範囲を知る