【関数】について学ぼう
うさタブ
今回は【関数】について学ぶッピよ～！
ユウキ
【関数】？
うさタブ
プログラムのセットみたいなモノッピ！
あらかじめ【関数】を作って、動作させたい場所で呼び出すことで、好きな時にプログラムを実行させる魔法ッピ！
うさタブ
アレクサ や 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( );を３回コピーしてみるッピ！
うさタブ
さらに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 関数名 ( ) { 命令文 ;} を使うことで、命令文のセットを作ることができる
- 関数名 ( ); で作った関数を呼び出すことができる
うさタブ
次回はこれまで学習したことをフル活用して、サイコロゲームを作るッピ！ 楽しみにしているッピよ～
