0
0

電卓を作りながら勉強ー1

Posted at

お疲れ様です。

JavaScriptを使って、まずは簡単に作れるものはないか探していたところ、今日偶然にも私用で使う電卓を購入したことを思い出し、「電卓作ってみよう!」ということで、考え方を検索:computer:

いろいろと見てきましたが、要素の意味なども説明してくださっている @bumpfuji10様 の記事を見て、分かりやすそうと思いましたので、分からないところは調べて理解しつつ、進めていこうと思います!
※bumpfuji10様のページ内でも書かれてあることですが、ウェブカツブログ様のコードを元にbumpfuji10様なりの解釈で書かれたコードとなっております。これを盗用し私発信とすることが目的では一切ございません。気になる方はぜひ上記ページをご覧ください!


まずは進捗です。

See the Pen Untitled by mtzkmy (@mtzkmy) on CodePen.

まだhtmlしか書けておりませんが、見た目は電卓になりました!
明日、続きを少しずつやっていこうと思います。


今日勉強になったポイント
:point_up:colspan(コルスパン)属性
 ↳水平方向のセル結合のこと
 ここでいう、一番上に表示されている箇所です。td属性で、 colspan="〇" と書きます。
  〇には数字が入り、2とするとセル2個分に。今回はボタン4つ分に揃えたいので、4となっています。


:point_up:input属性
 ↳MDN様のページを見てびっくりしました…。こんなに種類があるとは…
 今回登場している class name value は単純にクラス名、要素に名前を指定するもの、
 値を入力するもので、checkbox rajio hidden の場合は省略不可。


:point_up:onclick属性
↳html要素がクリックされた時に実行されるjsコードが何かを指定するもの。
今回は、htmlしか書いていませんので、jsのコードを書く時にどういう動きをしているか分かると思われるので、今日は言葉として知っておく。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0