index.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SQLite 데이터 입력</title>
</head>
<body>

    <h2>숫자 입력 후 DB 저장</h2>
    <form id="dataForm">
        <input type="number" id="numberInput" step="1" min="-2147483648" max="2147483647" required>
        <button type="submit">저장</button>
    </form>

    <script>
        document.getElementById("dataForm").
            addEventListener("submit", function(event) { // 'dataForm' 에 리스너로 익명 함수(람다) 추가

            event.preventDefault(); // HTML 요소의 기본 동작을 막는 역할 

            // 'numberInput' 값 얻기 (해당 입력 타입은 숫자만 입력 가능함) 
            const numberValue = document.getElementById("numberInput").value;
            const checkingNumber = numberValue.value;

            // 정수인지 확인 (소수점 포함 여부 검사)
            if (!/^-?\d+$/.test(checkingNumber)) {
                alert("정수만 입력 가능합니다.");
                return;
            }            

            fetch("/insert", { // 비동기 HTTP 요청 정보 : 'insert'  
                method: "POST", // GET(가져오기), POST(보내기), PUT(업데이트), DELETE(삭제), PATCH(일부갱신), HEAD(본문없음), OPTIONS(서버지원 메소드 확인)
                headers: { "Content-Type": "application/json" }, // JSON 형식 사용
                body: JSON.stringify({ number: numberValue }) // JSON 'number' 의 필드 값에 numberValue 를 설정
            })
            .then(response => response.text()) // 반환되는 응답값은 텍스트 (json(), text(), blob(), arrayBuffer(), formData() 설정 가능)
            .then(data => alert(data)) // 결과 데이터는 웹 화면의 경고(alert)로 표시
            .catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시
        });
    </script>
    

    <h2>DB에서 가장 큰 값 가져오기</h2>
    <button onclick="getMaxValue()">최대값 조회</button>
    <p id="maxValue">최대값: -</p>

    <script>
        function getMaxValue() {
            fetch("/max") // 비동기 HTTP 요청 정보 : 'max' (디폴트 GET 으로 요청 fetch("/max", { method: "GET" }) ) 
                .then(response => response.text()) // 반환되는 응답값은 텍스트 
                .then(data => { 
                    // 결과 데이터를 'maxValue' 에 입력
                    document.getElementById("maxValue").innerText = "최대값: " + data;  
                    // innerText는 요소의 보이는(렌더링된) 텍스트만 반환 (CSS 스타일 미반영)
                })
                .catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시
        }
    </script>

</body>
</html>