이상함1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
유효성 검사(회원가입 페이지를 예를 덜어 유효성 검사하는 방법을 익혀보자)
</title>
<script
src="https://code.jquery.com/jquery-3.7.1.js"
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/validate.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
<!-- 자바스크립트 부분 -->
</script>
</head>
<body>
<form action="8-1_sub.html" method="GET">
<!--원래 get방식으로 하면 안됨...-->
<div class="container">
<h1>회원가입</h1>
<p>아래 항목을 가입해 주세요... (* : 필수항목)</p>
<hr />
<label for="userId"><b>아이디</b></label>
<input
type="text"
placeholder="아이디를 입력하세요"
id="userId"
name="userId"
/>
<label for="pwd1"><b>비밀번호</b></label>
<input
type="password"
placeholder="비밀번호를 입력하세요"
id="pwd1"
name="pwd1"
/>
<div>
<button
class="signupBtn"
type="submit"
onclick="return registerValid()"
>
가입하기
</button>
<button class="cancelBtn" type="reset">취소</button>
</div>
</form>
</body>
</html>form 태그를 이용해 다른 페이지로 이동한다고 가정하자.
그런데 자바스크립트로 작성된 script 태그에 문법적 오류가 있어도 발견할 수가 없다.
왜냐하면 콘솔에 오류를 출력하기 전에 페이지가 바뀌어 버린다.
이걸 막으려면
function registerValid() {
event.preventDefault();
// 나머지 코드
}event.preventDefault() 이걸로 form 태그의 기본 행동을 막은 다음에 콘솔에 뜬 오류를 다 수정한다. 그리고 수정이 끝나면 주석 처리하거나 삭제하면 된다.
이상함 2
let hasAgreed = $("#agreeCheckbox").prop("checked");
// 아래와 결과가 같음
// let hasAgreed = $("#agreeCheckbox")[0].checked;$(selector) 형태로 만들어지는 jQueryObject는 유사배열이다.
따라서 단 한개의 요소만 있더라도 한개가 들어있는 유사배열을 반환한다. 그래서 [0]으로 접근해야 한다.
그런데 동시에 jQueryObject는 암시적 반복을 지원한다.
그리고 암시적 반복을 지원하지 않는 메소드와 속성이 존재한다. (혹시 메소드는 암시적 반복을 무조건 지원하고 속성은 무조건 지원하지 않는가? 그건 모르겠음...)
나는 컴퓨터를 좋아함