티스토리 뷰

jQuery

[jQuery] setTimeout 함수

helen2ye! 2022. 10. 7. 18:13

 

Form if-else
5초 이내 구매시 사은품 증정!! 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Form if-else</title>

    <!-- BootStrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" 
        rel="stylesheet" 
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" 
        crossorigin="anonymous">
    <link href="main.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" 
            integity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" 
            crossorigin="anonymous">
    </script>
  </head>
  <body>

    <div class="alert alert-danger" >
        <span id="second">5</span>초 이내 구매시 사은품 증정!!
    </div>
    
    <script>
        // x초 후 코드 실행
        // setTimeout(function(){실행할코드}, ms)
        setTimeout(function(){
            console.log('안녕')
        }, 2000);

        setTimeout(function(){
            $('.alert').hide();
        }, 5000);

        setInterval(함수, 1000); // 따로 function 만들어놓고 불러와도 됨
        // addEventListner(function(){}) 의 function 자리도 마찬가지!

        function 함수(){
            console.log('초를 줄이자');
        }
		
        var sec = 5;
        function reduceSec(){
            sec -= 1;
            if(sec >= 0){
                document.querySelector('#second').innerHTML = sec;
            }
        }
        setInterval(reduceSec, 1000);
        console.log(sec);
    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" 
            integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" 
            crossorigin="anonymous">
    </script>
   </body>
</html>
  1.  콜백함수: 파라미터 자리에 들어가는 함수 > 일종의 함수이기 때문에 다른 곳에서 만든 함수를 집어넣어도 잘 작동함
  2. 함수 불러올 때 함수() 아니고!! "함수"라고 써야함
  3. JS 문법
    - function: 코드를 간결하게 줄일 때 사용
    - var: 변수, 자료를 잠시 보관하고 싶을 때 사용
    - if: 조건문
  4. document.querySelector(), setTimeout(), alert() - web API(브라우저 사용법)
    브라우저 사용법을 잘 알아두면 좋음!

 

** 참고강의

https://codingapple.com/ JavaScript 입문과 웹 UI개발

 

JavaScript 입문과 웹 UI개발 - 코딩애플 온라인 강좌

실제 웹 UI를 여러개 만들어보며 배워보는 JavaScript & jQuery 수업입니다. 문법만 쭉 나열하면서 가르치면 재미없어서 강의 끄고 유튜브 보러갈 것이 뻔하니 실무 예제 중심의 수업으로 재밌게 진행

codingapple.com

 

'jQuery' 카테고리의 다른 글

[jQuery] 정규식 기초  (0) 2022.10.07
[jQuery] 누른 횟수에 따라 표기 변화 / JS 변수 정리  (0) 2022.10.03
[jQuery] truthy/falsy, 조건문 예제(삼육구, 합격과락)  (0) 2022.10.03
[jQuery] form + 조건문 + alert 창  (0) 2022.10.03
[jQuery] 모달창 + CSS 애니메이션  (0) 2022.10.03
댓글