JavaScript入門講座|プログラミングをはじめよう! ~変数に挑戦してみよう~

JavaScript
アイキャッチ

【JavaScript】の基礎を学ぼう!

うさタブ
うさタブ

今日から本格的なプログラミング、

JavaScript】を学んでいくッピ!

ユウキ
ユウキ

おっ、やっとプログラミングを勉強できるのか。

楽しみだ~!

この記事で学べること
  • 【JavaScript】で文字を表示する
  • 【変数】について
  • 【変数】での文字表示
  • 【変数】での計算

【JavaScript】のコード(命令文)を書いてみよう

うさタブ
うさタブ
必要なもの
  • メモ帳

が必要になるっぴ!

うさタブ
うさタブ

今回は【文字を表示させる命令文を入力するッピ。

さっそくメモ帳を開くッピよ~

ユウキ
ユウキ

オッケー!

<script>タグを入力してみよう

うさタブ
うさタブ

ホームページで【JavaScript】を使うには、

HTMLファイルに<script> タグ(命令文)を組み込む必要があるッピ!

<!-- 見えない部分 -->
<html>
<head>

</head>

<!-- ↓ここから見える部分↓ -->
<body>

</body>
</html>
うさタブ
うさタブ

まずは上の文をコピーして、メモ帳に貼り付け。

<body></body>の間に、<script> </script>タグを入力するッピよ~!

うさタブ
うさタブ

<!– –>は、画面には表示されないから大丈夫ッピ!

ユウキ
ユウキ

できた~!

うさタブ
うさタブ

いい感じッピ!

【JavaScript】で文字を表示してみよう

うさタブ
うさタブ

次は、<script> </script> の間に命令文を入力するッピネ!

うさタブ
うさタブ
<script>
	document.write("Hello World");
</script>

と入力するッピヨ~!

これはJavaScript文字表示する命令文ッピ。

うさタブ
うさタブ

これは

document.writeホームページに書き出して(“Hello world”);

という意味ッピ!

手動で命令文を入力するときは、【 ; 】の入力を忘れがちです。

; 】を忘れずに入力しましょう!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	document.write("Hello World");
</script>

</body>
</html>
うさタブ
うさタブ

これを【名前をつけて保存】するッピ。

ファイル名は『2nd.html』にして、ファイルの種類を【すべてファイル】にするッピね~。

最後は作ったファイルをダブルクリックして確認してみるッピ!

ファイル→名前をつけて保存
ファルの種類→すべてのファイル→2nd.html→保存
ユウキ
ユウキ

できた~!

変数を使ってみよう!

ユウキ
ユウキ

でもコレ、この前やったことと変わんなくない?

変な文字増えただけだし、意味ないじゃん!

うさタブ
うさタブ

ふふふふ!!

お主、プログラミングの凄さを知らないッピね~!

うさタブ
うさタブ

プログラミングのスゴいところは、

ズバリ【 変数を使えることッピ!!

ユウキ
ユウキ

変数~~!?

ユウキ
ユウキ

ってなんだ?

うさタブ
うさタブ

百聞は一見に如かずッピ。

まずは実際に 変数 を使って覚えていくッピよ~!

変数を使って計算してみよう!

うさタブ
うさタブ

まずは『 メモ帳 』で開くッピ!

下の文をコピーするッピよ~

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>

</script>

</body>
</html>
ユウキ
ユウキ

オッケー!

うさタブ
うさタブ

先程と一緒で<sprict>~</script>の間に、命令文を書くッピ。

<script>
	let a;
	a = 1;
	document.write(a);
</script>

と書くッピヨ!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	a = 1;
	document.write(a);
</script>

</body>
</html>
うさタブ
うさタブ

let a;】これは、

a という変数を使うので、覚えておいてね」とコンピュータに教える命令文ッピ。これを変数宣言するというッピヨ~。

忘れるとトラブルの元になりやすいから気をつけるッピネ!

うさタブ
うさタブ

次の【a = 1;】・・・

これはa 1 だよ」と、コンピュータに教える命令文ッピ!

document.write(a);は、【a】を表示してねという命令文ッピ。

うさタブ
うさタブ

つなげていうと

let a;変数 a を使います

a = 1;a は 1 です

document.write(a);a をホームページに書き出してください

という意味ッピネ!

うさタブ
うさタブ

書けたら名前をつけて保存するッピ。

作ったファイルを確認してみるッピネ~!

ユウキ
ユウキ

できたけど・・・

ユウキ
ユウキ

あれだけ色々書いたのに、数字の【】しか書かれてないってなんかなぁ・・・

うさタブ
うさタブ

ふふふふふ!

これからがプログラミングの魔法ッピ!

うさタブ
うさタブ

この 【 a = 1; 】 にたし算をするッピヨー!

