본문 바로가기

JavaScript19

JavaScript(이벤트전파, iterable, generator, spread) ✔ 이벤트 전파(Event Propagation) - 이벤트가 발생했을 때 브라우저가 이벤트 리스너를 실행시킬 대상 요소를 결정하는 과정 - document 객체나 HTML 문서의 요소에서 이벤트가 발생하면 대상 요소를 결정하기 위해 이벤트 전파가 일어남 캡처링 전파방식 - 부모에서 자식으로 이벤트를 전파 버블링 전파방식 - 자식에서 부모로 이벤트를 전파 ✔ 이벤트 전파를 막는 방법 이벤트객체명.stopPropagation(); DOCTYPE html> 이벤트전파 #divBox{width :100%; height : 300px; border: 3px solid red;} #pBox{width :70%; height : 150px; border: 3px solid blue;} #spanBox{border:.. 2022. 11. 10.
JavaScript(이벤트 타입/리스너/객체) ✔ 이벤트(Event) - 웹 브라우저가 알려주는 HTML 요소에 대한 사건을 발생 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있음 - 자바스크립트는 비동기식 이벤트 중심의 프로그래밍 모델 --------- -------- -------- 이벤트타겟 이벤트타입 이벤트리스너 이벤트타입(Event Type) - 발생한 이벤트의 종류를 나타내는 문자열로 이벤트명이라고도 함 - 키보드, 마우스, HTML, DOM, window 객체등을 처리하는 이벤트 제공 - https://developer.mozilla.org/ko/docs/Web/Events 이벤트타겟(Event Target) - 이벤트가 일어날 객체를 의미 DOCTYPE html> eventtype window... 2022. 11. 10.
JavaScript (class, extends, wrapper) ✔ Class ✔ 객체를 만드는 켐플릿 1. 생성자 함수 2. 클래스 static : 정적 프로퍼티 및 메서드 class Fruit { // eng = 'noname'; static count_fruits = 0; constructor(name, emoji){ this.name = name; this.emoji = emoji; } display = () => { console.log(`${this.name} : ${this.emoji}`); }; static makeBanana() { // return 'banana';// class이름으로 바로 접근가능 return new Fruit('banana', '🍌'); // 클래스 레벨 메서드에서는 this를 참조할 수 없음 } } // apple은 Fruit.. 2022. 11. 9.
JavaScript - function, object 예제 ✔ function //✔ 1. 함수의 기본 - 자바스크립트에서는 함수도 메모리로 인식 function sum(num1, num2){ console.log('sum() 호출!'); return num1 + num2; }// 선언형 // sum() 호출! // 13 const result = sum(10,3); console.log(result); //✔ 2.함수의 메모리 const add = sum; console.log(sum(10,3)); console.log(add(10,3)); // 위와 동일한 결과 값 // sum() 호출! // 13 //✔ 3. 함수 작성법(팁!) function print(num){ if(num a+b; //return도 자동 화살표함수 const calc_multiply .. 2022. 11. 9.