【Day3】 Arithmetic
次の課題はこんなかんじ。
四則演算のやついこ
数字を入れるテキストボックス2つと、その間に+,-, x, ÷を選べるセレクタを用意して、
ボタン押したら計算結果をアラートしよかほしたら
Language
HTML/ Javascript
My code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Arithmetic</title>
</head>
<body><form id="arthmetic">
<input type="text" id="n1"><select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="×">×</option>
<option value="÷">÷</option>
</select><input type="text" id="n2">
<input type="button" name="enter" value="=" onClick="calc()">
</form>
<script>
function calc()
{
var oper = document.getElementById("op").value;
var a = document.getElementById("n1").value;
var b = document.getElementById("n2").value;
a = Number(a)
b = Number(b)if(oper == "+")
{
alert(a+b);
}
else if(oper == "-")
{
alert(a-b);
}
else if(oper == "×")
{
alert(a*b);
}
else if(oper == "÷")
{
alert(a/b);
}
}
</script>
</body>
</html>
Note
細かいミス
外出先で本を読みつつiPhoneのメモ帳に書いたコードをそのままコピペでつかってしまい、if が If と大文字で始まったままなどの細かいミスが結構あった。全角スペースなども2つほど見受けられた。
テキストエディタ
過去、AtomとBracketsはダウンロードしており、AtomのTabキーを押せば閉じタグが自動でつく昨日が好きだったのでしばらくつかっていたのだが、重くて動かなくなってしまうことがあるので使用をやめていた。MacOSに最初から搭載されていたCotEditorをつかうようにしていた。
しかし上述のようなケアレスミスは、なかなか発見できない。
その点、AtomやBracketsなどはパッと見でエラー箇所がわかるのでありがたい。
また以前のように重くて動かなくなってしまったらかなりのストレスなのだが、しばらくはまたAtomでいこうかなとおもう。
HTMLからの要素取得
はじめはHTMLタグにnameをつけて、それを辿るかたちで目的の要素までたどっていた。以下緑の箇所。しかしどうも要素を取れていない模様。これではできなかったので、下述のid名から取得するやり方に変更してできました。
<script>
function calculator()
{var calculator = document.forms.arthmetic.mark.value;
var a = document.forms.arthmetic.firstValue.value;
var b = document.forms.arthmetic.secondValue.value;
if (calculator == "+") {
var plus = a+b;
alert(plus);
}else if (calculator == "-") {
var minus = a-b;
alert(minus);
}else if (calculator == "×" {
var times = a*b;
alert(times);
}else if (calculator == "÷") {
var divide = a/b;
alert(devide);
}
}
</script>
getElementById()
ネットではnameではなくidをつけて辿っていくパターンが多くあったのでそちらで試して見る。
nameとidに対して差はないとおもっていたが、どうやらちがうよう。
Developer tool 画面の謎の赤丸
コードはあってそうなのに一向に動作ができず、
Inspectので変な赤丸が見受けられたので、その部分を手打ちでもう一度いれなおしたら動きました。
半角だったしスペースもなかったのですが、なにか入っていたのだろうか。
Reference
プルダウンから選べるようにする
name属性をつかってinputタグ内の情報をJacaScript内に呼んでくる
[JavaScript] フォーム内の要素をname属性を使って取得（document.forms） - JoyPlotドキュメント
数字2箇所入力、演算子選択をしたうえで計算させる
getElementById()
JavaScriptでidから要素を取得する方法：getElementById() | UX MILK
テキストボックスに入力された文字列はvalueプロパティで取得します。ただし、valueプロパティの値は文字列なので、数値として計算する場合にはNumber()等を使って明示的に数値型に変換するようにしましょう。
nameとidのちがい
Road map
if else ← 今ここ
for loop
while loop
function
あたりの練習をやりつつ、再来週くらいにjQuery, 3ヶ月後にReact。
ちなみに今の時点では全部名前を聞いたことがあるくらいでまったく未知。
自主学習の方は、本読みと動画閲覧。
それなりにカオスってきたので落ち着いたら整理して計画をたてつつ進めたいが今はその時間も惜しい。ということでとりあえず五月雨にすすむ。
