전체 글 (291) 썸네일형 리스트형 브라우저 기본 동작 상당수의 이벤트에는 브라우저에 의한 특정 동작을 자동 수행한다 예시 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 delegation) 공통 조상에 할당한 핸들러에서 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.. [Bubbling, Capturing] 버블링 - 한 요소에 이벤트가 발생하면, 할당된 해들러가 동작 하고 그 이후 부모 요소 핸들러가 동작하여 가장 최상단 조상ㅇ요소로 가각 핸들러가 동작한다. Form > Div > P 형태로 중첩된 구조 일 경우 에 할당된 onclick 핸들러가 동작 바깥의 에 할당된 핸들러가 동작 그 바깥의 에 할당된 핸들러가 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작 event.target 부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다. event.target과 this(=event.currentTarg.. [browser event] 자주 이용하는 DOM 이벤트 마우스 이벤트: click – 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생 contextmenu – 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생 mouseover와 mouseout – 마우스 커서를 요소 위로 움직였을 때, 커서가 요소 밖으로 움직였을 때 발생 mousedown과 mouseup – 요소 위에서 마우스 왼쪽 버튼을 누르고 있을 때, 마우스 버튼을 뗄 때 발생 mousemove – 마우스를 움직일 때 발생 폼 요소 이벤트: submit – 사용자가 을 제출할 때 발생 focus – 사용자가 과 같은 요소에 포커스 할 때 발생 키보드 이벤트: keydown과 keyup – 사용자가 키보드 버튼을 누르거나 뗄 때 발생 문서 이벤트: DOMCont.. [ES6] promise, async 와 await 상태를 나타내는 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 : 프로미스들.. SpringTokenizer StringTokenizer 클래스는 문자열 파싱(parsing)을 위한 정보를 제공하는 클래스로 파싱(parsing)하고자 하는 문자열을 인자로 받아 생성하는데, 여기에서 파싱(parsing)이란 하나의 문자열을 여러 문자열로 나누는 작업을 의미하게 되며, 이 때 나누는 단위가 되는 문자열을 토큰(token)이라고 한다. StringTokenizer 클래스를 사용하기 위해서는 java.util 패키지의 String.Tokenizer를 import 해야 한다. StringTokenizer 클래스는 호환성을 유지하는 목적으로 보관 유지되고 있으며 문자열을 파싱(parsing)하기 위해서는 String 클래스의 split() 메소드난 java.util.regex 패키지를 사용할 것을 권장하고 있다. ▪ 생성.. 데이터 구조 Array 메모리에 연속적으로 데이터를 저장하는 자료구조 탐색 O(1): 인덱스를 사용해 Random Access 가능 삽입/삭제 O(N): 삽입/삭제한 원소보다 큰 인덱스를 갖는 원소들을 Shift해야 함 크기 고정적 (선언 시 지정한 크기 변경 불가): Immutable Cache Locality가 좋아 Cache Hit 가능성이 큼 Linked List 메모리가 불연속적으로 배치된 자료구조 다음 노드를 가리키는 주소인 포인터를 통해 접근하는 자료구조 (자료의 주소 값으로 서로 연결) 탐색 O(N): 데이터 검색 시 처음 노드부터 순회하는 순차 접근 삽입/삭제 O(1): 주소의 연결만 바꾸면 됨 -> 하지만, 삽입/삭제할 원소를 찾는 것에 O(N)이 걸림 Array vs Linked List 삽입/삭.. DOMContentLoaded, load, beforeunload, unload 이벤트 https://ko.javascript.info/onload-ondomcontentloaded#ref-401 DOMContentLoaded, load, beforeunload, unload 이벤트 ko.javascript.info HTML 문서의 생명주기엔 다음과 같은 3가지 주요 이벤트가 관여합니다. DOMContentLoaded – 브라우저가 HTML을 전부 읽고 DOM 트리를 완성하는 즉시 발생합니다. 이미지 파일()이나 스타일시트 등의 기타 자원은 기다리지 않습니다. load – HTML로 DOM 트리를 만드는 게 완성되었을 뿐만 아니라 이미지, 스타일시트 같은 외부 자원도 모두 불러오는 것이 끝났을 때 발생합니다. beforeunload/unload – 사용자가 페이지를 떠날 때 발생합니다. D.. 이전 1 ··· 4 5 6 7 8 9 10 ··· 37 다음
