🔥 [UIUX] 0113 JAVASCRIPT Coding, 코딩 초급 7

✏️ 2025. 1월 13일 / javascript 초급 7

👻 객체에 대해 알아봅시다
자바스크립트는 객체 기반 프로그래밍 언어를 말합니다.
즉, 객체 지향 언어라고 합니다.
객체를 구성하는 요소로는 속성(property)과 기능(method)로 이루어져 있습니다.

      [기본형]
      객체.속성명 = 값;
      : 특정 객체 속성의 값을 바꾸고 싶을 때 사용합니다. 
      객체.속성명;
      : 특정 객체에 할당되어 있는 속성값을 알고 싶을 때 사용합니다.
      객체.메서드();
      : 특정 객체의 기능을 실행시킬 때 사용합니다.

🍀 객체의 종류에 대해 알아봅시다
자바스크립트의 객체는 크게 내장객체, 브라우저 객체모델(BOM, Browser Object Model),
문서 객체(DOM, Document Object Model)가 있습니다.
내장 객체란, 자바스크립트 엔진 안에 내장되어 필요한 경우에 생성하여 사용할 수 있습니다. (꺼내쓰는 것과 같습니다.)
내장 객체의 종류로는 날짜 객체, 문자 객체, 배열 객체, 수학 객체가 있습니다.
브라우저 객체란, 말 그대로 브라우저를 의미합니다.
브라우저에 계층 구조로 내장되어 있습니다.
브라우저 객체의 종류로는 window객체, location객체, screen객체, history객체, navigator객체가 있습니다.
문서 객체란, 말 그대로 html 문서 구조를 말합니다.
html 태그는 최상위 객체로 안쪽에 다양한 하위 객체들을 포함할 수 있습니다.
하지만 자바스크립트의 문서 객체는 브라우저간의 호환성이 낮다는 단점이 있어,
jQuery라는 언어가 개발 되었습니다.
현재는 ES6버전으로 자바스크립트의 호환성을 높인 버전으로 업데이트 되어,
다양한 속성과 기능을 이용해 태그들을 제어할 수 있습니다.

✨ 내장 객체에 대해 알아봅시다.
내장 객체(built-in object)는 자바스크립트 엔진 안에 내장된 객체를 말하며,
필요한 경우 객체를 생성하여 사용할 수 있습니다.
내장 객체를 생성할 때에는 new라는 키워드를 이용하여 생성할 수 있습니다.
★ 모든 객체는 변수 안에 선언해야 합니다.

      [기본형]
      1. var 변수 = new object();
      변수.속성1 = 값;
      변수.함수(메서드) = 함수(){코드}
      -----------------------------------------------------------------------------
      object = 생성함수라는 뜻으로,
      커스텀하여 만들 객체를 선언할 때 사용합니다.
      ★
      2. var 변수 = {
        속성명1 : 값1,
        속성명2 : 값2,
        속성명3 : 값3,
        함수명 : 함수(){}
        }
      -----------------------------------------------------------------------------
      1번 기본형의 축약형으로, new object()가 곧 {}이다.
      {}중괄호 안에 속성과 메서드를 한꺼번에 선언하여 쓸 수 있습니다.

    <script>
      // 새로운 tv 객체 생성
      var tv = new Object(); // = {}
      // tv 객체에 color 속성과 price 속성을 추가
      tv.color = "white";
      tv.price = 30000;
      // tv 객체에 info 메서드를 추가
      tv.info = function () {
        //this 키워드는 해당 객체. 즉, tv 객체를 가리킵니다.
        document.write("tv색상 : " + this.color, "<br/>");
        document.write("tv가격 : " + this.price, "<br/>");
      };
      document.write("<h2>tv 객체의 info 메서드 호출</h2>");
      tv.info();
      //새로운 car 객체 생성
      var car = {
        color: "black",
        price: "500000",
        info: function () {
          //this 키워드는 해당 객체. 즉, car 객체를 가리킵니다.
          document.write("car 색상 : " + this.color, "<br/>");
          document.write("car 가격 : " + this.price, "<br/>");
        },
      };
      document.write("<h2>car 객체의 info 메서드 호출</h2>");
      car.info();
    </script>

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)