👾

setInterval() setInterval()은 함수를 지정한 주기마다 반복 호출하는 메소드 입니다. 구문은 아래와 같습니다. setInterval(function, milliseconds) cs 반복 실행하고 싶은 함수를 function 부분에 작성하고 반복할 주기를 milliseconds 부분에 작성하면 됩니다. 이 메소드는 설정된 타이머의 ID값을 number로 반환합니다. 이를 이용해 clearInterval()로 특정 타이머를 취소할 수 있습니다. 사용 예시 - setInterval() 간단한 예시로 3초마다 alert 창을 띄우는 함수를 만들어보겠습니다. setInterval(function () { alert('hello'); }, 3000); cs 위 예시처럼 익명함수를 인자로 전달할 ..

시간을 나타내는 Date 객체 자바스크립트에서 현재 시간을 알고 싶다면 Date 객체를 사용하면 됩니다. Date 객체를 생성하는 방법은 아래와 같습니다. See the Pen JS Date Example1 by KimMiJin (@console_log) on CodePen. 위와 같이, Date 객체를 직접 호출하면 날짜를 나타낸 문자열을 반환합니다. Date 객체의 Methods(메소드) Date 객체는 날짜, 요일, 연도, 시간(시, 분, 초), 월 등의 정보를 얻을 수 있는 메소드들을 가지고 있습니다. getDate() // 날짜(date)를 반환 (1 ~ 31) getDay() // 요일(day)를 반환 (0 ~ 6) getFullYear() // 연도(year)를 반환 getHours() //..

setTimeout 사용방법 setTimeout()은 시간을 지연시켜주는 메소드다. setTimeout(function(){}, 1000); 위 코드를 실행시키면 1000ms(=1second) 뒤에 function()이 실행된다. setTimeout() 사용예시 3초 후에 "hello"라는 alert 창을 띄우는 자바스크립트 코드 예시 1 2 3 4 // 3초후에 "hello"라는 alert 창 띄우기 setTimeout(function () { alert("hello"); }, 3000); cs 소스파일 & 실행화면 위와 같이 index.html과 index.js 파일을 작성한 뒤 index.html 파일을 열면 다음과 같이 실행화면이 뜬다. hello라는 alert창은 실행 후 3초 뒤에 나타난다. ..

event.target event.target은 이벤트가 발생한 요소를 반환해준다. 예를 들어 $("a").click(function(event){ console.log(event.target); }); 이라는 코드는 a요소를 클릭했을 때 이벤트가 발생하고, 이벤트가 발생할 때마다 이벤트의 대상인 a요소를 콘솔창에 출력한다. 이런 event.target을 이용하면 현재 이벤트가 발생한 요소의 속성들을 얻을 수 있다. 만약 이벤트가 발생한 대상의 id를 콘솔창에 출력하려면 다음과 같이 코드를 작성하면 된다. $("a").click(function(event){ console.log(event.target.id); }); event.target말고도 this라는 객체를 이용해 현재 이벤트가 발생한 대상을 가..

자바스크립트에서 오디오 재생하기 HTML5부터는 자바스크립트에서 Audio 객체를 이용해 오디오를 재생할 수 있다. 자바스크립트에서 오디오 파일을 불러와 재생하는 방법은 다음과 같다. 1 2 var audio = new Audio('audio_file.mp3'); audio.play(); cs audio라는 변수를 선언해 Audio 객체를 생성하고, play() 메소드를 사용해서 음악을 재생하는 방법이다. new Audio('audio_file.mp3')에 ()안에는 자신이 넣고 싶은 음악 파일의 src를 적어주면 된다. 만약 HTML 파일에 Audio 객체가 있고, 자바스크립트에서 이를 불러와 재생하고 싶다면 다음 방법을 쓸 수 있다. 1 document.getElementById('myAudio')...

배열은 데이터들을 저장할 수 있는 리스트와 비슷한 객체입니다. 인덱스(index)를 통해 배열의 원소에 접근할 수 있기 때문에 데이터들을 순차적으로 저장하거나 접근할 때 유용합니다. 배열 생성 및 원소 접근 방법 var arr = []; // 길이가 0인 배열 arr 생성 var arr = [1, 2, 3]; // 길이가 3인 배열 arr를 생성하고 원소를 1, 2, 3으로 초기화 arr.length; // 배열 arr의 길이 반환 arr[i]; // 배열 arr의 i번째 원소 접근 // 배열의 인덱스는 0부터 시작함 => 첫번째 원소: arr[0] 1 2 3 4 5 6 7 8 9 10 11 12 // 배열 생성 var colors = ['빨강', '파랑', '노랑']; // 배열의 길이 var len ..

Math.random( ) Math.random( ) 함수는 [0, 1) 구간에서 부동소수점 의사 난수를 반환합니다. 의사 난수란 처음에 주어지는 초깃값(seed)에 따라 이미 결정되어 있는 메커니즘에 의해 만들어지는 수를 말합니다. 예제와 함께 난수를 생성하는 방법을 알아보겠습니다. 예제 1) 0 이상 1 미만인 난수 생성하기 var n = Math.random( ); // 0 ≤ n < 1 예제 2) 1 이상 10 미만인 난수 생성하기 var n = Math.random( ); // 0 ≤ n < 1 n = n * (10 - 1); // 0 ≤ n < 9 n = n + 1; // 1 ≤ n < 10 위 3줄의 코드는 다음과 같이 한 번에 작성할 수 있습니다. var n = Math.random( ) ..