- HTML : 웹페이지의 구조
- CSS : 웹페이지 안에 있는 요소의 스타일
- Javascript : 로직을 통해 문서의 구조와 스타일에 변화를 줌
- 브라우저는 자바스트립트에서 HTML과 CSS에 접근할 수 있는 API를 제공
window 객체
- 브라우저에서 window 객체라는 것을 제공
- 브라우저에서 js를 실행할 때 가장 상위에 있는 객체
- js는 window 객체를 통해 각종 HTML 요소나 CSS에 접근하여 구조와 스타일을 조작
| 📌 window 속성 |
| window.location |
현재 브라우저의 주소를 볼 수 있음 |
| window.location.href |
현재 브라우저의 주소 창에 입력된 주소를 볼 수 있음
이 값을 수정하면 입력된 주소로 페이지가 이동
|
| window.navigator |
현재 브라우저에 관한 정보를 볼 수 있음 |
| window.document |
현제 웹 페이지를 구성하는 HTML과 CSS가 모두 저장되어 있음
이 객체를 이용하면 HTML, CSS에 접근 가능
|
DOM ( Document Object Model )
- 컴퓨터가 문서를 잘 처리 할 수 있도록 문서의 구조를 약속한것
- DOM은 트리 형태로 표현(족보나 가계도와 비슷)
- document 객체는 최상위 객체로 자바스크립트에서 document 명령으로 접근
- 📌 단일 엘리먼트 선택하기
- getElementBy()로 시작하는 메서드는 엘리먼트를 한개만 반환하는 메서드
- getElementById() 메서드는 HTML 엘리먼트의 id를 인자로 전달하면 해당 엘리먼트를 반환
- .innerHTML 속성은 엘리먼트 안의 HTML 코들르 변경
- .innerText 속성의 엘리먼트 안의 텍스트를 변경
- .style 속성은 CSS를 변경
- 📌 다중 엘리먼트 선택하기
- getElementsBy()로 시작하는 메서드는 엘리먼트를 여러 개 반환하는 메서드
- getElementsByTagName() 메서드는 인자로 HTML 엘리먼트의 태그 이름을 전달
- getElementsByClassName() 메서드는 인자로 클래스 이름을 전달
- getElementsByName() 메서드는 인자로 이름을 전달
- input 엘리먼트에 입력된 값을 값 속성으로 얻어올 수 있음
| 📌 CSS 선택자를 이용해서 선택하기 |
| querySelector |
CSS 선택자를 기반으로 엘리먼트를 선택하는 메서드
조건에 맞는 엘리먼트가 여러개면 첫 번째 엘리먼트만 가져옴 |
| querySelectorAll |
CSS 선택자를 기반으로 만족하는 엘리먼트를 모두 선택하는 메서드 |
| #id |
ID를 기반으로 선택할 때 |
| "태그이름" |
태그이름을 기반으로 선택할 때 |
| ".클래스명" |
클래스를 기반으로 선택할 때 |
이벤트 핸들러 ( EVENT )
- 이벤트(event) : 브라우저에서 다양한 이유(사용자 조작이나 장치 환경의 변화 등)로 발생하는 사건
- 이벤트 핸들러(event handler) : 이벤트에 대처하는 프로그램
| 📌 EVENT 조작 |
| 폼 이벤트 (Form) |
HTML 문서의 폼 엘리먼트에 변화가 생겼거나
제출(submit) 버튼 등이 눌렸을 때 발생 |
| 윈도 이벤트 (Window) |
페이지가 모두 로드 되었을 때 발생하는 이벤트
=> onload event 가 대표적 |
| 마우스 이벤트 (Mouse) |
사용자가 마우스를 조작했을 때 발생 |
| 키 (key) |
사용자가 키보드를 조작했을 때 발생 |
