All-round programmer

이번에는 Bootstrap에서 지원해주고 있는 기타 다른 CSS 기능들인 스타일에 대해서 살펴볼 것이다. 이전의 글에서 언급한대로 Bootstrap의 강점 중 하나는 모든 화면 크기의 브라우저나 기기에 따라서 반응형으로 최대한 유사한 사용자 경험을 제공해주고자 하는 것이므로 각종 버튼이나 폰트, 그리고 폼 양식을 작성할 때에도 이러한 기본적으로 Bootstrap에서 제공해주고 있는 CSS 기능들을 활용하면 좋을 것이다. 특히 Bootstrap에서는 표준에 정의되어있는 태그들에 대하여 동일한 스타일을 적용하는 것 이외에도 새로운 태그들도 정의하여 활용 가능하다. 이전에는 각종 태그들과 본문 등에 적용 가능한 기본 클래스들을 살펴보고 다음에는 폼 엘레멘트들과 테이블의 양식을 살펴볼 것이다. *이전글2016/..

* 3년만에 약간 뜬금없지만, "속깊은 자바스크립트"의 마지막 글을 작성합니다. 2000년 초반부터 자바스크립트를 다양하게 활용하면서 개발하다가 문득 해외에서의 자바스크립트에 대한 인지도와 국내에서의 인지도가 많이 다르다는 것을 느끼고, 2012년 12월에 처음으로 "속깊은 자바스크립트"라는 이름으로 시리즈 작성을 마음먹었습니다. 일반적인 문법적인 이야기가 아닌 동작 원리와 개발 방향에 대한 내용을 작성하기 시작하여 2013년 11월까지 열심히 작성하였습니다. 직장 생활과 결혼 준비로 인하여 글 작성을 쉬던 중 2014년 여름에 출판 제의가 와서 그 후 2년만에 "속깊은 자바스크립트"의 마지막이라고 할 수 있는 책을 출판하게 되었습니다. 따라서 속깊은 자바스크립트 시리즈는 이제 책의 출판으로 그 마지막을..

* 이번에는 Bootstrap으로 반응형 웹을 만드는데 가장 중요한 기능 중 하나인 CSS 기능들에 대해서 살펴볼 것이다. CSS 기능은 말그대로 CSS를 토대로 제공이 되는 기능들로 특정 class 명을 부여함으로써 Bootstrap에서 제공하는 틀대로 반응형으로 동작하도록 해주는 기능들을 이야기한다. - 이전글 2016/05/19 - [자바스크립트 프레임워크] 시작 예고편 2016/05/21 -[Bootstrap] 소개 * Bootstrap 프레임워크 CSS 기능: Bootstrap 프레임워크의 CSS 기능은 웹페이지에 적용하게 되는 CSS 규칙들을 기본적으로 설정하고, 기본 HTML 요소들에 대한 스타일을 적용하는 기능들을 포함하고 있다. 특히, Bootstrap 프레임워크에서 제공해주고 있는 반응..

* 가장 먼저 보게 될 프레임워크는 바루 Bootstrap이다. 이 프레임워크를 가장 먼저 보게 되는 이유는 바로 지금 블로그에 반영한 티스토리의 반응형 스킨이 이 bootstrap을 사용하고 있기 때문이다. 따라서, 지금 블로그의 반응형 스킨을 개선하거나 변경하고자 한다면, 먼저 bootstrap에 대해서 알고 있어야지 문제 없이 변경할 수 있을 것이기 때문에 bootstrap을 먼저 선택하였다. * 이전글2016/05/19 - [자바스크립트 프레임워크] 시작 예고편 * Bootstrap 프레임워크? : http://getbootstrap.com : Bootstrap은 어디선가 한번씩은 들어봤을 프레임워크라고 생각한다. 이 Bootstrap에 대해서 소개하고 있는 내용을 보면 위의 홈페이지에 들어가면 ..

