| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 오라클일별데이터
- 스프링 구글차트
- java
- 스프링과 스프링부트 차이점
- 제이쿼리
- Spring Boot가 해결하려고 했던 문제
- 오라클통계
- 스프링 제어역전
- HTML
- jsp
- 썸머노트
- 오라클
- 스프링 부트가 해결하려고 했던 문제
- 오라클월별데이터
- 자바 기초
- CSS
- 스프링 Ioc Container
- 자바왕기초
- maven
- 스프링
- 스프링 구글차트로 기간별 현황 조회하기
- 자바기초
- 자바
- 스프링 Ioc
- 오라클클라우드에 젠킨스 설치하기
- 세션
- 스프링 에러
- 자바 왕기초
- 자바왕초보
- 오라클주별데이터
- Today
- Total
Just Do it
[JavaScript] 자바스크립트와 객체 본문
*출처: Do it! 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트 웹 표준의 정석, 고경희, 이지스퍼블리싱
- 역시나 자바와 비슷하다.
- 자바스크립트는 웹 사이트나 웹 애플리케이션을 개발하는 언어이므로 웹과 관련된 대상을 모두 객체로 인식한다.
- 자바 스크랩트에서 사용하는 객체는 다음과 같다.
1) 문서 객체 모델 (DOM): 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.
2) 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다.
3) 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 한다. 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있다.
1. 자바스크립트의 내장 객체
- 자바와 비슷하다.
- 필요할 때마다 아래 사이트를 참고하는 것이 좋다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects
표준 내장 객체 - JavaScript | MDN
이 장은 JavaScript의 모든 표준 내장 객체와 그 메서드 및 속성을 나열합니다.
developer.mozilla.org
2. 브라우저와 관련된 객체
- 자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다.
- 이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 때문이다.
2-1. 브라우저와 관련된 객체 알아보기
- 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 나타난다. 이 하위 객체는 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하며 각각 다른 하위 객체를 가진다.
- 주로 사용하는 내장 객체는 아래와 같다 .
| 종류 | 설명 |
| window | 브라우저 창이 열릴 때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에 최상위에 있다. |
| document | 웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨있다. |
| navigator | 현재 사용하는 브라우저의 정보가 들어있다. |
| history | 현재 창에서 사용자의 방문 기록을 저장한다. |
| location | 현재 페이지의 URL 정보가 담겨있다. |
| screen | 현재 사용하는 화면 정보를 다룬다. |
2-2. window 객체의 프로퍼티
- window 객체는 웹 브라우저의 상태를 제어하며 자바스크립트의 최상위에 있어 자바스크립트의 모든 객체는 window 객체 안에 포함된다.
- window 객체의 프로퍼티는 주로 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다.
- 프로퍼티를 사용하려면 window.fullScreen처럼 프로퍼티 이름 앞에 'window.'를 붙인다.
- window 객체의 프로퍼티:
https://developer.mozilla.org/ko/docs/Web/api/window
Window - Web API | MDN
Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다.
developer.mozilla.org
2-3. window 객체의 메서드
- window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련된다.
- 앞에서 사용한 alert()문이나 prompt()문은 window 객체의 메서드이므로 원래는 window.alert()라고 해야한다. 하지만 window 객체는 기본 객체이므로 window.를 생략하고 alert()만 사용할 수 있다. window 객체의 다른 메서드도 마찬가지다.
- window 객체의 메서드:
https://developer.mozilla.org/ko/docs/Web/api/window
Window - Web API | MDN
Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다.
developer.mozilla.org
3. navigator 객체
- navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온,오프라인 등의 여러 정보가 담겨있다. 이 정보는 사용자가 수정할 수 없으며 가져와서 보여줄 수만 있다.
3-1. 웹 브라우저와 렌더링 엔진
- 웹 브라우저가 다양해지면서 모든 사용자의 웹 브라우저에서 똑같이 동작하는 웹 문서를 개발해야한다.
- 여러 웹 브라우저를 고려할 때 가장 먼저 생각해야 할 분야는 렌더링 엔진이다.
- 아직 표준화되지 않은 CSS 속성 앞에는 브라우저 벤더를 의미하는 프리픽스(prefix)를 지정한다. 이렇게 지정하는 이유는 웹 브라우저마다 HTML이나 CSS를 해석하는 렌더링 엔진이 다르기 때문이다.
- 웹 브라우저는 웹 문서를 불러오면 내장된 렌더링 엔진에서 소스를 해석한다. 이때 웹 브라우저마다 사용하는 렌더링 엔진이 다르므로 프리픽스를 붙여 브라우저를 구별한다.
- 마찬가지로 웹 브라우저마다 내장된 자바스크립트 엔진도 서로 다르다. 그래서 똑같은 HTML5 기술을 사용해서 만든 사이트에 접속하더라도 웹 브라우저마다 보여 주는 효과와 성능은 다를 수 있다.
3-1. userAgent 프로퍼티 알아보기
- navigator 객체에서 가장 먼저 알아야 할 프로퍼티는 userAgent로 사용자 에이전트 문자열을 의미한다.
- userAgent는 사용자의 웹 브라우저 정보를 서버에 보낼 때 사용한다.
- userAgent에는 사용자의 웹 브라우저 버전, 자바스크립트의 엔진 종류 등 여러 정보가 들어있다. 따라서 서버에서는 그 정보를 확인하여 사용자에게 맞는 웹 페이지를 보여 줄 수 있다.
- 각 브라우저의 사용자 에이전트 문자열을 보면 Mozilla라는 예약어로 시작한다.
3-2. navigator 객체 정보 살펴보기
https://developer.mozilla.org/ko/docs/Web/api/navigator
Navigator - Web API | MDN
Navigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용합니다.
developer.mozilla.org
4. history 객체
- history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
- 브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
- history 객체에는 방문한 URL 정보가 저장되므로 메서드는 방문했던 URL을 앞뒤로 이동하며 페이지를 불러온다.
- history 객체의 프로퍼티와 메서드:
https://developer.mozilla.org/ko/docs/Web/api/history
History - Web API | MDN
History 인터페이스는 브라우저의 세션 기록, 즉 현재 페이지를 불러온 탭 또는 프레임의 방문 기록을 조작할 수 있는 방법을 제공합니다.
developer.mozilla.org
5. location 객체
- location 객체는 이름에서도 알 수 있듯이 브라우저의 주소 표시줄과 관련된다. 즉, location 객체에는 현재 문서의 URL 주소 정보가 들어있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.
- location 객체의 메서드는 브라우저의 [새로 고침]과 같은 역할을 하는 reload() 메서드와 현재 창에 다른 문서나 사이트를 보여 주는 replace() 메서드가 매우 유용하다.
- location 객체의 프로퍼티와 메서드:
https://developer.mozilla.org/ko/docs/Web/api/location
Location - Web API | MDN
Location 인터페이스는 객체가 연결된 장소(URL)를 표현합니다.
developer.mozilla.org
6. screen 객체
- 사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용한다.
- screen 객체에서 사용하는 메서드는 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 한다. 이 두가지 메서드는 풀 스크린 상태일때나 방향 전환을 할 수 있는 앱에서 사용한다.
- screen 객체의 프로퍼티와 메서드:
https://developer.mozilla.org/ko/docs/Web/api/screen
Screen - Web API | MDN
The Screen interface represents a screen, usually the one on which the current window is being rendered, and is obtained using window.screen (en-US).
developer.mozilla.org
'신입 개발자가 되기 위해 공부했던 독학 자료들 > JavaScript&jQuery' 카테고리의 다른 글
| [jQuery] 제이쿼리 문서 객체 선택자와 조작법 (0) | 2022.02.28 |
|---|---|
| [JavaScript] 자바스크립트 기본 내용 추가 정리 (0) | 2022.02.28 |
| [JavaScript] 문서 객체 모델(DOM) 알아보기 (0) | 2022.02.22 |
| [JavaScript] 이벤트와 이벤트 처리기 (0) | 2022.02.22 |
| [JavaScript] 자바스크립트 기본 문법과 함수 (0) | 2022.02.21 |
