demun(대문블로그)

퍼블리셔/javascript2014. 6. 9. 06:00

선택하기 자바스크립트에서 가장 먼저 해야할것이 선택하기 일것입니다. 어떻게 선택하는지 알아봅니다. 아이디 선택하기 window.document.getElementById("item1"); 태그(엘리먼트) 선택하기 window.document.getElementsByTagName("div"); 클래스 선택하기 window.document.getElementsByClassName("content_data"); 부모 선택하기 document.getElementById("item1").parentNode; 자식 선택하기 childNodes 는 텍스트 노드까지 불러오므로 순서를 염두해두어야 한다. var item = window.document.getElementById("item"); var nodes = it..

퍼블리셔/Grunt2014. 6. 6. 06:00

grunt-markdown 마크다운에 대해서 소개하기전에 잠시 개인적인 이야기를 하겠습니다. 저는 개인적으로 github.com 을 관심있게 보고 있습니다. 제 블로그에 github 스타일을 하나씩 접목하고, grunt 의 기술도 하나씩 접목하고 있습니다. 여기에 관련된 기술들이 정말 많고, 하나씩 소개하고 있는데 이것들이 전부 연결고리처럼 하나하나 연관이 되어 있습니다. 저는 현재 마크다운으로 글을 쓰고 있으며, sublimetext 를 사용하고, grunt 를 사용하고 자동으로 변환된 html을 티스토리에 복사 붙여넣기 하고 있습니다. 이전에 구문강조 자바스크립트 highlight.js 에 대해서 소개한적이 있습니다. grunt-markdown 은 highlight 를 사용하고 GFM을 사용합니다. ..

퍼블리셔/javascript2014. 6. 5. 06:00

콜백과 유효범위 이전글에서 다음과 같은 형태로 콜백을 실행했다고 가정하자. callback(parameters); 위의 코드는 대부분 잘 동작하지만 콜백이 일회성의 익명함수나 전역 함수가 아니고 객체의 매서드인 경우도 많다. 만약 콜백 메서드가 자신이 속해있는 객체를 참조하기 위해 this를 사용하면 예상치 않게 동작할수 있다. myapp라는 객체의 매서드인 paint()함수를 콜백으로 사용한다고 가정해보자. var myapp = {}; myapp.color = "green"; myapp.paint = function (node) { node.style.color = this.color; }; // findNodes() 함수는 이런식으로 동작한다 var findNodes() = function (call..

퍼블리셔/javascript2014. 6. 4. 06:00

