NULL

setTimeout JS 기본 함수 중에서 setTimeout 이라는 함수가 존재한다. 효과는 몇초 후에 코드를 실행하는 역할이다. setTimeout(function(){ 실행할 코드 }, 기다릴 시간); 시간은 ms단위로 1초당 1000이다. setInterval() 정해진 초마다 코드를 연속으로 실행하고 싶다면 setInterval()를 사용한다. setInterval(function(){ 실행할 코드 }, 기다릴 시간); 방법은 전과 동일하다. 콜백함수 함수 파라미터 자리에 들어가는 함수를 콜백함수라고 한다. setTimeout(), addEvenListener() 와 같은 함수들은 콜백함수를 요구한다. 콜백함수도 일종의 함수이기에 다른 곳에서 만든 함수를 집어 넣어도 잘 작동한다. setTime..

var 예금액 = 60000; var 미래예금액 = 0; if ( 예금액 >= 50000 ){ 미래예금액 = 예금액 * 1.2 ** 2 ; // 사용법 예시 } else { 미래예금액 = 예금액 * 1.15 ** 2; // 사용법 예시 } console.log(미래예금액) 위에 코드를 보면 1.2, 1.5을 2번 씩 거듭제곱하는 코드이다. 2번 제곱해야 하는 상황에 1.2 * 1.2 혹은 1.15 * 1.15 이렇게 쓰게 되면 2번 이상 제곱해야하는 상황이 오면 계속 일일히 코드를 넣어줘야하는데 거듭제곱 연산자를 사용하게 되면 간편해진다.

event.preventDefault() html에서 태그의 고유 동작으로 페이지를 이동시키거나 form 안에 input등의 전송을 하는 동작을 중지시켜준다. submitBtn.addEventListener("click", function(e){ if(userID.value.length == 0){ alert("아이디를 입력해주세요."); e.preventDefault(); }else if(userPWD.value.length == 0){ alert("비밀번호를 입력해주세요."); e.preventDefault(); }else if(userPWD.value.length < 6){ alert("비밀번호 6자리 이상 입력해주세요."); e.preventDefault(); } }) 로그인 form에서 아이디와..

one-way UI 방법 1. 시작스타일 2. 최종스타일 3. 최종스타일 이벤트 코드작성 4. transition 추가 즉, 시작 전과 최종 화면단을 미리 구성해두고 트랜지션으로 부드럽게 해주면 애니메이션이 나온다. display: none에서 block이 되면 애니메이션 과정이 생략되서 display대용으로 visibility: visible, hidden을사용해야 애니메이션이 잘 먹는다. opacity를 써야한다. 그 이유는 투명도가 0에서 1이 되는 과정을 트랜지션으로 걸어두면 서서히 보이는 이펙트를 줄 수 있기때문이다. 사용법 시작스타일은 다음과 같은 코드를 넣는다. visibility: hidden; opacity: 0; transition: all 1s; 최종스타일은 다음과 같은 코드를 넣는다..

여러개의 요소 추가 $("#close, .black-bg").on('click', function(){ $(".black-bg").hide(); }) 각 클래스나 아이디 요소마다 따옴표로 구분 할 필요없이 따옴표는 전체로 묶어주고 요소마다 ,로 구분해준다. 여러개의 이벤트 추가 $(요소).on({ click:function(){ // 내용 }, mouserenter:function(){ // 내용 }, input:function(){ // 내용 } }) 이벤트를 여러개 작성하려면 위와 같이 작성하면 된다. 이 코드의 장점은 하나의 선택자에 여러개의 이벤트를 동시 사용함으로 가독성과 소스가 좋아진다.

이펙트 효과의 제어와 관련된 메소드 메소드 설명 .delay() 실행 중인 큐 안에서 연속적으로 실행되는 이펙트 효과 사이의 지연 시간을 설정함. .stop() 선택한 요소에서 실행 중인 모든 이펙트 효과를 즉시 중지시킴 .finish() 선택한 요소에 실행 중인 모든 이펙트 효과를 중지시키고, 선택한 요소가 포함된 큐까지 제거하여 모든 이펙트 효과를 전부 종료시킴. .delay() $(function() { $("#startBtn").on("click", function() { // id가 "divBox"인 요소를 0.5초에 걸쳐 사라지게 하고 // 5초의 지연시간 뒤에 다시 2초에 걸쳐 나타나게 함. $("#divBox").fadeOut(500).delay(5000).fadeIn(2000); }); ..

JS에서 classList.toggle처럼 제이쿼리에서도 toggle이 존재한다. JS보다 더 간편하게 사용할 수 있다. 사용법 ()안에 'fast', 'slow' 혹은 시간초(초당 1000)를 지정할 수 있다. 기본 : 400ms fast : 200ms slow : 600ms 1. 서서히 보이고 사라지는 메소드 $('.btn').on('click', function(){ $('.hello').fadeOut(); }); .fadeIn() : 실행시 숨겨진 요소를 나타나게 한다. .fadeOut() : 실행시 요소를 사라지게 한다. .fadeToggle() $('.navbar-toggler').on('click', function(){ $('.list-group').fadeToggle(); }) fadeT..

요소추가 요소는 $로 불러온다. 사용법 $('.hello'); // 클래스추가 $('#world'); // 아이디추가 효과는 js의 쿼리셀렉터라고 생각하면 된다. 일반 js와 차이점은 다음코드와 같이 p태그를 바꿔주려면 일일히 값을 바꿔주거나 이에 맞는 로직을 짜야하지만 안녕 안녕 안녕 jquery의 $()는 querySelectorAll처럼 여러개가 있다면 전부다 찾아주고 인덱싱 할 필요없이 .html()메소드를 쓰게 되면 모든 요소를 한번에 조작, 변경이 가능하다. 안녕 안녕 안녕 주의사항 js와 jquery는 각각 자신들의 메소드만 사용할 수 있다. $(".hello").innerHTML('123'); // juery에서 js의 메소드를 사용하면 오류가 발생한다. .on() 제이쿼리의 이벤트리스너 ..

classList는 클래스를 추가한다. classList.toggle 사용법 해당 클래스가 없다면 추가하고, 존재한다면 제거한다. menuBtn[0].addEventListener('click', function(){ menuList[0].classList.toggle('show'); }) show는 display: block 속성을 가지고 있다. 해당요소가 block이라면 그대로 놔두고 block이 아니라면 show클래스를 추가한다.

getElementsByClassName은 배열로 요소를 가지고 오기때문에 인덱싱이 필요하다. 사용할 때 인덱스 0번을 붙여서 사용한다. getElementsByClassName("dom").[0].style.display = "none"; // 예시