1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Java基礎知識 研修備忘録 30日目~34日目

Posted at

入力欄がブランク時に全件表示

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サイトやアプリケーションのデザインを迅速に構築するためのフロントエンドフレームワーク

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?