All-round programmer

* CSS에서 엘레멘트의 style.top 값을 가져왔을 때이 top 값은 "10px"나 "100%"등의 단위를 붙어서 나오기 때문에 string으로 반환된다. 이것을 처리하기 위한 간단한 방법이 아래와 같다. var topString = document.getElementById("mydiv").style.top; var topInt = parseInt(topString||0, 10); : 여기서 parseInt 함수는 앞의 숫자만 변환한 값을 10진수(parseInt의 두번째 인자)로 변환하여 리턴하게 된다. 중간에 ||0을 한 것은 만약에 top이 설정되어있지 않다면 0으로 설정하겠다는 것이다. : 주의할 것은 class 를 이용해서 top을 설정했다면, offset을 계산해서 하는 것이 좋을 것이..

* HTML5를 하면서 AJAX로 얻어온 데이터를 div 태그에 뿌려주다보면 넘쳐서 스크롤바가 생기는 경우가 많다. 가장 대표적인 예가 채팅 프로그램을 만들 때 가장 아래로 스크롤을 유지해야하는데, div에 내용이 추가되고 나서 아래의 자바스크립트를 사용하면 된다. var objDiv = document.getElementById("mydiv"); objDiv.scrollTop = objDiv.scrollHeight; : 위의 바닐라 자바스크립트 말고도 jQuery를 이용하는것도 방법이다. $("#mydiv").scrollTop($("#mydiv")[0].scrollHeight); : 위에서 scrollTop 안에 $("#mydiv")[0]을 하는 이유는 직접 dom에서 데이터를 가져오기 위함이다. * ..

