자바스크립트(스크롤 이벤트, 정규식,회원가입페이지만들기)

JAVA_Script

자바스크립트(스크롤 이벤트, 정규식,회원가입페이지만들기)

강준석 2022. 12. 29. 16:52

728x90

스크롤을 내리면 발생하는 이벤트 만들기

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">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>

  <div class="status-bar"></div>

  <div class="container">
    <div class="box">
      회원약관<br>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ullam reprehenderit necessitatibus nemo, dolorem vero aperiam ipsum fugit quo veritatis, praesentium voluptatem recusandae accusantium soluta dolorum! Ea omnis a voluptatum praesentium?
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi cum dolorem, adipisci, eveniet inventore pariatur neque eos ab quae vitae incidunt corrupti! Quos, dolores? Aliquid vel natus doloribus eveniet voluptatem.
    </div>
    <input id="chk" type="checkbox" disabled><label for = 'chk'> 약관에 동의합니다</label>
  </div>
  
  <script src="script.js"></script>
  <script src="script2.js"></script>
</body>
</html>

css

.box{
  border: 1px solid black;
  width: 200px;
  height: 200px;
  overflow: scroll;
  margin: auto;
}

.container{
  text-align: center;
}

#chk:disabled + label{
  color: lightgray;
}

body{
  height: 5000px;
}

.status-bar{
  width: 0;
  height: 5px;
  background-color: red;
  /* 위에 상단에 고정(스크롤을 내려도 위에 고정) */
  position: fixed;
  top: 0;
}

js1

let box = document.querySelector('.box');
let boxHeight = box.scrollHeight-box.clientHeight-5;
let isDisable = true;
console.log(box.scrollHeight);
//스크롤박스의 크기

box.addEventListener('scroll',function(){

  // console.log(box.scrollTop);
  //위에서 부터 얼마나 스크롤을 내렸는지알려줌

  //스크롤을 다 내렸을때
  //총높이 - box창의 높이 == 이동거리

  if(isDisable && (box.scrollTop >= boxHeight)){
    document.querySelector('#chk').disabled = false;
    isDisable = false;
  }
});

js2

// console.log(window.innerHeight);
//현재 브라우저 전체 크기 (브라우저를 줄이면 바뀜)

// console.log(document.querySelector('body').clientHeight);
//css에서 설정된 전체 크기 5000px

// 저장용변수 = 전체 높이 - 브라우저 창의 높이
let hei = document.querySelector('body').clientHeight - window.innerHeight;

window.addEventListener('scroll',function(){

  // console.log(window.scrollY/hei*100);
  //막대 너비를 스크롤한만큼 늘어나야 함 (처음은 너비가 0),%단위로 설정하는게 나음
  //전체창에 대한 위에서 부터 얼마나 스크롤을 내렸는지알려줌(스크롤한 만큼의 높이)
  //=> 전체에서 스크롤을 얼마나 내린지 % 로 계산할 수 있음
  // 스크롤 한만큼의 높이 / (전체 높이 - 브라우저 창의 높이) *100

  let a = window.scrollY/hei*100;

  this.document.querySelector('.status-bar').style.width = '${a}%'

});



// 브라우저 창 높이 확인 
// console.log(window.innerHeight);

// 브라우저 <body>태그 영역 총 높이 확인
// console.log(document.querySelector('body').clientHeight);

// 저장용변수 = 전체 높이 - 브라우저 창의 높이
let brScrHei = document.querySelector('body').clientHeight - window.innerHeight;


//윈도우에 관련된 이벤트
window.addEventListener('scroll', function() {

  //스크롤 한만큼 높이
  // console.log(window.scrollY);

  // 스크롤 한만큼의 높이 / (전체 높이 - 브라우저 창의 높이) * 100
  // console.log(window.scrollY / brScrHei * 100);

  let tolHei = window.scrollY / brScrHei * 100;

  //잦망 코드 수정 필요 ㅋㅋ
 document.querySelector('.status-bar').style.width = `${tolHei}%`;


});

정규식(Regular Expression)

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp).

regexr.com

(정규식 태스트사이트)

const regex = / 정규식이 들어감 (패턴) / (플래그);

const regexp = new regeExp('정규식 들어감(패턴)');

패턴

a-z , A-Z: a(A)부터 z(Z)까지

[ ] : 안에 넣어주는건 or 처리

