Q&A
プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）
前提・実現したいこと
今年からSEとして働き始めたものです。
ただいま電卓を作成をしています。
その中でhtmlでモック画面は作ったのですが、いざコードを書くとなったところで、どうやったら画面上のボタンを押してそのボタンの数字や記号を計算結果表示欄に表示できるのかがわかりません。
よって画面上のボタンをクリックすることで数値や記号を表示するには、どのような考え方でどのようなコードを書けば良いのか教えていただきたいです。
ちなみにネットで調べるとJavaScriptのコードばかり出てくるのですが、JavaScriptはまだ書いたことがないため、サーブレット・jsp・Javaを組み合わせて作りたいです。
それともやはりJavaScriptでないとできないのでしょうか。。。
初心者でわからないことが多く初歩的な質問かもしれませんが、どうぞよろしくお願いいたします。
該当のソースコード
＜モック画面＞
html
1<!DCTYPE html> 2<head> 3 <meta charset="UTF-8"> 4 5<title>電卓</title> 6</head> 7<body> 8<p> 9</p> 10<table border="2px"> 11 <tr> 12 <th colspan="5" align="right"><div id="output">0</div></th> 13 14 </tr> 15 <tr> 16 <form method="post" name = "clear" action="Calculator.html"> 17 <td><input type="button" value="７"></td> 18 <td><input type="button" value="８"></td> 19 <td><input type="button" value="９"></td> 20 <td colspan="2" align="center"><input type="submit" name = "clear" value=" Ｃ "></td> 21 </form> 22 </tr> 23 </tr> 24 <tr> 25 <td><input type="button" value="４"></td> 26 <td><input type="button" value="５"></td> 27 <td><input type="button" value="６"></td> 28 <td align="center"><input type="button" value="×"></td> 29 <td align="center"><input type="button" value="÷"></td> 30 </tr> 31 <tr> 32 <td><input type="button" value="１"></td> 33 <td><input type="button" value="２"></td> 34 <td><input type="button" value="３"></td> 35 <td><input type="button" value="＋"></td> 36 <td><input type="button" value="－"></td> 37 </tr> 38 <tr> 39 <td><input type="button" value="０"></td> 40 <td><input type="button" value=" ・ "></td> 41 <td><input type="button" value="√ "></td> 42 <td><input type="button" value="％"></td> 43 <td><input type="button" value="＝"></td> 44 </tr> 45</table>
初めて書いたため、不備があり申し訳ありませんでした。ご指摘いただきありがとうございます。書き直したので、ご確認いただけますと幸いです。
「JavaScriptはまだ書いたことがない」とのことですがサーブレットについてはどの程度把握されているのでしょうか。
回答2件
0
前置きですが、サーブレットをやるのであればWeb側の技術を習得していくこととなります。JavaScriptは避けて通れない技術なので、その辺りはきちんと認識しておいてください。
サーブレットで行うには対象のサーブレット側にリクエストを送らなければなりません。
基礎的なところを説明している記事は下記。
電卓の要件（簡略）は下記ですね。
- 数字ボタンを押したら押した数字が順番に画面に表示される
- 途中で+など演算のボタンを押したら対もう一方の数字を入力するモードに切り替わる（最初の数字と押された演算ボタンを保管しておく）
- 数字ボタンを押したら最初から数字が順番に画面に表示される
- 「＝」を押すと保管しておいた数字と今打った数字の足し算を行い、結果を画面に表示する
ただし、
ルートや％などボタンを置かれていますが、まずは四則演算のみ実装していくと良くべきです。
ただの電卓とはいえ、実は足し算だけでも最初は苦労します。
結果を元に次の演算を行うこともありますよね？
ということで、実現のために越えるべき課題は以下。
（むしろ詳細設計書の一歩前くらいの項目です）
- 数字ボタンを押したら押した数字をサーブレットに送信し受け取ってとりあえずprintで表示
- 1.の数字を画面に返して表示させる
- 次にボタンを押したら1.で押した数字もあわせてサーブレットに送信し、1.で押した数字の後ろに数字を連結して1.→2.の順で実行
※ヒントですが、送信するためには例えばtype=hiddenなどのform内要素で持っておく必要があります。いっそtype=textとかnumberでreadonlyにしておいても良いかと思います。
0. ＋ボタンを押したら演算を＋モードとして保持し、現在の入力値を別途保持する
0. 数字ボタンを押したら1.のときと同じで画面に表示し、元の数字は見た目上破棄する
0. 3.と同じ
0. ＝を押したら4.で保持しておいた数値と現在の数値を足し算 1.と同じ
0. 足した結果を3.と同じく表示させる
本来は小数点の計算も入ってくると思いますし、
整数の計算だと0123など頭が0の数値はNGとしなければなりませんが、
ひとまず、まずは基本部分を上記の要領で作ってみてください。
必ず1つ1つ確かめながらやること。
・・・とここまで読むとおそらく「サーバーとのリクエスト・レスポンスを持っておかないといけないからあまりサーブレットでやる意味が無いな・・・」と思うかもしれませんが、実はその通りです。
データベースアクセスやメール送信など「サーバー側でしかできないこと」をやるのでなければ、サーブレットのメリットが活かせません。
ただ、サーブレットを利用してデータの保持やリクエスト・レスポンスを扱うための勉強にはなりますので、実戦的かどうかはともかく、損はないかと思います。
がんばってください。
投稿2018/06/20 08:18
総合スコア80850
0
結論から言えば、JavaScriptを使わないと無理です。
Webページで画面を構築するには、HTML、CSS、JavaScriptの3つが必要となります。
特にボタンを押したら、特定の処理するといった事は、JavaScriptでしか出来ません。
電卓を作るだけでDBに保存するなどが必要ないのであれば、サーバサイド(サーブレット、JSP)は不要です。
というよりも、まずこの3つの知識があいまいとか、全然分からないという感じではサーブレット、JSPはまだ早いのではないでしょうか。
ネットで断片的な知識を拾っても、ろくに身に付きません。
ググるにしても、最低限の知識と応用力が必要です。
特にお仕事して、プログラミングをするのであれば体系立てて学習したほうが絶対にいいです。
JavaScriptの簡単な入門書を買って、勉強したほうが時間効率が良いと思いますよ。
投稿2018/06/20 08:02
総合スコア4025
あなたの回答
tips
プレビュー
