삶 가운데 남긴 기록 AACII.TISTORY.COM

draggable HTML element를 드래그 할 수 있도록 attribute를 설정할 수 있습니다. 드래그 드래그 앤 드롭 관련 이벤트 dragstart : 드래그 시작 할 때 발생 drag : 드래그를 하는 동안 발생 dragend : 드래그가 끝났을 때 발생 dragenter : 마우스가 드롭 요소의 경계선 안쪽으로 들어갈 때 발생 dragover : 마우스가 드롭 요소의 경계선 안에 있을 때 발생 dragleave : 마우스가 드롭 요소의 경계선 바깥으로 나왔을 때 발생 drop : 요소에 드롭할 때 발생 데이터 전달 드래그 앤 드롭 이벤트의 dataTransfer 프로퍼티 types : setData 메서드로 설정한 데이터 타입 목록 files : 드래그한 파일 객체 목록 effectAllo..

생성자 1. 함수의 선언문으로 정의 function Card(suit, rank){ this.suit = suit; this.rank = rank; } Card.prototype.show = function(){ console.log(this.suit + this.rank); }; 2. 함수 리터럴로 정의 var Card = function(suit, rank){ this.suit = suit; this.rank = rank; }; Card.prototype.show = function(){ console.log(this.suit + this.rank); }; 3. 클래스 선언문으로 정의 class Card { constructor (suit, rank){ this.suit = suit; this.ran..

Ajax Ajax는 XMLHttpRequest 객체를 이용하여 웹서버와 비동기 통신하고 XML이나 JSON을 통해 DOM을 동적으로 갱신하는 기법을 말합니다. XMLHttpRequest 프로퍼티 readyStateHTTP : 통신 상태(0~4) , 읽기 전용 response : 응답 내용, 읽기 전용 responseText : 응답 내용을 텍스 형식으로 가져 옴, 읽기 전용 responseType : 응답 타입, 쓰기 가능 responseXML : 응답 내용을 XMLDocument 객체로 가져옴, 읽기 전용 status : HTTP 상태 코드, 읽기 전용 statusText : 요청 상태 보충 메시지, 읽기 전용 timeout : 요청을 끝내는데 걸릴 시간을 가져오거나 설정, 쓰기 가능 withCrede..

비동기 처리 console.log("A"); setTimeout(function(){console.log("B");}, 0); console.log("C"); 위 코드의 실행 결과는 A -> C -> B 순으로 표시됩니다. 비동기 작업은 콜백 함수로 작업을 예약 해놓고 다음 작업을 수행하기 때문입니다. 콜백 지옥 function sleep(callback){ setTimeout(function(){ callback(); },1000); } sleep(function(){ console.log("A"); sleep(function(){ console.log("B"); sleep(function(){ console.log("C"); }); }); }); Promise var promise = new Prom..

이벤트 리스너(listener) 등록 방법 HTML과 DOM에 이벤트 리스너는 하나만 등록할 수 있습니다. 증복해서 등록할 경우 이전에 등록한 핸들러는 무시됩니다. HTML attribute DOM var btn = document.getElementById("button"); btn.onclick = changeColor(); element.addEventListener(type, listener, useCapture) type : 이벤트 유형 listener : 이벤트 처리를 담당할 콜백 함수 참조 useCapture : 캡처링 단계(true), 버블링 단계(false) , 생략 가능 var btn = document.getElementById("button"); btn.addEventListener..

DOM(Document Object Model) document 변수를 통해 접근하는 HTML Element 트리구조로 부모(parent), 자손(child), 형제(siblings)관계로 이루어지고 최상위 조상은 Document 객체입니다. 이벤트 capturing: 이벤트가 발생한 target 요소의 부모로부터 자손까지 이벤트가 일어났는지 검사해 자손의 이벤트를 통보받을 수 있게 등록한 이벤트 핸들러가 있는 지 확인 하는 과정 이벤트 bubling: element들이 부모자손 관계로 중첩될 때 이벤트가 자손부터 실행되어 부모순으로 이벤트 핸들러를 찾아 수행 하며 상위 element로 이벤트를 전파하는 과정 주요 프로퍼티 document.documentElement //문서 루트 객체 참조 docume..

javascript 실행 순서 Window 객체 생성: 웹페이지와 탭마다 생성 됩니다. Document 객체 생성: Windows 객체의 프로퍼티로 생성됩니다. DOM 트리 구축 시도: document.readyState가 loading 입니다. HTML 문서를 순서에 따라 분석, DOM객체와 텍스트 노드 추가합니다. script 요소를 만나면 그 시점에서 실행됩니다. HTML문서의 구문 분석이 일시정지 됩니다. DOM 트리 구축을 완료: document.readyState가 interactive로 바뀝니다. Document객체에 DOM 트리 구축 완료를 알리기 위히 DOMContentLoaded 이벤트를 발생시킵니다. img 등 외부 리소스를 읽어옵니다. 리소스를 모두 읽으면 document.ready..

정규 표현식 생성 var reg = new RegExp("abc"); var reg2 = /abc/; test() 문자열이 일치하는지 판별합니다. (boolean) var reg = /cat/; console.log(reg.test("cats")); //true console.log(reg.test("Cat"));//false , 대소문자를 구별합니다. exec() 인수와 비교하여 일치한 문자열을 배열로 리턴합니다. var reg = /Script/; var result = reg.exec("JavaScript"); console.log(result[0]); //"Script" 주요 표현식 abc : abc 문자열을 포함 [abc] : a, b, c 중 한개라도 포함 [^abc] : a, b, c 를 포..

Array.prototype의 주요 메서드 push() 배열의 마지막에 하나 이상의 요소(element)를 추가하고 그 배열의 길이를 리턴 var a = ["A", "B"]; a.push("C", "D"); pop() 배열의 마지막 요소를 잘라내서 리턴 shift() 배열의 첫 요소를 제거하고 모든 배열의 요소들을 왼쪽으로 이동 시킨뒤 제거된 첫 요소를 리턴 unshift() 배열의 앞에 요소를 한개 이상 추가한 후 모든 배열의 요소를 오른쪽으로 이동후 배열의 길이를 리턴 var a = [1,2,3]; a.unshift(4,5);//[4,5,1,2,3] splice() 배열의 요소를 갈아끼우는 작업을 하는 메서드입니다. 이때 삭제된 요소들이 리턴됩니다. 첫번째 인수: 수정하기 시작할 부분의 인덱스 두번째..

순차 검색 정렬된 배열로부터 특정 값을 찾아내는 알고리즘 이진 검색 정렬된 데이터의 중간에 위치한 요소의 값을 비교해서 절반씩 검색 대상에서 제외 시켜서 이진트리 구조를 탐색하는 알고리즘 퀵 정렬 배열을 두개로 나눈 후에 나눈 부분을 다시 퀵정렬로 정렬해 나가는 작업을 재귀적으로 반복 뉴턴-랩슨 법으로 제곱근 구하기 에라토스테네스의 체로 쌍둥이 소수 구하기 정수 n을 정하고 2이상 n 이하의 정수의 목록을 만듭니다. 가장 작은 소수인 2의 배수는 목록에서 지웁니다. 그다음 가장 작은 소수인 3의 배수도 목록에서 지웁니다. 이러한 작업을 반복하면 쌍둥이 소수를 구할 수 있습니다. 만델브로트 집합(mandelbrot set) 자기 닮음 구조의 프랙털(fractal) 도형입니다. 중심좌표(,) : 마우스 클릭..

직렬화(serialize) 컴퓨터 메모리 안에 구현된 객체(인스턴스)를 문자열로 변환하는 과정을 직렬화라고 합니다. 반대로 문자열을 다시 객체로 환원화하는 것을 역직렬화라고 합니다. JSON(Javascript Object Notation) 표기법 리터럴 객체: { name : "Tom", age : 17, marriage : false, data : [2, 5, null] }; JSON: ' { "name" : "Tom", "age" : 17, "marriage" : false, "data" : [2, 5, null] } '; 차이점은 프로퍼티 이름을 큰따옴표로 묶은 문자열로 표기하고 전체는 작은 따옴표로 묶어서 표기한다는 점입니다. 객체를 JSON으로 변환 JSON.stringify() 첫번째 인수:..

프로퍼티 데이터 프로퍼티: 값을 저장하기위한 객체의 맴버 변수 접근자 프로퍼티: 데이터 프로퍼티에 접근하기 위한 함수를 정의한 프로퍼티 getter 와 setter를 정의하면 데이터 프로퍼티에 접근 할 수 있습니다. delete person.name 처럼 delete 연산자로 프로퍼티를 삭제할 수 있습니다. 캡슐화 즉시 실행 함수로 클로저를 생성하면 데이터를 외부에서 숨기고 접근자 프로퍼티(getter, setter)로만 읽고 쓰고 할 수 있습니다. 프로퍼티 디스크립터(property descriptor) 프로퍼티 디스크립터는 해당 프로퍼티의 설정을 기술하는 객체입니다. 프로퍼티의 쓰기 가능 여부 등을 설정 할 수 있게 도와줍니다. 데이터 프로퍼티의 디스크립터 { value: 프로퍼티의 값, writab..

생성자 안에 메서드를 정의할 때의 문제점 생성자로 객체를 생성 할 때마다 똑같은 함수가 생성되어 메모리를 소비하게 됩니다. 이런 문제는 프로토 타입 객체에 메서드를 정의하는 방식으로 해결합니다. 프로토 타입 객체 함수의 prototype 프로퍼티가 가리키는 객체를 그 함수의 프로토 타입 객체라고 합니다. 기본적으로 빈 객체를 가리킵니다. 프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티처럼 사용할 수 있습니다. function F(){}; F.prototype.prop = "prototype value"; var obj = new F(); console.log(obj.prop);//prototype value; //프로토 타입 객체의 프로퍼티는 읽기만 하고 수정이 불가..

화살표 함수 표현식 var square = function(x){ return x*x; }; //화살표 함수 표현식 var square = (x) => { return x*x; }; //인수가 한개이면 인수를 묶는 괄호를 생략할 수 있습니다. var square = x => { return x*x; }; //인수가 없는 경우 var f = () => { return alert("x"); }; //함수 몸통이 return 뿐이면 return 키워드도 생략 가능 var square = x => x*x; //함수 몸통이 return 뿐이라도 객체를 리턴하면()으로 묶어야 함 var f = (a, b) => ({x: a, y: b}); //즉시 실행 함수 (x => x*x)(3); // 9 this가 함수를 정..

네임 스페이스(name space) 전역 유요 범위 안에 함수나 변수 객체들을 선언하면 라이브러리나 규모가 큰 프로그램을 만들 때 이름이 겹칠 우려가 있습니다. 네임 스페이스는 변수 이름과 함수이름을 한 곳에 모아서 충돌을 방지하는 방법입니다. 객체를 네임 스페이스로 활용 객체를 전역 변수로 하나 생성하고 그 객체에 프로그램 전체에서 사용하는 모든 변수와 프로퍼티를 정의하는 방법입니다. 함수를 네임 스페이스로 활용 함수 안에서 선언된 변수의 유효 범위는 함수 내부이기 때문에 함수 바깥에서는 읽거나 쓸 수 없는 성질을 이용하는 방법입니다. 모듈 패턴 showName 메서드는 getName을 참조하고 있고 setName 메서드는 name을 참조하고 있습니다. 지역변수 name과 지역함수 getNmae은 클로..