Digital Bohemian | 'Javascript' 카테고리의 글 목록
Digital Bohemian 위치로그  |  태그  |  미디어로그  |  방명록
icon Javascript 에 해당하는 글10 개
2011.11.08   {jscamp: "Hannam"}
2011.01.06   Firebug의 console 파헤치기. (5)
2010.12.14   IE의 location.href 이동시 Referer 문제에 대한 해결책!
2010.12.12   DOM의 사용을 최소화하라! createDocumentFragment()
2010.12.12   Javascript Perfomance Best Practice
2010.10.26   자바스크립트로 CSS 인라인 코드 동적 로딩하기.
2007.12.17   input 박스 숫자만 입력 가능하게..
2007.12.14   해당월에 총 몇주가 있는지 알아보는 스크립트
2007.11.21   XHTML과 HTML의 차이
2007.11.21   javascript-css style (2)


icon {jscamp: "Hannam"}
Javascript | 2011.11.08 16:54
널리 세상을 이롭게하라는 홍익인간 정신을 바탕으로 내가 몸담고 있는 Daum에서의 FT 기술과 지인이 다니는  NHN에서의 FT 기술을 합쳐 여러분들에게 공개하고자 합니다. 

아직 1회이기에 부족한점도 많고, 준비해야할것도 많지만 관심있으신분들의 많은 참여 바랍니다.

http://onoffmix.com/event/4391

ps. 라고 썼지만 뭐 블로그에 1000명쯤 오는거 같이 써놨네.ㅋㅋ

arrow 태그 : jscamp
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon Firebug의 console 파헤치기.
Javascript | 2011.01.06 14:45
웹개발자나 FT개발자는 기본적으로 Firefox나 Chrome을 기본 브라우져로 사용하는 경우가 많다. 
일단 빠르고 (파폭은 쫌 느림;) 다양한 Extensions이 존재하기 때문인데, 그 중에서도 개발을 위해선 Extionsions 중 firebug를 빼먹을순 없다. 

오늘은 강력한 firebug의 기능 중 console에 대해서 자세히 살펴보려 한다. 

1. console.log(object[, object, ...])
script내 단순 메세지 출력을 위해 사용. 



결과 : 


2. console.debug(object[, object, ...])
console.log()와 동일하나 추가적으로 실행라인이 표시됨. 



결과 : 


3. console.info(object[, object, ...])
console.debug()와 동일하고 앞에 Info를 가르키는 아이콘이 출력된다. (배경색 : 시원한 파란색)



결과 : 


4. console.warn(object[, object, ...])
console.debug()와 동일하고 앞에 warning을 가르키는 아이콘이 출력된다. (배경색 : 불안한 노란색)



결과 : 


5. console.error(object[, object, ...])
console.debug()와 동일하고 앞에 error를 가르키는 아이콘이 출력되고 에러난 부분의 메세지가 출력된다. (배경색 : 에러의 빨간색)



결과 : 


6. console.assert(expression[, object, ...])
조건을 입력하고 출력할 텍스트를 입력하면 해당 조건이 통과하였을경우 Console창에 출력되지 않고 통과하지 못하였을땐 Console에 출력된다. 



결과 : 


7. console.dir(object)
인자로 넘어간 개체에 대해 모든 프로퍼티와 값들을 출력한다. (HTML 마크업을 넘기면 Dom Tree 출력)

test division

결과 : 


8. console.dirxml(node)
인자로 넘어온 노드에 대한 소스(innerHTML)를 출력한다. 

test division

결과 : 



9. console.trace()
자바스크립트가 최초 실행된 순간부터 console.trace를 만날때까지의 실행 정보를 출력한다. 

Trace Test



결과 : 


10. console.group(object[, object, ...]), console.groupEnd()
그룹을 생성하여 그룹별로 log를 출력할수 있게 해준다. groupEnd는 group()을 열어줬으면 반드시 닫아주는 코드도 삽입해야한다.
그리고 console.groupCollapsed()는 group()과 기능은 동일하나 Default가 접혀있는 상태이다. 



결과 : 


11. console.time(name), console.timeEnd(name)
실행 시간을 체크하길 원하는 function이나 구문을 감싸면 실행 시간을 출력해준다. 
console.time()을 열었으면 반드시 console.timeEnd()로 닫아줘야 한다. 



결과 : 


12. console.profile([title]), console.profileEnd()
자바스크립트 프로파일러를 실행한다. profile()로 연 순간부터 profileEnd()를 만날때까지 실행한 모든 스크립팅에 대한 시간(고유시간, 시간, 평균, 최소, 최대)와 호출횟수, 전체 실행 평균 퍼센트를 출력한다. console.profile()을 열었으면 반드시 console.profileEnd()로 닫아줘야한다. 



