[JS] 객체 종류 - 내장객체

자바스크립트의 객체 종류

1. 내장객체

2. 브라우저 객체 모델 (BOM)

3. 문서 객체 모델 (DOM)

.

1. 내장객체

- 자바스크립트 안에 내장되어 있는 객체 (문자, 날짜, 배열, 숫자,...)

날짜(Date)

//날짜(Date) 객체 생성
var today = new Date();
document.write(today + "<br>");

var day2 = new Date(2023,8,4); // 년, 월-1(9월을 의미), 일
// 월 : 0~11까지 표시 (1~12)
// 8월을 나타내고 싶으면, new Date(2023,7,4); 을 표시
document.write(day2 + "<br>");

var day3 = new Date(2023,7,4,9,32,0); // 년, 월-1, 일, 시, 분, 초
document.write(day3 + "<br>");

var day4 = new Date("2023/8/4"); // 년, 월, 일
document.write(day4 + "<br>");

Date 객체 - 속성/동작

• 2023년 8월 4일 출력

• method : 종류
• Date : 객체
• getDate() : 메서드
• : number : 리턴 파일

※즉, 데이터 객체에있는 데이터 메서드를 쓰면 number라는 리턴이 된다.

*UTC : 협정 세계시 (한국 기준으로 쓰려면 UTC가 없는 명령어 사용)

document.write( today.getFullYear() + "년");
document.write( today.getMonth()+1 + "월");
document.write( today.getDate() + "일");

• get : 가져오다
• set : 만든다, 설정/지정한다

today.setFullYear(2000);
today.setFullYear(today.getFullYear() + "년");

 

• 요일 출력

//요일 출력 (0(일)-6(토))
if(today.getDay() == 5) {
    document.write("금요일 <br>");
}

⇒ 지정해줌. 필요할 때마다 쓰고 싶다!!

⇒ 요일 정보를 숫자 → 문자 변경하는 기능 구현

• 요일 정보를 숫자 → 문자 변경하는 기능 구현

function changeDay(day){
	var result = "";
	switch(day){
	  case 0:
	    result="일요일";
	    break;
	  case 1:
	    result="월요일";
	    break;
	  case 2:
	    result="화요일";
	    break;
	  case 3:
	    result="수요일";
	    break;
	  case 4:
	    result="목요일";
	    break;
	  case 5:
	    result="금요일";
	    break;
	  case 6:
	    result="토요일";
	    break;
	  default:
	    result="요일정보 아님!"  
		}

document.write("@@"+result+"@@<br>");
}
changeDay(today.getDay());

⇒함수로 만들어 놓으면 필요할 때마다 함수를 호출하면 편하게 쓸 수 있음

⇒ 모듈화! (기능마다 조그맣게 만들어서 필요할 때마다 가져다 와서 쓰는 것)

• 카타르 월드컵 (2022/11/20) 개막일은 무슨요일인가요?

var worldcup2022 = new Date("2022/11/20");

document.write("<hr> 2022 카타르 월드컵 개막일의 요일 : ");
changeDay(worldcup2022.getDay());

• 디데이 계산기 (디데이 = 특정날짜 - 오늘날짜)
  • 1s = 1000ms 1m = 60 * 1000ms 1h = 60 * 60 * 1000ms 1d = 24 * 60 * 60 * 1000ms

// 여름휴가까지 남은 일자 계산하기
// " 여름휴가 D-00일! "
today = new Date();
var d_day = new Date("2023/8/10");

document.write(d_day - today + "<hr>");
document.write("여름휴가 D-" + Math.ceil((d_day - today)/(24 * 60 * 60 * 1000)) + "!! <hr>");

 

배열(Array)

• 변수 -> 데이터를 1개만 저장
• 배열 -> 데이터를 여러개 저장
• 배열 객체-배열을 만든다 => 변수를 한번에 여러개 만든다라는 뜻-일반적으로 1,4번 형식이 많이 사용 됨
• -배열의 크기 지정은 의미가 없다./크기 지정 안해도됨 (<-> 자바는 크기 지정을 함)
• var arr = new Array(); // 배열생성 - 기본 var arr2 = new Array(10); // 10칸짜리 배열 생성 //배열이 만들어지고 한칸에 하나씩 들어가있음 -> 연속된 공간에 메모리가 할당된다. var arr3 = new Array(1,2,3,4,5,6); // 특정 요소가 들어있는 배열 생성 var arr4 = [1,2,3,4,5,6]; // 특정 요소가 들어있는 배열 생성
• -배열의 공간이 비워져있음

