🔥 [UIUX] 0117 JAVASCRIPT Coding, 코딩 초급 10

✏️ 2025. 1월 17일 / javascript 초급 10

⛅ 브라우저 객체에 대해 알아봅시다
자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등
웹 브라우저와 관련된 다양한 기능과 효과를 만들 수 있습니다.
웹 브라우저 창에 문서가 표시되는 순간 사용자는 알 수 없지만
브라우저는 html 소스를 한 줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체들을 생성합니다.
웹 브라우저가 열리면 가장 먼저 window 라는 객체가 만들어지고
밑으로 하위 요소에 해당하는 객체가 생성됩니다.
이 하위 객체란 웹 문서와 주소 표시줄처럼 브라우저 요소에 해당하는 각각의 다른 객체들을 말합니다.
🌼 브라우저의 계층 구조
브라우저의 가장 최상위 객체는 window 입니다.
window 객체는 '브라우저'를 의미하며
이 안에 다양한 하위 객체를 포함합니다.
하위 객체의 종류로는 아래와 같습니다.
1. location (주소줄)
2. document (문서영역)
3. navigator (운영체제)
4. history (방문기록)
5. screen (해상도)
🌻 window의 프로퍼티(속성)
window 객체는 웹 브라우저의 상태를 제어하고, 자바스크립트의 최상위에 존재합니다.
window 객체의 프로퍼티를 사용하려면 반드시 window. 을 먼저 붙여줘야 합니다.

     [종류]
      1. document : 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.
      2. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우, 그 요소를 반환하고 
                        포함되어 있지 않은 경우 null을 반환합니다.
      3. innerHeight : 내용 영역의 높이를 나타냅니다.
                        즉, 스크롤을 포함한 문서의 전체 높이를 말합니다.
                        padding이나 border을 제외한 height의 컨텐츠 영역을 말합니다.
      4. innerWidth : 내용 영역의 넓이를 나타냅니다. 
                      padding이나 border을 제외한 width의 컨텐츠 영역을 말합니다.
      5. localStorage : 췝 브라우저에서 데이터를 저장하는 로컬 스토리지를 나타냅니다.
      6. location : window 객체의 위치 또는 현재 url 정보를 나타냅니다.
      7. name : 브라우저 창의 이름을 가져오거나 수정합니다.
      8. ★ outerHeight : border나 padding을 포함한 문서의 총 높이를 의미합니다.
      9. ★ outerWidth : border나 padding을 포함한 문서의 총 넓이를 의미합니다.
      10. ★ pageXOffset : 스크롤 했을 때 수평으로 이동하는 픽셀수를 의미합니다. (=scrollX)
      11. ★ pageYOffset : 스크롤 했을 때 수직으로 이동하는 픽셀수를 의미합니다. (=scrollY)
      12. parent : 현재 창이나 서브 프레임의 부모를 말합니다.
      13. ★ screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      14. ★ screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      15. sseionStorage : 로컬 스토리지처럼 웹 브라우저에 데이터를 저장하는 세션 스토리지를 반환합니다.

🌻 window의 프로퍼티(속성)
window 객체는 웹 브라우저의 상태를 제어하고, 자바스크립트의 최상위에 존재합니다.
window 객체의 프로퍼티를 사용하려면 반드시 window. 을 먼저 붙여줘야 합니다.

      [종류]
      1. document : 브라우저 창에 표시된 웹 문서에 접근할 수 있습니다.
      2. frameElement : 현재 창이 다른 요소 안에 포함되어 있을 경우, 그 요소를 반환하고 
                        포함되어 있지 않은 경우 null을 반환합니다.
      3. innerHeight : 내용 영역의 높이를 나타냅니다.
                        즉, 스크롤을 포함한 문서의 전체 높이를 말합니다.
                        padding이나 border을 제외한 height의 컨텐츠 영역을 말합니다.
      4. innerWidth : 내용 영역의 넓이를 나타냅니다. 
                      padding이나 border을 제외한 width의 컨텐츠 영역을 말합니다.
      5. localStorage : 췝 브라우저에서 데이터를 저장하는 로컬 스토리지를 나타냅니다.
      6. location : window 객체의 위치 또는 현재 url 정보를 나타냅니다.
      7. name : 브라우저 창의 이름을 가져오거나 수정합니다.
      8. ★ outerHeight : border나 padding을 포함한 문서의 총 높이를 의미합니다.
      9. ★ outerWidth : border나 padding을 포함한 문서의 총 넓이를 의미합니다.
      10. ★ pageXOffset : 스크롤 했을 때 수평으로 이동하는 픽셀수를 의미합니다. (=scrollX)
      11. ★ pageYOffset : 스크롤 했을 때 수직으로 이동하는 픽셀수를 의미합니다. (=scrollY)
      12. parent : 현재 창이나 서브 프레임의 부모를 말합니다.
      13. ★ screenX : 브라우저 창의 왼쪽 테두리가 모니터 왼쪽 테두리에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      14. ★ screenY : 브라우저 창의 위쪽 테두리가 모니터 위쪽에서 떨어져 있는 거리를 나타냅니다. (뷰포트 기준)
      15. sseionStorage : 로컬 스토리지처럼 웹 브라우저에 데이터를 저장하는 세션 스토리지를 반환합니다.

