過去の新入社員研修受講者の方からいただいた「こんなことをしたい」、というリクエストに応えて以下ではサンプルプログラムを掲載しております。
1.セレクトボックスをJSPで生成
以下のようなセレクトボックスを持つJSPを作成しなさい。
ただし、注文数の上限は10個とは限らないため変数で変えられるようにしなさい。
<アウトプット例>
注文数:
2.二度押し禁止ボタン
2度押しを禁止するには以下のようなJavaScriptを使います。
<html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function preventsDC(btn) { btn.disabled = true; } </script> </head> <body> <p>2度押し禁止の実験</p> <form action="#" method="POST"> <input type="submit" value="送信(1度のみ)" onClick="javascript:preventsDC(this)"> </form> </body> </html>
3.Webスクレイピング
例えば、弊社トップページからPタグの内容だけを取り出すには以下のように書きます。
ただし、Jsoupというライブラリが必要なのでダウンロードなどして、IDEのライブラリに設定する必要があります。
<ソースコード>
import java.io.IOException; import org.jsoup.Jsoup; import org.jsoup.nodes.Document; import org.jsoup.nodes.Element; import org.jsoup.select.Elements; public class Scraping { public static void main(String[] args) throws IOException { Document document = Jsoup.connect("https://saycon.co.jp").get(); Elements paragraphs = document.select("p"); for (Element paragraph : paragraphs) { System.out.println(paragraph.text()); } } }
<アウトプット>
IT業界において
プレイングマネージャーは、
・忙しい
・上と下の板挟み
・半端ITエンジニアのなれの果て
と思われがちです。
しかし、本当は、
プレイングマネージャーこそが、
・最新技術を追求できる
・稼げる
・「ありがとう」の言葉を聞ける
お仕事なのです。
なぜなら、
・プレイングマネージャーは、今までの仕事を人に任せ、最新技術を追求できます
・プレイングマネージャーは、人を使って大きな仕事を作るので、稼げます
・プレイングマネージャーは、人と接するため「ありがとう」の言葉を直接聞けるのですITエンジニアのお仕事は本来一番経営に近いはずです
提供したいのは100年後も残りつづける情報処理の基本です
自ら学んで、周囲とも協調できる。そんな新人を育てていきたいお名前 (必須)
メールアドレス (必須)
題名(件名)
メッセージ本文
確認画面は表示されません。上記内容にて送信しますので、よろしければチェックを入れてください。
4.画像を扱う
例えば、商品一覧などを表示するときに画像も一緒に表示したいという場合があります。
そのようなときには、画像そのものをデータベースに入れることを考えてしまう人がいますが、それは勘違いです。
画像ファイルのファイル名の一部に付番(※)しておき、データベースには画像の番号を格納すればよいのです。
※例えば、下記サンプルコードの「wave1.jpg,wave2.jpg,wave3.jpg」など。
以下に、サンプルを示します。
データベースは使用していないものの意図は伝わると思います。
<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Img Test</title> </head> <body> <% for (int idx = 1; idx <= 3; idx++) {%> <p><img src="https://saycon.co.jp/html/wave<%=idx%>.jpg" alt = "波の写真"></p> <% } %> </body> </html>
5.入力チェック(バリデーション)
郵便番号や電話番号、メールアドレスなど一定の形式を満たしていない入力データがあったとき、ユーザーにそれを伝える仕組みが必要になります。
その際に便利なのが「正規表現」です。
以下に、郵便番号、携帯電話番号、メールアドレスという典型的な例を3つ挙げています。
<%@page import="java.util.regex.Matcher"%> <%@page import="java.util.regex.Pattern"%> <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSP Page</title> </head> <body> <% String postalCode = "457-0001"; Pattern pattern = Pattern.compile("^\\d{3}-\\d{4}$"); Matcher m = pattern.matcher(postalCode); if (m.matches()) { out.println("This is a postal code.<br>"); } else { out.println("This is not a postal code.<br>"); } String cellphoneNumber = "457-0001"; pattern = Pattern.compile("^0[789]0-\\d{4}-\\d{4}$"); m = pattern.matcher(cellphoneNumber); if (m.matches()) { out.println("This is a cellphone number.<br>"); } else { out.println("This is not a cellphone number.<br>"); } String mail = "abc@example.com"; Pattern pmail = Pattern.compile("[\\w\\.\\-]+@(?:[\\w\\-]+\\.)+[\\w\\-]+"); m = pmail.matcher(mail); if (m.matches()) { out.println("This is a mail address.<br>"); } else { out.println("This is not a mail address.<br>"); } %> </body> </html>
その他、入力項目によって必要な正規表現は変わりますので各自でインターネットで調べてください。
6.オリジナル問題作成
将来の後輩のために良い問題が出来たら教えてください。