アウトプットしながらJavaScriptを学ぶ
こんにちは、ゆかりです。
訓練学校でのHTML/CSSカリキュラムが終わり、現在はJavaScriptを学習中です。
JavaScriptめっちゃおもしろ～！！！
ってな感じで自宅でも、もくもくやってます。
学校前にも独学で基本は抑えていたのですが、ＨＰに動きつけられたらいいなぁくらいにしか考えてなかった。改めて学ぶといろんなことができて面白い！と思いました。
「何かを作って」→「体感」の速度が速いというか。
作ったものをすぐに実感できるので楽しいです。
おススメ本「ゲームで学ぶ JavaScript入門」の紹介
私の勉強スタイルは「とりあえず作ってみる」なのですが、それに合った書籍はあるかな～と探したらamazonで見つけました。
kindle有料会員は無料で読めるのでさっそくダウンロード。
これが大当たりでした。
ぜひ皆さんもこの本でJavaScriptを学んでください＾＾
まったくの初学者の方はprogateのJavaScriptを1週後、もしくは他の優しい本で基本構文を理解したあとがいいかもしれません。
「consoloe.log」「if」「while」・・・いろいろ勉強したけど結局どう使うの？みたいな疑問を体感的に作って学べます。
そうすることによって「ふむふむ」と参考書を読むよりも何倍も吸収して身になります。
この本は適度に辛くてやりごたえがあるんです。
演習問題が都度あって、「では、つくってください」という流れ。
それがいい。
その中の一つ、干支計算機をつくろうを紹介します。
干支計算機をつくってみた
今回の演習問題は「年数を入力してボタンを押したら干支を表示する」をつくってください。というものです。
完成品
inputタグに年数を入力してボタンをクリックで、
こんな感じで上のpタグに年数と干支が表示され、下には干支の画像を表示するようにしました。
以下コードです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>西暦から干支をだすよ！</title>
<style>
.eto-img {
width: 200px;
height: 200px;
border: 1px solid #555 ;
}
h2 span {
color: red;
}
</style>
</head>
<body>
<h2><span id="y"></span> 年の干支は <span id="e"></span></h2>
<p><input type="text" id="year">年の <button onclick="calc()">干支を調べる</button></p>
<div><img src="images/eto.jpg" alt="" class="eto-img"></div>
<script>
function calc() {
var y = document.getElementById('year').value;
var img = document.querySelector('.eto-img');
var i = y % 12;
var str = '';
switch(i) {
case 0:
str = '申';
break;
case 1:
str = '酉';
break;
case 2:
str = '戌';
break;
case 3:
str = '亥';
break;
case 4:
str = '子';
break;
case 5:
str = '丑';
break;
case 6:
str = '寅';
break;
case 7:
str = '卯';
break;
case 8:
str = '辰';
break;
case 9:
str = '巳';
break;
case 10:
str = '牛';
break;
case 11:
str = '未';
break;
}
document.getElementById('e').textContent = str;
document.getElementById('y').textContent = y;
img.src = 'images/image' + i + '.png';
}
</script>
</body>
</html>コードの流れ
１．buttonタグにonclickでfunction名を仕込んでおく
２．function calc()を定義する
３．内容はswitch文で年数を12で割った余の数によって変数strの代入値を変えていくというもの
４．最終的にそれをｐタグのspan部分に挿入
５．画像も同じくsrcの値に挿入（あらかじめ各画像はimage〇.pngというファイル名にしている：〇に数字がはいる）
「switch文」の演習問題として出題されたのでswitch文で作ってます。
画像の挿入は問題にはありませんでしたが、オリジナルで組み込んでみました！（イラストbyいらすと屋）
実際に条件文の使い方を体感して学べて、クリックしてちゃんと動作したときは達成感があります！
そしてこの書籍はちょくちょくトリビア的な内容もあるのでその点が気に入っています。
今回の演習だと「干支の計算式」。これは「年数を12で割った余り」によって干支が決まる、らしい。
「1987」を12で割ったら「1980と余りが7」この余りの数字が干支に対応しています。「7＝卯」
「へ～そうやったんや、すげー」っていうのがちょくちょくあります。
興味のある方はぜひこの本で学んでみてください。
私も引き続きいろいろ楽しいもの作って学んでいきます！！
え？ほんまに？サポートしてくれるん。 めっちゃうれしいです･:*+.\(( °ω° ))/.:+ 勉強のために使わせて頂き、さらに役立つ記事を書いていきます！