DOM 객체
javascript를 통해서 스타일변경, 이벤트효과, ...주는 것들은
hmtl 문서 속의 요소를 객체로 받아오고
그 객체의 key(속성)에 특정 값을 대입하여 변경하는 것
예를들어 p태그의 글씨크기를 20px로 설정
1. p태그를 객체로 받아오기
2. p태그.style.fontSize = '20px';
예를들어 div태그의 class이름을 변경
1. div태그를 객체로 받아오기
2. div태그.클래스이름 = '바꾸고싶은 클래스이름';이벤트를 주는 방법
모든 html태그들에는 이벤트를 줄 수 있다
이벤트란?
사용자와 컴퓨터 간의 상호작용
ex) 마우스클릭, 키보드누르기, 마우스 더블클릭,...
모든 html태그들에는 이벤트가 발생했을때 실행시키고자 하는 행위를
속성에 알려줄 수 있다
<input id="email" type="email" class="input" on이벤트명="자바스크립트코드" />
ex)
해당 div태그가 클릭 이벤트가 발생한다면 f2() 가 실행됨
해당 div태그가 더블클릭 이벤트가 발생한다면 f3() 가 실행됨
<div onclick="f2()" ondoubleclick="f3()"></div>
만약 버튼이 클릭이 된다면 특정 태그의 글자색상을 붉은색으로 바꿔줘.
*absolute 속성: div 시작 꼭지점이 기준이라 대응하기가 힘들다If문의 사용
1.
if(조건식){
조건식이 true일때 실행됨;
}2.
if(조건식){
조건식이 true일때 실행됨;
}else{
조건식이 false일때 실행됨;
}3.
if(조건식1){
조건식1이 true일때 실행;
}else{
조건식1이 false일때 실행;
if(조건식2){
조건식2가 true일때 실행; // 조건식1이 false이고 조건식2가 true일때 실행
}else{
조건식2가 false일때 실행;
}
}조금 더 편리하게 사용하도록 else-if문을 만들었음
if(조건식1){
조건식1이 true일때 실행;
}else if(조건식2){
조건식1이 false이고 조건식2가 true일때 실행;
}else if(조건식3){
조건식1도 false, 조건식2도 false, 조건식3은 true일때 실행;
}...{
...
}else{
위에있는 조건식이 모두 false일때 실행;
}회원가입 페이지 만들기
register.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입</title>
<link rel="stylesheet" href="../styles/common.css">
<link rel="stylesheet" href="../styles/register.css">
</head>
<body>
<main>
<div class="wrapper">
<form neme="register-form" id="register-form">
<div class="form-header">
<h2>회원가입하기</h2>
</div>
<div class="input-wrapper">
<label for="email">이메일</label>
<input id="email" name="email" type="email" />
<p class="err-msg" id="email-err-msg">이메일을 입력해 주세요.</p>
</div>
<div class="input-wrapper">
<label for="username">이름</label>
<input id="username" name="username" type="text" />
<p class="err-msg" id="username-err-msg">이름을 입력해 주세요.</p>
</div>
<div class="input-wrapper">
<label for="password">비밀번호</label>
<input id="password" name="password" type="password" />
<p class="err-msg" id="password-err-msg">비밀번호를 입력해 주세요.</p>
</div>
<div class="input-wrapper">
<label for="password-check">비밀번호 확인</label>
<input id="password-check" name="password-check" type="password" />
<p class="err-msg" id="password-check-err-msg">비밀번호 확인은 필수 입력값입니다.</p>
</div>
<!-- button 기본 type="submit" 이라서 바꿔준다 -->
<button type="button" onclick="onRegister()">회원가입 하기</button>
</form>
</div>
</main>
<script src="../js/register.js"></script>
</body>
</html>register.css
.wrapper{
/* 화면이 늘고 줄때 내용물의 높이를 따라갈 수 있도록 */
min-height: 100vh;
/* 애초에 이미지에 그라데이션을 줄 수 있다 */
background-image:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(../images/background.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
#register-form{
display: flex;
flex-direction: column;
width: 385px;
}
.form-header{
text-align: center;
}
.input-wrapper{
/* 요소들 세로정렬 시키기 */
display: flex;
flex-direction: column;
}
input{
height: 64px;
box-sizing: border-box;
padding: 20px 16px;
/* 박스 테두리 둥글게 */
border-radius: 16px;
background-color: rgba(256, 256, 256, 0.05);
border: 1px solid white;
color: white;
}
.err-msg{
color:pink;
padding: 0 16px;
font-size: 14px;
display: none;
}
button{
height: 64px;
margin-top: 15px;
border-radius: 16px;
border: none;
background-color: pink;
}register.js
const onRegister = ()=>{
// user가 쓴 글자를 받아와야한다.
let emailInput = document.querySelector('#email');
// 사용자가 email input태그에 입력한 값은
// emailInput.value에 들어있다
let userNameInput = document.querySelector('#username');
// userNameInput.value에
let passwordInput = document.querySelector('#password');
let passwordCheckInput = document.querySelector('#password-check');
// check에는 true가 들어있다
let check = true;
// 정말로 value번째 방에있는 값들이 잘 들어왔는지 콘솔창으로 확인하가
// console.log(emailInput.value);
// console.log(userNameInput.value);
// console.log(passwordInput.value);
// console.log(passwordCheckInput.value);
let emailErrMsg = document.querySelector('#email-err-msg');
// 이메일 입력 여부
if(emailInput.value === ''){ // 이메일을 입력하지 않았다는 소리
// emailInput.value === '' 가 true 일때 실행되는 공간
emailErrMsg.style.display = 'block';
check = false;
}else{ // 이메일이 입력 되었다는 소리(위의 if문 조건이 false일때)
emailErrMsg.style.display = 'none';
}
// 이름 입력 여부
let userNameErrMsg = document.querySelector('#username-err-msg');
if(userNameInput.value === ''){
userNameErrMsg.style.display = 'block';
check = false;
}else{
userNameErrMsg.style.display = 'none';
}
// 비밀번호 입력 여부
let passwordErrMsg = document.querySelector('#password-err-msg');
if(passwordInput.value === ''){
passwordErrMsg.style.display = 'block';
check = false;
}else{
passwordErrMsg.style.display = 'none';
}
// 비밀번호 확인 입력 여부
let passwordCheckErrMsg = document.querySelector('#password-check-err-msg');
if(passwordCheckInput.value === ''){
passwordCheckErrMsg.textContent = '비밀번호 확인은 필수 입력값입니다.'
passwordCheckErrMsg.style.display = 'block';
check = false;
}else if(passwordCheckInput.value !== passwordInput.value){
// console.log('여기 실행됨'); 실행이 안될때 어디까지 들어왔는지 확인하면서...
passwordCheckErrMsg.textContent = '비밀번호에 입력된 값과 다릅니다.';
passwordCheckErrMsg.style.display = 'block';
check = false;
}else{
passwordCheckErrMsg.style.display = 'none';
}
// if 영역으로 한번도 들어간적이 없다면(모든 값으로 정상적으로 입력되었다는 소리) 회원가입 성공!!
if(check){
// 모달창을 보여줘
alert('회원가입이 성공했습니다!');
}
}
오늘도 너무 재밌는 프론트엔드💗💗💗
백엔드 프로젝트는 넘 어렵다리...🥲🥲🥲 #자바지옥
Slowly but surely
글이 잘 정리되어 있네요. 감사합니다.