DOM을 이용한 이벤트 처리 방식이다. 이벤트 모델은 다음과 같이 DOM Level 에 따라 분류한다. 총 네가지 방법으로 이벤트를 연결할 수 있다. DOM Level0 인라인 이벤트 모델 기본 이벤트 모델 DOM Level2 마이크로소프트 인터넷 익스플로러 이벤트 모델 표준 이벤트 모델 고전 이벤트 모델 고전 방식은 자바스크립트에서 DOM 객체의 이벤트 속성으로 이벤트를 연결하는 방법이다. document.querySelector(선택자).onXXX = 익명함수; document.querySelector("#id").onclick = func(){ /* 이벤트를 처리할 함수 내용 */ }; # 고전 이벤트 모델 예시 이미지 변경 인라인 이벤트 모델 인라인 이벤트 모델은 HTML 태그 요소 노드에 이벤트..
DOM에서 발생되는 이벤트에 대한 핸들러를 등록하여 특정 이벤트에 대응하는 작업을 할 수 있다. 버튼을 클릭하거나 항목을 선택하는 것을 이벤트라고 한다. 이벤트는 일반적으로 함수와 연결이 되고, 이 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행한다. 이벤트 핸들러 또는 이벤트 리스너라 한다. 이벤트의 종류 ✅ 마우스 이벤트 click 클릭 dbclick double click mousedown 요소 위에서 마우스 버튼을 눌렀을 때 mousemove 요소 위에서 마우스 포인터를 움직일 때 mouseover 마우스 포인터가 요소 위로 옮겨질 때 mouseout 마우스 포인터가 요소를 벗어날 때 mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 ✅ 키보드 이벤트 ..
문서객체모델 DOM (Document Object Model) 은 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법이다 DOM 트리 DOM 이란? Document Object Model의 줄임말입니다. DOM은 문서 요소 집합을 트리 형태의 계층 구조로, 웹 브라우저가 HTML 문서를 읽으면 아래 그림처럼 document 객체로 시작하는 DOM 트리가 만들어진다. DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 하며, DOM트리의 시작 부분인 html 노드를 루트 노드라고 한다. 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다. 각 노드 사이의 관계를 부모와 자식, 형제 간으로 표현할 수 있다. 부모 노드에는 자식 노드가..
자바스크립트를 사용하면 특정 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러가지 효과를 만들 수 있다. window 객체 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위 객체 window 객체의 method alert() : 브라우저의 알림 창 prompt() : 브라우저의 입력 창 confirm : 브라우저의 확인/취소 선택 창 [팝업창] open() : 주로 홉페이지의 팝업 창을 띄울 때 사용 close() : 주로 팝업 창 내용을 모두 살펴본 후에 창을 닫을 수 있도록 /* main.html - 메인화면 */ window.open("notice.html", "", "width=500, height=400"); //open(경로, 창 이름, 옵션) /* notice.html - 공..
자바스크립트의 내장객체로는Number Array Date String 가 대표적이다. Number 객체 참고. Number 메서드 var n = 10; // 💡 MAX_VALUE, MIN_VALUE : 최대값, 최소값 console.log(Number.MAX_VALUE); console.log(Number.MIN_VALUE); // 💡 toString : 수치값을 문자열로 변경 console.log(n.toString(), typeof n.toString()); // 10 string console.log(n.toString(2), n.toString(8), n.toString(16)); // 2진수 8진수 16진수 변경 // 💡 toFixed() : 소수 부분 자릿수 반환 var n2 = 15.6749..
객체(object)란? 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 흔히 자바스크립트는 모든 것이 객체 라는 말이 있을정도. 객체의 종류 3가지 내장 객체 : Number String Boolean Date Array 👉 내장 객체 바로가기 브라우저 관련 객체 : Window Navigation Screen History Location 👉 BOM객체 바로가기 문서 객체 모델(DOM) : document image link 👉 DOM객체 바로가기 웹 문서 자체도 객체이고 그 안에 삽입된 이미지와 링크, 텍스트 필드도 모두 객체이다. 객체의 인스턴스 자바스크립트에서 객체는 참조 형태로 사용한다. 즉, 객체 자체가 아니라 예약어 new를 이용하여 인스턴스의 형태로 만든다. //..
즉시실행 함수 (IIFE) 즉시실행함수(IIFE, Immediately Invoked Function Expresstion)는 함수를 정의하면서 동시에 호출한다. 자바스크립트의 프레임워크에서 주로 사용한다. // 이름이 없는 익명 함수를 만들자 마자 바로 호출 (function() { console.log("hello"); }()); // arrow 함수로도 가능 (() => { console.log("hello"); })(); 필요없는 전역 변수의 생성을 줄일 수 있다. 또한 즉시 실행 함수는 외부에서 접근할 수 없는 자체 scope를 생성한다. 내부 변수를 외부로부터 보호해 private하게 보호할 수 있다는 장점이 있다. 또한 초기화 코드나 모듈화 패턴을 만들 때 유용하게 사용된다. 즉, IIFE ..
함수 function JavaScript에서 함수는 일급 객체(first-class)이다. 함수를 변수, 객체, 배열 등에 저장할 수 있고, 다른 함수에 전달하는 콜백함수 또는 리턴 값으로 사용 가능 일급객체란? 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 인자로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다. 자바스크립트에서 함수를 생성하는 방법은 다음과 같다. 함수 선언식 function Add(a, b) { // a, b 👉 파라미터 return a + b; } console.log(Add(10,20)); // 10, 20 👉 인자값 함수 선언식은 function 키워드로 시작하고 함수 이름을 지정한 후, 괄호 안에 매개..
자바스크립트의 변수 선언 방식인 var let const 의 차이점 var : 중복 선언 가능, 재할당 가능 let : 중복 선언 불가능, 재할당 가능 const : 중복 선언 불가능, 재할당 불가능 변수 선언 방식 var 선언한 변수와 동일한 변수명으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 간단한 테스트에는 편리할 수 있으나, 길고 복잡한 코드에서 같은 이름의 변수가 여러번 선언되어 사용되면 어떤 부분에서 값이 변경되고 문제가 발생하는지 파악하기 힘들다. 이를 보완하기 위해 ES6부터 추가된 변수선언 방식인 let과 const가 등장했다. /* 중복 선언 가능, 재할당 가능 */ var title = "one"; var title = "two"; title = "th..
명품 JAVA Programming 5장 Open Challenge 이 게임에는 Bear의 Fish 객체가 등장하며, 이들은 10행 20열의 격자판에서 각각 정해진 규칙에 의해 움직인다. Bear는 사용자의 키에 의해 왼쪽(a 키), 아래(s 키), 위(d 키), 오른쪽(f 키)으로 한 칸씩 움직이고, Fish는 다섯 번 중 세 번은 제자리에 있고, 나머지 두 번은 4가지 방향 중 랜덤하게 한 칸씩 움직인다. 게임은 Bear가 Fish를 먹으면(Fish의 위치로 이동) 성공으로 끝난다. 다음은 각 객체의 이동을 정의하는 move()와 각 객체의 모양을 정의하는 getShape()을 추상 메소드로 가진 추상 클래스 GameObject이다. GameObject를 상속받아 Bear과 Fish 클래스를 작성하라..
