こんにちは朱夏です。
今回からJavaScriptを学習していこうと思います。
今まではHTMLやCSSの機能で何とかなっていましたが、そろそろしっかり学習しておきたいなと思ったので頑張っていきたいと思います。
今日は初回なので基本の部分から学んでいきます。
お世話になるサイトはこちらです。
プログラミング学習をしている人なら一度はお世話になるであろうドットインストールさん。
こちらの「初めてのJavaScript(全11回)」を見ながらコードを書いてみました。
出来上がったコードがこちらです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScript練習</title>
<style>
#inbox {
display: flex;
flex-wrap: wrap;
}
.box {
margin: 15px;
width: 100px;
height: 100px;
background: skyblue;
cursor: pointer;
transition: 0.8s;
text-align: center;
line-height: 100px;
}
.win {
background-color: red;
border-radius: 50%;
transform: rotate(360deg);
}
.lose {
transform: scale(0.9);
}
</style>
</head>
<body>
<!----- ヘッダー ----->
<header>JavaScript練習</header>
<!----- ヘッダー END ----->
<!----- メインコンテンツ ----->
<div id="inbox"></div>
<!----- メインコンテンツ END ----->
<!----- フッター ----->
<footer>
<p class="">(c)test.com</p>
</footer>
<!----- フッター END ----->
<script>
'use strict' ;
const num = 5;
const winner = Math.floor(Math.random() * num);
for (let i = 0; i < num; i++) {
const div = document.createElement('div')
div.classList.add('box')
div.addEventListener('click', () => {
if (i === winner) {
div.textContent = "Win!";
div.classList.add('win');
} else {
div.textContent = "Lose!";
div.classList.add('lose');
}
});
document.getElementById('inbox').appendChild(div);
}
</script>
</body>
</html>
多少いじってはいますが、ほぼドットインストールで学んだことそのままのコードになります。
JavaScriptの記述は、</body>の直前に書かれている<script>～</script>までの25行くらいです。
全部初見なので順番に意味を見ていきます。
‘use strict’ ;
ググると（厳格モード）というキーワードが出てきました。
どうやらエラーチェックができるモードの様です。
それにより、通常では代入すれば勝手に宣言されるグローバル変数が、正規の手法で宣言しないといけなかったりするらしいです。
初心者や、これから他のプログラミング言語を学ぶ予定の人にとっては厳格モードを有効にしておいた方が良さそうですね。
const num = 5;
constは、変数の宣言方法の1つです。
constで宣言された変数は「書き換え禁止」になるそうです。
この場合、変数numを宣言し、５を代入しますよという意味になります。
そして、numの中身は5から書き換え禁止になっています。
const winner = Math.floor(Math.random() * num);
変数winnerにランダムで0～4の整数を代入しています。
まず先に、Math.random()は、0以上～1未満の小数点以下のランダムな乱数を返します。
それにnum(代入されている5)を掛けています。
例：ランダムの乱数が0.123だった場合
0.831*５＝4.155
Math.floorは、上記の計算結果から、最大の整数を返します。
今回の場合、整数は4になります。
単純に小数点以下を切り捨てた数値になる様です。
これにより、ランダムで0～4の整数をゲット出来ました。
for (let i = 0; i < num; i++) {～}
繰り返し構文です。
変数iを0からカウントして、変数num未満なら｛～｝内の処理を繰り返すという命令文ですね。
繰り返し条件は色々指定方法がありますが、長くなるので今回は割愛します。
const div = document.createElement(‘div’)
これはちょっとわかりにくいかもですが、変数divに「<div></div>を作成する処理」を代入していると言えばいいのでしょうか。
これにより、divと書けば、「<div></div>」が作成されます。
div.classList.add(‘box’)
作成したdivタグにboxというclassを付与する命令文です。
div.addEventListener(‘click’, () => {～}
作成したdivタグにイベントを付与する命令文です。
今回はクリックしたら{～}内の処理を実行するというイベントです。
if (i === winner) {～} else {～}
if構文です。
条件を満たした（今回は、0～4のランダム整数が代入された変数winnerと変数iが一致する）場合の処理と、一致しなかった場合(else)の処理が書かれています。
div.textContent = “Win!”;
div.textContent = “Lose!”;
作成したdivにWin!もしくはLose!と表示させる命令文です。
これは、イベントの処理内容なので、該当のdivをクリックしたときに表示されるテキストです。
div.classList.add(‘win’);
div.classList.add(‘lose’);
クラスを追加する命令文です。
こちらも上記と同じく、イベントの処理内容になります。
document.getElementById(‘inbox’).appendChild(div);
作成したdivタグの配置場所を指定しています。
今回はid=”inbox”の子要素としてdivタグを配置する命令文になっています。
JavaScriptを細かく分解して解説してみました。
これで少しでも理解が深まればいいなと思います。
今まで苦手意識があったものの一つだったのですが、やってみると案外食わず嫌いだったりするものですね。
今回はここまでです。
次回もよろしくお願いします。