그냥 /a-z/입력시 abcd...z의 문자열를 찾고

/[a-z]/로 입력시 a~z 까지 a,b,c.... 한글자씩 찾아줌

/ \ d / : 숫자만

/ \ D / : 숫자빼고 다

/ \ w / :/ [ ] / 와 같은 의미

/ \ s / :띄어씌한것만

/ [ \ ! \ @ \ # \ $ \ % ] / :특수문자 잡기, 일일이 다 써야함

/ [ ^ a(넣은값) ] / : 해당 넣은 값 제외

/ ^ [ A-Z ] / : A~Z로 시작하는 값

/ ^ R / : R로 시작하는 것

/ a$ / : a로 끝나는 것

/ [ a $ ] / : a

/ apple ? / : apple이 들어간 문자를 찾아줌

/ ( 월 ) * 요일 / : 월이 있거나 없는 요일 다 찾아줌

/ ( 월 ) + 요일 / : 월이 하나라도 있는 요일 찾아줌

플래그

정규식에 대한 검색 옵션

i : 대소문자 구별 안함

g : 문자열에 모든 패턴을 찾음

m : 줄바꿈이 되도 검색을 계속 함

정규식관련 매서드

const regex = /abc/;
let result;
let text = '검사할문자 abc 가나다';

//정규식관련 메서드(함수)

//test메서드 : 정규식에 매칭되는 문자열인지 테스트
result = regex.test(text);
console.log(result)
//test함수의 값 중 abc가 정규식에 매칭되므로 ture 리턴

//match메서드 : 문자열에서 정규식에 매칭되는 값을 배열로 리턴
result = text.match(regex)
console.log(result[0]);
//매칭되는 첫번째 문자열 출력


//repalce 매서드 : 문자열에서 정규식이 매칭되는 값을 2번째 인수로 바꿈
result = text.replace(regex,'xyz');
console.log(result);
//매칭되는 abc를 xyz로 바껴서 리턴

회원가입페이지만들기

<!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">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>회원 가입</title>
</head>
<body>
    <h1>회원 가입</h1>
    <form>
        <div class="id_input_box">
            <input id="id_txt" type="text" placeholder="아이디를 입력하세요.">
            <p class="id_input_check"></p>
            <button class="input_confirm_btn" id="id_confirm">확인</button>
        </div>
        
        <div class="pw_input_box">
            <input id="pw_txt" type="password" placeholder="비밀번호를 입력 하세요.">
            <p class="pw_input_check"></p>
            <button class="input_confirm_btn" id="pw_confirm">확인</button>
        </div>
        <div class="email_input_box">
            <input id="email_txt" type="email" placeholder="이메일을 입력 하세요.">
            <p class="email_input_check"></p>
            <button class="input_confirm_btn" id="email_confirm">확인</button>
        </div>
        <div class="phone_input_box">
            <input id="phone_txt" type="tel" placeholder="전화번호를 입력 하세요.">
            <p class="phone_input_check"></p>
            <button class="input_confirm_btn" id="phone_confirm">확인</button>
        </div>
        <button class="reg_req_btn">가입 요청</button>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <script src="./script.js"></script>
</body>
</html>

// 정규식 조건
const regexId = /^\w{8,20}$/;
//알파벳, _ (언더라인),숫자 포함 8~20글자내로 입력하시오.
const regexPw = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,20}$/;
// 대문자,소문자 영문어와 특수문자,숫자(한글자이상씩은 사용)를 사용해 8~20글자내로 입력하시오.
const regexMail = /^([a-z]+\d*)+(\.?\w+)+@\w+(\.\w{2,3})+$/;
const regexTel = /^\d{2,3}-\d{3,4}-\d{4}$/;

// 올바르게 입력했는지를 저장해주는 변수들
let isId = false;
let isPw = false;
let isEm = false;
let isPh = false;


//버튼들
const idBtn = document.querySelector('#id_confirm');
const pwBtn = document.querySelector('#pw_confirm');
const emBtn = document.querySelector('#email_confirm');
const phBtn = document.querySelector('#phone_confirm');


// 유효성 검사 후 결과를 표시해주는 p태그들
let idCheck = document.querySelector('.id_input_check');
let pwCheck = document.querySelector('.pw_input_check');
let emCheck = document.querySelector('.email_input_check');
let phCheck = document.querySelector('.phone_input_check');


// =======================아이디=======================