🌱 window 객체 메서드
window 객체의 메서드는 대화 창(prompt같은 창)을 표시하거나
브라우저 창의 크기나 위치를 알아내고자 할 때 사용합니다.
window의 메서드는 기본 객체이기 때문에 window.을 생략할 수 있습니다.

      [종류]
      1. alert() : 경고 메세지나 알림 내용을 표시하는 창입니다. (요새는 잘 쓰지 않음)
      2. blur() : 현재 창에서 포커스를 해제합니다.
      3. close() : 현재 창을 닫습니다.
      4. confirm() : 확인 취소 창을 말합니다.
      5. focus() : 현재 창에 포커스를 부여합니다.
      6. moveBy() : 현재 창을 지정한 크기만큼 이동합니다. (팝업창의 위치)
      7. moveTo() : 현재 창을 지정한 좌표로 이동시킬 때 사용합니다.
      8. open() : 새로운 창을 엽니다.
      9. postMessage : 메세지를 다른 창으로 전달할때 사용합니다.
      10. print() : 현재 문서를 인쇄할 때 사용합니다.
      11. prompt() : 사용자가 입력한 텍스트를 반환합니다.
      12. resizeBy() : 지정한 크기만큼 현재 창의 크기를 조절합니다.
      13. resizeTo() : 동적으로 브라우저 창의 크기를 조절합니다.
      14. sizeToContent() : 내용에 맞게 창의 크기를 조절합니다.
      15. stop() : 로딩을 중지합니다.

☀️ 도전 실습 ! open 메서드로 팝업창 만들기
open메서드를 이용하면 팝업창을 열 수 있습니다.

     [기본형]
     open('url경로', "새 창 이름", "새 창 옵션")

⭐ 일정한 간격으로 코드를 실행해봅시다
일정한 간격으로 코드를 실행하는 코드로는
setInterval()과 setTimeout()메서드가 있습니다.
setInterval()은 일정한 시간 간격으로 코드를 반복 실행합니다.
setTimeout()은 일정한 시간 이후에 코드를 한 번 실행하고 자동으로 종료합니다.
⭐ setInterval() / clearInterval()
setInterval()은 일정한 시간 간격으로 코드를 무한히 반복실행합니다.
setInterval()을 멈추고 해제하고 싶다면 clearInterval()을 사용합니다.
변수에 넣어서 사용해야 합니다.

      [기본형]
      1. var 참조변수 = setInterval(function(){코드}, 시간간격(ms));
      2. var 참조변수 = setInterval('코드', 시간간격(ms))
      3. clearInterval(참조 변수);

⭐ setTimeout() / clearTimeout()
setTimeout() 메서드는 일정 시간이 지나면 코드를 한 번 실행하고 종료합니다.
setTimeout() 메서드를 조금만 응용하면 setInterval 메서드처럼 사용할 수 있습니다.
clearTimeout()은 setTimeout()메서드를 종료할 때 사용합니다.
setTimeout()처럼 한번만 실행하는 메서드를 계속 호출하여 끝없이 실행시키는 것을
'재귀 함수 호출'이라고 합니다.

      [기본형]
      1. var 참조변수 = setTimeout(function(){코드}, 시간간격(ms));
      2. var 참조변수 = setTimeout('코드', 시간간격(ms))
      3. clearTimeout(참조 변수);

      var addNum = 0;
      var subNum = 1000;
      //2초마다 코드를 반복 실행하겠습니다.
      //auto1 > setInterval을 가지고 있는 변수
      var auto1 = setInterval(function () {
        addNum++;
        console.log("addNum :" + addNum);
      }, 2000);
      //2초마다 코드를 반복 실행하며 subNum을 1씩 감소시킵니다.
      //auto2 > setInterval을 가지고 있는 변수
      var auto2 = setInterval(function () {
        subNum--;
        console.log("subNum :" + subNum);
      }, 2000);
      //setTimeout은 코드를 한 번 실행하고 종료합니다.
      var addNum2 = 0;
      var auto3 = setTimeout(function () {
        addNum2++;
        document.write(`addNum2 : ${addNum2}`);
      }, 5000);

