関数

パートナーコース#2 Javascript

(12) 関数

ver.1.0 1

12-0.html ハッシュと配列
script
function hyoji(){
var kazoku = [{"名前":"テントくん", "年齢":11}, 配列kazokuの要素にハッ
{"名前":"テントパパ", "年齢":36},
{"名前":"テントママ", "年齢":36}]; シュを入れています。
var text = "テント家の家族構成<br>";
for(var i = 0; i < kazoku.length; i++){
var a = kazoku[i];
text += a["名前"] + a["年齢"] + "歳" + "<br>"; 変数aはkazokuの要素を取り
}
var output = document.getElementById("output");
出したものなのでハッシュ
output.innerHTML = text; です。
}

ver.1.0 2

12-1.html 「長い」プログラム
script
function keisan(){
var num1 = document.getElementById("num1").value;
if(num1.length > 0){
inputの”num1”に入力され
num1 = Number(num1);
}else{
た文字を数字に変換しま
}
num1 = 0;
す。何も入力されてなけ
れば0にします。
}else{
num2 = 0;
} 同じ事をnum2とnum3にたい
して行なっています。
}else{
num3 = 0;
}

var kotae = num1 + num2 + num3;
var answer_input = document.getElementById("answer");
answer_input.value = kotae;
}

☆数字以外が入力されたときも0にな
るようにしてみよう。数字以外かどう
かの判定にはisNaN()を使います。
ver.1.0 3

12-2.html 関数を使ったプログラ
script
ム
function keisan(){
var num1 = get_number("num1"); いままで同じ事を繰り返
var num2 = get_number("num2");
var num3 = get_number("num3"); していたのを、
get_numberとまとめるこ
document.getElementById("answer").value = kotae; とで短くなりました。
}

//フォームに入力された数字を取り出す関数
function get_number(input_id){
var val = document.getElementById(input_id).value;
if(val.length > 0){ inputのidを与えると、そこに
val = Number(val);
}else{ 入力された数字を取り出す関
}
val = 0; 数を定義しています。
return val;
}

☆数字以外が入力されたときも0にな
るようにしてみよう。

ver.1.0 4

関数のしくみ
function 名前(引数「ひきすう」){
命令1;
命令2;
命令3;
return 返り値「かえりち」;
}
関数のメリット
・同じことを何度も書かなくてすむ
・プログラムが読みやすくなる

ver.1.0 5

12-3.html 関数を別ファイルにす
<head>
る
<script src=“12-3.js”></script>
<script> <script src=“12-3.js”></script>
function keisan(){
var num1 = get_number("num1"); という書き方で、12-3.jsという外
var num2 = get_number("num2"); 部Javascriptファイルを読み込んで
var num3 = get_number("num3");
います。
document.getElementById("answer").value =
kotae;
}
</script>

12-3.js
//フォームに入力された数字を取り出す関数
function get_number(input_id){
var val = document.getElementById(input_id).value;
外部ファイルの12-3.jsに関数
if(val.length > 0){ get_numbersが書いてあります。
val = Number(val);
}else{
val = 0;
}
return val;
}

ver.1.0 6

関数

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Destacado

Destacado (7)

Similar a 関数

Similar a 関数 (10)

Más de TENTO_slide

Más de TENTO_slide (12)

Último

Último (6)

関数