【JavaScript】の基礎を学ぼう!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今日から本格的なプログラミング、
【JavaScript】を学んでいくッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
おっ、やっとプログラミングを勉強できるのか。
楽しみだ~!
- 【JavaScript】で文字を表示する
- 【変数】について
- 【変数】での文字表示
- 【変数】での計算
【JavaScript】のコード(命令文)を書いてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![](https://janken.asotetu.work/wp-content/uploads/2021/05/2021-05-10.jpg)
- メモ帳
が必要になるっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は【文字を表示させる】命令文を入力するッピ。
さっそくメモ帳を開くッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
オッケー!
<script>タグを入力してみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ホームページで【JavaScript】を使うには、
HTMLファイルに<script> タグ(命令文)を組み込む必要があるッピ!
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは上の文をコピーして、メモ帳に貼り付け。
<body>~</body>の間に、<script> </script>タグを入力するッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<!– –>は、画面には表示されないから大丈夫ッピ!
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js02.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いい感じッピ!
【JavaScript】で文字を表示してみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は、<script> </script> の間に命令文を入力するッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
<script>
document.write("Hello World");
</script>
と入力するッピヨ~!
これはJavaScriptで文字を表示する命令文ッピ。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
document.write(“Hello world”);
という意味ッピ!
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
document.write("Hello World");
</script>
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これを【名前をつけて保存】するッピ。
ファイル名は『2nd.html』にして、ファイルの種類を【すべてファイル】にするッピね~。
最後は作ったファイルをダブルクリックして確認してみるッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-08_js.png)
![](https://janken.asotetu.work/wp-content/uploads/2021/09/2021-09-08_js4.png)
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js06.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できた~!
変数を使ってみよう!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
でもコレ、この前やったことと変わんなくない?
変な文字増えただけだし、意味ないじゃん!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふふ!!
お主、プログラミングの凄さを知らないッピね~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
プログラミングのスゴいところは、
ズバリ【 変数 】を使えることッピ!!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
変数~~!?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
ってなんだ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
百聞は一見に如かずッピ。
まずは実際に 変数 を使って覚えていくッピよ~!
変数を使って計算してみよう!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは『 メモ帳 』で開くッピ!
下の文をコピーするッピよ~
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
</script>
</body>
</html>
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
オッケー!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
先程と一緒で<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>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
【let a;】これは、
「a という変数を使うので、覚えておいてね」とコンピュータに教える命令文ッピ。これを変数を宣言するというッピヨ~。
忘れるとトラブルの元になりやすいから気をつけるッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次の【a = 1;】・・・
これは「a は 1 だよ」と、コンピュータに教える命令文ッピ!
document.write(a);は、【a】を表示してねという命令文ッピ。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
つなげていうと
let a;
a = 1;
document.write(a);
という意味ッピネ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
書けたら名前をつけて保存するッピ。
作ったファイルを確認してみるッピネ~!
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js08-1024x407.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
できたけど・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_ため息.png)
あれだけ色々書いたのに、数字の【1】しか書かれてないってなんかなぁ・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふふふ!
これからがプログラミングの魔法ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この 【 a = 1; 】 にたし算をするッピヨー!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
【a = 1+3 ;】
と入力して、『3をたす』ッピよ~!
<!-- 見えない部分 -->
<html>
<head>
</head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
let a;
a = 1+3;
document.write(a);
</script>
</body>
</html>
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
できたー! 確認するぞ
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js09-1024x407.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
スゲエエエ! 計算できてる!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まだまだ、こんなものでは終わらないッピよ!
変数に文字を入れてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
この変数には文字も入力できるッピネ!
<script>
let a;
let b;
a = "Hello World";
b = 2020;
document.write(a+b);
</script>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今度は 【a = ●●●;】に文字を入れるッピ。
a = “Hello World”;
と入力するッピネ。 【” “】を忘れてはいけないッピよ~!
変数同士を合体させよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
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>
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js12-1024x407.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚.png)
おおお! なんか増えてる!!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふふ、これがプログラミングのちからッピ!
文字や数字を自由に改造して、正しく表示できているかいろいろ試して遊んでみるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次のからは、
今回使った変数と命令文について解説するッピヨ~!
変数ってなあに?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
ずっと聞けなかったんだけど、そもそも変数って何なの?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
変数の説明でよく使われるのは、変数は箱という表現ッピね~。
箱の中にお手紙があって、手紙に書かれている内容や、手紙の枚数を調べて取り出すことができるッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/08/food_box.png)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
うーん、なんだか想像つかないなぁ・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そうッピね・・・
ユウキくんはいま、何才ッピ?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
え? 10歳だけど・・・
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
では、来年は何才ッピか?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
11歳
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
なるほど。
【ユウキ】くんは、いま 10歳。来年は、11歳ッピ。
そしてその次は、12歳、13歳、14、15・・・人間は毎年、年齢を取っていくッピネ?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このように減ったり増えたりする『何か』・・・
【変化】できる『数字』や『単語』を、
プログラミング用語で 変数 というッピヨ~!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
むむむ、なんだか余計にわからなくなったよ~な・・・?
変数を使いこなしてみよう
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今言ったことをプログラミングで表現してみるッピネ~
<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>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まず【 let 】 を前に置くことで、『name』『age』という変数を使うとコンピューターに宣言したッピ。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ユウキくんは、10歳。
とこれをプログラム上で【name = “ユウキ“;】【age =10;】と表現したッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
name = ユウキ
age = 10(才)ってことだな!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
そのとおりッピ!
こんな風に変数を名前や数字と結びつけることを、変数を定義するというッピ。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
定義というのは、「これはこうだよ!」と決めること。
例えば【water = 2;】だったら、「水が2リットルあるよ~」とコンピュータに教えてあげることッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
お~! なんとなくわかってきたかも?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
では【問題】ッピ!
<script>
let name;
let age;
name = "ユウキ";
age = 10;
document.write(name + "は" + age + "才");
</script>
このプログラムコード・・・もし、ユウキくんが1歳 年を取ったと表現するには、どうするッピ?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
え!? きゅ、急に言われても・・・
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
うーん。
この【age = 10;】に1を足して、【age = 10+1;】にするとか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ムフフ、データを書き換えて試してみるッピよ~!
![](https://janken.asotetu.work/wp-content/uploads/2020/06/2020-06-29_js13-1024x407.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できたあ~~!
- JavaScriptを使うには<script></script>タグを使う。
- 変数は変化できる数字や単語のこと。
- 変数に数字を入れることができる。これを変数を定義するという。
- 変数には文字を代入できる。
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は足し算だけでなく、かけ算やわり算にチャレンジするッピ。
楽しみにしているッピよ~!