ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
JavaScriptで割り勘電卓を作ろう
JavaScriptを使って、割り勘電卓を作る方法を見ていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(12)
#01 割り勘電卓を作ってみよう
(02:42)
無料公開中
完成版の確認
index.htmlの作成
main.jsの作成
styles.cssの作成
未完了
#02 入力エリアを作っていこう
(02:39)
無料公開中
input-areaのマークアップ
styles.cssの読み込み
未完了
#03 フォームのスタイルを整えよう
(02:59)
無料公開中
bodyのスタイル設定
フォーム部品のスタイリング
未完了
#04 計算ボタンを作ろう
(02:45)
計算ボタンのマークアップ
計算ボタンのスタイリング
未完了
#05 結果表示エリアを作ろう
(02:44)
result-areaのマークアップ
result-areaのスタイリング
未完了
#06 要素の取得をしていこう
(02:11)
main.jsの読み込み
要素の取得
未完了
#07 割り勘の仕組みを理解しよう
(02:44)
割り勘の仕組みについて
未完了
#08 計算式を完成させよう
(02:51)
割り勘機能の実装
未完了
#09 計算結果を表示しよう
(01:57)
計算結果の表示
未完了
#10 ユーザーの入力を監視しよう
(02:35)
disabledクラスの実装
keyupイベントの設定
未完了
#11 正規表現で入力内容をチェックしよう
(02:48)
checkInput()の実装
未完了
#12 リセット機能を実装しよう
(02:54)
リセット機能の実装
focusの設定
未完了
リリース情報(note)
『JavaScriptで割り勘電卓を作ろう』を追加しました
詳細情報
最終更新日
2017年11月15日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript