API

Application Programming Interface 으로, 운영체제나 프로그래밍 언어가 제공하는 기능을 내가 만들 Application에서 사용할 수 있도록 해당 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.

즉, 응용프로그램, 모바일 애플리케이션 등의 프로그램을 개발할 때 소프트웨어를 구축하고 통합하기 위한 정의 및 프로토콜 세트라 할 수 있다.

Web APIs

웹 서버 또는 웹 브라우저를 위한 API, 다양한 클라이언트에서 접근이 가능하도록 설계되어 있다.

web apis

Web API 는 HTTP 표준 접근 방식을 사용하여 플랫폼 환경 또는 클라이언트 환경에 제한 받지 않고 서비스 구현이 가능하다.

  • 종류
    • DOM APIs
      • 브라우저에 로드된 문서를 조작하는 기능 제공
        • 요소 생성 / 삭제 / 스타일 변경 등
    • Network APIs
      • 현재 대역폭이나 과금이 되는 연결인지와 같은 네트워크 정보를 제공
    • Graphics APIs
      • 그래픽 요소들을 웹 페이지에 그리는 기능 제공
        • ex. canvas
    • Multimedia APIs
      • 오디오 와 비디오 재생 및 중지 등의 기능을 제공
    • Device APIs
      • 디바이스 상태 정보 제공
    • File APIs
      • 파일에 대한 정보 제공 및 파일 내용 접근 기능 제공
    • Storage APIs
      • local storage, session storage 등 클라이언트 측 저장소 사용할 수 있는 기능 제공
    • External APIs
      • 트위터 API, 유튜브 API, 날씨 API 등 다른 회사에서 제공해주는 API

브라우저 구조

browser structure

browser 상속 구조

Window

웹 브라우저 창을 나타내는 객체로, 최상위 객체 또는 전역 객체 라고 불린다.

브라우저 창 크기 조절, 새 창 열기 또는 브라우저 창의 세부적인 옵션들을 설정 할 수 있는 메소드를 제공한다.

[http://www.tcpschool.com/javascript/js_bom_window](http://www.tcpschool.com/javascript/js_bom_window)

http://www.tcpschool.com/javascript/js_bom_window

[Window - Web API MDN](https://developer.mozilla.org/ko/docs/Web/API/Window)

Dom (Document Object Model)

웹 페이지는 일종의 문서(document)인데, document는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.

DOM은 프로그래밍 언어가 웹 페이지 즉, document의 구조, 스타일, 내용 등을 변경할 수 있게 DOM 구조의 접근 방법을 제공하여 웹 페이지의 구조, 스타일, 내용 등을 변경하는 것을 도와준다. (각 요소들을 구조화 했기에 가능함)

  • 새로운 요소 추가 및 삭제 기능 제공!

DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트 같은 스크립팅 언어를 통해 DOM을 수정할 수 있다.

  • Ex. 문서 안의 모든 <P> elements에 대한 list를 리턴하는 메소드

      var paragraphs = document.getElementByTagName("P");
  // paragraphs[0] is the first <p> element
  // paragraphs[1] is the second <p> element, etc.
  alert(paragraphs[0].nodeName);

DOM은 Window의 하위 객체이기대문에 개발자도구에서 window.document로 접근 할 수 있다. (window 생략 가능)

Untitled

  • 문서 노드
  • 요소 노드
  • 어트리뷰트 노드
  • 텍스트 노드

DOM & BOM 이해하기

BOM (Browser Object Model)

DOM과 달리 W3C의 표준 객체 모델은 아니지만, BOM을 사용하여 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 준다.

표준 모델이 아니기에 브라우저 제작사마다 세부사항이 다를 수 있다.

자바스크립트와 브라우저와 소통하기 위해 만들어진 모델로, WEB APIs에 관련된 object들이 담겨져 있다.

DOM은 document 즉, 현재 눈에 보이는 웹 문서에 대한 제어 변경을 할 수 있고,

BOM은 웹 브라우저 환경의 다양한 기능적인 요소들을 다룰 수 있다.

  • 대표적인 객체
    • Window : 현재 브라우저 창 또는 탭
      • document : 현재 로드된 웹 페이지
      • history : 브라우저 히스토리에 기록된 웹 페이지들
      • location : 현재 페이지 URL
      • navigator : 브라우저 관련 정보 (브라우저 이름, 버전 등)

브라우저 공급자 및 버전 정보 등을 포함한 브라우저에 대한 다양한 정보를 저장하는 객체

  • 현재 브라우저가 실행되고 있는 운영체제 알아보기
console.log(navigator.platform);
  • 현재 브라우저의 기본 언어 설정 알아보기
console.log(navigator.language);
  • 등..
  • 참고 사이트

    • MDN WEB APIs

      [Introduction to web APIs - Learn web development MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)

    • Web API Collection

      [Web APIs MDN](https://developer.mozilla.org/en-US/docs/Web/API)

    • Security

      Here’s What JavaScript CAN’T Do

    • Document

      [Document - Web APIs MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document)

    • Window

      [Window - Web APIs MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window)

    • Viewport

      [Layout viewport - MDN Web Docs Glossary&colon; Definitions of Web-related terms MDN](https://developer.mozilla.org/en-US/docs/Glossary/layout_viewport)

    • Navigator

      [Navigator - Web APIs MDN](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)