2回目の続きとなります。
まだ読んでいない方は是非どうぞ。
相手(PC)が出来上がったので、次はこちらからも手を出していきます。
「グー」「チョキ」「パー」のリンクを作成し、そのリンクを選ぶことでPCと勝負できるようにします。
JavaScriptを使って、どのリンクが押されたか制御します。
下記記事とほぼ同じことをしますが、こちらも参考として読んでみて下さい。
JavaScriptのメソッド作成
まずはメソッドJavaScriptのを作成します。
「WebContent」を右クリックしてjs用のファイルを作成します。
フォルダ名を「js」とします。
「WebContent」の直下に保存することを確認し「完了」を押下して下さい。
さらに、今作成した「js」フォルダの中にjsファイルを作成します。
右クリックで「新規」→「ファイル」を選択します。
ファイル名を「method.js」とします。
「js」直下に作成します。
そのまま「method.js」を編集します。
イメージはこんな感じです。
function select(handNumber) {
var selectHand = document.getElementsByName('hand');
selectHand[0].value = handNumber;
document.janken.submit();
}次はデータを受け取るための準備をしたいと思います。
JankenServlet.javaの編集
追記するのは3行だけです。
//ユーザの手の番号を受け取る
int userHandNumber = Integer.parseInt(request.getParameter("hand"));
//ユーザ側の手を決定
String userHand = hands[userHandNumber];
//画面側へデータ受け渡し
request.setAttribute("userHand", userHand);request.getParameter(“name”)で受け取ることができます。
受け取りは文字列なのでIngeger.parsIntでint形にキャスト（変換）してます。
Janken.jspの編集
先ほど作成したmethod.jsの読み込みと、リンクの作成、そして、データをJankenServlet.javaに送信します。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//JankenServletで生成したデータを受け取る
String pcHand = (String)request.getAttribute("pcHand");
String userHand = (String)request.getAttribute("userHand");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./js/method.js"></script>
<title>ジャンケンゲーム</title>
</head>
<body>
<form name="janken" action="JankenServlet" method="get">
<p>HelloJanken</p>
<p>PCの手は<%= pcHand%></p>
<p>PCの手は<%= userHand%></p>
<input type="hidden" name="hand" value="" />
<a href="javaScript:select('0')">グー</a>
<a href="javaScript:select('1')">チョキ</a>
<a href="javaScript:select('2')">パー</a>
</form>
</body>
</html>少し解説すると、
method.jsで作成したselect(handNumber)メソッド内にある、document.janken.submit();の「janken」と、jsp側のform name=”janken”が紐づいています。
form action=“JankenServlet” method=“get”で、JankenSservlet.javaのdoGetで受け取ることができます。
では、実行しましょう。
実行
今回の実行は訳あって「Janken.jsp」ファイル上で行います。
結果は「null」となっていますが、今は気にしないでください。
あとで直します。
下図のようになってればOKです。
リンク上の手を選んでPCの手と、あなたの手が変われば本記事としてはゴールです。
ちゃんとお互い手を出すことはできたでしょうか？
次は勝負の判定をしたいと思います。
うまく表示できない！！と言う方向けにデバッグについての記事も簡単に書いてみましたので是非参考にしてみて下さい。
実行の流れを追うことで原因を突き止めることができます。
本記事最後までご覧いただきありがとうございました。