개발을개발로할태니

(원시형의 예시) // 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", ..

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..

dataset 은 사용자 정의 데이터 속성으로 HTMLElement 읽기/쓰기 액세스를 제공한다. An HTML data-* attribute and its corresponding DOM dataset.property modify their shared name according to where they are read or written:In HTML The attribute name begins with data-. It can contain only letters, numbers, dashes (-), periods (.), colons (:), and underscores (_). Any ASCII capital letters (A to Z) are converted to lowercase. I..

https://youtu.be/FN_D4Ihs3LE?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 object -> string serialize string -> object deserialize 1. Object to JSON stringfy(obj) json 의 규격사항은 "" < 를 사용한다 2. JSON to Object parse(json)

https://github.com/dream-ellie/learn-javascript/blob/master/notes/variable.js 와.. 뭐야 이 강의 너무 친절해...ㅠ 정리한 것도 다 공유라니.... 증맬...사랑입니닷... primitive 타입은 값 자체를 저장 object 타입은 ref 가 있어서 ref 안의 요소는 바뀔 수가 있다 Immutable data types : primitive types, frozen objects (i.e. object.freeze()) Mutable data types : all objects by default are mutable in JS Operator.js String concatenation Numeric operators Increment ..

https://youtu.be/OCCpGh4ujb8?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2 template literals -> `${변수} 이렇게` false : 0, null, undefined, NaN, '' true : any other value null < any 아무것도 없는 텅 빈 상태 undefined < 아무 것도 정해지지 않은 상태 Symbol('변수') create unique identifiers for objects 각 변수마다 고유의 식별자임 for 을 써서 변수에 담긴 값이 같은지 확인 가능 javascript - Dynamic typing String 은 charAt(0) TypeScript 는 자바스크립트에 타입을 지정해준 언어 object..

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API HTML Drag and Drop API - Web APIs | MDN HTML Drag and Drop interfaces enable applications to use drag-and-drop features in browsers. developer.mozilla.org 다 한번 실제로 적용해봐야겠음 drag - ondrag dragend - ondragend dragenter - ondragenter . drag ...a dragged item (element or text selection) is dragged. dragend ...a drag operation end..