関数の定義(1)

関数(function)

  • 関数とは、何らかの処理をひとつにまとめて「関数名」という名前で呼び出せるようにしたもの
  • 関数は「function」キーワードで定義する
  • 「Number」など、JavaScriptには予め関数が用意された組込関数とユーザー定義関数がある
  • 関数に渡すなんらかの値を「引数」と呼ぶ
  • 関数の結果は「return文」で返す
function 関数名(引数1, 引数2, ....){  

//内部処理  return 戻り値; 

} 

  • 戻り値
    関数で処理した結果(値)を「関数の呼び出し元」へ返す機能
  • 関数を呼出す
    「kansu();」
  • 文字や数値を引数にする
    「kansu('商品A', 1000);」
    この場合には「戻り値」を返す場所がない
  • returnで戻り値を返す
    「戻り値」として返す値を関数内で指定→「x = kansu(1000);」
    これを実行する命令が「return」

関数とメソッド

  • 似た役割だが、メソッドの場合は特定のオブジェクトと結びついて働く(documentオブジェクトに対しwrite()メソッドを呼び出す等)
  • 関数の場合は、オブジェクトに依存せず、関数名だけで呼び出す

組込み関数

特殊な処理を行う為に予め容易された関数群

関数説明
escape() 文字列のエンコードを行う
unescape() 文字列のデコードを行う
eval() 引数をスクリプトとして実行する
isNaN() 数値の場合は false、数値でない場合は true を返す
parseFloat() 文字列を浮動小数点数に変換
parseInt() 文字列を整数値に変換
taint() フォームの特定の要素を送信可能に設定
untaint() フォームの特定の要素を送信不可能に設定

 

関数の例

ボタンごとに関数を用意した場合

商品Aの関数、商品Bの関数、商品Cの関数を作成

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTf-8">
    <title>ボタンごとに関数を用意</title>
    <script src="index-1.js"></script>
  </head>
  <body>
    <h1>税込価格を求める</h1>
    <p>商品A(1000円)
      <button onclick="zeiA()">税込価格</button>
    </p>
    <p>商品B(2000円)
      <button onclick="zeiB()">税込価格</button>
    </p>
    <p>商品C(3000円)
      <button onclick="zeiC()">税込価格</button>
    </p>
  </body>
</html>

JavaScript
var zeikomi;

function zeiA() {
    zeikomi = 1000 * 1.08;
    alert('税込価格は' + zeikomi + '円です');
}

function zeiB() {
    zeikomi = 2000 * 1.08;
    alert('税込価格は' + zeikomi + '円です');
}

function zeiC() {
    zeikomi = 3000 * 1.08;
    alert('税込価格は' + zeikomi + '円です');
}

ボタンごとに関数を用意

 

関数を汎用化した場合

  • 価格は変数(price)に代入される
  • 価格を引数として関数「zei()」に渡す
html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTf-8">
    <title>汎用化した関数</title>
    <script src="index-2.js"></script>
  </head>
  <body>
    <h1>税込価格を求める</h1>
    <p>商品A(1000円)
      <button onclick="zei(1000)">税込価格</button>
    </p>
    <p>商品B(2000円)
      <button onclick="zei(2000)">税込価格</button>
    </p>
    <p>商品C(3000円)
      <button onclick="zei(3000)">税込価格</button>
    </p>
  </body>
</html>

JavaScript
var zeikomi;
var tax = 1.08;

function zei(price) {
    zeikomi = price * tax;
    alert('税込価格は' + zeikomi + '円です');
}

汎用化した関数

 

商品名、価格を引数とした場合

  • 商品名は「name」、価格は「price」に代入
  • 商品名と価格を引数として関数「zei()」に渡す
html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTf-8">
    <title>商品名、価格を引数とした場合</title>
    <script src="index-3.js"></script>
  </head>
  <body>
    <h1>税込価格を求める</h1>
    <p>商品A(1000円)
      <button onclick="zei('商品A', 1000)">税込価格</button>
    </p>
    <p>商品B(2000円)
      <button onclick="zei('商品B', 2000)">税込価格</button>
    </p>
    <p>商品C(3000円)
      <button onclick="zei('商品C', 3000)">税込価格</button>
    </p>
  </body>
</html>

JavaScript
var zeikomi;
var tax = 1.08;

function zei(name, price) {
    zeikomi = price * tax;
    alert(name + 'の税込価格は' + zeikomi + '円です');
}

商品名、価格を引数とした場合