배열 정보 저장

<기본문법>

배열명[위치(index)] = 값;

arr[0] = 10;
document.write("배열의 요소 출력: " +arr[0]+"<br>");

arr[1] = 20;
        arr[2] = 30;
        arr[3] = 40;
        arr[4] = 50;
        document.write("배열의 요소 출력: " +arr[1]+"<br>");
        document.write("배열의 요소 출력: " +arr[2]+"<br>");
        document.write("배열의 요소 출력: " +arr[3]+"<br>");
        document.write("배열의 요소 출력: " +arr[4]+"<br>");

⇒ 3줄로 줄이면

for(let i=0; i<5; i++) {
    document.write("배열의 요소 출력: " +arr[i]+"<br>");
}

⇒ 결과값 똑같음

만약(let i=1; i<=5; i++)로 한다면

for(let i=1; i<=5; i++) {
    document.write("배열의 요소 출력: " +arr[i]+"<br>");
}

1-20/2-30/3-40/4-50

arr[1] = 20;
        arr[2] = 30;
        arr[3] = 40;
        arr[4] = 50;
        document.write("배열의 요소 출력: " +arr[1]+"<br>");
        document.write("배열의 요소 출력: " +arr[2]+"<br>");
        document.write("배열의 요소 출력: " +arr[3]+"<br>");
        document.write("배열의 요소 출력: " +arr[4]+"<br>");

⇒ 3줄로 줄이면

for(let i=0; i<5; i++) {
    document.write("배열의 요소 출력: " +arr[i]+"<br>");
}

⇒ 결과값 똑같음

만약(let i=1; i<=5; i++)로 한다면

for(let i=1; i<=5; i++) {
    document.write("배열의 요소 출력: " +arr[i]+"<br>");
}

변수 선언 후 초기화하지 않아서 undefined가 출력됨

⇒ 조건문과 배열을 함께 사용하고 싶으면, ‘=’기호를 뺀다

• arr.length
• -참조변수.속성(변수)

for(let i=0; i<arr.length; i++) { //배열의 길이 : 배열 안에 몇개 들어있냐
    //배열의 요소를 처음부터 끝까지 사용할 수 있게 만든다.
    document.write("배열의 요소 출력: " +arr[i]+"<br>");
}

• 배열 arr 들어있는 모든 요소의 합 출력

var sum = 0;
for(var i=0; i<arr.length; i++) { 
    sum += arr[i];
}
document.write(" 배열의 합: " +sum+"<br>");

let numArr = [6,4,7,2,8,9,3,1];
document.write( numArr );
document.write( "<hr>" );

 

• 배열 연결할때 연결문자를 실행

let numArr = [6,4,7,2,8,9,3,1];
document.write( numArr.join("@") ); // 배열 연결할때 연결문자를 실행할 수 있다.

• 오름차순, 내림차순 정렬

// 오름차순
let numArr = [6,4,7,2,8,9,3,1];
document.write( numArr.sort() );

// 내림차순
let numArr = [6,4,7,2,8,9,3,1];
document.write( numArr.reverse() );

• numArr 배열 안에 들어있는 홀수 개수 출력

let numArr = [6,4,7,2,8,9,3,1];

let cnt = 0;
for(let i=0; i<numArr.length; i++) {
    if(numArr[i] %2 != 0) { // 배열의 요소를 통해 접근해야하니 [i] 붙임
    cnt++;
    } 
} 
document.write( "홀수 개수: " +cnt+ "개<br>");

 

문자(String)

• "" / '' 로 저장한 문자 데이터를 저장하는 객체

-문자객체는 배열이다.

-공백도 문자데이터다!

