🔥 [UIUX] 0124 JAVASCRIPT Coding, 코딩 초급~고급 15

✏️ 2025. 1월 24일 / javascript 초급~고급 15

💖 객체 생성자 함수
내장 객체를 생성할 때에는 이미 자바스크립트 엔진에 내장되어 있는
객체 생성자 함수를 사용하여 객체를 생성합니다.
객체 생성자 함수는 객체를 생성한 후에 그 객체를 반환합니다.
객체 생성자 함수는 일종의 빵틀과 비슷합니다.
객체의 틀을 하나 만들어두고 동일한 형식의 객체를 여러개 찍어내고 싶을 때 사용합니다.

      [기본형]
      function 함수명(매개변수1, 매개변수2...){
        this.속성명 = 값;
        this.함수명 = function(){자바스크립트 코드;}
      }
      -
      let 참조변수(인스턴스네임) = new 함수명();
      ↓
      let 참조변수 = {속성:새 값, 함수명:function(){메서드 내용}}

//객체 생성자 함수
      function CheackWeight(name, height, weight) {
        this.userName = name;
        this.userHeight = height;
        this.userWeight = weight;
        this.minWeight;
        this.maxWeight;
        //사용자의 이름, 키, 몸무게를 나타내는 메서드
        this.getInfo = function () {
          let str = "";
          str += "👧🏻 이름: " + this.userName + "<br/>";
          str += "키: " + this.userHeight + "<br/>";
          str += "몸무게: " + this.userWeight + "<br/>";
          return str;
        };
        //정상몸무게, 표준 오차 몸무게를 구하여 평균 체중인지 아닌지 출력해줍니다.
        this.getResult = function () {
          //정상체중의 최저 몸무게
          this.minWeight = (this.userHeight - 100) * 0.9 - 5;
          //정상체중의 최고 몸무게
          this.maxWeight = (this.userHeight - 100) * 0.9 + 5;
          //사용자이 몸무게 >= 최저몸무게 && 사용자의 몸무게 <= 최고 몸무게
          if (
            this.userWeight >= this.minWeight &&
            this.userWeight <= this.maxWeight
          ) {
            return "정상체중입니다.";
          } else if (this.userWeight < this.minWeight) {
            return "저체중입니다.";
          } else {
            return "과체중입니다." + "<br/>";
          }
        };
      }
      let dotKim = new CheackWeight("김땡땡", 168, 67);
      let dotLee = new CheackWeight("이땡땡", 172, 64);
      console.log(dotKim);
      console.log(dotLee);
      document.write(dotKim.getInfo());
      document.write(dotKim.getResult());
      document.write("---------------------------------------------" + "<br/>");
      document.write(dotLee.getInfo());
      document.write(dotLee.getResult());
      //각 객체마다 메서드를 고유하게 저장하고 있으므로 false
      document.write(dotKim.getResult === dotLee.getResult);

💛 메모리 절약을 위한 프로토타입 사용하기
객체 생성자 함수에서 프로토타입 없이 메서드를 등록하면
해당 객체 생성자 함수로부터 생성된 객체는 모두 동일한 메서드를 고유하게 가지게 됩니다.
즉, 객체가 2개가 생성되면 모체 안에 있는 메서드들을
새롭게 자바스크립트 메모리 공간에 고유하게 또 저장합니다.
이 방법은 메모리의 공간을 낭비하게 되고, 이 메모리를 효율적으로 사용하려면
prototype을 사용하여 메서드를 등록하면 됩니다.
prototype을 등록하는 방법은 모체가 되는 객체 생성자 함수 안에
prototype이라는 키워드를 사용하여 메서드를 등록하면 됩니다.
이렇게 하면 모체로부터 생성된 객체는 메서드를 고유하게 가지지 않고,
필요할때마다 모체에서 꺼내쓸 수 있습니다.

      [기본형]
      function 함수명(매개변수1, 매개변수2...){
      this.속성명 = 값;
      함수명.prototype.메서드명 = function(){
        자바스크립트 코드;
      }
      }
      let 변수명 = new 함수명(인수1, 인수2...);

