- Constructor constructor(생성자)를 사용하면 인스턴스화된 객체에서 다른 메소드를 호출하기 전에수행해야 하는 사용자 지정 초기화를 제공할 수 있다. Class를 new를 붙여서 (new User("John")) 인스턴스 객체로 생성하면넘겨받은 인수와 함께 constructor가 먼저 실행된다.이때 넘겨받은 인수인 John이 this.name에 할당된다.class User { constructor(name) { // 인스턴스 객체를 생성하면 constructor이 먼저 호출된다. this.name = name; } sayHi() { alert(this.name); }}let user = new User("John");user.sayHi();  - 자바스크립트에서 ..

- Sub Class(Inheritance) 부모 Class를 자식 Class에 확장할 수 있다.부모 Class에 있던 기능을 토대로 자식 Class를 만들 수 있는 것이다.=> 확장하기 위하여 extends 키워드를 사용하면 된다.

ES6에 나온 Class를 사용하여 더 쉽게 OOP를 구현할 수 있다.이것은 문법을 OOP 방식을 사용하지만 내부에서 prototype을 사용하여 작동한다.  생성자 함수로 객체를 만들었을 때는생성자 함수에 넣어둔 메소드가 인스턴스 객체 자체에 포함되어 있었지만,Class의 경우 Class 안에 넣어둔 메소드가 바로 프로토타입에 들어가게 된다. class Person { constructor(name, email, birthday) { this.name = name; this.email = email; this.birthday = new Date(birthday); } introduce() { return `Hello my name is ${this.name}`; }}cons..

let user = { name: "John", age : 45}console.log(user.name);// Johnconsole.log(user.hasOwnProperty("email"));// false - hasOwnProperty는 어디서 왔나요? 현재 user 객체 변수에는 두 개의 속성(name, age)만 있는데hasOwnProperty는 어디서 나온 것일까?(객체 내부에는 메소드가 없다.) user 객체 변수를 콘솔로 찍어보면, [[Prototype]] : Object라는 것을 확인할 수 있다.아래를 내리다보면, hasOwnProperty라는 메소드를 찾을 수 있다.그리고 우리는 이것을 가져다 사용할 수 있다.=> 모든 객체는 global Object prototype을 가지며, 이것..

- OOP(Object-oriented-programming)이란? 객체 지향 프로그래밍(OOP)은 Java 및 C++을 비롯한 많은 프로그래밍 언어의 기본이 되는프로그래밍 패러다임이다.객체 지향 프로그래밍은 여러 개의 독립된 단위 "객체"들의 모임으로 컴퓨터 프로그램을 파악한다.=> 객체 지향 프로그래밍은 객체들의 모임이다. 객체 지향 프로그래밍이 나오기 이전에는명령어의 목록을 나열(절차 지향)하는 기능 구현을 목적으로 작성했지만이렇게 코드를 길게 작성하다 보면 매우 알아보기 힘든 복잡한 코드가 만들어진다.그래서 하나의 문제를 해결을 위한 독립된 단위인 객체로 만들었으며,이 객체로 인해 알아보기 쉽고 재사용성이 높아졌다.  내부에 있는 것들을 모두 이해하지 못하여도사용하기를 원하는 이름의 메소드만 알면..

- Event 종류    1. Mouse Event  const submitBtn = document.querySelector(".submit-btn");const form = document.querySelector("form");const title = document.querySelector("h2");// EVENTsubmitBtn.addEventListener("click", handleEvent);submitBtn.addEventListener("dblclick", handleEvent);submitBtn.addEventListener("mousedown", handleEvent); // 요소를 클릭했을 때submitBtn.addEventListener("mouseup", handleEvent..

Q. 어떤 버튼을 클릭했을 때 어떤 액션이 일어나게 하려면 어떻게 해야 할까?  - Event Listener :마우스를 이용해서 버튼을 클릭할 때는 클릭 "이벤트"가 발생한다.이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수를 호출하는데, 그 함수가 바로 이벤트 리스너이다.  - addEventListener() :위에서 말한 것처럼 어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는이벤트 리스너를 해당 객체나 요소에 등록해줘야 한다.이벤트 리스너 등록 방법을 살펴보도록 하자. 1. 자바스크립트 코드에서 프로퍼티로 등록.window.onload = function () { // 문서가 load 될 때 이 함수를 실행 let text = document.getElementById("te..

- Window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다.또한 window는 브라우저의 객체이지 자바스크립트의 객체가 아니다. 이 window 객체를 이용해서1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수 있다.2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다.   - Document Object Window 객체가 브라우저 창이라고 하면document 객체는 브라우저 내에서 콘텐츠를 보여주는 웹 페이지 자체라고 할 수 있다.  이제부터 DOM 객체를 자바스크립트를 사용하여 삭제하거나 업데이트 해보도록 하겠다.아래의 코드를 사용할 것이다.  M..

- HTML을 이용한 화면에 UI 표현하기 브라우저에서 UI를 볼 수 있는 것은 이 HTML을 분석해서 보여줄 수 있다.이 HTML은 요소(Element)로 구성되어 있다.   - DOM이란? (Document Object Model) Window 객체 안에 Document 객체가 있다. => window.documentwindow 자체를 브라우저에서 제공하는 것이므로 window.document도 브라우저에서 제공하는 것이다.(자바스크립트 코드 안에 있지만 자바스크립트 코드가 아니다) DOM(문서 객체 모델)은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서웹 브라우저가 HTML 페이지를 인식하게 해준다. 또한 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔브라우저가 트리구조로 만든 객..