👁‍🗨javascript(애니메이션(apple music ui), 클릭횟수, setTimeout, setInterval 함수, includes 함수, 정규식(문자검사))

setTimeout() 함수

• x초 후 ()안에 코드 실행.
• setTimeout(function(){
  실행할 코드}, ms)
• 콜백함수 자리에는 만들어둔 함수도 넣을 수 있음.

setInterval() 함수

• x초마다 코드실행
• setInterval(function(){
  실행할 코드}, ms)

예시) 1초마다 5라는 문자를 1감소시키고 0이 되면 화면에서 사라지게

<div class="alert alert-danger">
   5초 이내 구매 시 사은품 증정!!!
</div>
   <script>
     let count = 5;
     setInterval(function(){
       --count
     if(count<=0){
       document.querySelector('.alert-danger').style.display = 'none'
      } else{
       document.querySelector('.alert-danger').innerText = `${count}초 이내 구매 사은품 증정!`
      }
      }, 1000)

• 초기값 5를 count라는 변수에 저장하고 setInterval 함수를 통해 1초마다 1씩 감소하고
• 만약 변수 count의 값이 0이 되면 alert-danger라는 클래스명의 <div>의 display를 none으로 변경. 그렇지 않으면 ${count}초 이내 구매 사은품 증정!이라는 텍스트를 넣어줌.

---

클릭횟수를 기록해보자!!

• 변수에 +1 하는 방법

  • 변수++
    변수+=1
    변수=변수+1

• badge 클릭 횟수가 짝수이면 light, 홀수이면 dark를 코드로 만들면??

  <script>
      var count = 0;
      document.querySelector('.badge').addEventListener('click', function(){
          count += 1;
          if(count%2==0){
              document.querySelector('.badge').innerHTML = "Light 🔄"
          } else{
              document.querySelector('.badge').innerHTML = "Dark 🔄"
          }
      })

• 초기 값 0을 변수 count에 할당해주고 badge라는 클래스명을 가진 button에 클릭이벤트를 부여함
• 그 버튼이 클릭되면 count가 1씩 증가하는데
• 만약 count를 2로 나누었을 때 나머지가 0이라면 Light라는 텍스트가 보이고
• 나머지가 0이 아닐 때는 Dark라는 텍스트가 보인다!

** 모든 홀수는 2로 나눴을때 나머지가 1이고 짝수는 나머지가 0.

includes() 함수

• 이 함수는 문자를 검사하는 쉬운 방법

  • 예를들어 'abc'.includes('a')의 결과는 true이고
    'abc'.includes('n')의 결과는 false임.

• 이 함수의 한계 : 한글이 들어있는지, 영어가 들어가 있는지 등의 기능은 수행할 수 없음.. 그래서 정규식이라는 개념이 등장함.

  정규식

• 정규식을 쓰면 문자검사가 가능함.

  • /a/.test('abcde') → a라는 문자가 abcde안에 있는지 확인해줘~
    /a/ → 있는지 검사할 문자
    .test('abcde') → 검사당할 문자

• 장점!

  • 1. 문자 범위 지정가능
    • 만약 /[a-z]/.test('abcde') 라고 쓰면 a~z 중 아무글자 1개가 abcde에 들어있냐라는 뜻.
    • /[a-zA-Z]/.test('abcdeA')는 대소문자 구분없이 알파벳 중 1개가 abcdeA안에 들어있는지 확인.
    • /[ㄱ-ㅎ가-힣]/ 은 모든 한국어를 의미
    • /[백슬레시S]/는 아무 문자 1글자를 의미(특수기호 포함)

  • 2. 시작과 끝을 알 수 있음
    • /^a/ : a로 시작하는지
    • /a$/ : a로 끝나는지
    • /a|b/ : a 또는 b가 들어있는지

• 예시) 비밀번호에 대문자가 포함되어 있는지, 이메일 형식이 맞는지?

  document.querySelector('form').addEventListener('submit', function(event){
            
  const inputId = document.querySelector('#inputId').value;
  const inputPw = document.querySelector('#inputPw').value; 
  
  if(inputId==""||inputPw==""){
     alert('입력한 내용이 없습니다.')
     event.preventDefault();
  }else if(inputPw.length<6){
     alert('비밀번호는 6자리 이상으로 입력해주세요')
     event.preventDefault();
  }
                              
  if(/\S+@\S+\.\S+/.test(inputId)){
  
  }else{
     alert('올바른 형식이 아닙니다!!')
     event.preventDefault();
  }
  if(/[A-Z]/.test(inputPw)){
  
  }else{
     alert('대문자 1개를 포함해주세요')
     event.preventDefault();
    }
  })

  • inputId와 inputPw에 입력한 내용이 없으면 경고창 띄우고 만약 그렇지 않다면
  • inputPw의 길이가 6자리 이하라면 경고창을 띄움.
  • 다른 조건문으로 inputId의 값이 이메일 형식인지 확인하고 아니라면 경고창.
  • 다른 조건문을 통해 inputPw에 대문자 1개가 포함되어 있는지 확인.