🌂 브라우저 객체 - history 객체
history 객체는 사용자가 방문한 사이트의 기록을 남기고,
이전 방문 사이트와 다음 방문 사이트로 다시 돌아갈 수 있는 메서드를 제공합니다.

    [기본형]
    history.속성;
    history.메서드(); > 메서드를 실행합니다.
    history.메서드(값); > 메서드를 실행할 때 값을 전달하여 실행시킵니다.

    [메서드]
    1. history.back();
    : 바로 이전에 방문했던 페이지로 이동합니다.
      history.back(3) 처럼 숫자가 들어가면 해당 숫자만큼 이전에 방문했던 페이지로 이동합니다.
    2. history.forward();
    : 앞으로 가기, 다음 방문 사이트로 이동합니다. ()안에 숫자가 들어가면 숫자만큼 앞으로 이동했던 페이지로 이동합니다.
    3. history.go(음수 또는 양수);
    : ()안에 음수가 들어가면 뒤로가기, 양수가 들어가면 앞으로 가기 입니다.

    [프로퍼티]
    history.length : 방문 기록에 저장된 목록의 개수를 반환합니다.

🌂 브라우저 객체 - location 객체
location 객체는 주소 표시줄에 있는 기능과 속성을 제공하는 객체입니다.
현재 url에 대한 정보와 새로고침 메서드 등이 있습니다.

      [기본형]
      - location.속성; > 현재 속성 값을 알고 싶을 때
      - location.속성 = 값; > 속성 값을 다른 값으로 변경할 때
      - location.메서드; > 기능을 실행할 때

      [프로퍼티]
      1. location.href
      : url 주소를 바꾸거나 현재 url 주소를 반환합니다.
      2. location.hash
      : url의 해시값(#에 명시된 값)을 반환합니다.
      3. location.hostname
      : url의 호스트 이름을 설정하거나 반환합니다.
      ex) https://www.naver.com:80/
      4. location.host
      : url의 호스트 이름(서버주소)과 포트번호를 반환
      5. location.protocol
      : url의 프로토콜을 반환합니다.

      [메서드]
      location.reload : 페이지를 새로고침 한다.

🌂 브라우저 객체 - navigator 객체
navigator객체는 현재 방문자가 사용하는 브라우저의 정보와 운영체제의 정보를 제공하는 객체입니다.

    [기본형]
    navigator.속성;

    [프로퍼티]
    1. navigator.appCodeName : 현재 브라우저의 코드명을 반환합니다. 현 시점의 모든 브라우저는 "Mozilla"를 반환합니다.
    2. navigator.appName : 현재 브라우저의 이름을 반환합니다.  현 시점의 모든 브라우저는 "Netscape"를 반환합니다.
    3. navigator.appVersion : 현재 브라우저의 버전 정보를 반환합니다.
    4. navigator.language : 현재 브라우저에 설정된 언어를 반환합니다. 한국어의 경우 ko를 반환합니다.
    5. navigator.product : 브라우저의 엔진 이름을 반환합니다. 크롬의 경우 'Gecko'를 반환합니다.
    6. navigator.platform : 컴퓨터의 운영체제 정보를 반환합니다. 
    운영체제가 window이고, 시스템 종류가 64비트라도 브라우저가 32비트로 설치가 되었으면 win32로 나옵니다.
    7. navigator.userAgent : 상단의 모든 속성을 종합적으로 반환합니다. 브라우저 운영체제 정보를 나타냅니다.

🌂 브라우저 객체 - screen 객체
screen 객체는 사용자의 디바이스 모니터의 정보를 제공하는 객체 입니다.
예를 들어 모니터의 넓이나 높이 또는 컬러 표현 방식을 제공합니다.

      [기본형]
      - screen.속성;
      - screen.메서드();

      [프로퍼티]
      1. avaliHeight : ui 영역(예를 들어 window 작업 표시줄이나 mac의 독)을 제외한 영역의 높이를 반환합니다.
      2. avaliWidth : ui 영역을 제외한 영역의 넓이를 반환합니다.
      3. colorDepth : 화면에서 픽셀을 랜더링 할 때 사용하는 색상 수를 나타냅니다.
      4. height : ui 영역을 포함한 높이를 반환합니다.
      5. width : ui 영역을 포함한 넓이를 반환합니다.
      6. orientation : 화면의 현재 방향을 나타냅니다.
      7. pixelDepth : 화면에서 픽셀을 랜더링 할 때 사용하는 비트 수를 나타냅니다.

      [메서드]
      1. lockOrientation() : 화면 방향을 잠글 때 사용합니다.
      1. unlockOrientation() : 화면 방향 잠금을 해제할 때 사용합니다.

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)