16일차 학습인증(브라우저 객체모델 사용하기)

*학습범위: 교재 p433 ~ p453

 

표준 내장객체 사용하기

= 자바스크립트에는 기본으로 수많은 객체가 내장되어 있어서 

스코프의 위치를 따지지 않고 모든 영역에서 공통으로 사용할 수 있습니다.

 

실무에서 주로 사용하는 내장객체

1. 문자열 string 객체

2. 배열 자료형을 다루는 array 객체

3. 날짜와 시간을 다루는 date 객체, 수학수식을 다루는 Math

 

* 문자열 string 객체

속성 length(길이) , 문자열의 길이를 반환합니다.

(예시) 

const pw = "123";

if(pw.length < 3){

    console.log("비밀번호는 최소 3자리 이상 입력해 주세요");

}

 

매서드 종류

indludes( ) 매서드의 매개변수에 인자로 전달되는

문자열이 대상문자열에 포함되어 있으면 true, 아니면 false를 반환합니다.

(예시)

const email = "test!naver.com";

if(email.includes("0") === false){

   console.log("올바른 이메일 형식이 아닙니다");

}

 

replace( ) 대상 문자열에서 매서드의 매개변수에 인자로 전달되는 문자열과

 일치하는 한 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.

 

replaceAll( ) 대상 문자열에서 매서드의 매개변수에 인자로 전달되는 문자열과

  일치하는 모든 부분을 찾아서 다른 데이터로 변경한 새로운 문자열을 반환합니다.

 

split( ) 매서드의 매개변수에 인자로 잔달되는 구분자를 이용해 대상 문자열을 여러 개

  와 문자열로 분리하고, 분리한 문자열을 새로운 배열로 전환합니다.

 

toUpperCase( ) 대상 문자열을 대문자로 변경해 반환합니다.

 

trim( ) 대상 문자열의 앞뒤 공백ㅇ르 제거한 값을 반환합니다.

 

indexOf( ) 대상 문자열과 일치하는 첫 번째 문자의 인덱스를 반환합니다.

(예시) 

const email = "test!naver.com";

if(email.indexof("@") === -1){

   console.log("올바른 이메일 형식이 아닙니다.");

}

 

*배열 자료형을 다루는 array 객체

array 객체에서도 length 속성을 지원함.

속성 length 배열의 요소 개수를 반환합니다.

 

파괴적 매서드= 매서드를 사용했을 떄 원본 데이터를 변경하는 매서드를 의미

push( ) 배열의 맨 뒤에 데이터를 추가합니다.

pop( ) 배열의 맨 뒤에서 데이터를 추출합니다.

unshift( ) 배열의 맨 앞에서 데이터를 추출합니다.

shift( ) 배열의 맨 앞에서 데이터를 추출합니다.

sort( ) 배열의 요소를 정렬합니다.

reverse( ) 배열의 요소를 역순으로 정렬합니다.

 

비파괴적 매서드= 원본을 변경하지 않는 매서드를 의미

forEach( ) 배열의 요소를 하나씩 순회하면서 요소마다 콜백(callback)함수를 호출합니다.

filter( ) 배열의 요소를 하나씩 순회하면서 요소마다 콜백함수를 호출해 true를 반환하는 요소만 추출

추출한 요소로 새로운 배열을 만들고 만들어진 배열을 반환합니다.

find( ) 배열의 요소를 탐색하면서 주어진 판별함수를 만족하는 첫 번째 값을 반환합니다.

findIndex( ) 값 대신 인덱스 숫자를 반환한다는 것만 뺴면 find( ) 매서드와 같음

includes( ) 배열에 특정 값이 포함되어 있는지 확인해서 포함됐으면 true, 아니면 false를 반환합니다.

join( ) 배열의 모든 요소를 주어진 구분자로합칩니다.

 

(예시) 

const arr = [ 10, 20, 30];

for(let i = 0; i < arr.length; i++){

   console.log(arrr[i]);

}

 

(에시) 

const arr = [10, 20, 30, 40];

arr.forEach(function(v){

   console.log(v); {

});

console.log(arr);  // 10 20 30 40

 

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

1. 인스턴스 만들기

(예시) 

const date = new date( ); 

해석: 다음 코드처럼 new키워드로 date 객체를 호출하면 현재 날짜와 시간정보를 기준으로 날짜,시간 데이터가 생성됌.

* 날짜와 시간정보를 전달할 떄 1월은 0부터 ~ 12월은 11 까지 

 

p440 부터 정리하기 -> 따로정리추가예정...