Porfolio Page - (5) Javascript: Web API

Index
1. Web API
2. 브라우저 구조
3. 3
4. 4
5. 4
6. 4
7. 4
8. 4
9. 4
10. 4
11. 4
12. 4
13. 4
14. 4
15. 4
16. 4
Reference

---

1. Web API

Web API

- API(Application Programming Interfaces)는 

- Web API

 

(Web API 종류)

- DOM APIs: 웹 페이지의 요소를 생성/삭제/스타일변경 조절

- Network APIs: 서버와 통신 기능 제공

- Graphics APIs: 그래픽 관련 기능 제공

- Audio/Video APIs: 멀티미디어 관련 기능 제공

- Device APIs: 디바이스 상태 정보 확인

- File APIs: 사용자의 파일 정보 확인

- Storage APIs: 사용자의 정보 저장

 

2. 브라우저

브라우저 

(브라우저 구조)

- Window: 브라우저를 포함한 전체적인 창

- Document: 페이지가 표기되는 부분

- Navigator: 전체적으로 브라우저 자체에 관련된 정보가 담긴 부분

- window = DOM(document) + BOM(브라우저 관련 Object) + Javascript

- Chrome Browser 개발 툴: 윈도우(Ctrl + Shift + i), 맥(Cmd + Option + i)

- Console 탭에서 코드 작성하여 실시간으로 웹 페이지 변화 확인

- Window는 브라우저에서 Global Object

 

(브라우저 좌표)

- 좌측 상단을 0,0으로 고정하고 우측으로 갈수록 x값 증가, 아래로 갈수록 y값 증가

- 모든 요소는 Element.getBoundingClientReact()를 가짐(top, left, height, width, right, bottom 정보 반환)

- css에서 right, bottom과 다르기 때문에 정확한 확인 필요.

- Client x, y는 브라우저 윈도우 기준, Page x, y는 페이지(보이지 않는 페이지 포함) 기준

 

 

3.  

 

 

4. 

 

 

5. 

 

 

6. 

 

 

7. 

 

 

8. 

 

 

9.  

 

 

10. 

 

 

11.  

 

12.  

 

13.  

 

14.  

 

15.  

 

16.  

 

 

---

Reference

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

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

[Blog: ThougtCo.(What Javascript Cannot Do)] https://www.thoughtco.com/what-javascript-cannot-do-2037666

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

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

[Docs: MDN(Layout Viewport)] https://developer.mozilla.org/en-US/docs/Glossary/layout_viewport

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