【旧版】JavaScriptで割り勘電卓を作ろう (全7回)
最新版のレッスンはこちらから »
【最新版】JavaScriptで割り勘電卓を作ろう (全12回)
JavaScriptで簡単な割り勘電卓を作っていきます。
このレッスンでは HTML5 / CSS3 を使用しています。
-
#01 割り勘電卓を作ろう (01:18)
- 完成版
- 必要となる知識
- レッスンにおける環境
-
#02 画面に要素を配置していこう (01:58)
- index.htmlの作成
- スタイリング
-
#03 要素のスタイルを整えていこう (02:55)
- フォームのスタイリング
- ボタンのスタイリング
-
#04 要素を取得していこう (02:24)
- 要素の取得
- フォームへのイベントリスナー追加
-
#05 エラー処理をしてみよう (02:45)
- エラー処理
- 動作確認
-
#06 割り切れた場合の処理をしていこう (01:26)
- 割り切れた場合の処理
- 動作確認
-
#07 割り勘電卓を完成させよう (02:52)
- 割り勘処理
- 動作確認
レッスン通りのプログラムだと、190円の3人で割り勘したときに、次のような結果になってしまいます。
一人 0...
補足情報 必要となる知識について
・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
・CSS入門 (全22回)
http://dotinstall.com/lessons/basic_css_v3
・CSS3入門 (全18回)
http://dotinstall.com/lessons/basic_css3_v2
・JavaScript入門 (全24回)
http://dotinstall.com/lessons/basic_javascript_v2
・正規表現入門 (全14回) → #05にて使っています
http://dotinstall.com/lessons/basic_regexp
なお、レッスン中で使っているエディタについてはこちらをご覧ください。
・Atom入門 (全13回)
http://dotinstall.com/lessons/basic_atom