ITWILL : Object객체 전체개념, tv채널객체함수, new를 쓰고 안쓰고의 차이

ITWILL학원 : 8강 JS기초 BY 정규태강사

1.객체 Object

1. 정의

자바스크립트는 객체기반의 언어
객체는 기능, 속성을 포함하고 있는 것
추상화된 객체를 사용할때 속성은 변수를 사용해서 표현하고 기능은 함수(매서드)를 사용해서 표현한다
자바스트립트에서는 객체를 직접 만들어쓰지않고 만들어진 객체를 활용한다
하지만 자바는 자주 직접 만들어서 사용한다

let phone = new Object();  //여기서 phone은 참조변수
phone.모델명 = "아이폰"
phone.on(); //전원켜는 기능 실행

위의 phone을 참조변수라고 한다

2. 객체종류

• 내장객체
  • 자바스크립트엔진에 포함되어있는 객체
  • String : 문자를 처리하는 객체
  • Date : 날짜를 처리하는 객체
  • Array : 배열을 처리하는 객체
  • Math : 수학을 처리하는 객체
  • 등등

• 브라우저 객체모델(BOM : Browser Object Model)
  • 브라우저에 계층적으로 내장되어 있는 객체
  • 즉 단계가 있는 객체
  • window
  • screen
  • location
  • history
  • navigator
  • document
  • 등등

• 문서 객체 모델(DOM : Document Object Model)
  • HTML 테그의 문서구조 + CSS
  • IE8이하의 버전에서 호환성이 떨어지기에 잘 안쓰게 된다 -> 대신 jQuery문서객체모델을 사용

2. 내장객체

let 참조변수 = new 생성변수();

new : 객체(instance)를 생성하는 연산자이다 -> 메모리에 올려서 사용할 수 있도록 준비

3. tv 채널up/down 함수만들기

tv 채널 up과 down이 되는 함수를 만들어보자
채널은 1부터 500까지 있다.

function chUp(){
	if(tv.ch >= 1 && tv.ch < 500){
		tv.ch ++;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else if(tv.ch == 500){
		tv.ch = 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else{
		tv.ch += 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}
}
}

실행시마다 채널이 다운되는 함수는 아래와 같다

function chDown(){
	if(tv.ch == 0){
		tv.ch = 500;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else if(tv.ch == 1){
		tv.ch = 500
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else{
		tv.ch -= 1;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}
}

tv.ch가 499일때 두 함수를 호출해보면

chUp() // 499 -up-> 500
chUp() //500 -up->501 ->1
chUp() //1 -up->2
chDown() // 2 -down->1
chDown() // 1 -down->500
chDown()  // 500 -down->499
chDown()  // 500 -down->499

4. new 를 쓰고 안쓰고의 차이

new 연산자는 생성자함수이다.
생성자란 객체를 생성할때 초기화하는 것이다.

new를 쓰고 안쓰고의 차이가 뭘까? => 사용법의 차이가 있다(변수에 담아서 사용유무)

1. 객체를 생성할때 new 연산(생성자함수)를 해야하는 객체

   • 날짜객체 : Date()
   • 변수를 생성해서 객체를 담아서 사용

     let day = new Date(); //변수에 담아서 사용
     
     day.속성 //이렇게 사용해야함

2. new연산 없이 사용가능한 객체

   • 수학 : Math 객체 => Math.floor(버림), Math.round(반올림), Math.ceil(올림), Math.max(여러값비교해서 최대값), Math.min(여러값비교해서 최소값), Math.abs(절대값), Math.random(0부터 1사이에 있는 실수를 랜덤하게 출력)

     • 가장 자주 사용하는 것은 random이다
     • Math.floor(Math.random() *10)로 0부터 10까지의 랜덤양수를 출력한다

   • 숫자 : Number 객체

   • 문자 : String 객체

   • 배열 : Array 객체

   • 바로 사용가능

     Math.floor(); //변수에 담지않아도 바로 사용가능