[ Do it! HTML + CSS 웹 표준의 정석 스터디!] 18 자바스크립트와 객체

DAY 26

🔖 오늘 읽은 범위 :

📢2/9(월) 진도표 알림
▶️공부 내용: 18 자바스크립트와 객체
▶️쪽수: 589~630쪽

---

😃 **기억하고 싶은 내용 (복붙해도 상관없어!)**

자바스크립트 객체

• 객체 : 프로그램이 인식할 수 있는 모든 대상에 대한 개념.
• 사실 세계와 관념 간의 맵핑.
• 내장 객체(Built-in object) : 자바스크립트에서 미리 객체로 정의되어 있는 객체.
• 문서 객체 모델(DOM) : 웹 문서 자체에 대한 객체. 포함된 이미지를 비롯한 요소들도 각각 별도의 객체.
• 웹 브라우저 객체 : 웹 브라우저에서 사용하는 정보에 대한 객체.
• 사용자 정의 객체 : 사용자가 직접 만들어 정의한 객체.
• let book = { title: "Javascript", pages: 500, }

객체와 인스턴스

• 인스턴스 : 객체의 실체화. 객체라는 틀을 기본으로 실체화 시킨 것.
• new 예약어 : 객체의 인스턴스를 생성시킨다.
• let now = new Date();

프로퍼티와 메서드

• 프로퍼티 : 객체의 특징이나 속성.
• 메서드 : 객체의 동작, 행위.

let now = new Date();
document.write(`Current time is ${now.toLocaleString()}`)

자바스크립트 내장 객체

Array 객체

• 선언
• // No initial value let arr1 = new Array(); let arr2 = new Array(4); // Initial value let arr3 = ["one", "two", "three", "four"]; let arr4 = Array("one", "two", "three", "four");
• length 프로퍼티
• let numbers = ["one", "two", "three", "four"]; for (let i = 0; i < numbers.length; i++) { document.write(`<p>${numbers[i]}</p>`); }
• 메서드

  메서드	설명
  concat	기존 배열에 다른 배열을 합쳐서 새로운 배열을 만든다. 결과는 기존 배열에 영향을 주지 않는다.
  every	배열의 모든 요소가 주어진 함수에 대해 참이면 true, 아니면 false 반환.
  filter	배열 요소 중에서 주어진 필터링 함수를 통과한(true) 요소들만 골라 새로운 배열을 만든다.
  forEach	배열의 모든 요소에 주어진 함수를 실행함.
  indexOf	주어진 값과 일치하는 배열 요소의 인덱스를 반환한다. 첫번째로 일치하는 요소의 인덱스를 반환한다.
  join	배열 요소를 문자열로 합친다. 구분자 지정을 할 수 있다.
  push	배열의 끝에 새 요소를 추가하고 길이를 반환한다.
  원본 배열이 변경된다.
  unshift	배열의 시작에 새 요소를 추가한다.
  원본 배열이 변경된다.
  pop	배열의 마지막 요소를 꺼내서 결과로 반환한다.
  원본 배열이 변경된다.
  shift	배열의 첫번째 요소를 꺼내 결과로 반환한다.
  원본 배열이 변경된다.
  splice	배열에 요소를 추가하거나 삭제한다.
  변경된 배열이 반환된다.
  원본 배열이 변경된다.
  slice	배열에 특정한 부분만 잘라 냅니다.
  잘라낸 배열을 반환한다.
  원본이 유지된다.
  reverse	배열의 배치 순서를 역순으로 변경한다.
  sort	배열 요소를 지정한 조건에 따라 정렬한다.
  toString	배열에서 지정한 부분을 문자열로 반환한다. 각 요소는 쉼표로 구분한다.

  • splice 메서드
  • let study = ['html', 'css', 'javascript', 'jquery', 'react', 'nodejs']; document.write(`배열: ${study}<br>`); document.write(`<hr>`); // 인수가 1개일 경우 : 지정한 인덱스 요소부터 끝까지 삭제. let js = study.splice(2); document.write(`반환된 배열: ${js}<br>`); document.write(`변경된 배열: ${study}`); document.write(`<hr>`); // 인수가 2개일 경우 : 첫번째 인수는 인덱스 값, 두번째 인수는 삭제할 개수. let jquery = js.splice(1, 1); document.write(`반환된 배열: ${jquery}<br>`); document.write(`변경된 배열: ${js}`); document.write(`<hr>`); // 인수가 3개 이상일 경우 // 첫번째 인수는 삭제할 시작 위치, 두번째 인수는 삭제할 개수, // 세번째 인수는 삭제한 위치에 새로 추가할 요소. let modernjs = js.splice(1, 0, 'typescript'); document.write(`반환된 배열: ${modernjs}<br>`); document.write(`변경된 배열: ${js}`); document.write(`<hr>`); /* 배열: html,css,javascript,jquery,react,nodejs 반환된 배열: javascript,jquery,react,nodejs 변경된 배열: html,css 반환된 배열: jquery 변경된 배열: javascript,react,nodejs 반환된 배열: 변경된 배열: javascript,typescript,react,nodejs */
  • slice 메서드
  • let colors = ["red", "green", "blue", "white", "black"]; // 인수가 1개인 경우 : 시작 인덱스 ~ 마지막 까지 모두 꺼낸다. document.write(colors.slice(2)); document.write("<hr>"); // 인수가 2개인 경우: 첫번째 인수는 시작 인덱스, 두번째 인수는 끝 인덱스 // 배열을 잘라 낼 때 시작 위치와 끝 위치를 지정한 건데, // 시작 위치는 포함하고 끝 위치는 포함하지 않음. document.write(colors.slice(2,4));
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Date 객체

