비쥬얼스튜디오에서 다른 class를 하나더 만들었다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Form.html</title>
<link rel = "stylesheet" href = "css/bootstrap-grid.css"
</head>
<body>
<div class = "container">
<h1>form 디자인</h1>
<form action="signup.jsp" method = "post">
<label for="id">아이디</label>
<input type="text" id = "id" name = "id">
<button type = "submit">가입</button>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Form.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class = "container">
<h1>form 디자인</h1>
<form action="signup.jsp" method = "post">
<div class="mb-2">
<label class = "form-label" for="id">아이디</label>
<input class = "form-control" type="text" id = "id" name = "id">
</div>
<div class="mb-2">
<label class = "form-label" for="pwd">비밀번호</label>
<input class = "form-control" type="text" id = "pwd" name = "pwd">
</div>
<button class = "btn btn-primary" type = "submit">가입</button>
</form>
<div class = "row">
<div class = "col-6">
<h1>form 디자인</h1>
<form action="signup.jsp" method = "post">
<div class="mb-2">
<label class = "form-label" for="id">아이디</label>
<input class = "form-control" type="text" id = "id" name = "id">
</div>
<div class="mb-2">
<label class = "form-label" for="pwd">비밀번호</label>
<input class = "form-control" type="text" id = "pwd" name = "pwd">
</div>
<button class = "btn btn-primary" type = "submit">가입</button>
</form>
</div>
</div>
</div>
</body>
</html>반응형 ui에대해서 배우고있다.
col-sm-6 같은 경우 폭을 좁게했을 때 창에대해서 100%를 유지하고있다.
<div class = "col-sm-6 mx-auto">mx-auto라는 것은 마진의 x축을 auto로 잡아주겠다 라는 뜻이다.
부트스트랩 form에서 Validation이라는 것은 예를 들어 회원가입할때 필수로 입력해야할 것이 제대로 입력이 안되었을 때 오류를 경고해주는 것이다. 그런 디자인을 부트스트랩에서 css를 제공해주고있다.
밑에 이메일 형식에 맞게 입력해 주세요 가 보이려면 is-invalid가 class에 추가 되어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step02_Form3.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>회원가입폼</h1>
<form action="">
<div>
<label class = "form-label" for="id">아이디</label>
<input class = "form-control" type="text" id="id" name="id" placeholder = "아이디">
<div class = "invalid-feedback">
5 글자 이상 입력하세요!
</div>
<div class = "valid-feedback">
Looks good!
</div>
</div>
</form>
</div>
<script>
//아이디 입력란에 입력을 할때마다 호출되는 콜백함수 등록하기
document.querySelector("#id").addEventListener("input",(e)=>{
//1. 입력한 아이디를 읽어온다.
const inputId = e.target.value;
//const inputId2 = document.querySelector("#id").value;
//2. 아이디가 5글자 이상인지 여부를 판별한다.
const isIdValid = inputId.length >=5;
//3. 만일 5글자 이상이면 is-valid를 추가하고 is-invalid는 제거한다.
// 만일 5글자 미만이면 is-invalid를 추가하고 is-valid는 제거한다.
if(isIdValid){
e.target.classList.add("is-valid");
e.target.classList.remove("is-invalid");
}else{
e.target.classList.add("is-invalid");
e.target.classList.remove("is-valid");
}
});
</script>
</body>
</html>
callback()함수 복습
함수의 인자로 전달되는 resolve는 함수이다. resolve는 작업을 완료 했을 때 호출 해야하는 함수.
resolve함수가 호출되면 .then()안에 있는 함수가 자동호출된다.
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/promise/test03.jsp</title>
</head>
<body>
<h1>Promise 테스트</h1>
<script>
new Promise().then().catch();
</script>
</body>
</html>
callback 함수는 위에처럼 작성해도된다.
fetch 함수란?
우선 수업시간에 배운내용대로는 fetch라는 함수를 사용하면 링크나 버튼처럼 페이지의 이동은 없다. 그치만
<script>
document.querySelector("#myBtn").addEventListener("click", ()=>{
fetch("${pageContext.request.contextPath}/index.jsp")
.then(function(response){
return response.text();
})
.then(function(data){
console.log(data);
});
})
</script>이 코드에서 처럼 아래와 같이 출력이 되었다.
쉽게 이해하자면 페이지이동없이 함수를 호출하는 방법인 것 같다.
'수업내용' 카테고리의 다른 글
| 20230531 수업내용2🫡🫡🫡 (0) | 2023.05.31 |
|---|---|
| 20230531 수업내용🫡🫡🫡 (0) | 2023.05.31 |
| 20230526 수업내용👉👉👉 (0) | 2023.05.26 |
| 20230525 수업내용🤦♂️🤦♂️🤦♂️ (1) | 2023.05.25 |
| 20230524 수업내용 😢😢😢 (0) | 2023.05.24 |
댓글