【関数】について学ぼう

うさタブ
今回は【関数】について学ぶッピよ~!

ユウキ
【関数】?

うさタブ
プログラムのセットみたいなモノッピ!
あらかじめ【関数】を作って、動作させたい場所で呼び出すことで、好きな時にプログラムを実行させる魔法ッピ!

うさタブ
アレクサ や Google Home に「おはよう!」と呼びかけると、今日の日付や天気、ニュースを話してくれるようなモノッピね

ユウキ
あー、あれか~

うさタブ
現代っ子は理解が早くて助かるッピ・・・
この記事で学べること
- Functionでの【関数】の作り方
- 関数の呼び出し方
Function関数を作ってみよう

うさタブ
関数の作り方は簡単ッピ!
function 好きな名前 ( ) { 命令文;}
で作れるッピ! さっそく作ってみるッピよ~
<script>
function Set1() {
document.write("<p>HELLO WORLD</p>");
}
</script>

うさタブ
これは、
function Set1( ) {
document.write(“<p>HELLO WORLD</p>”)
}
という意味ッピネ。

うさタブ
<p></p>
は段落・・・
「文章や画像のまとまりを作ってね」というHTMLのタグッピ!


ユウキ
確認しても、何も映らないけど・・・?

うさタブ
それは作った【関数】を呼び出してないからッピね~
次は【関数】を呼び出してみるッピ!
作った関数を呼び出してみよう

うさタブ
関数を呼び出す命令文があるッピ!
function Set1 () { ;}
の下に
Set1( ) ;
と記入するッピ!
全体のコード確認
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
function Set1() {
document.write("<p>HELLO WORLD</p>");
}
Set1();
</script>
<!-- ここまで! -->
</body>
</html>


ユウキ
またコレか~
見飽きたんだけど、この文字

ユウキ
いったい何がスゴいが分かんないんだけど?

うさタブ
ふふふふ、言ったッピよ。
function 関数 は 好きな時にプログラムのセットを呼び出す魔法ッピと!

うさタブ
試しに、Set1( );を3回コピーしてみるッピ!

うさタブ
さらにSet1( ); の前に
document.write(“<p>YUKI</p>”)
と入力してみるッピヨ!
<script>
function Set1() {
document.write("<p>HELLO WORLD</p>");
}
document.write("<p>YUKI</p>")
Set1();
Set1();
Set1();
</script>


ユウキ
おおお! なるほど~
好きな時に呼び出すってこういうことか~

うさタブ
ムフフ、【関数】のすごさが分かったッピネ!
学習のポイント
- function 関数名 ( ) { 命令文 ;} を使うことで、命令文のセットを作ることができる
- 関数名 ( ); で作った関数を呼び出すことができる

うさタブ
次回はこれまで学習したことをフル活用して、サイコロゲームを作るッピ! 楽しみにしているッピよ~