-"Hello" => [H][e][l][l][o] <br> -let str = "Hello"; // 문자형 상수 -let str2 = new String("Hello"); // 문자객체

let str = "Hello";
for(let i=0; i<str.length; i++) {
    document.write(str[i]+"<br>");
}

• Hello -> 특정 문자만 출력

//Hello -> o 문자만 출력
let str = "Hello";
document.write(str[4]);

=> o 출력됨

• 배열의 처음·마지막값 출력

let str = "Hellabcefghijkfo";

//배열의 처음값
document.write(str[0]);

//배열의 마지막값
document.write(str[str.length-1]);
document.write( "<br>" );

• bold · italics

let str3 = "ITWILL Busan";
document.write(str3 + "<hr>" );
document.write(str3.bold() + "<hr>");
document.write(str3.italics() + "<hr>");

• 글자 크기 · 색상 변경

document.write(str3.fontsize(20) + "<hr>");
document.write(str3.fontcolor("red") + "<br>");

//체이닝 기법
document.write(str3.fontsize(20).fontcolor("skyblue") + "<hr>");

• ITWILL Busan의 B출력

document.write( str3[7] );

document.write( str3.charAt(7) );

 

• 문자열 자르기 함수

1. substring(시작, 끝-1) : 시작index ~끝index 앞까지 문자를 자르기
2. slice(시작, 끝-1)
3. substr(시작, 개수)

• 해당주민번호의 성별 출력

let juminNumber = "990101-1231231";
// => 해당주민번호의 성별을 출력
// 7번 index의 정보값에 따라 출력
// 1/3 이면 남성, 2/4면 여성

let genderValue = juminNumber.charAt(7);
if(genderValue == 1 || genderValue==3){
  alert(" 남성 ");
}else if(genderValue == 2 || genderValue==4){
  alert("여성");
}else{
  alert("잘못된 정보 입력!");
}

• indexOf(문자) / lastIndexOf(문자) => 특정문자·단어가 포함되어 있으면 해당 위치 인덱스 리턴 없는경우 -1 리턴

// let str3 = "ITWILL Busan";
document.write( str3.indexOf("L") ); //4  index3번에 "L"가 있느냐 없느냐
document.write( str3.lastIndexOf("L") ); //5 
// => 차이가 나는 이유: indexOf : 왼쪽에서 제일 먼저 만나는 대상
// lastIndexOf : 제일 마지막에 만나는 대상 or 오른쪽에서 lastIndexOf

• split("구분자")

=> 문자데이터를 분리해서 배열에 저장

document.write(str3.split(""));

document.write(str3.split(" "));

document.write(str3.split(" ")[1]);

• "당첨 : 010-****-1234" 로 바꿔주기

let phoneNumber = "010-1234-1234";

document.write("당첨 : "+ phoneNumber.split("-")[0]+ "-****-" + phoneNumber.split("-")[2]+"<br>");

• 이메일 주소 검증하는 코드
  1. 주소에 @가 포함 되었는지 확인
  2. [".co.kr",".com","net", ".or.kr", ".go.kr"] => 문자들이 포함되어 있을때만 정상적인 이메일

  <form>
    <input type="email">
  </form>
  

  var checkEmail = "010829miI@itwillbs.co.kr";
  if(checkEmail.indexOf("@") > 5) { // 특정 위치에 index가 존재한다.
    // id의 최소길이, @의 유무
    alert("1단계 OK");
  }
  if(checkEmail.indexOf(".co.kr") != -1) {
    alert("2단계 OK");
  }
  var emailArr = [".co.kr",".com",".net", ".or.kr", ".go.kr"];
  
  for(let i=0; i<emailArr.length; i++) {
    if(checkEmail.indexOf( emailArr[i] ) != -1) {
      alert("2단계 OK");
      break;
    }
  }
  

숫자 객체(Number) / 수학 객체(Math)

document.write(Number.MAX_VALUE);
document.write(Number.POSITIVE_INFINITY);

document.write(Number.NaN); // 숫자가 아닌 형태들이 나타났을때 보임

document.write( Math.PI );
document.write( Math.floor() ); // 올림
document.write( Math.ceil() );  // 버림