안녕하세요!

<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 당담하게 된 박브레드입니다.

오늘은 열여섯 번째 날로, 자바스크립트 공부 일곱 번째 날입니다!

별로 어렵지 않은 내용이니, 힘을 내서 같이 공부를 시작해 볼까요?

 

오늘 공부할 내용은 다음과 같습니다.

🏃 공부할 내용(433~453p)

3. 표준 내장 객체 사용하기

4. 브라우저 객체 모델 사용하기

 

3. 표준 내장 객체 사용하기

자바스크립트에선 개발 편의를 위해 수많은 객체가 미리 만들어져 있어요. 이러한 객체는 자바스크립트에 기본으로 내장되어 있기 때문에 스코프의 위치를 따지지 않고 모든 영역에서 사용 가능하답니다. 이렇게 내장된 객체를 표준 내장 객체라고 해요! 표준 내장 객체의 종류에 대해서 알아볼까요?

 

3.1 문자열을 다루는 String 객체

String 객체는 기본 자료형에서 문자열을 다뤄요!

그래서 문자열에서 사용할 수 있는 속성과 메서드가 정의되어 있습니다.

 

실무에서 자주 사용하는 String  객체의 속성과 메서드에 대해선 책에 있는 표 11-1을 참고하시고,

모든 속성과 메서드를 다루긴 어려우므로 length 속성에 대해서 실습해 볼게요!

다음과 같이 length 속성을 사용하면, 문자열의 길이를 알아낼 수 있습니다.

const pw = "124";
if (pw.length < 4) {
  console.log("비밀번호는 최소 4자리 이상 입력해주세요");
}

다음으로, includes() 메서드에 대해서 실습해 봅시다.

다음과 같이 includes 메서드를 사용하면 특정 문자열이 포함되어 있는지 확인할 수 있어요.

const email = "test!naver.com";
if (email.includes("@") === false) {
  console.log("올바른 이메일 형식이 아닙니다.");
}

 

 

3.2 배열을 다루기 Array 객체

 Array 객체는 기본 자료형 중 배열을 다루는 객체로, 배열에서 사용할 수 있는 많은 속성과 메서드가 정의되어 있습니다. 특히 실무에서 배열을 자주 사용하기 때문에  Array  객체의 메서드를 알아 두면 도움이 될 거예요.

 

실무에서 자주 사용하는 Array 객체의 속성과 메서드에 대해선 책에 있는 표 11-2를 참고하시고,

이번에도 몇 가지만 예제로 살펴볼게요!

 

Array 객체에서도 length 속성을 지원하기 때문에 배열의 요소 개수, 즉 길이를 구할 수 있어요.

다음은 배열의 길이만큼 반복문을 돌리는 코드입니다. 즉, 3번 돌아가겠죠?

const arr = [10, 20, 30];
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

다음과 같이 배열에 데이터를 추가하거나 제거할 수도 있어요!

const arr = [10, 20, 30, 40];
arr.push(50); // 배열의 맨 뒤에 50추가
console.log(arr); // [10, 20, 30, 40, 50]
arr.pop(); // 배열의 맨 뒤에 있는 요소 제거
console.log(arr); // [10, 20, 30, 40]
arr.unshift(0); // 배열의 맨 앞에 0추가
console.log(arr); // [0, 10, 20, 30, 40]
arr.shift(); // 배열의 맨 앞에 있는 요소 제거
console.log(arr); // [10, 20, 30, 40]

 

3.3 날짜와 시간을 다루는 Date 객체

 Date  객체에는 날짜 및 시간과 관련 있는 메서드가 정의되어 있습니다.

따라서  Date 객체의 메서드를 활용할 수만 있어도 자바스크립트로 날짜와 시간을 처리하는 작업이 매우 간단해집니다.

 

다음과 같이 인스턴스를 생성해 주면 현재 날짜와 시간 정보를 기반으로 날짜와 시간 데이터가 생성돼요.

const date = new Date(); // Mon Jan 01 2018 00:00:00 GMT+0100 (CET)

날짜 간격을 계산할 수도 있는데, getTime() 메서드를 활용하면 밀리초 단위로 시간을 변환해 줘요.

const date1 = new Date("2022-12-23");
const date2 = new Date("2022-12-25");
const dateDiff = date2.getTime() - date1.getTime();
const interval = dateDiff / (24 * 60 * 60 * 1000);
console.log(`두 날짜의 차이는 ${interval}입니다.`);

 

3.4 수학 연산을 다루는 Math 객체

Math 객체에는 여러 가지 수학 연산을 수행하는 메서드가 정의되어 있습니다