• 날짜와 시간 정보 나타냄.
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#instance_methods

// YYYY-MM-DD
new Date("2026-02-09");
// YYYY-MM-DDTHH
new Date("2026-02-09T22:26:23");
// YYYY-MM-DDTHHZ : 'Z' 는 국제 표준시(UTC)
new Date("2026-02-09T22:26:23Z");
// MM/DD/YYYY
new Date("02/09/2026");
// 이름 형식
new Date("Mon Feb 09 2026 22:29:59 GMT+0900 (한국 표준시)")

Math 객체

• 수학 관련 객체
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

브라우저 관련 객체

• 웹 브라우저 동작과 관련되거나 브라우저 정보, 사용자 방문 기록, 현재 페이지 URL 정보 등등.
• 예를 들어 window > document > form > button 과 같은 흐름으로 전체 계층 구조가 있음.
• 하위 객체는 다수가 존재함.

종류	설명
window	브라우저 창이 열릴 때마다 하나씩 생성됨. 최상위 요소.
document	웹문서마다 하나씩 있음.태그 만날 때 생성됨. 문서 정보.
navigator	현재 사용하는 브라우저 정보.
history	현재 창의 사용자 방문 기록 정보.
location	현재 페이지의 URL 정보.
screen	현재 화면 정보.

window 객체 프로퍼티

• 웹 브라우저 상태 제어
• 자바스크립트 최상단 객체이며, 모든 객체는 이 객체 안에 포함된다.
• 브라우저 창의 정보를 가져오거나 값을 변경할 때 사용된다.

종류	설명
document	브라우저에 표시 된 웹 문서에 접근한다.
frameElement	현재 창이 다른 요소 안에 있으면, 그 요소를 반환한다.
아니라면 null 이 반환된다.
innerHeight	내용 영역의 높이
innerWidth	내용 영역의 너비
localStorage	웹 브라우저 로컬 스토리지 반환.
location	window 객체 위치 또는 현재 URL 반환.
name	브라우저 창 이름을 반환한다. 수정 가능하다.
outerHeight	브라우저 창 바깥 높이.
outerWidth	브라우저 창 바깥 너비.
pageXOffset	수평 스크롤 시 이동하는 픽셀 수. scrollX 와 동일.
pageYOffset	수직 스크롤 시 이동하는 픽셀 수. scrollY 와 동일.
parent	“현재 창 또는 서브 프레임”의 부모
screenX	브라우저 창 왼쪽 테두리와 모니터 왼쪽 테두리 사이의 거리.
screenY	브라우저 창 위쪽 테두리와 모니터 위쪽 테두리 사이의 거리.
scrollX	수평 스크롤 시 이동하는 픽셀 수.
scrollY	수직 스크롤 시 이동하는 픽셀 수.
sessionStorage	웹 브라우저 세션 스토리지 반환.

