왜 자바스크립트인가? - 우리가 back-end를 한다고 한다면 java,python,ruby 등 언어를 선택할 수 있지만 front-end를 한다고 하면 오로지 javascript뿐이다. 그것이 front-end의 장점이자 단점 Javascript로 할 수 있는 것? - Javascript를 이용하면 내 위치, 위치의 날씨를 가져올 수 있다. - 할일 목록을 저장할 수 있다. - 실시간(Real time)을 만들 수 있다. (실시간 채팅) - 휴대폰에서 작동하는 앱을 만들 수도 있다. (Nomad Movies- google play store에 있는데 이것은 순수 Javascript로 만든 앱이라고 한다.) - 비디오게임을 만들 수 있다. (threejs, impactjs 사이트) ES5,ES6? - ..

- 폼 요소에는 키 관련 이벤트, 포커스 관련 이벤트, change 이벤트 등 많은 이벤트가 발생한다. onblur와 onfocus - 이들은 포커스(focus)가 변경될 때 호출된다. - 포커스는 키 입력에 대한 독점권 - HTML 요소가 포커스를 받게 될 때는 onfocus 리스너가 호출되고 포커스를 잃으면 onblur 리스너가 호출된다. 라디오버튼과 체크박스 1) 라디오버튼 객체 radio 객체는 로 만들어진 라디오버튼을 나타내는 DOM 객체이다. 서울 부산 춘천 태그의 name 속성이 동일한 radio 객체들이 하나의 그룹을 이루기 때문에 name 속성값으로 radio 객체를 찾아야 한다. var koreaCity = document.getElementsByName("city"); * getEle..

5. 문서와 이미지 로딩, onload 문서의 로딩 완료와 onload - onload는 HTML 문서나 이미지의 로딩이 완료되는 시점에 호출되는 이벤트 리스너이다. - 웹 페이지의 출력(로딩)이 완료되면 window 객체에 load 이벤트가 발생한다. - onload 리스너를 작성하는 2가지 방법 window.onload="alert('onload')"; 이미지 로딩 완료와 onload - Image 객체의 프로퍼티 : src, width, height, complete(이미지의 로딩이 완료되었는지 여부, true/false) - 만약 이미지의 폭을 알아내고 싶을 때, 이미지 로딩이 완료되지 않았다면 이미지의 width는 0으로 나타날 것이므로 이미지 로딩을 지시하기 전에 onload리스너를 먼저 등록..

4. 마우스 핸들링 - 웹 페이지 개발에 가장 많이 활용되는 마우스 관련 이벤트 마우스 이벤트 객체의 프로퍼티 - 마우스 관련 이벤트가 발생할 때 이벤트 객체에는 마우스 포인터의 위치, 클릭된 버튼 등의 정보가 담겨 있음 프로퍼티 설명 x,y (x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표 clientX, clientY (clientX, clientY)는 브라저 윈도우의 문서출력 영역 내에서의 마우스 좌표 screenX,screenY (screenX,screenY)는 스크린을 기준으로 한 마우스 좌표 offsetX, offsetY (offsetX,offsetY)는 타겟 객체 내에서의 마우스 좌표 button 눌러진 마우스 버튼 * 0 : 아무 버튼도 눌러지지 않았음 * 1 : 왼쪽 버튼이 눌러졌..

3. 이벤트 흐름 이벤트 흐름과 이벤트 리스너 - 발생한 이벤트는 타겟 객체에 전달된다, 하지만 이벤트가 단번에 타겟 객체로 전달되고 사라지는 것은 아님 - 발생한 이벤트는 window 객체로부터 DOM 트리를 타고 중간 DOM 객체들을 거쳐 타겟 객체로 흘러가고, 다시 반대 방향으로 이동하여 window 객체에 도달한 후 없어진다 → 이 같은 과정을 이벤트 흐름 이라고 함 - 이벤트 흐름의 과정 1) 캡쳐 단계 : window에서 타겟 객체까지 이벤트 객체가 전파되는 과정. 캡쳐 단계에서 실행되도록 작성된 이벤트 리스너가 있다면 흐름순으로 실행된다. - 캡쳐 리스너 : 캡쳐 단계에서 실행되도록 작성된 리스너 (상 -> 하) 2) 버블 단계 : 타겟 객체에서 거꾸로 window까지 이벤트 객체가 전파되는..

2. 이벤트 객체 이벤트 객체란? - 이벤트가 발생하면 브라우저는 발생한 이벤트에 관련된 다양한 정보를 다은 이벤트 객체를 만들어 이벤트 리스너에 전달한다 - 예) mousedown 이벤트의 경우 마우스 좌표, 버튼 번호 / keydown 이벤트의 경우 키 코드 값, 키가 눌려졌는지 등 - 이벤트 리스너는 이벤트 객체의 프로퍼티 값을 통해 발생한 이벤트에 관한 자세한 사항을 알 수 있다. 이벤트 객체 전달받기 - 이벤트 리스너가 이벤트 객체를 전달받는 방법 3가지 1) 이름을 가진 이벤트 리스너 함수의 경우 - 이벤트 리스너 함수는 다음과 같이 첫 번째 매개변수를 통해 이벤트 객체를 전달받을 수 있다. 매개변수 이름은 e 대신 마음대로 붙여도 된다. (생략도 가능) function f(e){ //매개변수..