이벤트 : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점 중요 이벤트 종류 구분 이벤트 설명 마우스 이벤트 onClick 마우스로 클릭 ondblclick 마우스로 빠르게 두 번 클릭 onmouseover 마우스 포인터를 올리면 발생 onmouseout 마우스 포인터가 빠져나가면 발생 onmousemove 마우스 포인터가 움직이면 발생 onwheel 마우스 휠을 움직이면 발생 키보드 이벤트 onkeypress 키보드 버튼을 누르고 있는 동안 발생 onkeydown 키보드 버튼을 누른 순간 발생 onkeyup 키보드 버튼을 눌렀다가 뗀 순간 발생 포커스 이벤트 onfocus 요소에 포커스가 되면 발생 onblur 요소가 포커스를 잃으면 발생 폼 이벤트 onsubmit 폼이 전송될 때 발생 리소..
JS - 문서 객체 모델, DOM
문서 객체 : 브라우저 객체 모델에 속하여 있는 구성 요소에 속하는 객체 중에서 DOCUMENT 객체 문서 객체 모델의 생성 : 웹 브라우저가 HTML 문서를 해석하고, 해석한 HTML 문서 구조를 객체로 변환하는 방식으로 생성됨. 그리고 생성한 문서 객체 모델을 웹 브라우저에 표시함. 따라서 웹 브라우저에 표시되는 HTML 문서는 내부적으로 무넛 객체 모델을 해석해서 보이게 됨. 문서 객체 모델은 트리 구조를 가진다. 따라서 이를 DOM 트리 라고 부름 DOM(Document Object Model, 문서 객체 모델) : HTML, XML 문서의 Programminginterface로 HTML과 JavaScript가 상호작용 할 수 있도록 하는 도구이다. ex. DOM API를 이용해 DOM 구조에 접..
브라우저 객체 모델 : 웹 브라우저에서 제공하는 객체 window.innerWidth : 웹브라우저 화면 너비 window.ineerHeight : 웹브라우저 화면 높이 window.outerWidth : 웹브라우저 창의 너비 (스크롤 포함) window.outerHeight : 웹브라우저 창의 높이 (스크롤 포함) 등 여러가지 속성들이 있음 window.open('파일이름', '팝업창이름', '기타설정들') : 새로운 창을 오픈할 때 사용 window.close() : 팝업을 닫게 해주는 메소드 window.scrollTo(100, 200); : 특정 x좌표와 y좌표로 한번에 이동 window.scrollBy(100, 200); : 특정 x좌표, y좌표 만큼 이동 + behavior:'smooth'를 ..
JS 기본 제공 객체 → 표준 내장 객체 String, Array, Date, Math String 객체 const email = 'test@naver.com'; str.length : 문자열길이 반환 str.includes("@") : 문자열 포함여부 str.indexOf('@') : 문자열 위치 반환 (없으면 -1 반환) str.trim() : 앞, 뒤 공백 제거 str.replaceAll(' ', '') : 중간 공백 제거 (아직 지원하지 않는 곳이 많음) str.replace(/ /gi, '') : 정규식을 활용한 중간 공백 제거 이외에도 다양한 메소드가 있음 (사이트 참고) Array 객체 const arr = ['a', 'b', 'c']; 파괴적 vs 비파괴적 → 원본 배열 손상 vs 손상 X..
객체 객체 : 키와 값으로 구성된 속성의 집합 const person = {}; // 빈 객체 const person = { name: 'SH', age: 20, 'phone number': '010-1234-1234', }; name → 키 'SH' → 값 name: 'SH'; → 속성 접근방법 1. 마침표 연산자 ex. person.name 2. 대괄호 연산자 ex. person['age'] key값에 공백이 존재할 경우 대괄호 연산자로만 접근 가능 속성의 값으론 모든 자료형 가능 (false, 함수 등도 포함) 속성으로 함수를 포함할 경우 객체의 메서드라고 부름 객체의 속성값 변경 person.name = '철수'; 객체의 속성 추가 (name 속성이 없었다고 가정) person.name = '영희..
함수2 함수scope 함수의 중괄호 안의 코드는 지역 scope 함수 밖은 전역 scope 블록scope (let, const 키워드에 한해) 블록문 안 지역 scope 블록문 밖 전역 scope 함수도 호이스팅(선언문을 최상위로 끌어올림)이 적용됨 → 함수 선언문은 정상 실행, 함수 표현식은 X 즉시 실행 함수 : 한번 실행되고 메모리에서 사라짐 (전역 스코프의 오염 최소화) (() => { console.log('init'); })(); (function init() { console.log('init'); })();과 같은 형태도 가능
Javascript 함수 1. 함수 선언문 (대표적) fucntion 식별자(매개변수1, 매개변수2, 매개변수3) { //코드 } 식별자(인수1, 인수2, 인수3); 로 실행 ※ 식별자(인수1)로도 실행은 가능하지만 매개변수2, 매개변수3이 undefied취급 2. 함수 표현식 const gugudanExpress = function(){ //코드 } → 익명 함수 + function gugudanExpress()형태로 작성시 → 네이밍 함수 (권장) 변수이름(); 로 실행 ※ 주의 : 함수 네이밍 이름으로 실행하는 것이 아님 (변수 이름으로만 호출 가능) 3. 화살표 함수 () => { //코드 } const gugudanArrowFunc = () => { // 코드 }; 변수이름(); 로 실행 + 매..