* 속깊은 자바스크립트 시리즈를 쓴지도 5여년이 지나고 이제 순수 자바스크립트에 대한 중요성과 인지도가 많아 향상 되었다고 생각한다. 그런데 최근에 최업 준비를 하면서 해외의 front-end engineer 자리들을 보고 있으면, 이제는 단순히 자바스크립트만 해서는 경쟁력이 떨어지고 있다는 것을 더욱더 느끼게 된다. 따라서, 속깊은 자바스크립트는 순수 자바스크립트를 살펴보는 시리즈 였다면, 자바스크립트를 응용하는 프레임워크나 라이브러리들이 어떠한 것이 있고 기본적인 사용 방법에 대해서 살펴보고자 한다. * 자바스크립트 프레임워크의 시대: 자바스크립트는 이제 정말 수 없이 많은 프레임워크들이 나오고 그러한 프레임워크의 개발을 요구하는 회사들도 많아지고 있다. 가장 쉽게 프레임워크가 얼마나 많은지 확인하는..

* 최근 SNS와 웹사이트를 연동하는 일들이 많아지면서, 많은 사이트들이 페이스북 로그인과 연동을 하고 있다. 페이스북에서 어떻게 로그인 연동을 해야 하는지 한번 알아보자. * 자바스크립트 SDK를 이용한 페이스북 로그인: 페이스북 앱들은 동작하는 장비나 프로젝트에 따라서 몇 가지의 로그인 단계를 거치게 된다. 이번에는 웹앱에서 로그인하는 단계를 한단계씩 알아볼 것이다. 여기서는 웹사이트인 경우 페이스북에서 추천하는 로그인 방식인 페이스북에서 제공하는 자바스크립트 SDK를 사용해서 페이스북 로그인을 할 것이다. 만약 자바스크립트 SDK를 사용하지 못하는 상황이라면 페이스북에서 제공하는 별도의 로그인 절차를 수동적으로 생성해야 할 것이다. * 빠른 시작: 일단 먼저 어떻게 구현해야 하는지 빠르게 훑어본 다..

* 이번에 localStorage를 사용하면서 안드로이드에서는 되는데 아이폰에서만 안되는 독특한(?) 현상 때문에 애를 먹다가 옛날에 모바일 브라우져 환경에서 디버깅을 하는데 사용했던 툴을 깔아야하나 고민 중이었는데, 아이폰용 사파리의 아주 편리한 기능을 알게 되었다. 작년에 웹페이지에 라이브러리를 깔아가면서 모바일을 디버깅했던 때와 비교하면 아주 혁신적으로 엄청 편리해진 것을 발견할 수 있을 것이다. * 웹속성 사용하기 : 모바일에서 디버깅을 하기 위한 툴이 부족한 상황에서 모바일에서의 자바스크립트를 디버깅하는 것은 매번 alert를 띄우거나 조금 부실한 아이패드에서 사파리 디버깅 콘솔을 설정해서 console.log를 사용하는 정도이었는데, 이 웹속성 기능을 사용하게 되면 조금 느리기는 하지만 마치 ..

* 이번에 간단하게 웹을 통해서 몇백KB 정도 되는 데이터를 웹에서 불러다가 처리하는 개인 프로젝트를 개발하다가 매번 몇백KB를 불러오는게 부담이 되어, localStorage의 캐쉬를 이용하는 간단한 웹을 만들고 있었는데 안드로이드와 구형 아이패드에서는 잘 되는데 이상하게 최신 아이폰5에서는 잘 안되는 것이었다. 왜그런가 살펴보다가 디버깅툴을 이용해서 이것저것 테스트하다가 아래와 같은 에러가 일어나는 것을 발견했다. "QuotaExceededError: DOM Exception 22: An attempt was made to add something to storage that exceeded the quota." : 대충 너무 큰 사이즈의 데이터를 입력하려고 했다는 의미인 것 같았는데, 검색해보니 i..