💜 자바스크립트의 또 다른 여러 내장함수
1. encodeURI() : 문자를 유니코드 값으로 인코딩 합니다. (영문, 숫자, 일부 기호 : ;,/:?@&=+$ 제외)
2. encodeURIComponent() : 문자를 유니코드 값으로 인코딩 합니다.
3. decodeURI() : 유니코드 값을 디코딩하여 다시 문자화 합니다.
4. decodeURIComponent() : 유니코드 값을 디코딩하여 다시 문자화 합니다.
5. parseInt() : 문자열 데이터를 정수형 데이터로 반환합니다. Number()와 비슷합니다.
ex) parseInt("15px") > 15를 반환
ex) parseInt("5.12") > 5를 반환
6. parseFloat() : 문자열 데이터를 실수형 데이터로 반환합니다.
ex) parseFloat("5.12") > 1.12를 반환
ex) parseFloat("65.5%") > 65.5를 반환
7. isNaN() : is not a number의 약자로 숫자가 아닌 문자가 포함되어 있으면 true를 반환합니다.
8. eval() : 문자형 데이터를 따옴표가 없는 자바스크립트 코드로 처리합니다.

⭐ 자바스크립트의 이벤트
대부분의 함수는 사용자가 화면에서 버튼을 클릭하거나
항목을 선택하는 등의 행위를 했을 때 실행됩니다.
이처럼 버튼을 클릭하거나 선택하는 등의 모든 행위를 이벤트라고 합니다.
즉, 브라우저 안에서 사용자가 하는 모든 행위를 곧 이벤트라고 표현합니다.
그리고 이벤트가 발생했을 때 실행하는 함수를 '이벤트 처리기' 또는, '이벤트 핸들러'라고 부릅니다.
⭐ 이벤트의 종류

[마우스 이벤트]
      1. ⭐ click : 사용자가 html 요소를 클릭할 때 이벤트가 발생합니다.
      2. dbclick : 사용자가 html 요소를 더블클릭할 때 이벤트가 발생합니다.
      3. mousedown : 사용자가 html 요소 위에서 마우스 버튼을 누르는 순간 이벤트가 발생합니다.
      4. mouseup : 사용자가 html 요소 위에서 마우스 버튼을 눌렀다 떼는 순간 이벤트가 발생합니다.
      5. ⭐ mousemove : 사용자가 요소 위에서 포인터를 움직일때마다 이벤트가 발생합니다.
      6. ⭐ mouseover : 사용자가 요소 위에 마우스를 올렸을 때 이벤트가 발생합니다.

      [키보드 이벤트]
      1. ⭐ keydown : 사용자가 키보드의 키를 누르는 동안 이벤트가 발생합니다. (한글제외)
                    키보드의 모든 키에 대한 코드 값을 반환하기도 합니다.
      2. keypress : 사용자가 키보드의 키를 누르는 동안 이벤트가 발생합니다.
                    문자키를 제외한 키의 코드 값을 반환합니다.
                    (기능키(f1~f12, ctrl, alt등등...)는 제외)
      3. keyup : 사용자가 키보드의 키를 눌렀다 뗐을 때 이벤트가 발생합니다.

      [문서 로딩 이벤트]
      1. abort : 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트 발생합니다.
      2. ⭐ error : 문서가 정확히 로딩되지 않았을 때 이벤트가 발생합니다.
      3. ⭐ load : 문서가 로딩이 끝나면 이벤트를 처리합니다.
      4. resize : 문서 화면 크기가 바뀌었을 때 이벤트가 발생합니다.
      5. scroll : 문서 화면이 스크롤 되었을 때 이벤트가 발생합니다.
      6. unload : 문서에서 벗어날 때 이벤트가 발생합니다.

      [폼 이벤트]
      1. ⭐ blur : 특정 폼 요소에서 포커스를 잃었을 때 이벤트가 발생합니다. (a태그 포함)
      2. ⭐ change : 목록이나 체크 상태 등이 변경되면 이벤트가 발생합니다.
                      (input, selet, checkbox, textarea 태그에서 사용이 가능합니다.)
      3. focus : 특정 폼 요소에서 포커스가 놓였을 때 이벤트가 발생합니다.
      4. reset : 폼이 리셋되었을 때 이벤트가 발생합니다.
      5. submit : submit 버튼을 클릭했을 때 이벤트가 발생합니다.

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