// idBtn.addEventListener('click', function(event) {

//   //기본동작 막기
//   event.preventDefault();
//   let val = document.querySelector('#id_txt').value;
//   // console.log(document.querySelector('#id_txt').value);

//   // console.log(regexId.test(val));

//   if(regexId.test(val)) {
//     isId = true;
//     idCheck.innerHTML = "사용 가능한 아이디입니다.";
//     idCheck.style.color = "green";
//   } else if (!regexId.test(val)) {
//     isId = false;
//     idCheck.innerHTML = "사용 불가능한 아이디입니다.";
//     idCheck.style.color = "tomato";
//   }
//   isOk();
// })


// // =======================비밀번호=======================

// pwBtn.addEventListener('click', function(event) {

//   //기본동작 막기
//   event.preventDefault();
//   let val = document.querySelector('#pw_txt').value;

//   if(regexPw.test(val)) {
//     isPw = true;
//     pwCheck.innerHTML = "사용 가능한 비밀번호입니다.";
//     pwCheck.style.color = "green";
//   } else if (!regexPw.test(val)) {
//     isPw = false;
//     pwCheck.innerHTML = "사용 불가능한 비밀번호입니다.";
//     pwCheck.style.color = "tomato";
//   }
//   isOk();
// })


// // =======================이메일=======================

// emBtn.addEventListener('click', function(event) {
  
//   //기본동작 막기
//   event.preventDefault();
//   let val = document.querySelector('#email_txt').value;

//   if(regexMail.test(val)) {
//     isEm = true;
//     emCheck.innerHTML = "사용 가능한 이메일입니다.";
//     emCheck.style.color = "green";
//   } else if (!regexMail.test(val)) {
//     isEm = false;
//     emCheck.innerHTML = "사용 불가능한 이메일입니다.";
//     emCheck.style.color = "tomato";
//   }
//   isOk();
// })


// // =======================전화번호=======================

// phBtn.addEventListener('click', function(event) {

//   //기본동작 막기
//   event.preventDefault();
//   let val = document.querySelector('#phone_txt').value;

//   isPh = regexTel.test(val);
//   showMsg(isPh,phCheck);


//   if(regexTel.test(val)) {
//     isPh = true;
//     phCheck.innerHTML = "사용 가능한 전화번호입니다.";
//     phCheck.style.color = "green";
//   } else if (!regexTel.test(val)) {
//     isPh = false;
//     phCheck.innerHTML = "사용 불가능한 전화번호입니다.";
//     phCheck.style.color = "tomato";
//   }
//   isOk();
// })


// // =======================가입요청 버튼 함수화=======================
// // 가입요청 버튼 함수를 각각이벤트함수(아이디,비번,이메일,번호)에 위치시키기
// function isOk(){
//   if(isId && isPw && isEm && isPh){
//     document.querySelector('.reg_req_btn').style.background = 'blue';
//     }
//   }




// ***********************리팩토링***********************



//중복된 사용가능/불가능알림,isOK기능을 포함한 함수 생성
function showMsg(isX,XCheck){
  if(isX){
    XCheck.innerHTML = "사용가능";
    XCheck.style.color = 'green';
  }else{
    XCheck.innerHTML = "사용불가능";
    XCheck.style.color = 'red';
    }
    isOk();
  }

// =======================아이디=======================

idBtn.addEventListener('click', function(event) {

  //기본동작 막기
  event.preventDefault();
  let val = document.querySelector('#id_txt').value;

  isId = regexId.test(val);
  showMsg(isId,idCheck);

});


// =======================비밀번호=======================

pwBtn.addEventListener('click', function(event) {

  //기본동작 막기
  event.preventDefault();
  let val = document.querySelector('#pw_txt').value;

  isPw = regexPw.test(val);
  showMsg(isPw,pwCheck);
  
});


// =======================이메일=======================

emailBtn.addEventListener('click', function(event) {

  let val = document.querySelector('#email_txt').value;
  event.preventDefault();


  isEmail = regexMail.test(val);
  showMsg(isEmail, emailCheck);
});



// =======================전화번호=======================

phoneBtn.addEventListener('click', function(event) {

  let val = document.querySelector('#phone_txt').value;
  event.preventDefault();


  isPhone = regexTel.test(val);
  showMsg(isPhone, phoneCheck);
});

728x90

저작자표시 (새창열림)