[ 📌文法] [ 🎨命令一覧]

[編集モード] 税抜・税込・値引き計算のできる電卓

日本語プログラミング言語「なでしこ」 Advent Calendar 2023　13日目の記事用。マイナビ連載のオリジナル電卓（https://news.mynavi.jp/techplus/article/nadeshiko-81/）を改造して消費税計算に便利な税抜・税込ボタンを付けたり、値引き計算がしやすくしたりしました。

# オリジナル電卓を改造するよ！
!『https://n3s.nadesi.com/plain/wa.nako3』を取り込む。

# 実行ボタンからフォーカスを外す。
「#runButton」のDOM要素取得。
「blur」を[]でJSメソッド実行。

＃定義
# ボタンのキーの並びを定義 --- (*1)
電卓キー定義 = [
　"+/-", "％", "税抜", "税込",
　"▶",　"AC", "CE", "÷",
　"7", "8", "9", "×",
　"4", "5", "6", "−",
　"1", "2", "3", "＋",
　"0", "00", ".", "＝"]
Fメモリ＝0# 電卓の計算用に使う
F演算子＝「」
F表示用＝0

# キーボード操作用
キー対応表＝{
　"+":"＋", "-":"−", "*":"×", "/":"÷", "Enter":"＝", ".":".",
　"Home":"+/-", "End":"％", "PageUp":"税抜", "PageDown":"税込",
　"Escape":"AC", "Delete":"CE", "Backspace":"▶", "%":"％"
}

＃＃税計算用
税率定義＝[8,10]。
税率＝税率定義[0]。
税計算メモリ＝空。
税計算スイッチ＝1。
税小数点処理フラグ＝0。# 0,四捨五入、1,切り捨て、2,切り上げ

＃＃演算子の動作調整用
直前キー＝空。

＃ＵＩ作成
DOM親要素に{
　"幅": "18em",
　"余白": "2em 1em",
　"背景色": "#FFCCCC",
　"文字サイズ": "1em",
　"角丸":"1em",
　"ボーダー": "ridge 4px #999999"
}をDOMスタイル一括設定。

＃＃確認用
/*
「メモリ：」のラベル作成。
Fメモリラベル＝Fメモリのラベル作成
「　　表示用：」のラベル作成。
F表示用ラベル＝F表示用のラベル作成
改行作成。
*/
税メモリラベル＝税計算メモリのラベル作成。
税メモリラベルの「ボックス表示」に「inline-block」をDOMスタイル設定。
税メモリラベルの「幅」に「17.4em」をDOMスタイル設定。
税メモリラベルの「行揃え」に「右」をDOMスタイル設定。
改行作成。

＃＃税率設定
税率ラジオ＝空配列。
「税率：」のラベル作成。
税率定義を反復
　税率ラジオ[対象キー]＝「税率」で「{対象}%」のラジオボタン作成。
　ラベル＝税率ラジオ[対象キー]のDOM親要素取得
　ラベルの「色」に黒色をDOMスタイル設定。
　ラベルの「文字サイズ」に「0.9em」をDOMスタイル設定。
　税率ラジオ[対象キー]をクリックした時には、
　　　税率＝(対象のテキスト取得)の「%」まで切り取る。
　ここまで。
ここまで。
税率ラジオ[0]をオンにチェック設定。

＃＃演算子表示
「　　　　　　」のラベル作成。
F演算子ラベル＝F演算子のラベル作成
改行作成。

＃＃表示部分
表示用エディタ＝F表示用のエディタ作成。
表示用エディタに{
　"幅": "8.1em",
　"余白": "0 0.3em",
　"文字サイズ": "2em",
　"角丸":"10px",
　"背景色":"#F0FCF8",
　"行揃え": "右"
}をDOMスタイル一括設定。

改行作成。
表示用エディタのキー離した時には
　　F表示用＝表示用エディタからテキスト取得。
　　対象の「blur」を[]でJSメソッド実行。
ここまで
表示用エディタをクリックした時には
　　対象の「select」を[]でJSメソッド実行。
ここまで

