【関数】について学ぼう

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

【関数】?

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

アレクサ や 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 関数名 ( ) { 命令文 ;} を使うことで、命令文のセットを作ることができる
- 関数名 ( ); で作った関数を呼び出すことができる

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