* 일반적으로는 a href="#아이디"등과 같이 사용자가 클릭을 해야하는 경우가 있는데, 이러한 경우가 아닌, 자바스크립트로 이동하는 방법을 알아보자. 이러한 경우는 페이지의 bookmark를 등록하거나 할 때 해당 위치로 이동하도록 할 때에 편리할 것이다. : 먼저 html에 id를 준다. : 그리고 해당 element로 이동하고 싶을 때 아래와 같은 자바스크립트를 호출하면 된다. location.href = "#"; location.href = "#bookmark"; : 이 방법은 아주 쉽게 의 링크/버튼을 누르지 않고 그와 같은 효과를 이끌어낼 수 있다. 하지만 url의 뒤에 #bookmark가 추가되는 불편함(?)이 있을지도 모른다. 사실, url이 그렇게 변하는 것은 미관상(?) 안 좋을수도 ..

* 자바스크립트의 오브젝트로 만들었을 경우에는 쉽게 특정 값에 대하여 삭제 가능하지만 배열인 경우에는 다소 어렵다. 게다가 IE8 이전 버전은 조금 귀찮기도 하다. 따라서 다음과 같은 간단한 함수를 하나 만들어둬도 괜찮을 것이다. function remove(arr, value) { var i; if (arr.indexOf) { // IE9+, 다른 모든 브라우져 while((i = arr.indexOf(value)) !== -1) { //해당 값이 arr에 있는 동안 루프 arr.splice(i, 1); } } else { // IE8 이하 for (i = arr.length; i--;) { //뒤에서부터 배열을 탐색 if (arr[i] === value) { arr.splice(i, 1); } } }..

* 자바스크립트의 간단한 함수들을 이용하면 진수변환을 아주 쉽게할 수 있다. 10진수 16진수 2진수 8진수 * 10진수 -> 16진수 var dec = 123; var hex = dec.toString(16); // === "7b" * 10진수 -> 2진수var dec = 123; var bin = dec.toString(2); // === "1111011" * 16진수 -> 10진수var hex = "7b"; var dec = parseInt(hex, 16); // === "123" * 16진수 -> 2진수 (* 10진수로 바꿨다가 다시 2진수로 바꾼다)var hex = "7b"; var bin = parseInt(hex, 16).toString(2); // === "1111011" * 2진수 -> ..

* 이번에는 진짜로 실용적으로 쓸 수 있는 내용들을 쭉 한번 살펴보자. 지난번의 글로벌 변수에 대한 내용도 사실은 진정한 '프로그래머'라면 글로벌 변수를 잘 안 쓸테니 별로 쓸일도 없을거라고 생각하면 그다지 실용적인 내용은 아니라고 볼 수 있다. 하지만 이번에는 변수 선언을 하면서 들이면 좋을 습관들과 왜 그렇게 하는 것이 좋은가에 대한 내용까지 다루면서 자바스크립트를 개발하면서 습관들이면 좋을 내용들을 다룰 것이다. - 이전글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function e..

* 지난번까지는 너무 속으로 깊이 들어간것 같은 기분이 들어서 다시 표면으로 좀 올라와서 실용적으로 자바스크립트 개발을 할 때 참고할 수 있을만한 내용을 다루고자 한다. 지난번에 예고 했듯이, '변수 선언'의 기본에 대해서 알아보기로 하자. 대략 2~3번에 나눠서 살펴볼 것인데, 우선적으로 1. 글로벌에 대한 내용, 2. 로컬 변수에 대한 내용과 멤버 변수의 접근 방식, 그리고 마지막으로 3. 성능을 고려한 적절한 변수 선언 방법까지 다루어볼 예정이다. 일단 이번에는 첫번째로 글로벌 변수에 대해서 살펴보자. * 이전글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 -..

* 지난번에는 prototype에 대한 기본적인 사용, 그리고 내부적으로 어떻게 돌아가는지 살펴보았다. 그렇다면 이번에는 그러한 prototype를 유용하게 활용할 수 있는 상속과 기타 다른 여러 가지 상속 방법들에 대해서 공부해보자. * 이전글2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편)2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해2013/01/21 - [속깊은 자바스크립트 강좌] Closure의 이해 / 오..

* 이번에는 자바스크립트에서 객체지향을 기본적으로 구현하기 위한 개념인 prototype에 대하여 공부해보도록 하자. 이 개념은 단순한 자바스크립트 처리에서는 중요하지 않고 모르고 넘어간 경우가 많이 있었을테지만, 조금 복잡한 자바스크립트 또는 자바스크립트 라이브러리를 만드는데 있어서 객체 지향적인 개념을 활용하고자할 때 유용하게 사용할 수 있어서 알아두면 좋은 개념이다. 특히, 자바스크립트가 내부적으로 어떻게 동작하는지에 대하여 조금 더 이해를 하기 위하여 반드시 알아두고 넘어가자. 이번에는 약간 하단에서 돌아가는 방식에 대하여 알아볼 것이고 다음 글에서는 실제로 활용하는 방법과 상속에 대하여 알아볼 것인데, 이번 글에서 아주 깊숙한 내용까지 다룰 것이기 때문에 지금은 겉으로만 객체를 생성했을 때 일어..

* 이전부터 자바스크립트 라이브러리를 이것저것 만들고 싶어서 Vanilla Javascript library 프로젝트를 시작하려고 합니다. 일단 제일 처음으로 시작은 HTML 상에 자바스크립트로 그래프를 그리는 라이브러리를 만들것이고 개발자들의 필요 요구를 지속적으로 지켜보고 라이브러리화할만한 것들을 라이브러리로 개발하고자 합니다. 일단 시작은 VJGraph 라이브러리를 만들고나서, 사이드 메뉴를 쉽게 설정할 수 있는 라이브러리르 만들 예정이고, 프로젝트 홈페이지는 아래와 같이 사용할 것입니다. http://code.google.com/p/vanilla-javascript-library/ * Vanilla Javascript Library는 다른 외부 라이브러리의 의존도를 최대한 낮추고 개발자들에게 필요..

* 자바스크립트에서는 이벤트를 다루는 방법은 대표적으로 3가지를 꼽을 수 있다. 1) HTML에 inline으로 등록Click me! 2) element의 onload 속성을 통한 등록 Click me! 3) addEventListener/attachEvent를 이용한 등록 Click me! : 일단 1)번부터 보면 이건 초창기 인터넷 넷스케이프 2 당시부터 사용하던 이벤트 핸들러 방식이다. 워낙에 전통적인 방법으로 오랫동안 사용해와서 많은 사람들이 아직도 사용하고 있다. 하지만 HTML을 사파리 reader 등으로 볼 때 문서로서 최적화하기 위하여, MVC 또는 MVVM 모델을 분류하기 위하여 html은 오로지 document를 표시해주는 역할을 취하게 하기 위해서는 1)번 보다는 이벤트 핸들러는 자바..