＃＃ボタン
# --- ボタンを一気に作成する --- (*3)
ボタン一覧＝[]
電卓キー定義を反復
　　I=対象キー
　　ボタン一覧[I] = 対象のボタン作成。
　　ボタン一覧[I]に{
　　"幅":"3em",
　　"高さ":"2em",
　　"角丸":"1em",
　　"背景色":"#DDDDDD",
　　"文字サイズ":"1.3em",
　　"ボーダー":"outset 1px #999999"
　　}をDOMスタイル一括設定。
　　もし、(対象で「C」が何文字目)>0ならば、ボタン一覧[I]の「背景色」に「#F88833」をDOMスタイル設定。# クリアキー
　　もし、(対象で「税」が何文字目)>0ならば、ボタン一覧[I]の「背景色」に「#33CC99」をDOMスタイル設定。# 税計算キー
　　もし、(対象＝「.」)または((対象が数字か判定)＝はい)ならば、ボタン一覧[I]の「背景色」に「#B8B8B8」をDOMスタイル設定。# 数字キー
　　もし、(対象＝「＝」)ならば、ボタン一覧[I]の「背景色」に「#6699CC」をDOMスタイル設定。# 「＝」キー
　　ボタン一覧[I]をクリックした時には
　　　　対象のテキスト取得してキー処理。
　　　　直前キー＝対象のテキスト取得。
　　ここまで。
　　ボタン一覧[I]をマウス押した時には、
　　　　対象の「ボーダー」に「inset 1px #999999」をDOMスタイル設定。
　　ここまで。
　　ボタン一覧[I]をマウス離した時には、
　　　　対象の「ボーダー」に「outset 1px #999999」をDOMスタイル設定。
　　　　対象の「blur」を[]でJSメソッド実行。
　　ここまで。
　　もし、I%4=3ならば、改行作成。
ここまで。

# キーを押した時の処理 --- (*4)
●(Sの)キー処理とは
　　もしSが「AC」ならば # オールクリア
　　　　Fメモリ＝0。F表示用＝0。F演算子＝空。税計算メモリ＝空配列。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。
　　もしSが「CE」ならば # クリアエントリー
　　　　F表示用＝0。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。

もし(「＋−×÷」でSが何文字目)>0ならば # 演算ボタンの時
　　　　もし、Fメモリ＝0ならば
　　　　　　Fメモリ＝F表示用
　　　　違えばもし、（F演算子＝「％」）ならば//かつ（(「＋−」でSが何文字目)>0）ならば、
　　　　　　F演算子＝S
　　　　　　F表示用＝F表示用で計算処理。
　　　　　　Fメモリ＝0。
　　　　　　F演算子＝「＝」
　　　　　　F表示反映。
　　　　　　空で戻る。
　　　　違えばもし、(「＋−×÷」で直前キーが何文字目)>0ならば、
　　　　　　F演算子＝S。
　　　　　　F演算子ラベルに「　」&F演算子をテキスト設定。
　　　　　　空で戻る。
　　　　違えば
　　　　　　Fメモリ＝F表示用で計算処理
　　　　　　F表示用＝Fメモリ。
　　　　ここまで。
　　　　F演算子＝S
　　　　F表示反映。
　　　　F表示用＝0
　　　　空で戻る。
　　ここまで。

もしS=「＝」ならば # 「＝」ボタンの時
　　　　もし、F演算子＝「％」ならば、
　　　　　　Fメモリ＝0。
　　　　違えば、もし、（F演算子＝空）または（F演算子の1だけ文字左部分＝「税」）ならば、
　　　　　　F演算子＝空。F表示反映。
　　　　　　空で戻る。
　　　　違えば、もし、（Fメモリ＝0）かつ（F演算子＝「＝」）ならば、
　　　　　　空で戻る。
　　　　違えば
　　　　　　F表示用＝F表示用で計算処理。
　　　　　　Fメモリ＝0。
　　　　ここまで。
　　　　F演算子＝S。F表示反映。
　　　　空で戻る。
　　ここまで。
　　もしS=「+/-」ならば # 「+/-」ボタンの時
　　　　もし、(F表示用の1だけ文字左部分)＝「-」ならば、
　　　　　　F表示用＝F表示用の1から1文字削除。
　　　　違えば
　　　　　　F表示用＝「-」&F表示用
　　　　ここまで。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。

もしSが「▶」ならば # 桁下げ
　　　　F表示用＝F表示用を文字列変換。
　　　　残文字数＝F表示用の文字数-1。
　　　　もし、残文字数＝0ならば、
　　　　　　F表示用＝0。
　　　　違えば、
　　　　　　F表示用＝F表示用の1から残文字数を文字抜き出し。
　　　　ここまで。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。

もし、S＝「％」ならば、# ％の計算
　　　　F表示用＝F表示用*0.01。
　　　　もし、F演算子＝空ならば、F演算子＝「＋」
　　　　F表示用＝F表示用で計算処理。
　　　　F演算子＝S。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。