うさタブ
うさタブ

a = 1+3 ;

と入力して、『3をたす』ッピよ~!

<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	a = 1+3;
	document.write(a);
</script>

</body>
</html>
ユウキ
ユウキ

できたー! 確認するぞ

ユウキ
ユウキ

スゲエエエ! 計算できてる!!

うさタブ
うさタブ

まだまだ、こんなものでは終わらないッピよ!

変数に文字を入れてみよう

うさタブ
うさタブ

この変数には文字入力できるッピネ!

<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>
うさタブ
うさタブ

今度は 【a = ●●●;】に文字を入れるッピ。

a = “Hello World”;

と入力するッピネ。 ” “を忘れてはいけないッピよ~!

変数同士を合体させよう

うさタブ
うさタブ

a = “Hello World”; に加えて、さらに

b = 2020;

document.write(a+b);

と入力するッピ。

+bの入れ忘れに注意するッピ!

<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let a;
	let b;
	a = "Hello World";
	b = 2020;
	document.write(a+b);
</script>

</body>
</html>
ユウキ
ユウキ

おおお! なんか増えてる!

うさタブ
うさタブ

ふふふふ、これがプログラミングのちからッピ!

文字や数字を自由に改造して、正しく表示できているかいろいろ試して遊んでみるッピ!

うさタブ
うさタブ

次のからは、

今回使った変数命令文について解説するッピヨ~!

変数ってなあに?

ユウキ
ユウキ

ずっと聞けなかったんだけど、そもそも変数って何なの?

うさタブ
うさタブ

変数の説明でよく使われるのは、変数という表現ッピね~。

の中にお手紙があって、手紙に書かれている内容や、手紙の枚数を調べて取り出すことができるッピ!

ユウキ
ユウキ

うーん、なんだか想像つかないなぁ・・・

うさタブ
うさタブ

そうッピね・・・

ユウキくんはいま何才なんさいッピ?

ユウキ
ユウキ

え? 10さいだけど・・・

うさタブ
うさタブ

では、来年何才なんさいッピか?

ユウキ
ユウキ

11さい

うさタブ
うさタブ

なるほど。

ユウキ】くんは、いま 10歳。来年は、11歳ッピ。

そしてその次は、12歳、13歳、1415・・・人間毎年年齢としを取っていくッピネ?

うさタブ
うさタブ

このように減ったり増えたりする何か』・・・

変化できる『数字』や『単語』を、

プログラミング用語で 変数 というッピヨ~!

ユウキ
ユウキ

むむむ、なんだか余計にわからなくなったよ~な・・・?

変数を使いこなしてみよう

うさタブ
うさタブ

今言ったことをプログラミングで表現してみるッピネ~

<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>
<!-- 見えない部分 -->
<html>
<head>

</head>
<!-- ↓ここから見える部分↓ -->
<body>

<!-- ↓この下に入力してね!↓ -->
<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>

</body>
</html>
うさタブ
うさタブ

まず【 let を前に置くことで、『name名前』『age年齢』という変数を使うとコンピューターに宣言したッピ。

うさタブ
うさタブ

ユウキくんは、10歳。

とこれをプログラム上で【name = “ユウキ“;】【age =10;】と表現したッピ!

ユウキ
ユウキ

name名前 = ユウキ

age年齢 = 10(ってことだな!

うさタブ
うさタブ

そのとおりッピ!

こんな風に変数名前数字結びつけることを、変数定義ていぎするというッピ。

うさタブ
うさタブ

定義ていぎというのは、これこうだよ!」と決めること。

たとえば【water = 2;】だったら、2リットルあるよ~」コンピュータ教えてあげることッピ!

ユウキ
ユウキ

お~! なんとなくわかってきたかも?

うさタブ
うさタブ

では【問題】ッピ!

<script>
	let name;
	let age;
	name = "ユウキ";
	age = 10;
	document.write(name + "は" + age + "才");
</script>

このプログラムコード・・・もし、ユウキくんさい 年を取った表現するには、どうするッピ?

ユウキ
ユウキ

え!? きゅ、急に言われても・・・

ユウキ
ユウキ

うーん。

この【age = 10;】に1を足して、【age = 10+1;】にするとか?

うさタブ
うさタブ

ムフフ、データを書き換えて試してみるッピよ~!

ユウキ
ユウキ

できたあ~~!

学習のポイント
  • JavaScriptを使うには<script></script>タグを使う。
  • 変数変化できる数字単語のこと。
  • 変数数字を入れることができる。これを変数定義ていぎするという。
  • 変数には文字を代入できる。

うさタブ
うさタブ

次は足し算だけでなく、かけ算わり算にチャレンジするッピ。

楽しみにしているッピよ~!

タイトルとURLをコピーしました