---

애니메이션

• 애니메이션 만드는 법칙

  • 1. 시작스타일 구현
    2. 최종스타일 구현(class명을 활용해서 css에 미리 구현)
    3. 원할 때 최종스타일로 변하라고 코드 작성
    4. 시작스타일에 transition 추가

• apple music UI 만들기!

  • 먼저 HTML과 CSS, 이미지를 준비한다.

    <div class="card-background">
    <div class="card-box">
      <img src="카드이미지1경로">
    </div>
    <div class="card-box">
      <img src="카드이미지2경로">
    </div>
    <div class="card-box">
      <img src="카드이미지3경로">
    </div>
    </div>

    .card-background {
    height: 3000px;
    margin-top: 800px;
    margin-bottom: 1600px;
    }
    .card-box img {
    display: block;
    margin: auto;
    max-width: 80%;
    }
    .card-box {
    position: sticky;
    top: 400px;
    margin-top: 200px;
    }

    • 높이가 3000px나 되는 긴 배경에 카드를 세로로 배치했고 position : sticky 를 통해 스크롤 시 화면에 고정되도록 해놓았음.
    • 이제 스크롤 시 opacity가 점점 줄어드는 애니메이션을 구현하려면 지금 스크롤 위치에 따라 opacity가 1~0까지 줄어드는 코드를 작성해야 함.

  • 스크롤 시 현재 스크롤바의 높이를 알고 싶다!

    $(window).scroll(function(){
      var 높이 = $(window).scrollTop();
    });

    • 스크롤 이벤트가 발생하면 현재 창의 스크롤바 높이를 알려주는 $(window).scrollTop() 함수 실행.
      콘솔창에 찍어보면 스크롤바 높이가 측정되는 것을 확인.

  • 현재 스크롤 바의 위치에 따라 opacity를 다르게 설정하고 싶다!

    • 이제 650px쯤 스크롤 하면 opacity를 1로, 900px에서는 opacity를 0.5로 1150px에서는 opacity를 0으로 설정하면 된다는 것을 알 수 있음.

    $(window).scroll(function(){
    
    var 높이 = $(window).scrollTop();
        
    $('.card-box').eq(0).css('opacity', ???);
    }); 

    • 여기서 ??? 는 스크롤바 높이가 650~1150이 될 때, 1~0이 되는 가변적인 값이므로
      미지의 변수 y라고 표현을 하면

    $(window).scroll(function(){
    
    var 높이 = $(window).scrollTop();
    
    var y = 미지의 변수;
    $('.card-box').eq(0).css('opacity', y);
    });

    • 그럼 우리가 y값을 구해야 하는데 잠시 중학 수학을 떠올려보면
      스크롤바높이가 650~1150이 될 때 1~0이 되는 가변적인 값 = y는 중학교 때 배운적이 있음.
      
    • 이걸 수식으로 표현하면 y에 대한 일차함수임. y = ax + b
      여기서 a는 기울기 b는 y절편이라고 하는데 너무 어려우니까 대입법을 이용하면

    //수학시간
    1 = a * 650 + b
    0 = a * 1150 + b

    a = -1/500
    b = 115/50

    • 이걸 다시 자바스크립트 코드에 대입하면

    var y = -1/500 * 높이 + 115/50

    • 이제 y의 값을 아니까 아까 코드를 업데이트 할 수 있음!

    $(window).scroll(function(){
    
    var 높이 = $(window).scrollTop();
    
    var y =  -1/500 * 높이 + 115/50;
    $('.card-box').eq(0).css('opacity', y);
    });

  • 그러면 이제 투명도 뿐만 아니라 카드 사이즈가 서서히 작아지는 것은 어떻게 할까??

    • 사이즈를 줄이는건 transform : scale(0.9) 속성을 이용하면 0.9배로 작아짐.
    • 그런데 여기서도 그대로 0.9 라는 수치를 넣는게 아니라 미지의 변수 z 같은걸 만들어서

    • z = a * 높이 + b 이렇게 수식을 세우고 높이가 650px일 때 z = 1, 높이가 1150px일때 z = 0.9 이런 식으로 쓰면 좋을 것 같음.
    • 아까와 동일하게 대입법으로 a와 b의 상수를 구하면

    z = (-1/5000) * 높이 + 565/500

    • 이제 z값을 알았으니 코드를 작성하면

    var z = (-1/5000) * 높이 + 565/500;
    $('.card-box').eq(0).css('transform', `scale( ${z} )`);

    끗.