EVERDEVEL

関数つくり

今度は関数の作り方について学習します。

ジャバスクリプトではもう作られた関数を使いますが、直接関数を作ることもできます。

関数作り方

まずfunctionを書きます。そして、関数のなを書いてから(){}を書きます。

function functionName(){
}

上のようにですね。そして関数が実行する命令文を{と}の間に書きます。

そして関数は呼びが入ります。そうじゃないと作動しません。

関数の呼び方

関数の名() これで終わりですね。

つまり、

functionName();

です。

では Hello World！！　という文字列を出力する関数を造ってから、その関数の読んでみましょう。

function hello(){
    document.write("Hello World!!");
}

上のようにhelloという関数を作って hello world!!出力文を{}のないに書きます。

そして関数の呼びは

hello();

ではやってみましょう。したのソースは関数呼びがない例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
function hello(){
    document.write("Hello World!!");
}
</script>
</head>
<body>
</body>
</html>

上のソースを実行してみても何もないです。関数呼びがないからです。

では、今度は関数呼びを入れてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
    function hello(){
        document.write("Hello World!!");
    }
    hello();
</script>
</head>
<body>
</body>
</html>

結果

関数の内に計算式も入れます。

今度は5+3を計算する関数です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
function add(){
    add = 5+3;
    document.write(add);
}
add();
</script>
</head>
<body>
</body>
</html>

結果

今度は24+10を計算する関数です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
    function add(){
        add = 24+10;
        document.write(add);
    }

    add();
</script>
</head>
<body>
</body>
</html>

結果

5+3を計算する関数と24+10を計算する関数も作りました。しかしプラスの技能を作るってこんなに数字が違う時たびに他の関数を作るとしたら関数を作る意味がありませんね

これについての説明をします。

上のように一つの関数で25+10, 5+3の計算をするためには関数の呼ぶ時にそのバリューを使います。

つまり、24+10をするとしたら次のように書きます。

add(24,10);

では、関数を作る時にはどうするんでしょうかね。

したのように書きます。

JavaScript

function add(a,b){
}

24はaに代入、10はbに代入されます。

絵でみましょう。

上のように宣言します。a,bはパラメータといいます。そして24,10はアーギュメントといいます。

では例でみてみましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
function add(a,b){
    kotae = a+b;
    document.write(kotae + '<br>');
}
add(24,10);
add(10,18);
</script>
</head>
<body>
</body>
</html>

結果

結果を見ると関数を２回呼びしました、パラメータ他のバリューを使ってこんな結果も出ますね。

数字意外にも文字、文字列も使えます。

function string_output(str){
    document.write(str);
}
string_output("俺は関数の内で出力されるん。");

ソースで見ると、

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>everdevel JavaScript</title>
<script>
function string_output(str){
    document.write(str);
}
string_output("俺は関数の内で出力されるん。");
</script>
</head>
<body>
</body>
</html>

結果

関数造りはこれで終わりです。＾＾　ありがとうございます。

次のコンテンツは
return文

ご覧くださってありがとうございます。お問い合わせと間違い説明はある場合、下にあるコメントにお願いいたします。

新しい窓を開き

講義に戻る。