JavaScript

【JavaScript】かんたん・シンプルな電卓の作り方

 

今回は「JavaScript を使った簡単・シンプルな電卓の作り方」を紹介します。

 

電卓というと複雑なコードを想像する方もいるかもしれまんが、eval 関数という関数を使うと簡単に作ることができます。

今回はその eval 関数の使い方を紹介します。
 

jQuery を使うとさらにシンプルなコードになるので、ぜひこちらもお試しください🙂

【jQuery】かんたん・シンプルな電卓の作り方 今回は「jQuery を使った簡単・シンプルな電卓の作り方」を紹介します。 電卓というと複雑なコードを想像する...

 


 

動画

準備中

 
 

解説

HTML

まずは HTML で電卓を用意します。

HTML ファイルを作成して、以下のようにコードを追加します。ここでは index.html という名前でファイルを作成しました。

 

6行目

Google Fonts から「Inconsolata」というフォントを読み込んでいます。

Google Fonts には 900 種類以上のフォントが用意されていて、好きなフォントを簡単に使うことができます。

Google Fonts の詳しい使い方はこちらの記事をお読みください。

【2019年版】Google Fonts の使い方(日本語フォントにも対応) ここでは日本語フォントも使える「Google Fonts の使い方」を紹介しています。 使い方はとても簡単で フォン...

 

onclick

それぞれのボタンに onclick="pushBtn(this);" と書いています。

これは「このボタンが押されたら pushBtn 関数を呼ぶ」という意味です。

また、pushBtn 関数内で押されたボタンのテキストを取得したいので、引数に this をセットしています。

例えば「9」のボタンを押した場合、pushBtn 関数ではこのように HTML を受け取ることができます。
<button onclick="pushBtn(this);">9</button>
 
 

CSS

このままだと電卓が使いにくいので、CSS で電卓らしくしていきましょう。

8~41行目を追加します。

 

このような画面になれば準備完了です。


 
 

JavaScript

JavaScript では、先ほど HTML で用意した pushBtn 関数を書いていきます。

5~25行目を追加します。

 

8行目

var pushed = obj.innerHTML;

押したボタンのテキスト(数字や記号)を取得しています。


 
 

10~12行目

inputLabel.innerHTML = eval(inputLabel.innerHTML);

=(イコール)が押された場合は eval 関数を使って入力した数式を計算します。

eval 関数は文字列を数式(JavaScript コード)として実行してくれる関数です。

ここでは

  1. inputLabel.innerHTML で入力された文字列を取得
  2. eval 関数で計算
  3. inputLabel.innerHTML に計算結果を表示

という処理を行っています。
 

eval 関数の脆弱性(危険性)について

eval 関数は文字列をそのまま JavaScript コードとして実行してくれる便利な関数ですが、注意点もあります。
例えば input type="text" や textarea などにユーザーが実行する文字列を入力して eval 関数を実行する場合です。ウェブサイトの情報を読み取る JavaScript コードを実行されてしまう可能性もあるので、eval 関数を使う場合はご注意ください。

 

14~16行目

AC(All Clear) が押されたら inputLabel のテキストを 0 にします。
 

18~24行目

ここでは = と AC 以外が押された場合の処理を実行します。

inputLabel に表示しているテキストが 0 だけの場合は、押されたボタンの文字をそのまま表示します。
例)0 が表示されているときに 3 を押したら 3 を表示

0 以外のテキストが表示されている場合は、その文字列に入力されたボタンの文字を結合して表示します。
例)1 が表示されているときに 3 を押したら 13 を表示

 
 

完成

 

上手く動かない場合はサンプルコードを確認してみてください🙂

 
 

サンプルコード

 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です