결과 : 


13. console.count([title])
실행한 횟수 만큼 count를 집계하여 출력해준다. 이때 title이 동일하다면 title별로 count를 더하여 보여준다. 



결과 : 


14. console.exception(error-object[, object, ...])
try ~ catch에서 catch의 error 객체를 인자로 넘기면 에러 메세지를 자세히 출력해준다. 



결과 : 


15. console.table(data[, columns])
Array나 Object등 형태의 가공된 데이터를 table 형태로 출력해준다. 



결과 : 





arrow 태그 : Console, console.log, firebug, firefox extension, 파이어버그
arrow 트랙백2 | 댓글5
sangpire 2011.07.07 14:02 신고 L R X
오 정말 정리 잘해 놓으셨네요.
bcnet 2011.09.26 16:36 신고 L R X
저같은 초보 개발자에겐 정말 많은 도움이 되는 자료네요. ^^ 개인 학습용 블로그에 출처기입해서 스크랩 하였습니다.
FS아쿠 2012.06.20 16:56 신고 L R X
좋은글 잘 봤습니다. .저또한 개인 학습 블로그에 출처기입하여 스크랩 하겠습니다.
감사합니다. 2012.11.14 04:41 신고 L R X
좋은 내용이네요. 출처 기입해서 스크랩 하겠습니다.

헤르메스의날개 2014.04.29 16:07 신고 L R X
덕분에 많은 걸 알아갑니다.
감사합니다.

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon IE의 location.href 이동시 Referer 문제에 대한 해결책!
Javascript | 2010.12.14 11:03
IE에선 location.href로 이동시 이동한 페이지에서 Referer 정보를 확인하면 이동 전 페이지의 URL이 노출되지 않는다. (그외 브라우져에선 문제없음.)

검색을 좀 해보니 3가지 해결책을 제시하고 있다. 

1. onclick의 function을 검증용으로만 사용하라.


test

2. referer 파라미터를 추가하여 서버사이드에서 처리하자.

test

3. anchor 테그를 동정 생성후 실행하자.

그 무엇을 쓰던간 선택은 상황에 맞게!!

arrow 태그 : ie referer bug, location.href bug
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon DOM의 사용을 최소화하라! createDocumentFragment()
Javascript | 2010.12.12 21:54
appendChild시  DOM Access를 최소화 하기 위해 사용되는  createDocumentFragment는 동적으로  element를 생성할시 유용하게 사용할수 있다. 

var frag = document.createDocumentFragment();
for( var i=0;i < 100;i++ ) {
elem = document.createElement("li");
frag.appendChild(elem);
}

document.body.appendChild(frag);

arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon Javascript Perfomance Best Practice
Javascript | 2010.12.12 21:30
Nokia 위키에 올라온 자바스크립트 성능향상을 위한 예제들이다. 
몇몇개는 특정 브라우져에서만 속도 차이를 보이곤 있지만 그래도 알아두면 좋은 정보!!


arrow 태그 : javascript, performance best practice
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon 자바스크립트로 CSS 인라인 코드 동적 로딩하기.
Javascript | 2010.10.26 13:37
CSS는 항상 head에 정의되어있어야 하지만 때론 자바스크립트에서 CSS 인라인 코드를 동적으로 로딩해야 할일이 생긴다. 
아래는 자바스크립트로 CSS 인라인 코드를 동적으로 로딩하는 예제이며 크로스 브라우징을 지원한다. 

var cssStr = "div {border:1px solid red;}"
var style = document.createElement("style");
style.setAttribute("type", "text/css");
if( style.styleSheet ) { // IE
     style.styleSheet.cssText = cssStr;
} else { //W3C
     var cssText = document.createTextNode(cssStr);
     style.appendChild(cssText);
}
document.getElementsByTagName("head")[0].appendChild(style);

arrow 태그 : cssText
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon input 박스 숫자만 입력 가능하게..
Javascript | 2007.12.17 11:32
function num_only( Ev ){
    var evCode = ( window.netscape ) ? Ev.which : event.keyCode ;
    /* FF일 경우 Ev.which 값을,
        IE을 경우 event.keyCode 값을 evCode에 대입 */
    if ( ! ( evCode == 0 || evCode == 8 || ( evCode > 47 && evCode < 58 ) ) ) {
    /* 눌러진 키 코드가 숫자가 아닌 경우
        ( '0'은 FF에서 Tab 키,
          '8'은 FF에서 BackSpace가 먹히지 않아 삽입)    */
        if ( window.netscape ) {        // FF일 경우
            Ev.preventDefault() ;        // 이벤트 무효화
        } else {                                // IE일 경우
            event.returnValue=false;    // 이벤트 무효화
        }
    }
}

