JavaScript - 4

 

---

 

 

 

1 . BOM

 

 

 

 

 

 

• Browser Object Model의 약자
• 자바스크립트가 브라우저 자체를 제어하고 정보를 얻기 위해 사용하는 객체

 

 

 

 

1 -1 . API(Application Programming Interface)

 

 

 

 

 

• 서로 다른 프로그램이나 시스템이 데이터를 주고받고 기능을 사용할 수 있도록 연결해 주는 주간 통로

 

 

 

 

window 객체

 

 

 

 

• 자바스크립트에서 브라우저 창을 대표하는 최상위 객체
• 전역 범위에서 정의된 변수(var 등)나 함수, 타이머, 팝업, 브라우저 정보 등 대부분의 기능을 포함하고 있음
• HTML 페이지를 로드하면 브라우저는 자동으로  window 객체를 생성하며 자바스크립트 코드에서 명시적으로 window를 쓰지 않아도 사용할 수 있음

 

 

location 객체

 

 

 

 

• 자바스크립트에서 현재 웹페이지의 URL(주소) 정보를 다루고 제어할 수 있게 해주는  window 객체의 하위 객체

 

 

 

history 객체

 

 

 

 

• 브라우저의 방문 기록을 제어할 수 있는 객체
• 사용자가 이전에 방문했던 페이지로 이동하거나 앞으로 다시 이동할 수 있는 기능을 제공

 

 

 

navigator 객체

 

 

 

 

• 브라우저에 대한 정보를 제공하는 객체
• 사용자의 브라우저 종류, 버전, 운영체제, 언어 설정, 온라인 여부 등 다양한 환경 정보를 확인할 수 있도록 해줌

 

 

 

• geolocation 객체 : 사용자의 위치 정보를 가져오기 위한 API로 GPS, WIFI, IP주소 등을 이용해 현재 위치를 알아냄. 사용자의 명시적인 동의가 있어야 작동함

 

 

 

 

 

 

• ex)

=> 이런 식으로 사용됨

 

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

2 .  DOM

 

 

 

 

 

 

 

 

• Document Object Model의 약자
• HTML 문서를 트리 구조의 객체로 표현한 것
• 자바스크립트를 통해 웹 페이지의 요소를 선택하고 내용이나 스타일을 변경하며 요소를 추가/삭제하는 등 동적인 화면 조작을 가능하게 해주는 인터페이스

 

 

 

 

 

DOM 작동 원리

 

 

 

• 브라우저가 HTML 파일을 읽음
• HTML 태그를 하나하나 분석하여 트리 구조의 객체를 생성
• 각 태그는 노드라는 객체가 됨
• 자바스크립트는 이 DOM 객체를 통해 화면을 제어함

 

 

 

 

 

DOM에 접근할 수 있는 문법 => Document

 

 

 

 

 

Document 객체

 

 

 

• 웹 페이지 전체를 표현하는 최상위 DOM 객체
• HTML 문서에 직접 접근하고 조작할 수 있는 핵심 객체
• 브라우저가 HTML 파일을 로드하면 자동으로 document 객체가 생성됨
• 이 객체를 통해 웹 페이지의 요소들을 선택하거나 생성, 수정, 삭제할 수 있음

 

 

 

 

 

 

ex)

 

• getElementById() : id로부터 요소를 찾음

=> Element로 단수 사용 : id는 하나만 존재

 

 

• getElementsByClassName() : 특정 클래스명으로부터 요소를 찾음

=>Elements로 복수 사용 : 클래스는 여러 개 존재 가능, 배열로 저장해 for문 사용 가능

 

 

 

• querySelector() : 단일 요소를 찾음 (첫 번째)

 

 

• querySeletorALL() : 모든 요소를 찾아 배열로 저장함

 

 

• createElement() : () 안에 있는 것을 새로 만들어줌

 

 

• appendChild() : 자식 요소의 맨 뒤에 추가

 

 

• setAttribute() : 속성 만들어줌

 

 

• innerText : 텍스트 넣어줌

 

 

• innerHTML : 텍스트, 태그 넣어줌

 

 

• removeChild() :  자식 노드를 제거해 줌

 

 

• inserBefore(새로 넣을 노드, 앞의 노드) : 자식 노드의 맨 앞에 노드 추가

 

 

• cloneNode() : 노드 복제, () 안에 true : 깊은 복사, false : 얕은 복사 

 

 

 

 

=> 이런 식으로 사용됨

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

3 . 화살표 함수와 콜백 함수

 

 

 

 

 

 

 

 

3 - 1 . 자바스크립트에서 this가 바뀌는 문제

 

 

 

 

• rhis가 선언 시점이 아니라 호출되는 방식에 따라 결정되는 문제
• 같은 함수라도 어떻게 호출하느냐에 따라 this가 전혀 다른 대상을 가리킬 수 있음

 

 