もし、（Sの1だけ文字左部分）＝「税」ならば、# 税抜/税込
　　　　もし、（（F演算子の1だけ文字左部分）＝「税」）ならば、
　　　　　　税計算スイッチ＝税計算スイッチ*-1。
　　　　違えば、
　　　　　　税計算スイッチ＝1。
　　　　　　税計算メモリ＝F表示用。
　　　　ここまで。
　　　　F演算子＝S。
　　　　もし、S＝「税抜」ならば、
　　　　　　F表示用＝税計算メモリ/(1+税率*0.01)。
　　　　　　もし、税計算スイッチ＜1ならば、
　　　　　　　　F表示用＝F表示用*(税率*0.01)。
　　　　　　ここまで。
　　　　違えば、# 「税込」ならば、
　　　　　　F表示用＝税計算メモリ*(1+税率*0.01)。
　　　　　　もし、税計算スイッチ＜1ならば、
　　　　　　　　F表示用＝税計算メモリ*(税率*0.01)。
　　　　　　ここまで。
　　　　ここまで。
　　　　税小数点処理フラグで条件分岐
　　　　　　0ならば、F表示用＝F表示用を四捨五入。。。
　　　　　　1ならば、F表示用＝F表示用を切り捨て。。。
　　　　　　2ならば、F表示用＝F表示用を切り上げ。。。
　　　　ここまで。
　　　　F表示反映。
　　　　空で戻る。
　　ここまで。

もし、S＝「.」ならば、# 小数点
　　　　もし、（F表示用で「.」が何文字目）＝0ならば、
　　　　　　F表示用＝F表示用&S
　　　　　　F表示用を表示用エディタにテキスト設定。
　　　　ここまで。
　　　　空で戻る。
　　ここまで
　　# 数字ボタンを押した時
　　もし、F演算子＝「＝」ならば、
　　　　F演算子＝空。F表示用＝0。
　　ここまで。
　　F表示用＝F表示用&S
　　F表示反映。

ここまで。

●F表示反映
　　F表示用＝F表示用を実数変換。
　　F表示用を表示用エディタにテキスト設定。
　　F演算子ラベルにF演算子をテキスト設定。
　　もし、（F演算子の1だけ文字左部分）≠「税」ならば、:
　　　　F演算子ラベルに「　」&F演算子をテキスト設定。
　　　　税計算メモリ＝空。
　　税メモリラベルに税計算メモリをテキスト設定。
　　＃確認
　　//FメモリラベルにFメモリをテキスト設定。
　　//F表示用ラベルにF表示用をテキスト設定。
ここまで。

# 計算処理 --- (*5)
●（Vで）計算処理とは
　　答え＝0
　　F演算子で条件分岐
　　　「＋」ならば、答え＝Fメモリ＋V。。。
　　　「−」ならば、答え＝Fメモリ−V。。。
　　　「×」ならば、答え＝Fメモリ×V。。。
　　　「÷」ならば、答え＝Fメモリ÷V。。。
　　ここまで。
　　//表示用エディタに答えをテキスト設定。
　　# 「@{答え}={Fメモリ}{F演算子}{V}」を表示
　　それは答え
ここまで。

●(nameでtextの)ラジオボタン作成
　　親＝DOM親要素。
　# ラベル
　　L＝「label」のDOM部品作成。
　　LにDOM親部品設定。
　　Lの「マージン」に「2px」をDOMスタイル設定。
　# ラジオボタン
　　Rとは変数＝「input」のDOM部品作成。
　　Rの「type」に「radio」をDOM属性設定。
　　Rの「name」にnameをDOM属性設定。
　　Rの「値」にtextをDOM属性設定。
　　Rの「マージン」に「2px」をDOMスタイル設定。
　# ラベルの末尾にtextを追加
　　Lの「append」を[text]でJSメソッド実行。
　　親にDOM親部品設定。
　　Rで戻る。
ここまで。

●(DOMの)DOM親要素取得
　　DOM["parentNode"]で戻る。
ここまで。

DOCUMENTをキー押した時には、
　S＝押されたキー。
　もし、（Sを数字か判定）＝はいならば、
　　　Sのキー処理。直前キー＝S。
　ここまで。
　キー対応表を反復
　　もし、S＝対象キーならば、
　　　　対象のキー処理。直前キー＝対象。
　　ここまで。
　ここまで。
ここまで。

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 税抜・税込・値引き計算のできる電卓

素材のアップロード