|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="ko"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>SQLite 데이터 입력</title> |
| 7 | +</head> |
| 8 | +<body> |
| 9 | + |
| 10 | + <h2>숫자 입력 후 DB 저장</h2> |
| 11 | + <form id="dataForm"> |
| 12 | + <input type="number" id="numberInput" step="1" min="-2147483648" max="2147483647" required> |
| 13 | + <button type="submit">저장</button> |
| 14 | + </form> |
| 15 | + |
| 16 | + <script> |
| 17 | + document.getElementById("dataForm"). |
| 18 | + addEventListener("submit", function(event) { // 'dataForm' 에 리스너로 익명 함수(람다) 추가 |
| 19 | + |
| 20 | + event.preventDefault(); // HTML 요소의 기본 동작을 막는 역할 |
| 21 | + |
| 22 | + // 'numberInput' 값 얻기 (해당 입력 타입은 숫자만 입력 가능함) |
| 23 | + const numberValue = document.getElementById("numberInput").value; |
| 24 | + const checkingNumber = numberValue.value; |
| 25 | + |
| 26 | + // 정수인지 확인 (소수점 포함 여부 검사) |
| 27 | + if (!/^-?\d+$/.test(checkingNumber)) { |
| 28 | + alert("정수만 입력 가능합니다."); |
| 29 | + return; |
| 30 | + } |
| 31 | + |
| 32 | + fetch("/insert", { // 비동기 HTTP 요청 정보 : 'insert' |
| 33 | + method: "POST", // GET(가져오기), POST(보내기), PUT(업데이트), DELETE(삭제), PATCH(일부갱신), HEAD(본문없음), OPTIONS(서버지원 메소드 확인) |
| 34 | + headers: { "Content-Type": "application/json" }, // JSON 형식 사용 |
| 35 | + body: JSON.stringify({ number: numberValue }) // JSON 'number' 의 필드 값에 numberValue 를 설정 |
| 36 | + }) |
| 37 | + .then(response => response.text()) // 반환되는 응답값은 텍스트 (json(), text(), blob(), arrayBuffer(), formData() 설정 가능) |
| 38 | + .then(data => alert(data)) // 결과 데이터는 웹 화면의 경고(alert)로 표시 |
| 39 | + .catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시 |
| 40 | + }); |
| 41 | + </script> |
| 42 | + |
| 43 | + |
| 44 | + <h2>DB에서 가장 큰 값 가져오기</h2> |
| 45 | + <button onclick="getMaxValue()">최대값 조회</button> |
| 46 | + <p id="maxValue">최대값: -</p> |
| 47 | + |
| 48 | + <script> |
| 49 | + function getMaxValue() { |
| 50 | + fetch("/max") // 비동기 HTTP 요청 정보 : 'max' (디폴트 GET 으로 요청 fetch("/max", { method: "GET" }) ) |
| 51 | + .then(response => response.text()) // 반환되는 응답값은 텍스트 |
| 52 | + .then(data => { |
| 53 | + // 결과 데이터를 'maxValue' 에 입력 |
| 54 | + document.getElementById("maxValue").innerText = "최대값: " + data; |
| 55 | + // innerText는 요소의 보이는(렌더링된) 텍스트만 반환 (CSS 스타일 미반영) |
| 56 | + }) |
| 57 | + .catch(error => console.error("Error:", error)); // 에러는 콘솔로 표시 |
| 58 | + } |
| 59 | + </script> |
| 60 | + |
| 61 | +</body> |
| 62 | +</html> |
0 commit comments