[JS] 객체의 개념과 객체를 활용한 기능이 있는 TV 프로그램 만들기

JS에서의 객체란?

JS에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가르킨다.

객체 추상화

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

• 모니터
• 속성 : 브랜드, 모델명, 크기, 색상, 가격 , 화소, ... (정의하기 나름)
• 동작 : 전원 on/off, 명도, 음량조절, ... (정의하기 나름)

인스턴스화

⇒ 객체를 메모리에 올리는 작업

★**[모든 프로그램은 주기억장치(RAM)에서만 실행된다]**

변수 vs 객체

변수 : 데이터를 저장하는 것

책상에 책을 꽂음, 책을 꺼내서 건네줌

함수 : 실행문(코드)을 저장하는 것

객체 : 데이터, 실행문(코드)을 둘 다 저장하는것

사물함 할당(책, 칫솔)

참조변수 (레퍼런스) : 변수는 저장하는 변수와 같은 메모리를 참조하게 된다.

사물함 번호 알려줌 → 실행할 수 있도록 해줌

객체 생성(인스턴스)

추상화 했던 객체정보를 실제 구현

var 참조변수 = new 객체명();

참조변수(reference)

<h1> 객체(Object) : 눈앞에 있는 모든 대상 </h1>
<p>
    객체 추상화 : 내가 코드로 표현하려고 하는 대상을 선택해서 속성, 동작들을 정의 <br>
        ex) '모니터' <br>
            속성 : 브랜드, 모델명, 크기, 색상, 가격 , 화소, ... (정의하기 나름) <br>
            동작 : 전원 on/off, 명도, 음량조절, ... (정의하기 나름) <br>
        객체 생성(인스턴스) : 추상화했던 객체정보를 실제 구현

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

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

객체 생성

기본문법

var obj = new Object();

JS에서의 객체란?

JS에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가르킨다.

객체 추상화

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

• 모니터
• 속성 : 브랜드, 모델명, 크기, 색상, 가격 , 화소, ... (정의하기 나름)
• 동작 : 전원 on/off, 명도, 음량조절, ... (정의하기 나름)

인스턴스화

⇒ 객체를 메모리에 올리는 작업

★**[모든 프로그램은 주기억장치(RAM)에서만 실행된다]**

변수 vs 객체

변수 : 데이터를 저장하는 것

책상에 책을 꽂음, 책을 꺼내서 건네줌

함수 : 실행문(코드)을 저장하는 것

객체 : 데이터, 실행문(코드)을 둘 다 저장하는것

사물함 할당(책, 칫솔)

참조변수 (레퍼런스) : 변수는 저장하는 변수와 같은 메모리를 참조하게 된다.

사물함 번호 알려줌 → 실행할 수 있도록 해줌

객체 생성(인스턴스)

추상화 했던 객체정보를 실제 구현

var 참조변수 = new 객체명();

참조변수(reference)

<h1> 객체(Object) : 눈앞에 있는 모든 대상 </h1>
<p>
    객체 추상화 : 내가 코드로 표현하려고 하는 대상을 선택해서 속성, 동작들을 정의 <br>
        ex) '모니터' <br>
            속성 : 브랜드, 모델명, 크기, 색상, 가격 , 화소, ... (정의하기 나름) <br>
            동작 : 전원 on/off, 명도, 음량조절, ... (정의하기 나름) <br>
        객체 생성(인스턴스) : 추상화했던 객체정보를 실제 구현

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

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

객체 생성

기본문법

var obj = new Object();

var TV = new Object(); // TV를 만듦
// => 변수, 대입연산, 객체생성, 함수이면서 생성자(속성, 동작만드는 것)
// TV 객체의 속성 : 크기, 색상, 가격
// TV 객체의 동작 : 전원 on/off, ch변경, 음량조절

1. 변수
2. 대입연산
3. 객체생성
4. 함수이면서 생성자 (속성, 동작만드는 것)

TV.size = 100; // TV'의' size
TV.color = "black";
TV.price = 200;

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

// function showTvInfo() {
//     document.write("TV 정보(size) " +TV.size+ "인치 <br>");
//     document.write("TV 정보(color) " +TV.color+ " <br>");
//     document.write("TV 정보(price) " +TV.price+ "원 <br>");
// }

// showTvInfo();

Tv.showTvInfo = function() {
                    document.write("TV 정보(size) " +TV.size+ "인치 <br>");
                    document.write("TV 정보(color) " +TV.color+ " <br>");
                    document.write("TV 정보(price) " +TV.price+ "원 <br>");
}

showTvInfo();

• TV 객체의 동작 : 전원 on/off, ch변경, 음량조절
• • 티비정보를 조회하는 동작

---

전원 on/off

//전원 on/off - 한번 실행 off/on
TV.onOff = function() {
            // TV 파워정보 가져오기 (true(on) / false(off))
            // 한번 누르면 on -> off 
            if(TV.power) { // tv-on, (조건문에 TV.power==true 안써도됨)
                // 전원 on상태 -> if문에 들어오려면 조건문이 참이어야함(TV.power==true)
                // => 전원 on -> off : NOT 연산자 사용
                TV.power = false;
                document.write("TV 꺼짐");
            } else { // 한번 누르면 off -> on
                // => 전원 off -> on : NOT 연산자 사용
                TV.power = true;
                document.write("TV 켜짐");
            }           
        }
TV.onOff();

 

 

//전원 on/off - 한번 실행 off/on
TV.onOff = function() {
            // TV 파워정보 가져오기 (true(on) / false(off))
            // 한번 누르면 on -> off 
            if(TV.power) { // tv-on, (조건문에 TV.power==true 안써도됨)
                // 전원 on상태 -> if문에 들어오려면 조건문이 참이어야함(TV.power==true)
                // => 전원 on -> off : NOT 연산자 사용
                TV.power = false;
                document.write("TV 꺼짐");
            } else { // 한번 누르면 off -> on
                // => 전원 off -> on : NOT 연산자 사용
                TV.power = true;
                document.write("TV 켜짐");
            }           
        }
TV.onOff();
TV.onOff();

 

 

ch 변경 동작

1. TV가 켜짐상태 필요 (꺼져있을때는 동작x)
2. 기본 ch 10번 (TV 켜질때) — 껐다 켜면 무조건 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>");
document.write("<hr>");
document.write("<hr>");
TV.showTvInfo();

TV.chUP();
TV.onOff();
TV.chUP();
TV.chUP();
TV.chDown();
TV.showTvInfo();
TV.onOff();

document.write("<hr>");