Regular Expression(정규식), 캐러셀, toFixed, parseFloat

'문자'.includes('찾을단어')
'abc'.includes('a')

사실 이렇게만 하면 문자 검사는 가능하다.

이러면 True, False를 출력한다.

 

그러나 이건 단순이 존재여부를 검증하는 용도이다.

 

그래서 정규식(Regular Expression) /  / 을 쓴다.

 

/a/.test('abcde')

a가 'abcde'에 있는지를 판별하는 코드이다. 이것만보면 includes랑 같아보이지만

 

/[a-z]/.test('abcde')

a - z 중 아무 글자 1개가 있는지 검증하라는 의미 可

단. 대소문자 구별하니 유의!

 

그래서 한글은 [ㄱ-ㅎ], [ㅏ-ㅣ],

숫자는 [0-9]

이렇게 쓸 수 있다.

 

아무 문자 하나라도 있는지(특수기호 포함)를 판정: \S   <- 단 아무 글자 단 1개만 해당한다.

1글자에서 제한을 두고싶지 않다면 \S+ 를 사용한다.

/\S/.test('ㅋㅋㅋ')  // true 결과 출력

 

 

특정 문자로 시작하느냐 검증: ^문자  ex) /^a/

특정 문자로 끝나는지 검증: 문자$ ex) /a$/

or 개념 검증 ex) /a|b/   a또는 b가 들었는지 검증

 

 

정규식으로 이메일 형식 검사를 해보자.

 

/\S+@\S+\.\S+/.test('aaa@bbb.ccc')  // True

여기서  점(.)은 특수 의미를 지녔기에  \.  <-이걸 한 번 더 붙여서 점이 있어야함을 집어넣어줘야한다.

 

 

 

기존의 로그인창에 정규식을 이용한 검증코드를 짜보면

 

 

            $('form').on('submit', function(e){
              var email = $('#IDinput').val();
              var pw = $('#PWinput').val();

                if(email ==='' || pw === ''){
                    alert('공백으로 제출할 수 없습니다.')
                    e.preventDefault();
                }
                else if(!/\S+@\S+\.\S+/.test(email)){
                    alert('이메일 형식으로 입력해주세요.')
                    e.preventDefault();
                }
                else if(!/[A-Z]/.test(pw)){
                    alert('비밀번호에는 적어도 대문자 하나가 들어가야합니다.')
                    e.preventDefault();
                }
              }
            )

이렇게 짤 수 있다. 

e.preventDefault()  로 submit을 못하게 막는 것을 실행하기 위해서는

반드시 'form'이 선택되고, 그 뒤에 'submit'형태로 골라진 후, e라는 파라미터가 골라져야한다.

 

email과 pw로 변수선언을 하고

이메일 형식과 비밀번호 적어도 대문자 하나에 대한 검증을 앞에 ! 하나로 not의 의미를 부여하여 간단하게 검증할 수 있다.

 

 

물론 직관적으로

 

/[A-Z]/.test(비번) == false

이렇게 false, true를 직접 넣은 조건문을 작성해도 된다.

 

 

 

사실 이러한 로그인 관련 효율적인 정규식은 구글에 치면 많이 나온다.

---

 

 

캐러셀: 슬라이드되는 UI. (사진참조)

 

 

이것도 일종의 애니메이션이다. 다시 한번 기억하는 4단계 과정

 

1. 애니메이션 시작 전 화면 만들기

2. 애니메이션 종료 후 화면 만들기

3. 언제 종료화면으로 변할지 JS 코드짜기

4. transition 추가하기 

 

 

 

캐러셀에 적용되는 원리는

이렇게 그림을 길게 연결해놓고 왼쪽으로 옮기는 개념이다.

 

 

 

