Hjin Blog

for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다. for(변수 선언문 또는 할당문; 조건식; 증감식){ 조건식이 참인 경우 반복 실행될 문; } for(var i = 0; i < 2; i++){ console.log(i); } // var i 가 2보다 커지기 전까지, i를 증감 위의 결과 값은 0과 1이 출력된다.(2보다 작은수) for 문의 변수 선언문의 변수 이름은 반복을 의미하는 interation의 i를 사용하는것이 일반적이다. 순서는 다음과 같다. 1. for 문을 실행하면 맨 먼저 변수 선언문 var i = 0이 실행된다. 변수 선언문은 단 한번만 실행된다. 2. 변수 선언문의 실행이 종료되면 조건식이 실행, 현재 i 변수의 값은 0이므로 조건식의 평가 결과는 true..

스크롤 이벤트리스너 스크롤바를 조작하면 scroll 이벤트가 발생하는것을 말하는데, window.addEventListener('scroll', function(){ console.log('hello') }); 전체 페이지(window)를 스크롤 할때마다 원하는 코드를 실행할수 있다. 위코드는 스크롤 했을때 hello 문구를 띄우게 된다. document도 전체 페이지를 의미하지만 window가 약간 더 큰 개념이고 scroll 이벤트리스너는 관습적으로 window에 붙인다고 한다. 스크롤 관련 기능들 scrollY window.addEventListener('scroll', function(){ console.log( window.scrollY ) }); // 현재 페이지를 얼마나 위에서 부터 스크롤했..

function hjin(){ return 123 } return은 간단하게 말하면 함수를 쓴뒤 원하는값 (위 코드의 '123')을 그 자리에 남겨준다. function hjin(){ console.log('hello') return 123 console.log('bye') } 또한 return 문법은 함수종료의 뜻도 가지고 있다. 함수는 코드가 길경우 위에서부터 한줄씩 실행하는데 return을 만나면 함수가 종료된다. 따라서 위에 함수같은 경우 console.log('bye')는 실행이 되지 않는다. 응용문제) function mss(min,sec){ var result = (min * 60 + sec ) * 1000; return result } console.log(mss(2,10)); 함수의 파라..

다음과 같이 1번 2번 3번 버튼을 눌렀을 경우와 '다음' 버튼을 눌렀을때 이미지가 전환되는 코드를 작성해 보자 // 넘치는 요소 숨기기 1 2 3 다음 이미지 3개를 담은 div박스와 4개의 버튼을 작성했다. CSS .slide-container{ width: 300vw; transition: all 1s; } .slide-box{ width: 100vw; float:left; } .slide-box img{ width: 100%; 이미지 전체를 감싸고있는 .slide-container 의 넓이를 300vw로 잡아주고 transition을 통해 모션을 부드럽게 잡아줍니다. 이미지를 감싸고 있는 slide-box의 넓이를 100vw로 잡아주었다. js $('.slide-2').on('click',func..

'문자'.includes('찾을단어') .includes()는 문자에 찾을 단어가 들어있는지 검사해주는 기능이다 있다면 true/ 없으면 false를 남겨준다. 하지만 더 자세히 검사를 하기 위해서는 .includes()만으로 검사하기 어렵다. 그래서 정규표현식(regular expression)을 사용하는데 어떤 문자에 '???' 라는 단어가 있는지 검사해보기 위해 사용한다. /abc/ 정규식 표현방법 /abc/.test('abcdef') /정규식/.test(검색해볼문자) 검사를 통해 있다면 true / 없다면 false를 남겨준다. 정규식 표현방법 알아보기 /[a-z]/.test('abcd') // true /[a-zA-Z]/.test('가나다라') // false // 1. a부터 z까지 아무문자 ..

setTimeout() = X초 후에 코드를 실행시켜준다. setInterval() = X초 마다 코드를 실행시켜준다. setTimeout(function(){실행할코드},기다릴시간); setTimeout과 setInterval 둘다 ()괄호 안에 콜백함수가 들어가고, 그 뒤에 시간설정을 해주면 된다. 시간은 ms 단위로 적으면 된다 (1ms는 1000분의 1초) setTimeout(function(){ console.log('hello') },1000); 해당 코드를 작성하면 1초 뒤에 콘솔창에 'hello'가 뜬다. setInterval(function(){ console.log('hello') },1000); setInterval의 경우 위와 같이 작성했을때 1초마다 콘솔창에 'hello'를 띄워준..