JavaScript入門講座|命令文のセット【関数】ついて学ぼう

JavaScript

【関数】について学ぼう

うさタブ
うさタブ

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

ユウキ
ユウキ

関数かんすう

うさタブ
うさタブ

プログラムのセットみたいなモノッピ!

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

うさタブ
うさタブ

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

ユウキ
ユウキ

あー、あれか~

うさタブ
うさタブ

現代っ子は理解が早くて助かるッピ・・・

この記事で学べること
  • Functionでの【関数】の作り方
  • 関数の呼び出し方

Function関数を作ってみよう

うさタブ
うさタブ

関数の作り方は簡単ッピ!

function 好きな名前 ( ) { 命令文;}

で作れるッピ! さっそく作ってみるッピよ~

<script>

function Set1() {
document.write("<p>HELLO WORLD</p>");
}

</script>
うさタブ
うさタブ

これは、

function命令文のセット  Set1Set1 を作ってください( ) {
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 関数名 ( ) { 命令文 ;} を使うことで、命令文のセットを作ることができる
  • 関数名 ( ); で作った関数を呼び出すことができる

うさタブ
うさタブ

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

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

実際の教室で自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えておサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング講座がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんな、キュレオプログラミング教室を受けて
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

JavaScriptJS基礎プログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました