フロントエンドエンジニアを目指している、まゆ（@Ymayu_it）です。
今日は電卓の写経をしました。
電卓の写経について記事にしていきます。
目次
電卓の写経
写経ですが自分で打ったコードで数字を打つと数字が入力されて、四則演算してくれるなんて…
感動…！
とはいっても写経なので次は自分で最初から作れるように、コード内容をみていきます。
HTML
HTMLです。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>dentaku</title>
</head>
<body>
<form class="calculator" name="calc">
<input class="value" type="text" name="txt" readonly="">
<span class="num 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="num" 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="num 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="num equal" onclick="document.calc.txt.value = eval(calc.txt.value)">=</span>
</form>
</body>
</html>
html内には
- form
- onclick
が用いられていました。
それぞれ見ていきます。
form要素で入力フォームを作成
formで全体を囲うことで全体が入力できるような状態を生み出されました。
inputで数字や四則演算を表示させる
inputで電卓の数字や四則演算を打つことで打ったものが表示されました。
inputにcalculator（電卓）というクラス名を指定し、name属性でform名をcalcに指定…したのかな？
onclickで数字と四則演算を作成し入力させる
html
<span class="num" onclick="document.calc.txt.value += '/'">/</span>
上記のものをそれぞれ電卓で表示されている部分を書いていっており、表示されている部分をクリック（onclick）することでinput上に表示される…かな？
その際にdocumentオブジェクトを用いている。
document.フォーム名.入力項目名.
上記よりdocumentに続くものがフォーム名と入力項目名なのでcalc.txt.valueになっている…と思われる…
クラス名の箇所は以下の3つ以外はそのまま。
- c
- +
- =
にはそれぞれ、
- crear
- plus
- equal（等しい）
（英語は得意ではないので）これによって色や範囲を広くするなどcssで行っている。
よく使うから使いやすいようにだろうと思う。
ビルトイン関数のevilでJavaScriptに変換し実行
JavaScriptにあらかじめ組み込まれているプロパティにあるメソッドがビルトイン関数のようです。
ビルトイン関数であるevalの後ろにある文字列が数字と四則演算に指定されているので、入力結果を変換し実行する使い方かと…！
CSS
cssは装飾や配列で使うことに加え、activeを使用すると電卓の数字や四則演算が押されることで色がボタンの色と変化するなどの装飾がされていました！
電卓の写経をして思ったこと
コード数が少ないので見やすかったです。
最初、<script>もなかったのでJavaScriptではないのかと思いましたが、JavaScriptのコードが調べるとあったので、htmlに組み込む方法もあるのかな？
他の人の電卓のコードをみると<script>の中にJavaScriptを入れていたので、組み込む方法と組み込まない方法があるのかな？
ぐぐると検索してでてこなかったので違う方法をもう少しみてから調べていこうと思います。
おわりに
電卓一つでも十人十色で作成されるらしいので他の方法も見つつ、なれてきて少しでも理解できてきたら自分で１から作成してみようと思っています。
もりけん塾（@terrace_tech）
Thanks：もりけんさん