プログラミングを始めた時に既に作りたいものがたくさんあったのですが、まだ技術も基礎もない自分でも何か作れない
かなと試行錯誤していた時に作ったアプリです。題名は、税込み商品計算アプリです。
消費税が上がることを思い出したことをきっかけに作ったアプリです。使い方は単純で、商品と現在の消費税を入力して計算ボタンを
押すと税込み価格をテキストで表示する、本当にそれだけのアプリです。
<form name="text">
<input type="text1" id="okt1"name="add1"> ×
<input type="text2" id="okt2"name="add2">
</form>
<input type="button" id="cb" value="お会計"onclick="cash()">
<input type="button" id="res" value="リセット"onclick="reset()">
<p id="result"></p>
<script>
var num1 = document.text.okt1.value;
var num2 = document.text.okt2.value;
var res = document.getElementById("result");
function cash(){
num1 = document.text.okt1.value;
num2 = document.text.okt2.value;
res = document.getElementById("result");
sum = Math.round(num1 * num2);
if(num1==="" || num2 ===""){
res.innerHTML = "数値を入力してください。";
}else if(!isNaN(num1) && !isNaN(num2)){
res.innerHTML = "税込みで" + sum + "円になります。";
}else{
res.innerHTML = "数値以外が入力されています";
}
}
//データを削除する処理
function reset(){
document.text.okt1.value="";
document.text.okt2.value="";
res.innerHTML = "";
}
</script>
適当にコピーしていただいてchromeで開けばすぐに動きます。
プログラミングを経験しているかたにとってはものすごくチープに感じてしまうくらいしょぼい出来ですが
javaScriptでは必須スキルのフォームを作る方法を詰め込んでいるので、初心者がありがちなこのコードは何をしているか
分からない、何のための関数なのか理解できないといった最初の壁をぶち破ることができます。
reactやvue.jsではこの作法を応用してコンポーネントを作りますが、これら流行りのフレームワークも簡単なアプリを
つくっていく中でめきめきと覚えることができるのではないでしょうか。（筆者は容量が悪いので時間がかかりました）
初心者のかたで何が分からないか分からないという方は、もしjavaScriptでググってこのサイトを見つけたら何かの縁かと
思って試しに動かしてみてくださいね。