Math 객체에서 자주 사용하는 메서드는 책에 있는 표 11-4를 참고하시고, 몇 가지를 직접 실습해 볼게요!

 

floor 메서드는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환해요. (내림)

ceil 메서드는 주어진 숫자와 같거나 큰 정수 중에서 가장 작은 수를 반환해요. (올림)

round 메서드는 주어진 숫자를 반올림한 수와 가장 가까운 정수를 반환합니다. (반올림)

const floatNum =  10.52;
Math.floor(floatNum);  // 10
Math.ceil(floatNum);   // 11
Math.round(floatNum);  // 11

 

4. 브라우저 객체 모델 사용하기

표준 내장 객체는 아까 말했듯이 자바스크립트에 내장된 객체입니다. 

그러나, 자바스크립트 언어 사양에 포함되지 않고 웹 브라우저에서 제공하는 객체도 있어요!

이를 브라우저 객체 모델이라고 합니다. 

 

그럼 브라우저 객체 모델에 대해서 살펴보겠습니다. 

 

4.1 window 객체 속성과 메서드

window 객체에는 웹 브라우저의 기능과 요소들을 제어할 수 있는 여러 속성과 메서드가 있는데,

주요 속성과 메서드는 책에 있는 표 11-6을 참고해 주세요!

 

4.2 window 객체의 기본 속성 사용하기

다음으로는 객체의 기본 속성을 그림으로 살펴보고 알아보겠습니다.

window 객체의 속성은 주로 웹 브라우저의 창과 관련 있는 속성이 많습니다.

웹 브라우저의 너비가 innerWidth

웹 브라우저의 높이가 innerWeight

웹 브라우저 창의 너비가 outerWidth

웹 브라우저 창의 높이가 outerHeight

웹 브라우저 창 위쪽 면과 모니터 사이의 간격 scrrenTop/window.screenX

웹 브라우저 창 왼쪽 면과 모니터 사이의 간격 screenLeft/screenX

웹 브라우저 창의 스크롤 가로 위치 scrollX

웹 브라우저 창의 스크롤 세로 위치 scrollY

 

코드로 실행을 굳이 하지 않고

콘솔창에 직접 입력을 해봐도 잘 나오는 것을 확인할 수 있어요!

 

4.3 웹 브라우저에서 새 창 제어하기

window  객체의  open() 메서드는 웹 브라우저에서 새로운 창을 여는 데 사용합니다.

open() 메서드는 매개변수로 창의 경로, 이름, 속성을 전달받아요.

 

만약 버튼을 눌렀을 때 새 창으로 열리게 하고 싶다면 다음과 같이 open 메서드를 사용하면 됩니다.

  <body>
    <button onclick="popup()">팝업</button>
    <script>
      function popup() {
        window.open("index.html", "팝업", "width=200, height=100")
      }
    </script>

새로운 창으로 뜨는 것을 확인할 수 있죠?

 

4.4 웹 브라우저의 스크롤 이용하기

window 객체의 scrollTo() 메서드는 웹 브라우저의 스크롤 위치를 특정 좌표로 이동하게 합니다.

그리고  scrollBy() 메서드는 웹 브라우저의 스크롤을 현재 위치에서 상대적인 위치로 이동하게 해요.

두 메서드는 기본으로 매개변수에 x좌표와 y좌표를 전달받으며 다음과 같이 사용 가능합니다!

window.scrollTo(x좌표, y좌표);
window.scrollBy(x좌표, y좌표);

 

오늘은 표준 내장객체에 대해서 알아보고, 객체의 속성과 메서드를 살펴봤는데 어떠셨나요?

 

제가 공부한 내용을 보고 궁금한 점이 있으면 댓글을 남겨 주세요.
확인하고 답변해 드리겠습니다.
그럼 내일 다시 만나요!

 

✅ 정리

1. 표준 내장객체

2. 브라우저 객체 모델

3. 객체의 속성과 메서드

 

 

저작자표시

'🍞 대외활동 > 길벗 블로깅 멘토' 카테고리의 다른 글

[HTML+CSS+자바스크립트] 12장 문서 객체 모델과 이벤트 다루기 (~522p)  (0) 2023.03.14
[HTML+CSS+자바스크립트] 12장 문서 객체 모델과 이벤트 다루기 (~486p)  (2) 2023.03.14
[HTML+CSS+자바스크립트] 11장 자바스크립트 객체 다루기 (~432p)  (0) 2023.03.10
[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~417p)  (0) 2023.03.09
[HTML+CSS+자바스크립트] 10장 자바스크립트 함수 다루기 (~405p)  (0) 2023.03.05

티스토리툴바