JavaScript Lv.2

setTimeout 타이머

• 자바스크립트 문법 vs 브라우저 사용법
  - 자바스크립트 문법: if var function

  	- 브라우저 사용법 (=web API)
  - documet.querySelector()
  - setTimeout()
  - alert()

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

  콜백함수 자리엔 만들어둔 함수 넣을 수 있음

  - 1초마다 코드 실행하고 싶은 경우 set Timeout을 여러개 넣으면 된다. 

• X초마다 코드 실행하려면
  setInterval(function(){실행할코드},ms)

  1초마다 5라는 문자를 1씩 감소
  0이 되면 div 안보이게

  정규식 regular expression

• '검사할 글'includes('있는지 확인할 글자')
• 문자 검사하는 쉬운 방법
• A로 끝나냐, 숫자가 1회 출현하냐, 한글인지 영어인지는 구분못한다.
• 정규식쓰면 문자검사 가능
• 정규식이란? 문자를 검사할 수 있는 식

/있는지 검사할 문자/.test('검사당할 문자')
/a/.test('abcde')
정규식의 장점

• 정규식으로 문자 범위지정 가능하다.
  /[a-z]/.test('abcde')
  결과: ture
• 영어 대문자와
  a-zA-z는 아무 알파벳 1개
  ㄱ-ㅎ가-힣 아무 한글문자 1개 = 모음 검사는 안해줌
  /\S/ 아무문자 1개 라는 뜻 = 특수기호도 포함된다.
  정규식으로 시작/끝문자 검사하기
  /^a/ 시작
  /a$/ 끝
  or 기호는 |
  괄호쓰면 괄호 안부터 묶어서 검사한다.

  정규식 이메일형식 검사

  /\S@\s.\S/.test
  .은 특별한 정규식 문법이기때문에 백슬래쉬 써야한다.
  \S는 모든 문자 한 글자를 뜻한다.
  +는 왼쪽문자 반복검색
  /\S+@\s+\.\S/.test

            //폼 전송시 유저가 입력한 비번에 영어대문자 있는지 검사 
            if(/[A-Z]/.test(inputPw) == false ){
                alert('영어대문자가 없습니다. 추가하세요.');
                event.preventDefault();
            };

캐러셀carousel(img slide)

1. 시작화면 만들기

• 이미지를 html css로 미리 가로로 길게 만들기

2. 최종화면 만들기

• 버튼 2누른 후 최종화면 만들기
  3.버튼 누르면 최종 화면으로 변하게 해준다.

transform: translateX(-100vw); 와 margin-left: -100vw;는 같다. 그러나 margin-left보다 transform이 부드럽다.

 // 버튼 1누르면 최종화면으로 변하게 하기 
$('.slide-1').on('click', function(){
	$('.slide-container').css('transform','translateX(0vw');
})
// 버튼 2누르면 최종화면으로 변하게 하기 
 $('.slide-2').on('click', function(){
	$('.slide-container').css('transform','translateX(-100vw');
})
// 버튼 3누르면 최종화면으로 변하게 하기 
$('.slide-3').on('click', function(){
	$('.slide-container').css('transform','translateX(-200vw');
})

• 다음버튼 누르면 지금 보이는 사진이 1이면 2번 사진 보여주세요.

return

• 함수쓰고 그 자리에 반환하는 문법 return

• return 옆에는 아무거나 가능하다.

• return은 함수 종료 기능을 가지고 있기 때문에 그 밑 줄은 실행되지 않는다.

• 자료를 넣으면 다른 자료가 나올 수 있게 만드는 변환기용도로 많이 사용한다. ex. 가격* 0.1% = 부가세

• 소수점 있는 숫자연산시 주의점
  - 컴퓨터는 2진법으로 변경해서 계산하기 때문에 오류가 발생한다.
  • 소수점의 경우 2진법으로 변경해서 중간에 자른 후 반올림을 해서 약간의 오차가 발생한다.
• 소수점 반올림하는 법

• 숫자.toFixed(몇자리)
• toFixed를 사용하면 문자로 변환된다.
• 자바스크립트의 +연산자는 문자+123 = 문자123/ 문자+문자 = 문자문자를 해준다.
  parseFloat('123')
  parseInt('123')

숫자 연산시 주의점
함수로 자료변환기 제작가능하다.

scroll event

• 현재페이지가 스크롤 될 때마다 아래 함수를 실행한다.

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

        });

• windwo.scrollY
  - 유저가 얼마나 스크롤바를 내렸는지 출력
• window.scrollTo(x,y)
  - 강제로 스크롤하기
  • bootstrap은 스크롤을 스무스하게 해줌 (끄려면 css에 하기 코드 기입)

    		```js
    		:root {

    scroll-behavior:auto;
    }

    		```