window 객체 메서드

• 대화 창 표시, 브라우저 창 크기나 위치 알아내기 또는 지정하기.
• 웹 브라우저 창에 대한 것들이 관련됨.
• window 객체는 기본 객체이므로 생략이 가능함. ex) window.alert() → alert()

  종류	설명
  alert()	알림 창 표시
  blur()	현재 창에 포커스 제거.
  close()	현재 창 닫기.
  confirm()	확인 창 표시. 확인, 취소 버튼이 있음.
  focus()	현재 창에 포커스 부여.
  moveBy()	현재 창을 지정한 크기만큼 이동.
  moveTo()	현재 창을 지정한 좌표로 이동.
  open()	새로운 창 열기.
  postMessage()	메시지를 다른 창으로 전달한다.
  print()	현재 문서 인쇄.
  prompt()	프롬프트 창에 입력한 텍스트를 반환한다.
  resizeBy()	현재 창의 크기를 지정한 크기만큼 조절.
  resizeTo()	브라우저 창의 크기를 지정한 크기로 조절.
  scroll()	문서에서 특정 위치로 스크롤.
  scrollBy()	지정한 크기만큼씩 스크롤.
  scrollTo()	지정한 위치까지 스크롤.
  sizeToContent()	창 크기를 내용에 맞게 맞춤.
  stop()	로딩 중지.

• open()
  • 새로 고침을 여러 번 하면 동일한 팝업 창이 계속 발생. → 팝업 창 이름 지정하면 해결 됨.
  • 위치 지정 : left, top 속성 으로 지정. 화면 기준.
• /* window.open(경로, 창 이름, 창 옵션) */ window.open("notice.html", "", "width=500, height=400"); window.open("notice.html", "pop", "width=500, height=400, left=100, top=200");
• 팝업 차단
  • 팝업 창에 대해서 기본적으로 차단되어 있음.
  • 팝업 차단 여부 확인하기.
    • 팝업 차단 일 경우, null 을 반환.

    <body onload="openPopup()">
      <p>문서를 열면 팝업 창이 표시됩니다</p>
    
      <script>
          let blocked = false;
          function openPopup() {
              let newPopup = window.open("notice.html", "Notice", "width=500, height=400");
              if (newPopup == null) {
                  alert("팝업이 차단되어 있습니다. 팝업 차단을 해제해 주세요.");
              }
          }
      </script>
    </body>

