プログラミング(?)やってみた

下のような整数の二乗計算機を作れるようになるまでのメモ

^2=

計算

【動機】
nowanowa.github.io
↑こういうブラウザで動くの、便利なので作りたい。
何も知らないけど勉強する。
中学生か高校生の頃に授業で教わったサイト:HTMLクイックリファレンスが参考になりそう。
はてな記法を使う。

<button>ボタンだよ</button>

と書くと
ボタンだよ
このようにボタンが出てきた。
さらに

<input/>

と書くと

入力するところが出てきた。
名前をつけられた入力欄↓

<input name="A"/>

とても楽しい。
次のように書くと

<button onclick="A()">押して</button>
<script>
    function A() {
      alert("押されたよ");
    }
</script>

押して

押すと関数A()が実行されるようになる。
onclickで起こることを決められるようだ。細かいことを言うと、押して離したときに起こるようだ。
数字専用の入力枠はこれで作れる↓

<input type="number"/>

見たことある感じになってきた。
outputを使って、ボタンを押されると文章が変わるしくみをつくってみる。

<form>
<button type="button" onclick="B.value='押された'">押す</button>
<output name="B">押されてない</output>
</form>

押す

押されてない

nameも使っている。
ここまで分かれば二乗計算機も書ける。

<form>
<input type="number" name="a" />^2=<output name="result" ></output>
<button type="button" onclick="result.value=(a.value)*(a.value)">計算</button>
</form>

^2=

計算