[JavaScript] 정규식/ 이미지슬라이드/ Scroll/ 탭기능(for문)

/*코딩애플 유료강의를 듣고 기록하는 포스팅*/

 

 

정규식 (test 함수)

정규식이란 문자를 검사할 때 쓰는 식이다.

 

.test('여기') 안에 abc가 있는지 검사해줘

정규식을 검사하면 이렇게 true가 나오는데 true/false식으로 나오니

if문에서 조건식처럼 쓸 수도 있다는 것도 알 수 있다.

또한 보통 정규식은 외우지 않고 찾아서 쓴다고 한다.

 

간단한 정규식 문법

• //
• /[]/: (ex. /[A-z]/ => 대문자 A부터 소문자 z까지)
• /＼S/: 특수문자 포함 모든 문자 (ex. a#b@c  => /＼S+#＼S+@＼S/)
• 주의할 점: .(점) 찾으려는 거면 ＼.으로 찾아야 함

또 다른 참고 예시

 

---

제이쿼리로 Carousel (이미지 슬라이드)

이미지 슬라이드를 하기 위해서는 html과 css를 먼저 잘 설계해두어야 한다. (사실 모든 UI가 그렇겠지만😅)

이는 이미지 슬라이드를 하기 위한 하나의 방법이니 다른 방법도 있다는 걸 알아두자.

 

이미지 개수대로 버튼을 만들어 버튼을 누르면 해당 이미지로 슬라이드

• div태그 안에 img태그를 넣어 이미지를 불러온다.
• img태그를 감싼 div태그에 width: 100vw 적용
• img태그는 width: 100% 적용
• img태그를 감싼 div태그에 float: left 적용
• div를 감쌀 하나의 div를 또 만들어 width: 임의값vw 적용 (임의값: 슬라이드할 이미지의 개수 * 100)
• 임의값vw로 인해 아래에 스크롤바가 생길 것 -> 지금까지의 요소들을 또 감쌀 div를 만들어 overflow: hidden 적용해 아래의 스크롤바 없애기
• 이제부터 슬라이드 애니메이션 값을 준다. -> width: 임의값vw인 2번째 div태그에 transition을 줘서 속도값 지정
• 제이쿼리로 클릭하면 해당 이미지로 넘어가게 동작을 만든다. (css속성 or addClass 원하는 거 쓰면 된다.)

추가 설명

1. 100vw와 100%의 차이

1vw는 우리가 보는 브라우저 창의 1%라고 보면 된다.

100%는 부모의 크기를 100% 받는다 라는 뜻이다.

즉, 100vw는 브라우저 창 전체를 의미하는데 100%는 부모의 크기에 따라 크기값이 달라질 수 있다는 것이다.

예를 들어 부모의 width가 200px이라고 가정한다면

100vw은 부모값에 의하지 않고 그냥 전체 브라우저 크기값을 가지고,

100%는 부모 크기의 100%니까 같이 200px를 가진다고 보면 된다.

 

2. css의 transition

transition은 속도값을 지정할 수있다.

.container {
    width: 500vw;
    transition: all 1s;
}

보통 이렇게 쓰이는데 all은 모든 속성을 이야기하고 1s는 1초를 뜻한다.

그런데 all을 쓰게되면 .container의 모든 속성을 말하기 때문에 현재 코드 상 width 또한 transition 효과를 얻는다.

말로 풀면 별 거 아닌 것 같지만 직접 브라우저 창의 크기를 변화시켜 보면 왜 all이 좋지 선택인지 알 수 있다.

그래서 all이 아닌 다른 속성을 써주는 게 좋은데 여기선 슬라이드에 대한 transition이니까 transform을 써주면 된다.

 

 

다음/이전 버튼을 만들어서 이미지 슬라이드를 만들 수도 있고, 자동으로 이미지 슬라이드를 하는 것도 만들 수 있는데 방법은 아주 많아 뭐가 정답이라고 할 수 없고 내가 내 방식으로 코드를 짜보는게 가장 좋다!.!

내가 이 수업을 듣기 전에는 append함수를 사용해 이미지 슬라이드를 구현했었다. (구현방식은 많고도 많다...)

이미지를 변수로 저장해 사용하거나 append, prepend 함수를 사용해 이미지 슬라이드를 만들어 볼 수 있으니 참고!.!

 

---

scroll 애니메이션

scroll 이벤트는 많이 사용하면 성능 저하를 초래하기 때문에 너무 남발하면 안된다.

click 이벤트와 마찬가지로 두가지 형태로 쓸 수 있다.

$(window).scroll(function(){});
$(window).on('scroll', function(){});

여기서 window는 viewport를 의미하는데 이는 브라우저 창이라고 생각하면 편하다.

 

우리는 scroll 이벤트를 하고싶을 때 보통 얼만큼 스크롤하면 이 이벤트를 보여줘! 라고 할 것이다.

그럴 때 쓰이는 게 바로 scrollTop() 이다.

$(window).scroll(function() {
    if ($(window).scrollTop() > 100) {
        $('').addClass('');
    }
});

만약 윈도우의 스크롤이 100px보다 크게 됐다면 addClass 해줘

 

---

for문 (반복문)

for문은 탭기능을 구현할 때 쓰일 수 있다.

탭은 <1을 클릭하면 1을 보여주고, 2를 클릭하면 2를 보여주고, 3을 클릭하면 3을 보여주고 ....>

이렇게 반복적이기 때문에 for문을 사용할 수 있는 것이다.

for (let i = 0; i < 반복을 제한하는 수; i++) {}

for문에 var를 쓰는 경우도 있지만 최신문법에서 let이 나왔으므로 let을 쓰는게 더 낫다.

var를 쓰면 작동하지 않는 경우도 있는데 이는 for문 안에서 var로 선언한 변수가 for문을 벗어난 곳에서도 유효하게 될 때가 있기 때문이다.

 

그럼 이제 탭기능을 위한 반복문을 설계해보자. (버튼은 class 주었다고 가정하자.)

• 버튼1을 클릭하면
• 기존 콘텐츠는 숨기고, 콘텐츠1을 보여준다.
• 버튼2를 클릭하면
• 기존 콘텐츠는 숨기고, 콘텐츠2를 보여준다.

여기서 버튼1과 콘텐츠1, 버튼2와 콘텐츠2는 같은 숫자를 공유하고 있고 이를 변수로 지정하면 좋을 것 같다.

그 변수를 우리는 반복문에서 i라고 칭하고 i의 반복 수는 버튼의 수만큼 주어져야 할 것이다.

그 다음은 실행코드를 짜야하는데 몇 번째 버튼(class)을 누르냐에 따라 몇 번째의 콘텐츠(class)가 나오는 것이기 때문에

우리는 eq()를 사용하여야 한다.

그리고 removeClass와 addClass를 주게되면 완성이다!

 

지금까지의 내용을 통해 우리는 아래의 코드를 짤 수 있을 것이다.

 

for (let i = 0; i < 개수; i++) {
    $('.button').eq(i).click(function () {
        $('.content').removeClass('show');
        $('.content').eq(i).addClass('show');
    });
}

참고로 for문의 '개수'는 내가 임의로 변수를 주었고, 이 변수는 클래스의 개수를 뜻한다.

즉, 클래스의 개수만큼의 버튼이 있으니 클래스의 개수를 가져오면 그 개수가 몇 개이든 간에 이 이상의 코드를 짜지 않아도 작동할 수 있다.

var 개수 = document.getElementsByClassName('tab-button').length;

난 자바스크립트로 클래스의 개수를 가져왔고 제이쿼리로도 가져올 수 있으니 이건 구글링을 해보길 바란다!

개수를 가져오는 건 .length를 사용하면 되므로 조금만 생각해보면 구글링을 하지 않아도 제이쿼리로 작성할 수 있을 것이다.

 

 

만약 난 저 코드도 너무 꼴보기 싫다 하면 function 함수를 밖에다가 작성해두고 쓸 수 있다.

for (let i = 0; i < 개수; i++) {
    $('.tab-button').eq(i).click(function () {
        tapOpen(i);
    });
}

function tapOpen(숫자) {
        $('.content').removeClass('show');
        $('.content').eq(숫자).addClass('show');
}

함수를 만들 때 i처럼 안에 있던 변수는 밖에서 파라미터 등으로 꼭 정의를 해주어야 한다고 한다.

(파라미터에 i를 기입해줌)