프로그래밍/JavaScript(JS) (15) 썸네일형 리스트형 자바스크립트(JavaScript) - 커스텀 이벤트(CustomEvent) 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! 자바스크립트에서 DOM을 조작할 때 기본적으로 지원하는 이벤트가 아닌 직접 원하는 때에 이벤트를 발생하고 싶을 때 사용되는 커스텀 이벤트를 알아보겠습니다. 커스텀 이벤트는 원하는 때에 발생시킬 수 있습니다. 또한 해당 이벤트에 대한 정보를 추가할 수도 있습니다. 기본적으로 이벤트를 생성하는법을 알아보겠습니다. 이벤트 생성 이벤트 생성은 Event객체를 통해 만들 수 있습니다. Event 객체는 기본적인 이벤트들의 부모 객체입니다. 클릭이벤트나 마우스 이벤트 같은 것들 모두 Event객체를 상속받고 있습니다. const e = new Event("click"); const ev = new Event("click" {"bubbles":true,"ca.. 자바스크립트(JavaScript) - Promise 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 비동기 작업을 할 때 콜백을 사용합니다. 실행 순서가 보장받아야 할 때는 콜백을 중첩하여 사용하기도 합니다. 콜백을 중첩해서 사용할때 보기가 힘들고 이해가 어려울 때가 있습니다. 이 문제를 해결할 수 있는 방법이 Promise입니다. Promise는 비동기 작업에서의 콜백을 좀 더 간결하게 작성할 수 있게 해 주며 실행 순서를 보장받을 수 있도록 할 수도 있습니다. 프로미스(Promise) Promise는 peding, fulfilled, rejected 3개의 상태로 구분됩니다. peding 상태는 아직 Promise 작업이 끝나지 않은 상태 fulfilled 상태는 Promise 작업이 끝낸 상태 rejected 상태는 Promise 작업 중 .. 자바스크립트(JavaScript)/웹(Web) - 이벤트 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! html 요소에 자바스크립트를 이용하여 이벤트를 처리하는 법을 간단히 알아보겠습니다. 이벤트는 특정 상황에대한 행동을 뜻합니다. 자바스크립트에서 특정 상황이 되었을 때 지정한 콜백 함수를 호출합니다. 이벤트 처리 방법 이벤트를 처리하는 방법은 여러개가 있습니다. onclick 속성을 이용해 이벤트 처리 DOM 객체로 요소를 가져와 onclick 프로퍼티로 이벤트 처리 addEventListener() 메서드를 이용해 이벤트 처리 클릭! 클릭2! 클릭3! html 요소에서 onclick 속성을 이용해서 이벤트를 처리하면 html와 자바스크립트가 섞여있어서 유지보수성이 떨어집니다. 또한 이벤트 처리를 위해 함수를 지정할 때 여러 개가 아닌 하나만 된.. 자바스크립트(JavaScript) - 유사 배열 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다! 자바스크립트에는 유사 배열이라는 것이 존재합니다. 배열이 아니지만 배열을 흉내 내는 것이죠. 객체를 유사 배열로 이용하여 반복 처리를 가능캐 할 수 있는 유사 배열을 간단히 알아보겠습니다. 유사 배열 유사 배열과 배열의 차이점은 객체에 length 프로퍼티와 프로퍼티 이름이 숫자 0으로 시작하는 프로퍼티가 있다면 유사 배열입니다. Argument 객체와 DOM에서 요소를 가져올 때 NodeList의 경우도 유사 배열 객체입니다. let a = ["a", "b", "c"]; let b = { 0: "a", 1: "b", 2: "c", length: 3 }; 이 유사 배열 객체는 Array의 프로토타입에 있는 메서드들을 사용하지 못하지만 for문, f.. 자바스크립트(JavaScript) - 클래스 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! ES6에서 추가된 클래스를 알아보겠습니다. 객체를 만들 때는 생성자 함수를 통해 객체를 생성하고 프로토타입을 이용하여 메서드를 만들었습니다. 생성자 함수를 사용하면서 함수와 혼동되어서 조금 불편했었습니다. 클래스는 명확하게 표현하여 객체를 파악하고 간단하게 객체를 만들 수 있습니다. 클래스도 함수와 마찬가지로 선언문과 표현식 2개를 사용할 수 있습니다. 클래스의 표현 첫 번째로 클래스 선언문입니다. class A { constructor(n) { this.n = n; } show() { console.log("값: "+ this.n); } } let a = new A(10); a.show(); 두 번째로 클래스 표현식입니다. let B = cla.. 자바스크립트(JavaScript) - 상속 상속은 기존에 있던 프로퍼티와 메소드를 자식이 되는 객체에게 물려주는 것입니다. 자바스크립트에서 객체에 상속을 해야 한다면 프로토타입을 사용해서 프로퍼티와 메소드를 상속하기도 합니다. 프로토타입을 이용해서 상속을 하는 것이 아닌 객체 상속을 알아보도록 하겠습니다. 객체 상속 객체에 있는 프로퍼티와 메소드를 다른 객체에 상속시키려면 call(), apply() 메소드를 사용하여 상속을 시킬 수 있습니다. function a(name, list) { this.name = name; this.show = function() { console.log(name); }; } a.prototype.ab = function () { console.log(this.name); }; function b() { a.call.. 자바스크립트(JavaScript) - 프로토타입(Prototype) 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 프로토타입(prototype) 객체 자바스크립트에서 프로토타입 객체는 중요한 객체라고 할 수 있습니다. 자바스크립트는 프로토타입 기반 언어이기 때문입니다. 프로토타입 객체를 통해 메소드와 속성을 상속받을 수 있습니다. ES6에서는 좀 더 쉽게 상속을 할 수 있는 클래스가 있습니다. 자바스크립트의 프로토타입 객체는 다른 객체에 프로퍼티를 공유하는 객체입니다. 함수 객체에는 prototype 프로퍼티와 [[Prototype]] 프로퍼티를 가지고 있습니다. 일반 객체에는 [[Prototype]] 프로퍼티만 가지고 있습니다. [[Prototype]]은 자바스크립트의 내부 슬릇이라는 내부 프로퍼티이며 직접적으로 접근이 불가능합니다. 하지만 요즘 브라우저에서.. 자바스크립트(JavaScript) - 이터레이터(Iterator), 이터러블(Iterable), 제너레이터(Generator) 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. ES6부터 추가된 이터레이터와 제너레이터는 반복적인 처리를 할 때 사용되는 기능입니다. 이터레이터(Iterator) 이터레이터는 반복 처리가 가능한 객체를 뜻합니다. 이터레이터는 내부적으로 next() 메서드를 가지며 next() 메서드는 IteratorResult객체 value와 done이라는 프로퍼티를 가진 객체를 반환해야 합니다. // 사용자 정의 function a() { var index = 0; var data = [1,2,3,4]; return { next() { if (index < data.length) { return { value:data[index++], done:false }; } else { return { value:un.. 이전 1 2 다음