종우의 컴퓨터 공간

예제 // Person constructor function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Greeting in prototype Person.prototype.greeting = function() { return `Hello there ${this.firstName} ${this.lastName}`; } // Create Person const person1 = new Person('John', 'Doe'); console.log(person1); // Customer constructor function Customer(firstName, lastName, phone, m..

프로토타입 이란? - 자바스크립트는 프로토타입 기반 언어이다. - 자바스크립트에서 기본 데이터 타입(string, number, boolean, null, undefined)을 제외한 모든 것은 객체이다. - 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만든다. - 원형이라는 뜻으로 프로토타입 객체와 프로토타입 링크로 나눌 수 있다. - protytype 속성은 함수만 가지고 있던 것과 달리 [[Protytype]] 속성은 모든 객체가 빠짐없이 가지고 있는 속성이다. 그 말은 함수로 통해 만들어진 객체만 프로토타입 객체가 존재하는 것이고 함수가 아닌 걸로 만든 객체는 프로토타입 객체가 존재하지 않는다. 다만 new를 통해서 기존에 존재하던 함수로 인해 복사한..

String const name1 = 'Jeff'; const name2 = new String('Jeff'); // String as an object name2.foo = 'bar'; // can add property since it is an object console.log(name1); console.log(name2); console.log(typeof name1); // name1: string console.log(typeof name2); // name2: object - Object이기 때문에 property를 추가할 수 있다. Number const num1 = 5; const num2 = new Number(5); console.log(num1); console.log(num2);..

'this' keyword - when 'this' is used inside of a constructor, it refers to the current object - when 'this' is used in global scope, it pertains the 'window' object 예제 function Person(name, dob) { this.name = name; this.birthday = new Date(dob); this.calculateAge = function() { const diff = Date.now() - this.birthday.getTime(); const ageDate = new Date(diff); console.log(ageDate.getFullYear()); ..

set storage item - localStorage.setItem('', ''); - sessionStorage.setItem('', ''); get from storage - const itemName = localStorage.getItem(''); - const itemName = sessionStorage.getItem(''); remove from storage - localStorage.removeItem(''); - sessionStorage.removeItem(''); clear storage - localStorage.clear(); - sessionStorage.clear(); ★예제 document.querySelector('form').addEventListener('submi..

Event Bubbling - 하위에서 상위 요소로의 이벤트 전파 방식이다. - 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 말한다. - 이벤트 버블링이 일어나는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다. - 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파한다. - 주의해야 할 점은 각 태그마다 이벤트가 등록되어 있기 때문에 상위 요소로 이벤트가 전달되는 것을 확인할 수 있다. 만약 이벤트가 특정 태그에만 달려있다면 이벤트 버블링이 되지 않을 것이다. var divs = document.querySelectorAll('div'); divs.forEach(functi..

keydown - .addEventListener('keydown', ); keyup - .addEventListener('keyup', ); keypress - .addEventListener('keypress', ); focus - .addEventListener('focus', ); - fires off when the input field is clicked blur - .addEventListener('blur', ); - fires off when we click out of input field cut - .addEventListener('cut', ); - fires off when we cut the text from input field - ctrl + x paste - .addEven..

click - .addEventListener('click', ); double click - .addEventListener('dblclick', ); mousedown - .addEventListener('mousedown', ); - 왼쪽 마우스 누르고 있는 상태 유지할 때 mouseup - .addEventListener('mouseup', ); - 왼쪽 마우스 누르고 있다가 땔 때 mouseenter - .addEventListener('mouseenter', ); mouseleave - .addEventListener('mouseleave', ); mouseover - .addEventListener('mouseover', ); - even triggers when moving into oth..