• window.scrollBy(x,y)
  - 현재위치부터 강제로 스크롤하기
• jQuery
  -현재 스크롤바 위치 출력 $(window).scrollTop()

스크롤바 100Px 이상 내리면 로고 폰트사이즈 줄이기
2. 박스의 ㅡ스크롤바 끝까지 내리면 alert( 다읽었군요. )띄우기

div의 스크롤바 내린 양 + 눈에보이는 div의 높이) == div의 실제 높이
window.scrollY(전체페이지 스크롤양)

박스가 화면에 보이는 부분 = clientHeight;

div.스클
스크롤바가움직일때마다 실행해야 한다. = scroll eventListener
페이지 로드시 딱 1번만 실행된다.

div 실제높이는 셀렉터.scrollHieght

        document.querySelector('.lorem').addEventListener('scroll', function(){
            var 스크롤양 = document.querySelector('.lorem').scrollTop;
            var 실제높이 = document.querySelector('.lorem').scrollHeight;
            var 높이 = document.querySelector('.lorem').clientHeight;
            console.log(스크롤양, 실제높이);
        })

• scroll 다룰 때 주의점

1. 1초체 60번 실행되다보니 컴퓨터에 부담을 준다.
2. 바닥체크 여러번 중복으로 된다. (alert 2번 등장 등)

Q. 현재 페이지 끝까지 스크롤 체크?는 html 태그의 스크롤 체크를 찾으면 된다. 현재페이지 실제높이가 나온다.
document.querySelector('html').scrollHieght
document.querySelector('html').scrollHieght
client Hight = 페에지 보이는 높이
페이지 로드 된 후에 body끝나기 전에 넣는 것이 좋다.

documentElement는 html 태그 찾는 것과 똑같다.

탭기능 For 반복문

• jQuery vs javaScript

• $('.tab-button').eq(0) = queryselectorAll[0]

  버튼 0 누르면

  • "모든 버튼"에 붙은 orange 클래스명 제거
  • 버튼0에 orange 클래스명 추가
  • "모든 div"에 붙은 show 클래스명 제거
  • div 0에 show 클래스명 추가

var button = $('.tab-button');
var content = $('.tab-content');

for(let i = 0; i < content.length; i++ ){
    button.eq(i).on('click', function(){
        button.removeClass('orange');
        button.eq(i).addClass('orange');
        content.removeClass('show');
        content.eq(i).addClass('show');
    });
}

자주쓰는 셀렉터 변수에 넣어쓰는 습관~

• for과 let은 변수의 범위가 차이난다.

이벤트 버블링

• 검은배경 누르면 모달창 닫는 기능 만들기

         //검은배경 누르면 모달창 닫는 기능 만들기
  
         document.querySelector('.black-bg').addEventListener('click', function(e){
             if (e.target == document.querySelector('.black-bg'))//내가 실제로 누른거 == 까만배경일 겨우
             {
                 document.querySelector('.black-bg').classList.remove('show-modal');
                 e.stopPropagation(); // 이벤트 버블링 막아주기.
             }
             
         })
  })

jQuery 에서는 `$(e.target).is$('.black-bg')`로 표현하는 게 좋다. 

 - 모달창을 display 조작으로 띄웠으면 display 조작으로 닫아야한다. 
 
- 모든 브라우저는 항상 이벤트 버블링이 일어난다. 
- 이벤트 버블링: 이벤트가 상위 html로 퍼지는 현상

#### 유용한 이벤트 관련 함수들
``` js
function(e){
	e.target; //유저가 실제로 누른 것: 이벤트 발생한 곳 
    e.currentTarget; //이벤트 리스너 달린 곳  = `this`
    e.preventDefault(); //이벤트 기본동작 막아줌 submit에 사용
    e.stopPropagation(); //내 상위요소로 이벤트 버블링 막아줌
}

• 탭기능 다르게 만들기 -> 이벤트 리스너 1개 만들기

• 이벤트 버블링을 알고있으면 이벤트 리스너 많이 필요없다.

$('.list').click(function(e){
    //탭열기(지금누른버튼에 숨겨져있는 data-id)
    openTab(e.target.dataset.id);
})

//축약할 코드에 변수가 있으면 변수를 파라미터로 바꿔야 잘된다. 
function openTab(num){
        button.removeClass('orange');
        button.eq(num).addClass('orange');
        content.removeClass('show');
        content.eq(num).addClass('show');
};

• html 태그에 몰래 정보 숨기기 가능하다.
  • 태그에 data-자료이름='값'
  • 숨겼던 자료 출력은 셀렉터.dataset.자료이름으료 출력 가능하다.

1.함수로 축약할 때 변수있으면 파라미터로 바꿔보기
2. data-id로 몰래 숨기기 가능하다.
3. 이벤트 리스너 1개만 써도 개발가능하다.