• close()
  • 창 닫기.
  • ```html
    /*
    window.close()
  • /
    

💡팝업 창 만드는 새로운 방식

• 팝업 창을 브라우저 창으로 표시하는 것은 예전 방식임.
• 팝업 창을 브라우저 내부 문서의 일부로 처리한다.
• <div> 태그를 사용해서 만든다. ⇒ 레이어 방식.
• 자바스크립트 Document 객체를 이용해 만드는 것으로 DOM 을 조정한다.

navigator 객체

• 웹 브라우저 버전, 플러그인 설치 정보 등등 각종 정보를 가져와서 보여준다.
• userAgent 프로퍼티
  • 사용자 에이전트 문자열.
  • 웹 브라우저 버전, 자바스크립트 엔진 종류 등등 여러 정보가 있음.
  • 예시
    • 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36’
  • 브라우저 종류 및 OS 환경 마다 약간 차이가 있음.

프로퍼티	설명
battery → getBattery	배터리 충전 상태
cookieEnabled	쿠키 정보 무시 한 경우 false, 쿠키 허용한 경우 true
geolocation	모바일 기기를 이용한 위치 정보
language	브라우저 UI 언어 정보
oscpu	현재 운영체제 정보
userAgent	현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열

history 객체

• 브라우저 뒤로 가기 또는 앞으로 가기 및 주소 표시줄에 입력해서 방문한 사이트 주소들을 배열 형태로 저장.
• 방문한 URL 정보가 저장됨.
• 메서드를 이요해서 앞뒤로 이동 가능.
• 보안 문제로 인해 읽기 전용임.
• back(), forward() : 이전 페이지, 다음 페이지.
• go() : 현재 페이지 기준 상대 위치에 있는 페이지를 현재 화면에 불러온다. go(1) 은 다음 페이지. go(-1) 는 이전 페이지.

location 객체

• 브라우저 주소 표시줄. 현재 문서의 URL 주소 정보.
• 현재 브라우저 창에서 열기 동작이 가능.
• 새로고침 동작 가능.

프로퍼티	설명
hash	URL 중에서 # 로 시작하는 해시 부분 정보 반환.
host	URL 호스트 이름과 포트 번호
hostname	URL 호스트 이름
href	전체 URL. 이 값 변경 하면 해당 주소로 이동함.
pathname	URL 경로 저장
port	URL 포트 번호
protocol	URL 프로토콜 저장.
password	도메인 이름 앞에 username 과 password 를 함께 입력해서 접속하는 사이트의 URL 일 경우에 password 정보를 저장한다.
search	URL 중에서 ? 로 시작하는 검색 내용을 저장함.
username	도메인 이름 앞에 username 과 password 를 함께 입력해서 접속하는 사이트의 URL 일 경우에 username 정보를 저장한다.
메서드	설명
assign()	현재 문서에 새 문서 주소를 할당햇 새 문서를 가져온다.
reload()	현재 문서 새로고침.
replace()	현재 문서 URL 을 지우고, 다른 URL 문서로 교체.
toString()	현재 문서 URL 을 문자열로 반환한다.

• replace()
• <script> document.write(`<p><b>location.href: </b>${location.href}</p>`); document.write(`<p><b>location.host: </b>${location.host}</p>`); document.write(`<p><b>location.protocol: </b>${location.protocol}</p>`); </script> </div> <button onclick="location.replace('https://www.easyspub.co.kr')">이지스퍼블리싱 홈페이지로 이동하기</button>

screen 객체

• 사용자의 화면 크기나 정보를 알아낼 때 사용한다.
• 화면 방향을 잠그거나 잠근 화면의 방향을 해제하는 역할을 한다.
  • 풀스크린 상태 일 때 또는 방향 전환이 가능한 앱에서 사용한다.
• 화면 UI 영역 : 윈도우의 작업 표시줄이나 맥의 독 같은 걸 말한다.

| 구분 | 설명 |
| --- | --- |
| availHeight | 화면의 UI 영역을 제외한 영역의 높이 |
| availWidth | 화면의 UI 영역을 제외한 내용 표시 영역의 너비. |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상 수. |
| height | UI 영역을 포함한 화면의 높이. |
| orientation | 화면의 현재 방향. |
| pixelDepth | 화면에서 픽셀을 렌더링할 때 사용하는 비트 수. |
| width | UI 영역을 포함한 화면의 너비. |
| **메서드** | **설명** |
| lockOrientation() | 화면 방향 잠그기. |
| unlockOrientation() | 화면 방향 잠금 해제하기. |

```jsx
document.write(`<p><b>screen.availWidth: </b>${screen.availWidth}</p>`);
document.write(`<p><b>screen.availHeight: </b>${screen.availHeight}</p>`);
document.write(`<p><b>screen.width: </b>${screen.width}</p>`);
document.write(`<p><b>screen.height: </b>${screen.height}</p>`);
```

🤔 **오늘의 파트에 대한 소감 (매우 주관적주의)**

• 브라우저 종류나 버전에 따라 호환 되는 프로퍼티나 메서드가 다르다.
• 그만큼 이 쪽 분야가 파편화가 많이 된 듯.
• 호환성 확보와 지원 범위 기준이 있어야 개발이 쉽겠다.
• 표준이 아닌 것들은 호환성 확보 차원에서 개발 중에 사용하긴 어렵다고 봐야 한다.

🔎 **추가로 알게 된 것 (책 내용 +알파로 궁금한 것, 이해가 가지 않는 것 등)**

• 내장 객체
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
• Window
  • https://developer.mozilla.org/ko/docs/Web/API/Window
• 로컬 스토리지 vs 세션 스토리지
  • https://www.daleseo.com/js-web-storage/
• 사용자 에이전트
  • https://developer.mozilla.org/ko/docs/Glossary/User_agent
• navigator battery 정보
  • https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery
•  

---

🤟소감 3줄 요약

• 개발자 도구 내용이 이제 조금 이해되니…
• 춥다가 따뜻하다가 다시 춥다가…
• 😷