jQuery

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

 

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

 

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

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

JavaScript のコードはこちらから🙂

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

 


 

動画

準備中

 
 

解説

HTML

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

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

 

6行目

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

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

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

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

 
 

CSS

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

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

 

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


 
 

jQuery の読み込み

jQueryを読み込む方法は2つあります。

  1. ファイルをダウンロードする
  2. CDNを利用する

今回はダウンロードではなく CDN(コンテンツデリバリネットワーク)を利用します。

CDN を使うとインターネット経由でファイルを読み込むことができるので、ダウンロード不要で簡単に使うことができます。

CDN を提供しているサイトはいくつかありますが、今回は私がいつも使っている「Google Hosted Libraries」を紹介します。

「Google Hosted Libraries」で検索、または Google Hosted Libraries にアクセスして jQuery のコードをコピペします。
 


 
 

4~9行目を追加します。

 
 

ボタンが押された時の処理

jQuery の読み込みができたら、それぞれのボタンが押された時の処理を書いていきます。

4~22行目を追加します。

 

4行目

$('button').click(function(){ … });

それぞれのボタンにクリックイベントをセットしています。

ボタンが押されたら 5~21 行目のコードが実行されます。
 
 

5行目

var pushed = $(this).text();

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

8~10行目

inputLabel.text(eval(inputLabel.text()));

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

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

ここでは

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

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

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

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

 

11~13行目

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

16~20行目

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

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

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

 
 

完成

 

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

 
 

サンプルコード

 

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

COMMENT

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