<input type='text' name='test' size='20' OnKeyPress='num_only(event)'>

퍼온거..

arrow 태그 : onkeypress, 숫자, 숫자만 입력, 입력, 자바스크립트 숫자
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon 해당월에 총 몇주가 있는지 알아보는 스크립트
Javascript | 2007.12.14 17:43
필요해서 만들어봤는데, 분명 어딘간 더 좋은 소스가 존재할꺼같다..

function isLeapYear(year)
    {
        var reVal = ((year % 4 == 0) && ((year % 100) != 0) || ((year % 400) == 0)) ? true : false;
        return reVal;        
    }
    
    function daysInMonth(month,year) {
        var dd = new Date(year, month, 0);
        return dd.getDate();
    }
    
    function getWeekDay(day,month,year)
    {
        var newDate = new Date(year+"/"+month+"/"+day);    
        document.writeln(newDate);
        return newDate.getDay()+1;
    }
    
    function weekDayCount(selYear, selMonth)
    {
        j = 0;

        for(i=1;i<daysInMonth(selMonth, selYear);i++)
        {
            if (getWeekDay(i,selMonth,selYear) == 2)                            
            {
                j++;                
            }
            
        }
        alert(j);            
    }



arrow 태그 : weekcount, weekday, 몇 주, 해당월, 해당월 몇주
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon XHTML과 HTML의 차이
Javascript | 2007.11.21 19:24
http://blog.wystan.net/2007/05/24/xhtml-vs-html

arrow 태그 : HTML, xhtml
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon javascript-css style
Javascript | 2007.11.21 18:20

사용법 document.forms[0].userid.style.textAlign="center";

          document.forms[0].userid.style.cursor   ="hand";



fontFamily

fontStyle

fontVariant

fontWeight

fontSize

font

color

background

backgroundColor

backgroundImage

backgroundRepeat

backgroundAttachment

backgroundPosition

backgroundPositionX

backgroundPositionY

wordSpacing

letterSpacing

textDecoration

textDecorationNone

textDecorationUnderline

textDecorationOverline

textDecorationLineThrough

textDecorationBlink

verticalAlign

textTransform

textAlign

textIndent

lineHeight

marginTop

marginRight

marginBottom

marginLeft

margin

paddingTop

paddingRight

paddingBottom

paddingLeft

padding

border

borderTop

borderRight

borderBottom

borderLeft

borderColor

borderTopColor

borderRightColor

borderBottomColor

borderLeftColor

borderWidth

borderTopWidth

borderRightWidth

borderBottomWidth

borderLeftWidth

borderStyle

borderTopStyle

borderRightStyle

borderBottomStyle

borderLeftStyle

width

height

styleFloat

clear

display

visibility

listStyleType

listStylePosition

listStyleImage

listStyle

whiteSpace

top

left

position

zIndex

overflow

pageBreakBefore

pageBreakAfter

cssText

pixelTop

pixelLeft

pixelWidth

pixelHeight

posTop

posLeft

posWidth

posHeight

cursor

clip

filter


arrow 트랙백0 | 댓글2
Mont Blanc Watches 2012.08.07 14:34 신고 L R X
Wow really glad i found your blog, i’ll be sure to visit back now i’ve bookmarked it.

daidas 2013.04.03 04:03 신고 L R X
아름다운 여자가 해바라기하는 걸 좋아해요

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



[PREV] [1] [NEXT]
BLOG main image
雜役夫
분류 전체보기 (89)
Mac OSX (2)
Linux (3)
Windows (1)
Database (3)
ASP (6)
PHP (1)
CSS (7)
Javascript (10)
Browser (4)
ASP.NET with C# (2)
Ruby on Rails (3)
FLEX (5)
2008년 (23)
2009년 (7)
2010년 (7)
2011년 (3)
여행 (2)
非常に自転車 超ブレーキ
非常に自転車 超ブレーキ
bp claims
bp claims
http://www.plaxo.com/profile..
http://www.plaxo.com/profile..
http://engageseo.newgrounds...
http://engageseo.newgrounds...
Firebug의 console 파헤치기[..
웹프로그래밍
Total : 109,832
Today : 1
Yesterday : 181
rss
위치로그 : 태그 : 방명록 : 관리자
webkorea's Blog is powered by Daum / Designed by plyfly.net

티스토리 툴바