本日の学習（JavaScript,HTML,CSS）
下記動画を参考に電卓機能を模写！
模写だけではなく、自身の理解のために仕組みや記述の意味をひとつひとつ読み解いていこうと思います。
学習動画：https://www.youtube.com/watch?v=BuZtAqk5LIY&t=21s
①index.html
<!DOCTYPE>
<html lang="ja">
<head>
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="clear" onclick="document.calc.txt.value = ''">c</span>
<span class="num" onclick="document.calc.txt.value += '/'">/</span>
<span class="num" onclick="document.calc.txt.value += '*'">*</span>
<span class="num" onclick="document.calc.txt.value += '7'">7</span>
<span class="num" onclick="document.calc.txt.value += '8'">8</span>
<span class="num" onclick="document.calc.txt.value += '9'">9</span>
<span class="minus" onclick="document.calc.txt.value += '-'">-</span>
<span class="num" onclick="document.calc.txt.value += '4'">4</span>
<span class="num" onclick="document.calc.txt.value += '5'">5</span>
<span class="num" onclick="document.calc.txt.value += '6'">6</span>
<span class="plus" onclick="document.calc.txt.value += '+'">+</span>
<span class="num" onclick="document.calc.txt.value += '3'">3</span>
<span class="num" onclick="document.calc.txt.value += '2'">2</span>
<span class="num" onclick="document.calc.txt.value += '1'">1</span>
<span class="num" onclick="document.calc.txt.value += '0'">0</span>
<span class="num" onclick="document.calc.txt.value += '00'">00</span>
<span class="num" onclick="document.calc.txt.value += '.'">.</span>
<span class="equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</body>
</html>
②style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.calculator {
position: relative;
display: grid;
}
.calculator .value {
grid-column: span 4;
height: 50px;
text-align: right;
border: none;
outline: none;
padding: 10px;
font-size: 18px;
}
.calculator span {
display: grid;
width: 60px;
height: 60px;
color: #fff;
background: #0c2835;
place-items: center;
border: 1px solid rgba(0,0,0,.1);
}
.calculator span:active {
background: #74ff3b;
color: #111;
}
.calculator span.clear {
grid-column: span 2;
width: 120px;
background: #ff3077;
}
.calculator span.plus {
grid-row: span 2;
height: 120px;
}
.calculator span.equal {
background: #03b1ff;
}
各ボタンを押した際に起こる事。
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="clear" onclick="document.calc.txt.value = ''">c</span>
inputタグの箇所にある、name属性のid属性との違いがいまいち理解しきれていなかったのですが…
どちらもHTML要素を識別するためのものという点では同じですが、
フォーム要素に関してはサーバーにデータを送信する際には必ずname属性が必要になるルールがあるようです。HTMLの機能を使ってフォームから送信したときのキー名として機能します。
readonlyを指定するとフォーム内に文章を直接書き込む事ができなくなり読み取り専用になります。
下記の記述では、「c」をクリックするとフォーム内の値が空になるように設定されています。
<span class="clear" onclick="document.calc.txt.value = ''">c</span>
他の記述も同じ原理で、「1」という数字を押せばフォーム内に「1」が文章として入力されたり、
「-」や「+」を入力すれば、「-」や「+」の演算子が入力されます。
合計数値を計算する際に押下する「＝」は下記の記述になります。
<span class="equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
eval()とは。与えられた文字列を評価しその結果を返す関数。
フォームに入力された数字や演算子は文字列として入力されているため、数値や演算子に変換して計算してくれます。
例えば、フォーム内に「1+2」が表示されている状態とすると、
文字列の「"1+2"」が代入されているという事になる。
なので、eval()を使用して、
計算式の「1+2」として値を返してくれます。