6 March 2022 / FRONTEND

자바스크립트_03

이벤트 처리

이벤트 소스 : 이벤트를 발생시키는 요소들을 말한다. - button, image, window, text, select 등
이벤트 : 무엇인가를 했을 경우 - click, focus, blue, load 등
이벤트처리(핸들러) : 이벤트에 대해서 어떤 처리를 할 것인지 구현한다. : OnClick, OnFocus, OnBlue, OnLoad 등

객체

내장객체 : 브라우저의 자바스크립트 엔진에 내장되어있는 객체이다. - Window, Document, Location, Array, Stirng, Date, Math 등 다양한 내장 객체가 매우 많이 있다
사용자 정의 객체 : 사용자가 객체를 정의해서 사용 객체를 따로 생성하지 않아도 자동으로 객체가 생성되어 제공되는 객체를 말한다. 대표적 예시로 Window 객체, Document 객체가 있다. Window 객체는 생략가능하다.

객체 생성과 사용에 대한 실습이다. 전체 코드는 다음과 같다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <script>
    var emptyObj = {};
    console.log(emptyObj);


    var book = {
      title:"자바",
      price:15000,
      setPrice:function(price){
        this.price = price;
      },
      printBook:function(){
        console.log(this.title + ", " + this.price);
      }
    }
    book.setPrice(5000);
    book.printBook();
    console.log(book);

    console.log("\n------------------------");

    // 2. Object() 생성자 함수
    var student = new Object();
    student.name = "홍길동";
    student.age = 26;
    student.printStudent = function(){
      console.log(this.name + ", " + this.age);
    }
    student.printStudent();
    // 3-1. 생성자 함수 정의
    function Member(id, pw, name){
      this.id = id;
      this.pw = pw;
      this.name = name;
      this.setName = function(name){
        this.name = name;
      }
      this.printMember = function(){
        console.log(this.id + ", " +this.name);
      }
      this.setPw = setPw; // callback function binding
    }
    function setPw(pw){
      this.pw = pw;
    }

    //3-2. 사용자 정의한 생성자 함수 이용 객체 생성
    var m1 = new Member("user01","pass01","홍길동");
    var m2 = new Member("user02","pass02","강감찬");

    m1.printMember();
    m2.printMember();
  </script>

</head>
<body>

</body>
</html>

FE_00

실행 결과는 다음과 같다.

var book = {
  title:"자바",
  price:15000,
  setPrice:function(price){
    this.price = price;
  },
  printBook:function(){
    console.log(this.title + ", " + this.price);
  }
}

book.setPrice(5000);
book.printBook();
console.log(book);

객체 생성 방법의 첫번째, 객체 리터럴 방식으로 객체를 생성한 것이다. 중괄호{} 안에 key:value를 쉼표로 구분하여 만든다. 메서드같은 경우 key:function(arg){} 방식으로 만들 수 있다.

FE_01

해당 페이지를 열었을 때 F12를 눌러 개발자 도구를 열고, console 부분을 살펴보면 다음과 같은 로그를 볼 수 있다.

// 2. Object() 생성자 함수
var student = new Object();
student.name = "홍길동";
student.age = 26;
student.printStudent = function(){
  console.log(this.name + ", " + this.age);
}

student.printStudent();

두번째로, new Constructor() 방식. 생성자 방식으로 객체를 생성하는 방식이다. 생성자를 통해 객체를 생성하는 방식은 여러가지가 있는데, 이 방법은 new Object()를 이용해 Object객체의 생성자 함수를 호출하여 생성하는 방법이다.

FE_02

prompt(“메시지”, 기본값)
prompt(“메시지”) : 기본값을 지정하지 않는 경우 “”, undefind 중 브라우저에 따라 자동으로 설정

FE_02

같은 위치에 “홍길동, 26” 으로 셍성한 객체의 printStudent 메서드가 정상적으로 작동했다.

// 3-1. 생성자 함수 정의
function Member(id, pw, name){
  this.id = id;
  this.pw = pw;
  this.name = name;
  this.setName = function(name){
    this.name = name;
  }
  this.printMember = function(){
    console.log(this.id + ", " +this.name);
  }
  this.setPw = setPw; // callback function binding
}
function setPw(pw){
  this.pw = pw;
}

//3-2. 사용자 정의한 생성자 함수 이용 객체 생성
var m1 = new Member("user01","pass01","홍길동");
var m2 = new Member("user02","pass02","강감찬");

m1.printMember();
m2.printMember();

위와 같이 직접 생성자 함수를 정의하여(3-1) 객체를 생성할 수도 있다. 정의한 생성자 함수의 규칙대로 객체를 생성(3-2)할 수 있다.

FE_03

홍길동, 강감찬의 정보가 제대로 표시된 것으로 객체가 정상적으로 생성되었고 메서드가 정상 수행되었다는 것을 확인할 수 있다.

자바스크립트_03