javascript-(2)

MinGeo·2022년 7월 23일

JavaScript

javascript

목록 보기

2/4

오늘의 주제

오늘은 jquery 설치 후 간단한 문법 소개, setTimeout, 정규식, scroll event 에 대해서 알아보자

jQuery란?

javascript를 편리하게 사용하기 위해 제공된 라이브러리이다. 기존 javascript 코드 길이가 많이 줄일 수 있는 장점이 있다.

jQuery를 간단하게 사용해보자

일단 jQuery를 사용하기 위해선 설치 등 다양한 방법이 있지만, 간단하게 html 코드에 복사해 사용하는 CDN 방식을 사용할 것이다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

jQuery CDN을 구글 창에 검색하고, 가장 최신 버전에서 minified를 클릭하면 얻을 수 있는 코드이다. html 에서 가장 밑에 복사 붙여넣기 해서 사용할 수 있다.

<script>
  $('.hello').css('color', 'red');
</script>

jQuery 문법은 다음과 같다. document.querySelector 대신에 달러 표시를 해주면 된다.
그리고 뒤에 문법은 조금 다른데, 기존에 document.querySelector('.hello').style.color = 'red'; 처럼 style 속성을 변경해 주려면 .css('바꿀거','뭐로바꿀지') 이렇게 작성해 주면 된다.

하지만 이번스터디에서는 일단 jQuery를 사용하지 않고 일반 javascript 문법을 사용하려 한다. (그냥 공부 차원이니 추후 프로젝트는 몰라도..)

setTimeout 사용하기

javascript에는 시간에 따라서 html 요소를 컨트롤 할 수 있는 기능이 있다.

setTimeout(function(){ 실행할코드~ }, 기다릴시간);

setTimeout을 이용해서 특정 동작이나 코드를 시간에 따라 컨트롤 할 수 있다.

setInterval(function(){ 실행할코드~ }, 기다릴시간);

setInterval을 이용하면 특정 코드를 특정 시간마다 작동하도록 세팅할 수 있다.

정규식 사용하기

문자 검사하는 문법 , includes()

간단하게 현재 문자에서 해당 글자가 들어가는지 확인하려면, includes()를 사용하여 해결할 수 있다.

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

이런 식으로 해당 문자에 찾을 단어가 존재하는지 확인 가능하다.
하지만 무슨 글자가 끝에 존재하는지, 특정 문자 다음에 어떤 문자가 존재하는지 확인하려면 해당 방법으로는 한계가 있다.
그래서 우리는 정규식을 이용해 우리가 찾는 문자가 어디에 존재하는 지를 체크할 수 있다.

/[a-d]/.test('aefg')  //true
/[가-다]/.test('다라마바')  //true

대괄호를 이용하여 글자의 범위를 설정할 수 있고, 위 정규식은 a~d까지 글자중에 존재하는 것이 있나요~ 라는 뜻이다.

정규식의 문법은 정말 많아서, 여기선 그냥 있다는 것만 다루고
가장 많이 사용하는 이메일 형식을 정규식으로 작성해보자.

/\S+@\S+\.\S+/

Scroll event

최근 넷플릭스, 애플 같은 사이트들을 보면, 스크롤 하는 것에 따라서 화면 이미지의 크기가 줄어든다던가 새로운 이미지가 등장한다던가의 이벤트들과 애니메이션을 볼 수 있다. 이 scroll event를 사용해서 해당 부분을 구현할 수 있다.

window.addEventListener('scroll', function(){
  console.log('안녕')
});

스크롤 이벤트가 발생하면, 안녕을 출력해 주는 코드이다.
scroll eventlistner에서 제공하는 몇가지 기능이 있는데 살펴보자.

window.scrollY -> 화면을 위에서 몇 px 스크롤 했는지 알려준다.
window.scrollTo(0, 100) -> 화면을 위에서 아래로 100px 만큼 자동으로 스크롤 한다.
window.scrollBy(0, 100) -> 현재 위치에서 화면을 아래로 100px 만큼 자동으로 스크롤 한다.

위 기능으로 얼마만큼 스크롤 했는지, 또 특정 이벤트가 발생하면 자동으로 화면을 스크롤해 주는 기능도 구현 가능하다.

그리고 약관 상자처럼 스크롤 박스에 이벤트를 만들 때 사용하는 기능도 소개하도록 하겠다.

document.querySelector('.lorem').scrollTop;
document.querySelector('.lorem').scrollHeight;
document.querySelector('.lorem').clientHeight;

위에서 부터 lorem이라는 클래스 박스를 얼마나 스크롤 했는지, lorem이라는 박스는 얼마만큼 스크롤 할수 있는지, lorem 박스가 현재 화면에서 어느 위치에 존재하는 지를 알려준다. 이를 통해 약관 상자를 다 읽었는지를 체크하는 코드를 작성 할 수 있다.

document.querySelector('.lorem').addEventListener('scroll', function (){
            var scrollvalue = document.querySelector('.lorem').scrollTop;
            var realheight = document.querySelector('.lorem').scrollHeight;
            var height = document.querySelector('.lorem').clientHeight;
            if(scrollvalue + height > realheight-10 )
            {
                alert('다읽었네?');
            }
        });

scrollTop이 얼마나 스크롤 했는지를 div 박스에서만 체크하기 때문에 실제 div박스가 위치한 높이까지 같이 합쳐서 계산해야 해당 div 박스를 끝까지 스크롤 했는지 확인할 수 있다.