9:23 학원 도착
<9:30 1교시>
프로젝트 조장 뽑기...
하고 싶긴 했으나 능력이 부족하여 패스함.
부조장 뽑으면 하려고 했는데 부조장은 안뽑네 ㅋㅋㅋ
중간 프로젝트는 jsp로 만들고 최종 프로젝트에서는 후반부에 배운걸로 변경하고 추가하게 됨.
다음주 월요일부터 오전에만 3~4시간 수업나가고 오후 시간은 프로젝트 논의 및 진행(2주 반 가량)
jqeury로 돌아감
자주 사용하는 이벤트명(click, mouseover, mousemove, focus 등)은 동작으로 아예 등록이 되어 있다.
.toggle(1000); 이란 표현은
.toggle({
duration:1000
}); 표현과 같다
jquery에서는 추가 동작에 대한 옵션을 object 에 전달하게 된다.
$("#toggleBtn").click(()=>{
$("#myBox").toggle({
duration:1000,
complete:()=>{
alert("toggled!");
}
});
});
코딩을 할 때는 한줄한줄 베껴 쓴다고 생각하는게 절대 아니고 구조를 파악하면서 작성해야 한다,라는 알고 있는 이야기를 듣고 있음.
jquery.com에서 API documentation에서 여러가지 동작의 사용법을 보러감.
이 페이지도 이전에 벌써 찾아본 보긴 했는데 아래꺼는 인지하지 못했던 새로운 내용 ↓
.hide([duration] [,complete])의 ,는 오타가 아니었다.
여기서 ,의 의미는 duration이 작성되었을 때 작성할 수 있다라는 의미였군.
.hide(option)의 option은 plain object를 전달할 수 있다.
<10:30 2교시>
부트스트랩을 잘 하는 핵심은 필요한 class를 추가 제거하는 거에만 집중하면 된다.
■ 검증하는 시점을 글자를 입력할 때로 바꾸는 예제
2개의 클래스를 무조건 초기화 해놓고 시작하지 않으면 아이디를 입력해서 추가된 클래스가 없어지지 않고 존재하고 있다.
그래서 아이디를 입력할 때마다 클래스의 is-valid와 is-invalid를 매번 초기화 해놓고 진행한다.
■ 버튼의 disabled 기능 사용해보기 : 버튼을 누를 수 없다 -> 정규표현식을 만족하지 않으면 disabled 기능까지 추가하기
->상태값을 관리하는 변수를 만들고 상태값에 따라 다른 동작을 하도록 분기 해야 함(상태값이 꼭 두 가지 중 하나일 필요는 없지만, 상태 값이 두 가지 중 하나라면 boolean type을 사용하면 된다.
<11:30 3교시>
예제 코드 전체 백업
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div>
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id" />
<small class="form-text">영문자 소문자로 시작하고 5~10글자 이내로 입력하세요</small>
<div class="valid-feedback">사용 가능한 아이디입니다.</div>
<div class="invalid-feedback">사용할 수 없는 아이디입니다.</div>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm=()=>{
//폼 전체의 유효성 여부에 따라 분기(이 예제에서는 id 유효성 여부만, 다음 예제에서는 isIdValid&&isPwdValid&&isEmailValid 이런식으로 들어갈 거임.
if(isIdValid){
//type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
let isIdValid=true;
//type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
}
/*
폼에 submit 이벤트가 발생하면 입력한 내용을 검증해서 조건을 만족하지 못하면 폼 제출을 막기
*/
const reg_id = /^[a-z].{4,9}$/;
//id를 입력할 때마다 실행할 함수 등록하기
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고(id가 입력될 때마다 계속 실행됨)
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어오기
let inputId=event.target.value;//event.target=document.querySelector("#id")
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
//어떤 요소에 클래스를 추가하는 방법 : .classList.add("클래스명");
event.target.classList.add("is-invalid");
//아이디의 상태값을 여기서 변경
isIdValid=false;
}else{
event.target.classList.add("is-valid");
//아이디의 상태값을 여기서 변경
isIdValid=true;
}
//상태값을 이용해서 UI를 변경하는 함수 호출
checkForm();
});
/*
//폼 안의 서브밋 버튼을 누르면 form이 제출되는 기본 동작을 한다.
document.querySelector("#signupForm").addEventListener("submit", (event)=>{
//서브밋 버튼의 기본 동작을 막기(폼 제출을 막기)
const inputId = document.querySelector("#id").value;
if(!reg_id.test(inputId)){
event.preventDefault();
document.querySelector(".invalid-feedback").style.display="block";
}
})*/
</script>
</body>
</html>
이번에는 비밀번호와 이메일 주소까지 작성하는 회원가입 폼 만드는 거임
특수문자가 하나이상 포함되는 문자열을 검증하기 /[\W]/
예제 참고해서 내가 직접 해봤는데 특수문자 검증 부분은 해결 했는데, 양쪽에 입력한 비밀번호가 같은지 확인하는거는 어째선지 잘 안됨 -> 해결함
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id" />
<small class="form-text">영문자 소문자로 시작하고 5~10글자 이내로 입력하세요</small>
<div class="valid-feedback">사용 가능한 아이디입니다.</div>
<div class="invalid-feedback">사용할 수 없는 아이디입니다.</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" id="pwd2"/>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm=()=>{
//폼 전체의 유효성 여부에 따라 분기(이 예제에서는 id 유효성 여부만, 다음 예제에서는 isIdValid&&isPwdValid&&isEmailValid 이런식으로 들어갈 거임.
if(isIdValid&&isPwdValid){
//type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
//type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
}
/*
폼에 submit 이벤트가 발생하면 입력한 내용을 검증해서 조건을 만족하지 못하면 폼 제출을 막기
*/
const reg_id = /^[a-z].{4,9}$/;
//id를 입력할 때마다 실행할 함수 등록하기
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고(id가 입력될 때마다 계속 실행됨)
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어오기
let inputId=event.target.value;//event.target=document.querySelector("#id")
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
//어떤 요소에 클래스를 추가하는 방법 : .classList.add("클래스명");
event.target.classList.add("is-invalid");
//아이디의 상태값을 여기서 변경
isIdValid=false;
}else{
event.target.classList.add("is-valid");
//아이디의 상태값을 여기서 변경
isIdValid=true;
}
//상태값을 이용해서 UI를 변경하는 함수 호출
checkForm();
});
//함수를 미리 만들어서
const checkPwd= (event)=>{
//입력한 비밀번호를 읽어와서(2줄 코딩)
let inputPwd= document.querySelector("#pwd").value;
let confirmPwd= document.querySelector("#pwd2").value;
//is-valid와 is-invalid 클래스를 일단 먼저 제거하고(1줄 코딩)
event.target.classList.remove("is-valid", "is-invalid");
//정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료(return) 해야 함
//만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는
//두번째 비밀번호가 정규표현식을 통과하지 못한다면 isPwdValid를 false로 변경
const reg_pwd=/[\W]/;
const validPwd= reg_pwd.test(inputPwd);
const validPwd2= reg_pwd.test(confirmPwd);
if(!reg_pwd.test(inputPwd)&&!reg_pwd.test(confirmPwd)){
event.target.classList.add("is-invalid");
isPwdValid=false;
}else{
event.target.classList.add("is-valid");
isPwdValid=true;
}
//양쪽에 입력한 비밀번호가 같은지 확인해서 같으면 isPwdValid를 true 다르면 false로 변경하고 checkForm() 호
if(inputPwd==confirmPwd){
isPwdValid=true;
}else{
isPwdValid=false;
}
checkForm();
};
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input",checkPwd);
</script>
</body>
</html>
//const validPwd= reg_pwd.test(inputPwd); 쓸 필요 없었음
//const validPwd2= reg_pwd.test(confirmPwd); 쓸 필요 없었음
if(!reg_pwd.test(inputPwd)||!reg_pwd.test(confirmPwd)){
event.target.classList.add("is-invalid");
isPwdValid=false;
}else{
event.target.classList.add("is-valid");
isPwdValid=true;
}
기능 만족 시킨 다음에 &&->||로 바꾸는거 까먹음
<12:30 4교시>
아래는 선생님 코딩 따라한건데 내가 한거랑 좀 다르고 이게 더 군더더기 없음.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/user/signup_form3.jsp</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼 입니다</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id"/>
<small class="form-text">영문자 소문자로 시작하고 5~10 글자 이네로 입력하세요</small>
<div class="valid-feedback">잘 입력했군요! 짱구가 아니네요~</div>
<div class="invalid-feedback">사용할수 없는 아이디 입니다</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" id="pwd2"/>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm = ()=>{
//폼 전체의 유효성 여부에 따라 분기한다 (지금은 id 유효성 여부만)
if(isIdValid){
// type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거한다.
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
// type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가한다.
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
};
//아이디를 검증할 정규 표현식
const reg_id=/^[a-z].{4,9}$/;
// id 를 입력할때마다 실행할 함수 등록
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어온다.
let inputId=event.target.value;
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
/*
어떤 요소에 클래스를 추가하는 방법
.classList.add("클래스명")
*/
event.target.classList.add("is-invalid");
//아이디의 상태값 변경
isIdValid=false;
}else{
event.target.classList.add("is-valid");
//아이디의 상태값 변경
isIdValid=true;
}
//상태값을 이용해서 UI 를 변경하는 함수 호출
checkForm();
});
//비밀번호를 검증할 정규표현식 객체
const reg_pwd=/[\W]/;
//함수를 미리 만들어서
const checkPwd = ()=>{
//양쪽에 입력한 비밀번호를 읽어와서 (2줄 코딩)
let pwd=document.querySelector("#pwd").value;
let pwd2=document.querySelector("#pwd2").value;
//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 (1줄 코딩)
document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
//일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료(return) 해야 한다.
//만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는
//두번째 비밀번호가 정규표현식을 통과하지 못한다면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(!reg_pwd.test(pwd) || !reg_pwd.test(pwd2)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
checkForm();
return;
}
//양쪽에 입력한 비밀번호가 같은지 확인해서 같으면 isPwdValid 를 true
// 다르면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(pwd == pwd2){
document.querySelector("#pwd").classList.add("is-valid");
//비밀번호가 유효 하다는 의미에서 true 를 넣어준다.
isPwdValid=true;
}else{
document.querySelector("#pwd").classList.add("is-invalid");
//비밀번호가 유효 하지 않다는 의미에서 false 를 넣어준다.
isPwdValid=false;
}
checkForm();
};
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input", checkPwd);
</script>
</body>
</html>
다른 부분은 스샷 뜸
email 부분도 추가해보러 감
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h1>회원가입 폼</h1>
<form action="signup.jsp" method="post" id="signupForm" novalidate>
<div class="mb-2">
<label class="form-label" for="id">아이디</label>
<input class="form-control" type="text" name="id" id="id" />
<small class="form-text">영문자 소문자로 시작하고 5~10글자 이내로 입력하세요</small>
<div class="valid-feedback">사용 가능한 아이디입니다.</div>
<div class="invalid-feedback">사용할 수 없는 아이디입니다.</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd">비밀번호</label>
<input class="form-control" type="password" name="pwd" id="pwd"/>
<small class="form-text">특수 문자를 하나 이상 조합하세요.</small>
<div class="invalid-feedback">비밀 번호를 확인 하세요</div>
</div>
<div class="mb-2">
<label class="form-label" for="pwd2">비밀번호 확인</label>
<input class="form-control" type="password" id="pwd2"/>
</div>
<div class="mb-2">
<label class="form-label" for="email">이메일 주소</label>
<input class="form-control" type="email" name="email" id="email" />
<div class="invalid-feedback">이메일 주소의 형식을 갖추세요</div>
</div>
<button class="btn btn-success" type="submit" disabled="disabled">가입</button>
</form>
</div>
<script>
//아이디 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isIdValid=false;
//비밀번호 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isPwdValid=false;
//이메일 유효성 여부를 관리할 변수를 만들고 초기값 부여
let isEmailValid=false;
const checkForm=()=>{
//폼 전체의 유효성 여부에 따라 분기(이 예제에서는 id 유효성 여부만, 다음 예제에서는 isIdValid&&isPwdValid&&isEmailValid 이런식으로 들어갈 거임.
if(isIdValid && isPwdValid && isEmailValid){
//type 속성이 submit 인 요소를 찾아서 disabled 속성을 제거
document.querySelector("[type=submit]").removeAttribute("disabled");
}else{
//type 속성이 submit 인 요소를 찾아서 disabled="disabled" 속성을 추가
document.querySelector("[type=submit]").setAttribute("disabled", "disabled");
}
}
/*
폼에 submit 이벤트가 발생하면 입력한 내용을 검증해서 조건을 만족하지 못하면 폼 제출을 막기
*/
const reg_id = /^[a-z].{4,9}$/;
//id를 입력할 때마다 실행할 함수 등록하기
document.querySelector("#id").addEventListener("input", (event)=>{
//일단 is-valid, is-invalid 클래스를 모두 지우고(id가 입력될 때마다 계속 실행됨)
event.target.classList.remove("is-valid", "is-invalid");
//현재까지 입력한 아이디를 읽어오기
let inputId=event.target.value;//event.target=document.querySelector("#id")
//만일 정규표현식을 통과하지 못했다면
if(!reg_id.test(inputId)){
//어떤 요소에 클래스를 추가하는 방법 : .classList.add("클래스명");
event.target.classList.add("is-invalid");
//아이디의 상태값을 여기서 변경
isIdValid=false;
}else{
event.target.classList.add("is-valid");
//아이디의 상태값을 여기서 변경
isIdValid=true;
}
//상태값을 이용해서 UI를 변경하는 함수 호출
checkForm();
});
const reg_pwd=/[\W]/;
//함수를 미리 만들어서
const checkPwd = ()=>{
//양쪽에 입력한 비밀번호를 읽어와서 (2줄 코딩)
let pwd=document.querySelector("#pwd").value;
let pwd2=document.querySelector("#pwd2").value;
//일단 is-valid 와 is-invalid 클래스를 제거를 먼저하고 (1줄 코딩)
document.querySelector("#pwd").classList.remove("is-valid", "is-invalid");
//일단 정규표현식을 만족하는지 확인해서 만족하지 않으면 함수를 여기서 종료(return) 해야 한다.
//만일 첫번째 비밀번호가 정규표현식을 통과하지 못하거나 또는
//두번째 비밀번호가 정규표현식을 통과하지 못한다면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(!reg_pwd.test(pwd) || !reg_pwd.test(pwd2)){
document.querySelector("#pwd").classList.add("is-invalid");
isPwdValid=false;
checkForm();
return;
}
//양쪽에 입력한 비밀번호가 같은지 확인해서 같으면 isPwdValid 를 true
// 다르면 isPwdValid 를 false 로 변경하고 checkForm() 호출
if(pwd == pwd2){
document.querySelector("#pwd").classList.add("is-valid");
//비밀번호가 유효 하다는 의미에서 true 를 넣어준다.
isPwdValid=true;
}else{
document.querySelector("#pwd").classList.add("is-invalid");
//비밀번호가 유효 하지 않다는 의미에서 false 를 넣어준다.
isPwdValid=false;
}
checkForm();
};
document.querySelector("#pwd").addEventListener("input", checkPwd);
document.querySelector("#pwd2").addEventListener("input",checkPwd);
document.querySelector("#email").addEventListener("input", ()=>{
document.querySelector("#email").classList.remove("is-valid", "is-invalid");
let inputEmail= document.querySelector("#email").value;
const reg_email=/[\w]+@[.\w]+/;
if(!reg_email.test(inputEmail)){
document.querySelector("#email").classList.add("is-invalid");
isEmailValid=false;
}else{
document.querySelector("#email").classList.add("is-valid");
isEmailValid=true;
}
checkForm();
});
</script>
</body>
</html>'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 1/17 오후 기록 040-2 (1) | 2025.01.17 |
|---|---|
| 자바 풀 스택 1/16 오후 기록 039-2 (0) | 2025.01.16 |
| 자바 풀 스택 1/15 오후 기록 038-2 (0) | 2025.01.15 |
| 자바 풀 스택 1/15 오전 기록 038-1 (0) | 2025.01.15 |
| 자바 풀 스택 1/14 오후 기록 037-2 (0) | 2025.01.14 |