• ex)

 

=> obj1은 김사과 출력, obj2는 아무것도 출력되지 않음(window를 가리킴)

=> 이 문제를 해결하기 위해 만들어진 것이 화살표 함수

 

 

 

 

 

 

 

 

 

3 - 2 . 화살표 함수

 

 

 

 

• function 키워드 대신 => 기호 사용
• 더 간결하게 작성 가능
• ES6부터 도입된 문법
• 코드를 짧게 만들고 this 바인딩 문제를 해결해 줌

 

 

• ex)

 

 

 

 

 

 

3 - 3 . 동기, 비동기

 

 

 

 

 

 

 

동기

 

 

• 작업이 순서대로 하나씩 실행되는 방식
• 앞에 있는 작업이 끝나야 다음 작업을 실행하는 방식

 

 

 

 

 

비동기

 

 

• 느린 작업을 기다리지 않고 나중에 따로 실행될 작업은 뒤로 미뤄놓고 다음 코드부터 먼저 실행하는 방식
• 자바스크립트는 기본적으로 한 줄씩 처리하는 단일 스레드 언어 -> 모든 작업을 동기로 처리하면 느린 작업이 생길 경우 전체 프로그램이 멈추게 됨(자바스크립트는 병렬 처리 불가능)

 

 

 

 

 

자바스크립트에서 비동기가 필요한 작업

 

 

 

• 서버에서 데이터 가져오기
• 파일 읽기
• 이미지 로딩
• 타이머, 사용자 이벤트 등

 

 

 

 

 

 

 

 

3 - 4 . 콜백 함수

 

 

 

 

 

• 다른 함수의 인자(파라미터)로 전달되어 그 함수 내부에서 나중에 호출되는 함수
• 어떤 작업이 끝난 다음에 실행되어야 할 코드를 함수로 전달해 두는 방식
• 비동기 처리나 배열 메서드에서 자주 사용됨
• 일반 함수나 화살표 함수 모두 콜백 함수로 사용할 수 있음

 

 

• ex)

 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

 

4 . 이벤트

 

 

 

 

 

 

• 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 동작이나 상황을 의미
• 버튼 클릭, 키보드 입력, 마우스 이동, 폼 제출, 창 닫기 등이 모두 이벤트임
• 특정 반응(동작)을 하도록 코드 작성
  • 이벤트 리스너를 등록 : addEventLisstener()

 

 

 

이벤트 문법 : 대상(요소) + 이벤트 종류(발생) + 실행할 함수(실행)

 

 

 

 

 

이벤트 종류

 

 

 

 

• 마우스
  • click : 클릭
  • dblclick : 더블 클릭
  • mousedown : 마우스 버튼 눌렀을 때
  • mouseup : 마우스 버튼 뗐을 때
  • mouseenter : 마우스를 요소 위에 올렸을 때
  • mouseleave : 요소에서 마우스가 벗어났을 때
  • mousemove : 마우스를 움직일 때

 

 

 

• 키보드
  • keydown : 키를 누르는 순가
  • keyup : 키를 눌렀다 뗐을 때
  • keypress : 문자 키 입력 시-사용X

 

 

 

• 폼
  • submit : 폼이 제출될 때
  • input :입력 값이 변경될 때
  • change : 입력이 끝나고 값이 변경될 때
  • focus : 입력창에 포커스가 생길 때
  • blur : 입력창에서 포커스가 사라질 때

 

 

 

• 문서
  • load : 페이지가 모두 로드되었을 때
  • resize : 브라우저 크기를 변경할 때
  • scroll : 페이지를 스크롤할 때

 

 

 

• 터치
  • touchstart : 화면을 터치했을 때
  • touchmove : 터치한 채로 움직일 때
  • touchend : 터치를 뗐을 때

 

 

 

• 드래그
  • dragstart : 요소를 누를 때
  • drag : 요소를 움직일 때
  • dragend : 터치를 뗐을 때

 

 

 

 

 

 

 

 

이벤트 객체

 

 

 

• 이벤트가 발생했을 때 브라우저가 자동으로 생성해서 이벤트 핸들러 함수에 전달하는 이벤트 관련 정보 묶음 객체
• 어떤 요소에서 이벤트가 발생했는지(target), 어떤 종류의 이벤트인지(type), 마우스 좌표나 키 입력 정보 등 다양한 데이터를 담고 있음

 

 

 

 

 

• 기존 예제에서 태그에 넣을 때는 이벤트 종류 앞에 on을 붙여 사용

=> ex) <button onclick= "">

 

• 자바스크립트 안에서 사용할 때는 on 없이 이름만 적음

=>ex) eventBtn.addEventListener("mouseenter", function() {eventBtn.style.backgroundColor = "deeppink"})

 

 

 

 

 

 

 

 

• ex)

 

 

 

 

 

 

 

 

 

---