: 자바스크립트에서 string을 표기하는 방법이 여러가지가 있는데, 크게 2가지로 뽑을 수 있을 것이다. var objStr = new String("unikys"); // #1 var toStr = String("unikys"); // #2 var prmStr = "unikys"; // #3: String literal : 여기서 일반적으로 쓰이는 것은 #1번과 #3번(String literal)이고, 아마도 대부분은 #1번처럼 사용한 적도 별로 없겠지만, #1번과 약간 비슷해보이는 #2번의 표기방법도 있기는 있다. 비슷해보이는 표기법들이 C에서는 상당히 다르게 느껴지기는 하지만, 자바스크립트에서는 위의 #3번의 경우 아래와 같이 String의 함수들도 사용할 수 있다는 것이 신기하기도 하고 재미있다..

* 이번에는 자바스크립트에서 중요한 개념인 closure가 끝났으니 잠깐 쉬어가는 글로 다양한 웹 개발 방법론들에 대해서 써보려고 한다. 어렸을 때 부터 html은 조금씩 만져왔었지만, 웹개발에 대하여 처음으로 제대로 경험하고 배운 2001년 이후부터, 그리고 이후에 2004년, 2007년, 2012년 그리고 현재 중간중간 잠깐잠깐 웹 개발을 해온 동안 바뀌어온 웹 개발의 방법론들에 대하여 정리를 할 것인데, 오래 웹 개발을 해온 사람들은 추억을 되새길 수 있을 것이고, 웹 개발을 최근에 시작한 사람들은 현재 자신의 웹 개발 방법이 어느 정도로 와있나 가늠할 수 있는 계기가 되면 좋을 것 같고, 이 글을 쓰는 진정한 목표이자 "속깊은 자바스크립트 강좌"의 한 편으로 쓰는 것은 바로 초기 웹부터 사용되었던..