콜백패턴 함수는 객체다. 즉 함수를 다른 함수의 인자로 전달할 수 있다. introduceBugs()함수를 writeCode() 함수의 인자로 전달하면, 이때 introduceBugs()를 콜백함수 또는 간단하게 콜백이라고 부른다. 즉 함수를 다른 함수의 인자로 전달하면, 인자로 전달된 함수를 콜백함수라고 한다. function writeCode(callback) { // 어떤 작업을 한다. callback(); // ... } function introduceBugs() { // 버그를 만든다. } writeCode(introduceBugs); introduceBugs()가 writeCode()의 인자로 괄호 없이 전달된 사실을 눈여겨 봐야한다. 괄호를 붙이면 함수가 실행되는데 이 경우는 함수의 참조만..

퍼블리셔/javascript2014. 6. 3. 06:00

함수 배경지식 특징 런타임, 즉 프로그램 실행중에 동적으로 생성할 수 있다. 변수에 할당할 수 있고, 다른 변수에 참조를 복사할 수 있으며, 확장가능하고, 몇몇 특별한 경우를 제회하면 삭제할 수 있다. 다른 함수의 인자로 전달할 수 있고, 다른 함수의 반환값이 될수 있다. 자기 자신의 프로퍼티와 매서드를 가질 수 있다. 용어정리 기명함수표현식(named functcion expression) 와 무명함수표현식(unnamed function expression) = 익명함수표현식(anonymous function) 과 함수표현식이 있다. 함수의 이름이 있으면 기명함수, 없으면 무명함수 라고 생각하면 된다. 아래는 예제. function foo() {} // 함수선언문 var bar = function ()..

퍼블리셔/기술2014. 6. 2. 06:00

hightight.js 제가 오늘 소개해드릴 스크립트는 바로 highlight.js 입니다. 블로그를 하다보면 코드를 하이라이트 하고 싶을 때가 있습니다. 많은 자바스크립트가 있는데 그중에 highlight.js 를 소개하는 이유가 있습니다. 이글은 2011년도에 작성한 글입니다. 그래도 참고하기에는 좋은 글이기에 이렇게 적습니다. 자바스크립트 구문광조 비교 : http://softwaremaniacs.org/blog/2011/05/22/highlighters-comparison shjs 자바스크립트는 원문에서 비교했는데 여기서는 뺐습니다. 뭐가 좋다라고 얘기하기에는 무리가 있을 수 있지만 참고하여 뭘 사용할지는 알수 있겠지요.홈페이지 -> http://highlightjs.org/우리가 자주 사용하고 ..

퍼블리셔/javascript2014. 5. 31. 06:00

JSON JSON(JavaScript Object Notation)의 준말로, 데이터 전송 형식의 일종이다. JSON 의 예. {"name": "value", "some": [1, 2, 3]}; JSON에서는 프로퍼티명를 따옴표로 감싸야 한다는 점이 객체 리터럴과의 유일한 문법적 차이다. 객체 리터럴은 프로퍼티명이 식별자로서 유효하지 않은 경우에만 따옴표가 필요하다. 즉 {"first name": "Dave"} 에서처럼 프로퍼티명에 공백문자가 포함되었다면 따옴표로 가싸주어야 한다. JSON 문자열에는 함수나 정규식 리터럴을 사용할 수 없다. JSON 다루기 JSON 문자열을 평가하면 보안 문제가 있을 수 있기 때문에 JSON.parse()를 이용하는 것을 권장한다. // 입력되는 JSON 문자열 var ..

퍼블리셔/javascript2014. 5. 30. 06:00

사용자 정의 생성자 함수 Person 생성자 함수를 정의한 예시. var Person = function (name) { this.name = name; this.say = function () { return "I am " + this.name; }; }; new와 함께 생성자 함수를 호출하면 함수 안에서 다음과 같은 일이 일어난다. 빈 객체가 생성된다. 이 객체는 this라는 변수로 참조할 수 있고, 해당 함수의 프로토타입을 상속받는다. this 로 참조되는 객체에 프로퍼티와 매서드가 추가된다. 마지막에 다른 객체가 명시적으로 반환되지 않을경우, this로 참조된 이 객체가 반환된다. 재사용되는 멤버는 프로토타입에 추가하는것이 더 낫다는 점이다. 빈 객체를 생성하면 실제로는 빈 객체가 아니다. 즉 그..

퍼블리셔/javascript2014. 5. 29. 06:00

리터럴과 생성자 Object() 나 Array() 등의 내장 생성자 함수에 비해 리터럴 표기법을 쓰는 게 더 좋다. 왜 좋은지는 아래글에서 보기 바란다. 객체 리터럴 자바스크립트에서 '객체'라고 하면 단순히 이름-값 쌍의 테이블을 생각하면 된다. 객체 리터럴 표기법은 아래처럼 객체를 생성할때 이상적이다. // 빈 객체에서 시작한다. var dog = {}; // 프로퍼팉 하나를 추가한다. dog.name = "Benji"; // 이번에는 메서드를 추가한다. dog.getName = function () { return dog.name; }; 이 예제는 빈 객체에서 시작해서 프로퍼티와 매서드를 추가하면서 많은 변화를 줄 수 있다. // 프로퍼티와 매서드 값을 변경할 수 있다. dog.getName = fu..

퍼블리셔/jQuery2014. 5. 27. 06:00

블로그를 하다보면 부드러운 화면이동을 하고 싶을 때가 있습니다. 특히나 긴글일경우 스크롤을 하기가 부담스럽죠. 또 글이 길거나 차례같은것이 있어서 클릭하면 원하는 위치로 이동을 하고 싶을때가 있습니다. 기존의 스크롤을 해주는 플러그인들은 복잡한 설정법이라든가 스타일이 많이 들어가 있다든가 하는것이 대부분인데요. 오늘 소개하는것은 아주 간단합니다. 저만 잘 따라오시면 html, css, javascript 를 몰라도 누구나 따라할 수 있습니다. 초보자들도 따라할 수 있도록 쉽게 설명해드리겠습니다. 먼저 홈페이지를 소개합니다. Smooth Scroll -> https://github.com/cferdinandi/smooth-scroll 데모페이지 ->http://cferdinandi.github.io/smo..