入力欄がブランク時に全件表示
0.入力欄と検索機能は実装しておく
1.JavaScriptで以下を書く
setInterval({
let 変数① = document.getElementById('(入力欄のID)');
if(!変数①.value.trim()){
const form = document.getElementById('(検索機能のformのID)');
form.submit();
}
},3000);
setIntervalの第2引数はミリ秒であり、3000は3秒ごとに処理を実行するという意味
(Thymleaf)htmlでのif文
<td th:if="(条件式)" (処理 例:th:text="error")></td>
ボタンを押してControllerに移動
html側で以下実装
1.formタグで囲む
id="(任意)"
th:action="@{/①/②}"
method="(getまたはpost)"
2.ボタンをinputタグで用意
type="submit"
value="(任意)"
Controller側で以下実装
1.クラス名の上に@RequestMapping("/①")
2.メソッド名の上に@GetMapping("/②")
※htmlのメソッドがgetの場合は@GetMapping,postの場合は@PostMapping
3.メソッドに処理を書く
GitとSVN
・SVNは「中央サーバ頼み」
・Gitは「全員がサーバを持っている」
・SVNのブランチは重いが、Gitのブランチは軽量
・Gitはオフライン作業や高速な開発スタイルに強い
JavaScript
JavaScript
=スクリプト言語:コンパイルなしで、書いたらすぐに実行できる
変数の宣言
・var:古い書き方、非推奨
・let:再代入できる変数
・const:後から変更できない定数
※基本はconstを使い、必要なときだけletを使う
関数
関数式
関数を変数に代入する方法。関数が定義された後でしか呼び出せない
無名関数
function()のように関数名を省略する
一時的な処理を実行するのに適している
再利用できないしデバックしにくい
getElementById
document.getElementById()でHTMLドキュメント内の特定のid属性を持つ要素を取得できる
イベントとイベントリスナー
イベント
ウェブページ上でなにかが起こったときに発生する特定のアクション(ボタンのクリック、フォームの送信)
イベントリスナー
特定のイベントに対して実行される処理を定義するための仕組み
addEventListenerの第1引数にトリガーとなるイベント、第2引数に関数を渡す
チェック処理(validation)
test()メソッドは、正規表現を使って文字列が特定のパターンに一致するかどうかチェックするためのメソッド
const pattern = /^[0~9]+$/;
const tel = document.getElementById().value;
if(!pattern.test(tel)){
alert("error");
event.preventDefault(); //フォームの送信を中止
return;
}
ファイルの外部化
jsファイルに記述して相対パスで呼び出すこともできる
HTMLは上から下に読み込まれるため、スクリプトを読み込む個所によって動作するタイミングが変わる
jQuery
HTMLの操作、イベントの処理、アニメーションなどを簡単に扱うためのツール(JavaScriptライブラリ)
できるだけ不要なコードを記述しないことが求められるため、
最近ではjQueryは古い技術として利用を控えるのが一般的
Bootstrap
Webサイトやアプリケーションのデザインを迅速に構築するためのフロントエンドフレームワーク