* Closure는 자바스크립트에서 수 많은 응용들을 할 수 있는 정말로 중요한 개념이나 자바스크립트라는 언어를 더욱더 빛내줄 수 있는 특징이다. Closure를 모르고 자바스크립트를 개발하는 것은 10년전의 웹 언어 중심의 개발 방법론에 머무르고 있는 것과 같은 것이기 때문에 10년전 웹개발자에서 진정한 자바스크립트 개발자로 나아가기 위한 기본을 이제부터 들여다보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 2013/01/10 - ..

* 이번에는 자바스크립트의 최대 강점이자 가장 독특한 특징 중 하나인 closure에 대해서 알아보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 2013/01/10 - [속깊은 자바스크립트 강좌] 함수를 호출하는 방법과 this의 이해 * 이번편을 읽기 전에 closure와 scope에 대한 기본적인 지식이 있어야하니까 아래의 이전 글을 읽고 오면 이해하는데 도움이 될 것이다. 2012/12/17 - [속깊은 자바스크립트 강좌] 자바..

* 이번에는 많은 개발자들이 처음으로 자바스크립트를 접하고 가장 헷갈려하는 this가 결정되는 방법에 대해서 공부를 해보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 2013/01/07 - [속깊은 자바스크립트 강좌] function declaration vs function expression 차이점 * 함수(function)의 호출 : this가 어떻게 결정되는지 알려면 일단 먼저 함수를 호출하는 방법에 대하여 알아보아야한다. 함수의 호출은 크게 4가지로 분류할 수 있다. 이 4가지에 대하여 아주 간단하게 어떻게 호출되는지 알아보고 각 경우에 대하여 this가 결정..

* 이번에는 자바스크립트의 가장 중요한 function에 대해서 살펴볼건데, 자바스크립트에서 함수는 쉽게 넘어가면 아주 쉽게 넘어갈수 있기도 하지만, 깊게 들어간다면 정말 깊게 들어갈수도 있는 부분이다. 자바스크립트에서는 이러한 부분이 가장 중요하기 때문에, 함수의 선언과 사용에 멈추는 것이 아니라 함수를 호출하는 방법에 의해 this가 결정되는 부분까지 알아보자. - 이전 글 2012/12/10 - [속깊은 자바스크립트 강좌] 시작 (예고편) 2012/12/17 - [속깊은 자바스크립트 강좌] 자바스크립트의 Scope와 Closure 기초 * function과 자바스크립트 : 자바스크립트는 다른 언어들보다도 function이 아주 중요한 위치를 차지하고 있다. 다른 언어에서는 class나 object가..

