[JavaScript] 5. 객체

⛏️/JavaScript

[JavaScript] 5. 객체

defyuil 2023. 8. 4. 11:48

객체(Object): 눈앞에 있는 모든 대상

객체 추상화: 내가 코드로 표현하려고 하는 대상을 선택해서 속성, 동작들을 정의

ex) '모니터'

속성: 브랜드, 모델명, 크기, 색상, 가격, 화소, ...

동작: 전원 on/off, 명도, 음량 조절,...

객체 생성(인스턴스): 추상화했던 객체 정보를 실제 구현

*인스턴스화 -> 객체를 메모리에 올리는 작업

var참조 변수(레퍼런스) = new 객체명();

// 객체 생성

// var obj = new Object();

var TV = new Object();

// TV객체의 속성 : 크기,색상,가격

TV.size = 100;

TV.color = "black";

TV.price = 200;

//TV.power = "off";

TV.power = false; // 티비꺼짐

TV.ch = 10;

document.write(" 생성한 티비의 정보 출력 <hr>");

TV.showTvInfo = function(){

document.write(" 티비 정보(size) "+TV.size+"인치 <br>");

document.write(" 티비 정보(color) "+TV.color+" <br>");

document.write(" 티비 정보(price) "+TV.price+"원 <hr>");

document.write(" 티비 정보(power) "+(TV.power? "ON":"OFF")+"<hr>");

document.write(" 티비 정보(ch) "+TV.ch+"번<hr>");

}

TV.showTvInfo();

// TV객체의 동작 : 전원on/off,ch변경,음량조절

// + 티비정보를 조회하는 동작

// 전원on/off - 한번 실행 off/on

TV.onOff = function(){

//티비 파워정보 가져오기 (true/false)

// 한번 누르면 on -> off

if(TV.power){

// 전원on상태 -> off로 변경

TV.power = false;

document.write(" 티비 꺼짐 ");

}

// 한번 누르면 off -> on

else{

// 전원off상태 -> on으로 변경

TV.power = true;

document.write(" 티비 켜짐 ");

}

TV.ch = 10;

}

TV.onOff();

// ch변경 동작

// 1) 티비가 켜짐상태 필요(꺼져있을때는 동작x)

// 2) 기본 ch 10 번 (티비 켜질때)

// 3) chUP()/chDown() 각각 ch을 1씩 증가,감소

// (+ch정보 출력)

// 4) chNum() - 번호를 직접 입력받아서 변경

// (+ch정보 출력)

TV.chUP = function(){

if(TV.power){

TV.ch++;

document.write(TV.ch+"번<br>");

}

TV.chDown = function(){

if(TV.power){

TV.ch--;

document.write(TV.ch+"번<br>");

}

TV.chNum = function(number){

if(TV.power){

TV.ch=number;

document.write(TV.ch+"번<br>");

}

document.write("<hr>");

TV.showTvInfo();

TV.chUP();

TV.onOff();

TV.chUP();

TV.chDown();

TV.showTvInfo();

TV.onOff();

document.write("<hr>");

자바 스크립트의 객체 종류

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

2. 브라우저 객체 모델(BOM): 브라우저에 내장되어 있는 객체

3. 문서 객체 모델(DOM): HTML 문서 구조에 포함된 객체

[내장객체 - 날짜(Date)]

// 날짜(Date)객체 생성

var today = new Date();

document.write(today+"<br>");

var day2 = new Date(2023,7,4); // 년, 월-1, 일

// 월: 0~11까지 표시 (1~12)

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일

document.write( today.getFullYear()+"년");

document.write( today.getMonth()+1+"월");

document.write( today.getDate() +"일");

// 요일 출력 (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);

}

changeDay(today.getDay());

today.setFullYear(2000);

document.write( today.getFullYear() +"년");

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

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

document.write("개막일의 요일" +worldcup2022.getDay());

document.write("<hr>개막일의 요일 : ");

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>");

</script>

[내장 객체 - 배열(Array]

변수 -> 데이터를 1개만 저장

배열 -> 데이터를 여러 개 저장

// 배열 객체

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]; // 특정 요소가 들어 있는 배열 생성

// 배열 정보 저장

// arr = 10;(X)

// arr[위치(index)] = 값;

arr[0] = 10;

document.write("배열의 요소 출력 :"+arr[0]+"<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>");

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

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

}

arr.length(길이) -> 참조변수.속성(변수)

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

var sum = 0;

for(let 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>" );

document.write( numArr.join("@") );

document.write( "<hr>" );

document.write( numArr.sort() );

document.write( "<hr>" );

// 배열을 내림차순 정열 (9~1)

document.write( numArr.reverse() );

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

let cnt = 0;

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

// 배열의 요소가 홀수인가를 체크

if( numArr[i]%2 != 0 ){

cnt++;

}

document.write("홀수 개수: "+cnt+"개 <hr>");

[내장객체 - 문자(String)]

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

문자 객체는 배열이다

"Hello" -> [H][e][l][l][o]

let str = "Hello"; -> 문자형 상수

let str2 = new String("Hello"); -> 문자 객체

let str = "Hello";

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

document.write(str[i]+"<br>");

}

</script>

// hello - > 문자만 출력

// document.write(str[4]);

document.write(str[str.length-1]);

// 배열의 처음값

document.write(str[0]);

document.write("<hr>");

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("blue")+"<hr>");

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

// -> 체이닝 기법

// ITWILL Busan의 B출력

document.write( str3[7] );

document.write( "<hr>" );

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

document.write( "<hr>" );

// 문자열 자르기 함수

// 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("<hr>");

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

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

document.write("<hr>");

let phoneNumber = "010-1234-1234";

// => "당첨 : 010-****-1234" 로 바꿔주기

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

// 이메일 주소 검증하는 코드

// 1. 주소에 @가 포함 되었는지 확인

// 2. [".co.kr",".com",".net", ".or.kr", ".go.kr"]

// => 문자들이 포함되어 있을때만 정상적인 이메일

var checkEmail = "010829miI@gmil.com";

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("3단계 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() ); // 버림

</script>

<form>

</form>