EverGiver

Array 객체 Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. (배열이란 하나의 변수에 값을 여러 개 저장할 때 사용한다.) Array 객체로 배열 만들기 - 초기값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다. - 초깃값이 없는 경우 var numbers = new Array();// 배열의 크기를 지정하지 않음 var numbers = new Array(4);// 배열의 크기를 지정함​ - 초깃값이 있는 경우 var numbers = ['one','two','three','four'];// 배열 선언 var numbers = Array('one','two','three','four');// Array 객체를 사용한 배열 ..

객체란? 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 자바스크립트에서 사용하는 객체 - 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다. - 브라우저 관련 객체 : 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다. - 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 한다. 객체의 인스턴스 만..

이벤트 이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다. 마우스 이벤트 - 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다. 종류 설명 click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다. dbclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다. mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다. mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다. mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다. mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다. mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다. 키보드 이벤트 ..

Canvas Basic Animation Canvas 기본 애니메이션 단계 1. 캔버스를 비운다. 2. 캔버스 상태를 저장한다. 3. 애니메이션 할 도형을 드로잉 한다. 4. 캔버스 상태를 복원한다. requestAnimationFrame() - 브라우저에게 수행하기를 원하는 애니메이션을 알리고 해당 애니메이션을 업데이트하는 자바스크립트 함수 - 시간 값을 인자로 받을 수 있고, 모니터 주사율에 맞춰서 애니메이션을 실행해주기 때문에 최근 애니메이션에 가장 많이 사용하는 함수이다. - setTimeout : 일정 시간이 지나면 해당 함수를 실행, 재귀 호출을 사용해서 반복 - setInterval : 일정 시간마다 해당 함수를 실행 - requestAnimation : 브라우저에게 애니메이션을 실행하도록 ..

Canvas Images drawImage(img,x,y) - 원본 이미지의 원래 크기대로 캔버스의 지정된 위치에 삽입하는 메소드 - 이미지, 다른 캔버스, 동영상을 삽입할 수 있다. - 이미지를 삽입하기 전에 해당 이미지가 로딩되어야 이미지를 삽입할 수 있다. const canvas43 = document.getElementById('canvas43'); const ctx43 = canvas43.getContext('2d'); const img1 = document.getElementById('smile1'); ctx43.drawImage(img1,50,50); const canvas44 = document.getElementById('canvas44'); const ctx44 = canvas44.ge..

익명 함수 이름이 없는 함수를 말한다. 즉, 익명 함수를 선언할 때는 이름을 붙이지 않는다. function(a,b) { return a + b; } 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수도 있다. ​ 즉시 실행 함수 한 번만 실행하는 함수라면 함수를 정의하면서 동시에 실행하는 함수를 의미한다. 즉시 실행 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석한다. 함수를 식 형태를 선언하므로 마지막에 세미콜론(;)을 붙인다. (function(){ 명령 }()); (function(매개변수){ 명령 }(인수));​ 화살표 함수 ES6 버전부터는 => 표기법(화살표 표기법)을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있다. 익명..