中学生が伝授 jsで超軽量電卓を作る！ JSの入門に！

この記事の概要

中学生がわかりやすく、jsで電卓を作ります。
関数や変数を使っています、単純なコードなので意外と簡単です。

どのようなコードで書くか

まず計画を立てることが大切です。(初心者)
今回は、

• 値を入力する機構を作る。
• 四則計算の切り替えを作る。
• 結果を表示
• デザインを、作る。

という流れです、早速作っていきましょう。
前提として、 var や functionなどはできるような方向けです。

値を入力する機構を作る。

まずファイル構成は、
電卓- index.html
- script.js
- style.css
超単純です。
まず、index.htmlに、答えと、入力中の値を表示する、要素を作ります。

0

1
2
3
4
5
6
7
8
9
0



んな感じで単純です。
入力ボタンを作り
解説すると、idをつけていじれるようにした文字を生成しました。
jsも読み込みます。
scriptを書きます。
anser = 0;
totyuumoji = document.getElementById("totyuu");

var totyuu = "";
var memory = 0;
s = "";
function one(){
totyuu = totyuu + "1";
enter()
}
function two(){
totyuu = totyuu + "2";
enter()
}
function three(){
totyuu = totyuu + "3";
enter()
}
function four(){
totyuu = totyuu + "4";
enter()
}
function huxaibu(){
totyuu = totyuu + "5";
enter()
}
function six(){
totyuu = totyuu + "6";
enter()
}
function seven(){
totyuu = totyuu + "7";
enter()
}
function hati(){
totyuu = totyuu + "8";
enter()
}
function nain(){
totyuu = totyuu + "9";
enter()
}
function zero(){
totyuu = totyuu + "0";
enter()
}
function enter(){
totyuu = totyuu + s;
var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuumoji.innerHTML = totyuu_Nunber;
memory = totyuu_Nunber;
}

function プラス(){

var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuu = "";
memory = totyuu_Nunber;
enter();
totyuumoji.innerHTML = "";

s = "+";

s = ""
}
function マイナス(){
var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuu = "";
memory = totyuu_Nunber;
enter();
totyuumoji.innerHTML = "";
s = "-";

s = ""
}
function かける(){
var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuu = "";
memory = totyuu_Nunber;
enter();
totyuumoji.innerHTML = "";
totyuu = "";
s = "*"

s = ""
}
function わる(){
var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuu = "";
memory = totyuu_Nunber;
enter();
totyuumoji.innerHTML = "";
totyuu = "";
s = "/";

s = ""
}
function ans(){
anse = parseFloat(totyuu);
abe = parseFloat(memory);
anser = abe + anse;
an = document.getElementById("Anser");
an.innerHTML = anser;
totyuu = "";
memory = "";
}

途中で飽きて、関数名や、引数名が、不適切ですが許してください。
実はとても簡単なコードで、これは、4部分に分かれています。
１つ目は
anser = 0;
totyuumoji = document.getElementById("totyuu");

var totyuu = "";
var memory = 0;
s = "";
これです、必要な引数を作っています。
２つ目は
function one(){
totyuu = totyuu + "1";
enter()
}
function two(){
totyuu = totyuu + "2";
enter()
}
function three(){
totyuu = totyuu + "3";
enter()
}
function four(){
totyuu = totyuu + "4";
enter()
}
function huxaibu(){
totyuu = totyuu + "5";
enter()
}
function six(){
totyuu = totyuu + "6";
enter()
}
function seven(){
totyuu = totyuu + "7";
enter()
}
function hati(){
totyuu = totyuu + "8";
enter()
}
function nain(){
totyuu = totyuu + "9";
enter()
}
function zero(){
totyuu = totyuu + "0";
enter()
}
function enter(){
totyuu = totyuu + s;
var totyuu_Nunber = totyuu
totyuumoji = document.getElementById("totyuu");
totyuumoji.innerHTML = totyuu_Nunber;
memory = totyuu_Nunber;
}
ここは、数字を入力するボタンの、scriptです。
簡単に説明すると、totyuuという、数字をどんどん足してく、引数に足すだけです。
""で文字にすると、右に足されます。
enterという関数で、書き換えたり、足したり、途中式を保存します。
３つ目
function ans(){
anse = parseFloat(totyuu);
abe = parseFloat(memory);
anser = abe + anse;
an = document.getElementById("Anser");
an.innerHTML = anser;
totyuu = "";
memory = "";
}
ここで、決定して答えを表示させます。
文字を数字化して。
右に並べられた、数が数字になります。
数字のままで、足すと、6 + 6 = 12のように普通に足されて、電卓になりません。
次に、足す前の値を保存する、memoryという引数と、totyuuを足します。
そして、document.getelementbyid("Anser");
で、要素を取得し、書き換えてリセットします。
コードはこんな感じで、３０分ぐらい調べまくって解読すると、意外と知識が付き、ある程度作れるようになります。
あとは見た目です。
30分ぐらいで作ったので、雑で間違ってると思いますが、ちゃんと書けば、意外と本格的なのも作れちゃったりするので、チャレンジしてみてください。
あとはコピペでいいです。
style.css
と言いたいんですが、自分CSSあんまりできないので、自分で作りましょう。