* 전문가들이 자바스크립트에 있지만 없는듯이 살라는 명령어가 2가지가 있다. eval with : eval은 보안상, 퍼포먼스상 문제가 있기 때문에 반드시 필요한것이 아니라면 사용하지 말라고 하는 것은 이해가 되지만, 솔직히 with란 놈은 한번도 써본적도 없고, 본적도 없는데 사용하지 말라고 한다. 한번도 본적이 없는 명령을 사용하지 말라고 하니까 이게 어떠한 명령인지 왠지 더 궁금해지고 사용해보고 싶은 법! 때문에 일단 이 with 명령에 대하여 한번 알아보고, 왜 사용하지 말아야 하는지 알아보자. * with - 설명: with 이후에 오는 구문을 위해 scope chain에 인자로 받는 object를 추가한다. - 문법:with (object) statement; 또는with (object) { ..

* javascript를 하게 되면 DOM객체에 CSS의 클래스를 추가하고 삭제하는 일이 많아졌을 것이다. 이 기능은 jquery로 간단하게 이용할 수도 있지만, 그 내부에서 돌아가는 사정은 알고 사용해야 할 것 아닌가. jquery만 의존해서는 자바스크립트 언어 실력이 향상 될 수 없기 때문에! 간단하게 순수 vanilla 자바스크립트로 구현해보자. * addClass : css 클래스를 추가하는 함수로, element와 class명을 받도록 한다.function addClass(element, className) { element.className += " " + className; }; : addClass는 쉽게 끝난다. 더이상 깊게 들어가야할 것은 안보인다. * removeClass : css 클..

* jquery는 정말로 편하고 좋은 라이브러리이다. 최적화도 잘되어있고 다양한 기능이 아주 쉽게 들어가있다. 하지만 자바스크립트 개발자라면 이 jquery의 활용에 대해서 고민을 해봤을수도 있고, 좋은 라이브러리라니까 가져다 쓰고 활용을 할수도 있을 것이다. 하지만 적어도 이유는 알고 사용하고, 사용을 안 한다면 왜 사용을 안 해야하는지에 대해서 고민을 해보자. * 서론 : 자바스크립트를 숱하게 해오다가 처음으로 jquery라는 라이브러리를 대충 듣게 되고, 이것이 무엇인지도 모른체 지내다가 나중에 jquery를 처음 알게 되었을 때에는 너무나도 놀라웠다. 기존에 자바스크립트로 사용했던 DOM 탐색의 경우 끽해야 id 탐색, class 이름과 태그명으로 탐색했었는데 이러한 것들을 CSS 의 검색 스타일..

* C나 자바를 접하던 사람들이 처음으로 자바스크립트를 접하면 혼란스러워하는 것이 바로 scope와 this의 상이함일 것이다. 처음에 접할 때에는 객체지향 언어에서는 이해할 수 없는 동작들을 하고 있기 때문에 이것이 뭔가 싶다가도 자바스크립트가 이상하다고 스스로 판정을 내리게 된다. 하지만 이것들은 자바스크립트의 원리만 이해하면 아주아주 쉽고, 오히려 객체지향 언어보다 놀라운 유연함에 감탄을 하게 될 것이고, 자바스크립트를 하다가 다시 C나 자바를 하게 되면, '자바스크립트라면 쉽게 해결할 수 있는데..'라며 자바스크립트를 아쉬워하게 될 것이다. 그럼 이번에는 일단 자바스크립트의 가장 '기본'인 scope와 closure에 대해서 알아보자. - 이전 강좌 2012/12/10 - [속깊은 자바스크립트 강..

* 자바스크립트로 DOM element의 넓이를 구할 때 단순히 아래와 같이 하면 제대로 적용이 안되는 경우가 있다. : 위와 같은 경우 브라우져상에서 실제로 보이는 width는 .myStyle로 인해 400px로 나와있지만, 9번째 줄에서 element에 접근하여 style의 width를 출력해보면 빈칸으로 나오게 된다. 왜냐하면 이 div의 width는 css의 클래스로 설정된 width이기 때문에, element 자체의 style안에는 width 값이 없기 때문이다. 이럴 때 DOM을 브라우져에 랜더링된 실제 넓이를 구하는 방법은 다음과 같다. console.log(window.getComputedStyle(document.querySelector(".myStyle")).width); // === ..

* '자바스크립트'하면 제일 먼저 떠오르는 생각이 무엇인가? * 자바스크립트? : 맨 위의 질문에 대한 대답을 다양한 대답들이 나올 것이다. '자바스크립트'라는 이름 때문에 '자바'의 하위에 존재하는 언어, 또는 '스크립트'라는 이름 때문에 손쉬운 스크립트 언어라고 하는 사람들도 있을 것이고, 직접 자바스크립트를 사용해본적이 있는 사람이라면 아주 쉬운 언어, 배우기 쉽고 적용하기 쉬운 언어라는 의견도 있을 것이고 또는 성능이 느린 언어나 디버깅하기 안좋은 매우 짜증나는 언어라는 생각도 있을 것이다. c나 자바의 주류 언어로 프로그래밍을 많이 해오던 사람들이라면 웹프로그래머들이 웹페이지, 홈페이지를 구축하는데 있어서 사용하는 스크립트 언어라는 인식이 있을 것이고, 웹프로그래머들은 클라이언트 사이드에서 무언..

* 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을 계산해서 하는 것이 좋을 것이..