개발을개발로할태니

typeof undefined // "undefined" typeof 0 // "number" typeof 10n // "bigint" typeof true // "boolean" typeof "foo" // "string" typeof Symbol("id") // "symbol" typeof Math // "object" (* 수학 연산 제공 내장 객체) typeof null // "object" (* null은 별도의 고유한 자료형을 가지는 특수 값으로 객체가 아니지만, 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 object 로 출력됨 ** 참고) typeof alert // "function" (* 피연산자가 함수면 "function"을 반환한다. 참고로 함수는 객체형에 속한다. 호환성..

(원시형의 예시) // Infiity = 무한대 let x = Infinity; // 무한대 let y = (1/0); // 무한대 alert("abc"/2); //NaN alert("def"/2+2); //NaN //bigint 표현 방법 // 끝에 'n'을 붙인다. const bigInt = 1234567890123456789012345678901234567890n; 객체object 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 let user = { // 객체 name: "John", // 키: "name", 값: "John" age: 30, // 키: "age", ..

https://html.spec.whatwg.org/multipage/dnd.html#dnd HTML Standard This section defines an event-based drag-and-drop mechanism. This specification does not define exactly what a drag-and-drop operation actually is. On a visual medium with a pointing device, a drag operation could be the default action of a mousedown event html.spec.whatwg.org drag and drop algorithm mousedown -> mousemove -> mous..

모든 mouseover, mouseout잡아내기 table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; text.value += `over -> ${target.tagName}\n`; text.scrollTop = text.scrollHeight; }; table.onmouseout = function(event) { let target = event.target; target.style.background = ''; text.value += `out

1. 마우스이벤트 (마우스 뿐 아니라 핸드폰, 태블릿에도 생기는 이베트임) mousedown·mouseup 요소 위에서 마우스 왼쪽 버튼을 누를 때, 마우스 버튼 누르고 있다가 뗄 때 발생 mouseover·mouseout 마우스 커서가 요소 바깥에 있다가 요소 안으로 움직일 때, 커서가 요소 위에 있다가 요소 밖으로 움직일 때 발생 mousemove 마우스를 움직일 때 발생 click 마우스 왼쪽 버튼을 사용해 동일한 요소 위에서 mousedown 이벤트와 mouseup 이벤트를 연달아 발생시킬 때 실행 dblclick 동일한 요소 위에서 마우스 왼쪽 버튼을 빠르게 클릭할 때 발생합니다. 요즘엔 잘 안씀 contextmenu 마우스 오른쪽 버튼을 눌렀을 때 발생. 참고로 특별한 단축키를 눌러도 마우스 ..

상당수의 이벤트에는 브라우저에 의한 특정 동작을 자동 수행한다 예시 a > href 해당 URL 이동 submit > from 전송 기본 동작 막기 1. event 객체에서 event.preventDefault() > on 가 아닌 경우는 다 무시됨 true든 return이든 다 안됨 2. on 에서 false 반환 false반환 preventDefault 동작을 막은 후 다른 함수 실행 menu.onclick = function(event) { if (event.target.nodeName != 'A') return; let href = event.target.getAttribute('href'); alert( href ); // 서버에서 데이터를 읽어오거나, UI를 새로 만든다거나 하는 등의 작업이 ..

공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다. 이를 이용해 이벤트를 핸들링한다 예시-> table 클릭했을때 "td" 엘리먼트에서 발생한 것만 작업하기 table.onclick = function(event) { let target = event.target; // 클릭한 타겟 찾기 if (target.tagName != 'td') return; doSomething(target); // td 엘리먼트에서 무언가를 실행 }; 여기서 만약 td 의 자식에 이벤트가 있는지를 찾아해야한다 table.onclick = function(event) { let td = event.target.closest('td'); // (1) if (!td) re..

버블링 - 한 요소에 이벤트가 발생하면, 할당된 해들러가 동작 하고 그 이후 부모 요소 핸들러가 동작하여 가장 최상단 조상ㅇ요소로 가각 핸들러가 동작한다. Form > Div > P 형태로 중첩된 구조 일 경우 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 event.target 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다. event.target과 this(=event.currentTarg..

마우스 이벤트: click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생 contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생 mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생 mousedown과 mouseup – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생 mousemove – 마우스를 움직일 때 발생 폼 요소 이벤트: submit – 사용자가 을 제출할 때 발생 focus – 사용자가 과 같은 요소에 포커스 할 때 발생 키보드 이벤트: keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생 문서 이벤트: DOMCont..

상태를 나타내는 state는 pending(대기),rejected(거부됨),fulfilled(이행됨) 세가지 Promise를 선언할때 받는 파라미터는 resolve과 reject를 받는데 resolve : 성공했을때, reject는 실패했을때 사용 const pr = new Promise((resolve, reject ) => { setTimeout(()=>{ resolve('OK');//성 },3000) }); //응답후 처리 pr.then( function(result){} ).catch( function(err){} ).finally{ function(){ console.log('주문 '); } } Promise.all : 프로미스들을 한번에 실행하고싶을때 사용 Promise.race : 프로미스들..