대문 밑에 아래의 HTML을 추가하자

          <div style="overflow: hidden"> <!--밑의 스크롤바 제거. 넘치는 요소 숨기기-->
            <div class="slide-container">
              <div class="slide-box">
                <img src="car1.png">
              </div>
              <div class="slide-box">
                <img src="car2.png">
              </div>
              <div class="slide-box">
                <img src="car3.png">
              </div>
            </div>
         </div> 

         <button class="slide-1">1</button>
         <button class="slide-2">2</button>
         <button class="slide-3">3</button>

여기서 나온 img는 로컬주소(현재 파일)이다. 그리고 클릭하면 슬라이드식으로 넘겨줄 버튼도 3개 만든다.

 

 

 

전체 container, 이미지들 전체, 그리고 각 이미지 사이즈에 대한 설정을 CSS로 한다.

.slide-container {
  width: 300vw; 
  /*vw = 브라우저 폭. 100이 브라우저 기본 폭이다.*/
  transition: all 1s;
}
.slide-box {
  width: 100vw;
  float: left /*왼쪽에 배치하자*/
}
.slide-box img {
  width: 100%; /*이미지 창에 100% 맞게 조정*/
}

 

 

 

그리고 이에 따른 JS를 CSS 직접 입력방식으로 작성한다.

 

            $('.slide-1').on('click', function(){
              $('.slide-container').css('transform', 'translateX(0vw)');
            });
            $('.slide-2').on('click', function(){
              $('.slide-container').css('transform', 'translateX(-100vw)');
            });
            $('.slide-3').on('click', function(){
              $('.slide-container').css('transform', 'translateX(-200vw)');
            });

 

margin-left값을 설정해주는 방식보다 transform으로 하는 것이 부드럽고 좋다고 한다.

 

 

 

 

변수선언을 이용해서 next버튼을 누르면 넘어가게끔 설정할 수 있다.

            var currentPic = 1;
            $('.next').on('click', function(){
              if (currentPic == 1){
                $('.slide-container').css('transform', 'translateX(-100vw)')
                currentPic = 2;
              } 
              else if (currentPic == 2){
                $('.slide-container').css('transform', 'translateX(-200vw)')
                currentPic = 3;
              }
              else if (currentPic ==3){
                $('.slide-container').css('transform', 'translateX(0vw)')
                currentPic = 1;
              }
              }
            );

 

그런데 이 경우 갑자기 사진이 1개 더 늘어나면 코드를 일일이 더 추가해야하는 등 확장성이 안좋다.

 

 

 

 

            var currentPic = 1;

            $('.slide-1').on('click', function(){
              $('.slide-container').css('transform', 'translateX(0vw)');
              currentPic = 1;
            });
            $('.slide-2').on('click', function(){
              $('.slide-container').css('transform', 'translateX(-100vw)');
              currentPic = 2;
            });
            $('.slide-3').on('click', function(){
              $('.slide-container').css('transform', 'translateX(-200vw)');
              currentPic = 3;
            });

            
            $('.next').on('click', function(){
                $('.slide-container').css('transform', 'translateX('+ currentPic * -100 + 'vw)')
                currentPic += 1;
              }
            );

 

 

이렇게 한다면 next버튼. 반대로 back 버튼도 같은 원리로 구현이 가능하다.

그러나 계속 앞이나 뒤로가면 하얀화면이 나오는 부분은 해결이 안된 상태이다.

 

 

 

      $('.slide-container').css('transform', 'translateX(-' + 지금사진 + '00vw)');

이렇게 해도 된다.

 

 

 

 

---

 

잠깐 문법

 

 

function 함수(){
  return 123
}

이렇게 return을 쓸 수 있다.

 

 

그리고 0.1 단위 연산에 유의한다.(컴퓨터 이진수 문제)

 

 

toFixed(소숫점 몇째자리)를 이용해서 반올림할 수 있다.

parseFloat((1.1 + 0.3).toFixed(1))

 

그러나 반환값은 문자로 나온다.

그래서 parseFloat()나 parseInt()를 써야한다.

 

JS에서 '1' + 1은 '11'이라는 특성이 있다.