質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1614閲覧

JavaScriptのカレンダーから日付をJava Servletに渡したい

退会済みユーザー

退会済みユーザー

総合スコア0

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

servlet

Servletとは、Webページの動的な生成やデータ処理などをサーバ上で実行するために、Javaで作成されたプログラムです。 ショッピングサイトやオンラインバンキングといった、動的なウェブサイトの構築に用いられています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/12 09:25

やりたいこと

以下のような処理を行いたいです。

JavaScriptでカレンダーを表示

日付をクリックした際にクリックした日付(2020-11-12など)をPOSTでリクエストパラメータとして送信

サーブレットでrequest.getParameter()で受け取る

自分で調べてJavaScriptでカレンダー表示まではできたのですがそこから先がわからないため教えていただきたいです。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title></title> 6</head> 7<body> 8<script type="text/javascript" src="calender.js"></script> 9<div id="calendar">カレンダー</div> 10</body> 11</html>

JavaScript

1window.onload = function() { 2 // 現在の年月の取得 3 var current = new Date(); 4 var year = current.getFullYear(); 5 var month = current.getMonth() + 1; 6 7 // カレンダーの表示 8 var wrapper = document.getElementById('calendar'); 9 add_calendar(wrapper, year, month); 10} 11 12/** 13 * 指定した年月のカレンダーを表示する 14 * @param {object} wrapper - カレンダーを追加する親要素 15 * @param {number} year - 年の指定 16 * @param {number} month - 月の指定 17 */ 18function add_calendar(wrapper, year, month) { 19 // 現在カレンダーが追加されている場合は一旦削除する 20 wrapper.textContent = null; 21 22 // カレンダーに表示する内容を取得 23 var headData = generate_calendar_header(wrapper, year, month); 24 var bodyData = generate_month_calendar(year, month); 25 26 // カレンダーの要素を追加 27 wrapper.appendChild(headData); 28 wrapper.appendChild(bodyData); 29} 30 31/** 32 * 指定した年月のカレンダーのヘッダー要素を生成して返す 33 * @param {object} wrapper - カレンダーを追加する親要素 34 * @param {number} year - 年の指定 35 * @param {number} month - 月の指定 36 */ 37function generate_calendar_header(wrapper, year, month) { 38 // 前月と翌月を取得 39 var nextMonth = new Date(year, (month - 1)); 40 nextMonth.setMonth(nextMonth.getMonth() + 1); 41 var prevMonth = new Date(year, (month - 1)); 42 prevMonth.setMonth(prevMonth.getMonth() - 1); 43 44 // ヘッダー要素 45 var cHeader = document.createElement('div'); 46 cHeader.className = 'calendar-header'; 47 48 // 見出しの追加 49 var cTitle = document.createElement('div'); 50 cTitle.className = 'calendar-header__title'; 51 var cTitleText = document.createTextNode(year + '年' + month + '月'); 52 cTitle.appendChild(cTitleText); 53 cHeader.appendChild(cTitle); 54 55 // 前月ボタンの追加 56 var cPrev = document.createElement('button'); 57 cPrev.className = 'calendar-header__prev'; 58 var cPrevText = document.createTextNode('prev'); 59 cPrev.appendChild(cPrevText); 60 // 前月ボタンをクリックした時のイベント設定 61 cPrev.addEventListener('click', function() { 62 add_calendar(wrapper, prevMonth.getFullYear(), (prevMonth.getMonth() + 1)); 63 }, false); 64 cHeader.appendChild(cPrev); 65 66 // 翌月ボタンの追加 67 var cNext = document.createElement('button'); 68 cNext.className = 'calendar-header__next'; 69 var cNextText = document.createTextNode('next'); 70 cNext.appendChild(cNextText); 71 // 翌月ボタンをクリックした時のイベント設定 72 cNext.addEventListener('click', function() { 73 add_calendar(wrapper, nextMonth.getFullYear(), (nextMonth.getMonth() + 1)); 74 }, false); 75 cHeader.appendChild(cNext); 76 77 return cHeader; 78} 79 80/** 81 * 指定した年月のカレンダー要素を生成して返す 82 * @param {number} year - 年の指定 83 * @param {number} month - 月の指定 84 */ 85function generate_month_calendar(year, month) { 86 var weekdayData = ['日', '月', '火', '水', '木', '金', '土']; 87 // カレンダーの情報を取得 88 var calendarData = get_month_calendar(year, month); 89 90 var i = calendarData[0]['weekday']; // 初日の曜日を取得 91 // カレンダー上の初日より前を埋める 92 while(i > 0) { 93 i--; 94 calendarData.unshift({ 95 day: '', 96 weekday: i 97 }); 98 } 99 var i = calendarData[calendarData.length - 1]['weekday']; // 末日の曜日を取得 100 // カレンダー上の末日より後を埋める 101 while(i < 6) { 102 i++; 103 calendarData.push({ 104 day: '', 105 weekday: i 106 }); 107 } 108 109 // カレンダーの要素を生成 110 var cTable = document.createElement('table'); 111 cTable.className = 'calendar-table'; 112 113 var insertData = ''; 114 // 曜日部分の生成 115 insertData += '<thead>'; 116 insertData += '<tr>'; 117 for (var i = 0; i < weekdayData.length; i++) { 118 insertData += '<th>'; 119 insertData += weekdayData[i]; 120 insertData += '</th>'; 121 } 122 insertData += '</tr>'; 123 insertData += '</thead>'; 124 125 // 日付部分の生成 126 insertData += '<tbody>'; 127 for (var i = 0; i < calendarData.length; i++) { 128 if(calendarData[i]['weekday'] <= 0) { 129 insertData += '<tr>'; 130 } 131 insertData += '<td>'; 132 insertData += calendarData[i]['day']; 133 insertData += '</td>'; 134 if(calendarData[i]['weekday'] >= 6) { 135 insertData += '</tr>'; 136 } 137 } 138 insertData += '</tbody>'; 139 140 cTable.innerHTML = insertData; 141 return cTable; 142} 143 144/** 145 * 指定した年月のカレンダー情報を返す 146 * @param {number} year - 年の指定 147 * @param {number} month - 月の指定 148 */ 149function get_month_calendar(year, month) { 150 var firstDate = new Date(year, (month - 1), 1); // 指定した年月の初日の情報 151 var lastDay = new Date(year, (firstDate.getMonth() + 1), 0).getDate(); // 指定した年月の末日 152 var weekday = firstDate.getDay(); // 指定した年月の初日の曜日 153 154 var calendarData = []; // カレンダーの情報を格納 155 var weekdayCount = weekday; // 曜日のカウント用 156 for (var i = 0; i < lastDay; i++) { 157 calendarData[i] = { 158 day: i + 1, 159 weekday: weekdayCount 160 } 161 // 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す 162 if(weekdayCount >= 6) { 163 weekdayCount = 0; 164 } else { 165 weekdayCount++; 166 } 167 } 168 return calendarData; 169}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

tdの中にsubmitボタン埋め込むことで一応解決しました。

投稿2020/11/12 13:15

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問