関数の定義(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 + '円です'); }