: HTML5의 위로 이미지를 드래그앤 드랍을 할 때에는 보통 canvas.addEventListener("drop", function (e) { alert("dropped!"); e.preventDefault();}); : 이렇게 drop이벤트를 listen하게 되는데 drop 이벤트만 이렇게 처리하게 된다면 크롬, 사파리 등에서는 잘 동작하지만 파이어폭스에서는 왠지 이 drop 이벤트를 먹어버리고 브라우져 자체가 이미지를 열어버리게 된다. : 이럴 때에는 dragover의 기본 동작도 방지시켜주면 파이어폭스에서도 drop 이벤트가 정상적으로 동작하게 된다. canvas.addEventListener("dragover", function (e) { e.preventDefault(); return fal..

* 자바스크립트에서 랜덤 수를 생성하는 것은 Math.random 함수를 쓰면 된다. var rand = Math.random() * max; // 0 ~ max 사이의 랜덤 float 값을 생성, max는 포함하지 않는다. var rand2 = Math.floor(Math.random() * max); // 0 ~ (max - 1) 까지의 정수 값을 생성 * Math.random() 함수는 0~1의 실수를 생성하며 1을 생성하지는 않는다, Math.round가 아닌 Math.floor를 사용하는 것은 더 균일한 랜덤 값 생성을 하기 위한 것이다. Math.round를 사용하게 되면, 0과 1이 나올 수 있는 확률이 절반으로 줄어들게 된다. * 이를 함수로 구현해두면 그때마다 호출해서 사용하면 된다. f..

: 자바스크립트에서는 시간에 따라 함수를 호출할 수 있는 함수가 2가지가 있다.setInterval(callbackFunction, milliseconds);setTimeout(callbackFunction, milliseconds); : setInterval은 말그대로 특정 interval을 두고 콜백함수를 계속 호출하는 함수이고, setTimeout은 일정 시간뒤에 함수를 호출하게 되는 1회성 함수이다. 즉, 계속 반복적으로 일정 시간마다 호출해야한다면 setInterval을 설정하면 되고 한번만 호출해야된다면 setTimeout을 사용하면 된다. : 위 함수와 반대로 설정된 함수 호출을 취소하는 함수는 아래의 두가지이다.clearInterval(intervalReturnVariable);clearT..

var items = { "foo" : 123456, "bar" : 789012, "baz" : 345678, "bat" : 901234 }; 다음과 같은 연관 배열이 있을 때, items[0]이런식으로는 루프를 돌수 없다. 이 배열을 루프 도는 방법은 아래와 같이 for, in을 사용하면 된다. for(var index in items){ document.write(index + " : " + items[index] + " "); } 를 하게 되면 아래와 같이 출력할 수 있다. foo : 123456 bar : 789012 baz : 345678 bat : 901234 끝.

* typeof와 instanceof는 어떠한 변수가 문자열인지아닌지, 특정한 객체인지 아닌지 판단할때 사용하는 '연산자'들이다. 이들 둘이 어떻게 다른지 살펴보고 사용하면서 있을 수 있는 약점들도 같이 살펴보자. * typeof : typeof는 unary 오퍼레이터이다. unary 오퍼레이터로는 ! 라던가 - 등과 같이 인자를 하나만 받을 수 있는 연산자를 뜻한다. 즉, 함수가 아니고 연산자이기 때문에 괄호를 사용하면 안된다. typeof yourVariable; 위와 같이 실행하고 나면 리턴 값으로는 해당하는 변수의 primitive 타입을 스트링으로 준다. 돌려주는 primitive 타입의 종류는 아래와 같다. 'undefined''boolean''number''string''object''fun..

* 이번에는 저번에 만들었던 틀에서 사용했던 연관배열과 prototype에 대해서 공부해보도록 하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계2012/10/11 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스2012/10/15 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기..

* 마우스 포인터를 mousedown이나 mouseup, mousemove, click 등의 이벤트 콜백 함수 안에서 가져오고자 한다면 아래와 같은 함수를 호출하면 된다. function mouseX(evt) { if (evt.pageX) return evt.pageX; else if (evt.clientX) return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return null; } function mouseY(evt) { if (evt.pageY) return evt.pageY; else if (evt.clientY) r..

* 이번에는 지난번에 공부했던 내용을 토대로 실제로 적용해서 모듈에 만들어보도록 하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계2012/10/11 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 3. 기본 지식 - 모듈과 네임스페이스 * 처음에 설계를 했던대로 네임스페이스는 utree, 그리고 내부에서 tree와 node 객체를 생성하는 기본적인 골격을 프로그래밍 해보자. :..

* 오늘은 라이브러리를 만드는데 필요한 기본 지식인 모듈과 네임스페이스에 대해서 공부하자. 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 2. 시작 - 사전조사 및 설계 * 배경: 초창기 웹 개발이 자바스크립트 이루어지기 시작했을 때에는 자바스크립트는 HTML 페이지의 상단 : 이번에는 YUI를 한번 보자. 아래는 야후의 유용한 자동완성 위젯의 예를 가져온 것이다.- 참고 : http://developer.yahoo.com/yui/autocomplete/var myAutoCom..

[Javascript] Removing all children using DOM * HTML로 프로그래밍하다보면 모든 자식 노드를 삭제해야하는 경우가 생긴다 그럴때 사용하면 되는 간단한 팁이다. var cell = document.getElementById("cell"); while ( cell.hasChildNodes() ) { cell.removeChild( cell.firstChild ); }

[자바스크립트] Uploading file with AJAX (XMLHttpRequest) : 지금까지 웹 언어들을 사용할 때 파일을 업로드 할때에는 form과 input type="file"을 이용해왔다. : 위의 구현은 php.net에 있는 내용을 가져온 것으로 태그 안에 단순히 form을 submit하는 것만으로 쉽게 구현이 가능했지만, 이러한 방법은 페이지 새로 고침(refresh) 현상을 유도하게 되고 이는 사용자 경험에 있어서 마이너스가 된다. (비동기를 적용하게 되는 것은 클라이언트 쪽이니까 서버측 구현은 일단 무시하자.) : 하지만 이러한 방법이 이제 어려워지는 가장 큰 이유는 바로 HTML5를 적용한 웹페이지들이 많아지면서 일 것이다. HTML5에서 HTML은 MVC 모델에서 철저하게 V..

AJAX는 이제 어느새 한물간듯한 지겨운 단어가 되어버렸지만 그 개념은 여전히 남아있으며, HTML5의 기본 프레임워크 안에 그 개념은 내제되어있다. 이제는 자바스크립트를 이용하는 어떠한 패러다임을 일컫는데 AJAX를 쓰기 보다는 자바스크립트를 말 할때 AJAX라는 말을 쓰지 않아도 기본적으로 비동기라는 개념이 들어가있게 된 것이다. 비동기처리를 하기 위해 AJAX라는 단어가 나오기 이전부터 XMLHttpRequest를 이용해왔고 HTML5로 넘어가는 앞으로도 이 XMLHttpRequest를 통해서 비동기적인 처리가 이루어질것이다. 따라서 굳이 AJAX라고 강조를 하지 않아도 '자바스크립트'라 하면 데이터는 비동기적으로 가져온다고 생각을 하면 된다. (물론 페이지 refresh를 하는 경우 등 비동기적이..

[Building a Javascript Library] 2. The beginning - state-of-art and basic designing 2012/10/04 - [Programming Lecture/Javascript Library] - [자바스크립트 라이브러리 만들기] 1. 개요 : 구글 검색 결과 - 일단 '트리를 그리는 자바스크립트 라이브러리'를 시작하기 전에, 다른 유사한 라이브러리들은 어떻게 동작하는지 보고 설계를 생각해보는 것도 좋은 방법일 것이다. 구글 검색 결과 트리를 그리는 라이브러리는 아주 '많다'. 상업적 목적이 무료인 라이브러리는 적겠지만, 개인 사용이라면 굳이 구현할 필요는 없을 것이다. 하지만 지금의 목적은 공부를 하기 위한 것이니 그냥 참고만 하자. * dhtmlx..

Building a Javascript Library : 1. Introduction : 최근 HTML5와 함께 새롭게 대두되고 있는 자바스크립트(Javascript)는 오래 전부터 활용이 되어왔지만 최근들어서 jQuery등과 같은 다양한 라이브러리를 통해 개발자들에게 더욱더 쉽게 다가가기 시작하고 있다. 이러한 jQuery 같은 라이브러리를 보면서 '나도 저런 라이브러리를 만들어보고 싶다'라는 생각을 하게 되어서 한번 나만의 라이브러리를 만들어보려고 생각하여 그 과정을 정리해보고자 한다. 지금 기능적으로 다양한 라이브러리를 생각하고 있는데, 지금 당장 자바스크립트로 HTML에 트리구조를 그려줄 수 있는 라이브러리를 만들어보려고 한다. 그러기 위해서 일단 기본적인 구현에 대한 공부를 해야할 것이다. --..