Kingdom

작년 이맘때쯤 정규식으로 URL 추출하기를 포스팅 했었는데, 사실 당시 정규식으론 많은(..) 문제점이 있었습니다. -_-; 그리하여 개선을 하려고 했으나 이러저라한 일에 밀리다보니 어느덧 ;; 이번엔 좀더 정확한 결과를 얻을 수 있는데에 초점을 맞추고 작성하였습니다. 기존의 문제점이었던 HTML 페이지내 URL 과 DOM 객체 이름들이 잘못 검출되는 문제도 수정되었습니다. URL과 같은 DOM 이름이 아니라면 대부분 올바르게 검출될겁니다. 기존에는 단순화 하면서 단일 함수로 만들었었는데, 정규식을 다양하게 활용하기 위해 자바스크립트의 클래스로 만들었습니다. 소스코드를 보시려면 아래의 소스코드 화면에서 오른쪽 상단의 아이콘에서 소스코드 보기를 눌러 보시면 쉽게 확인 가능합니다. 버그 및 문의는 댓글을 남..

jQuery 를 이용하면 여러 객체에 쉽게 접근이 가능한데, 폼 객체의 값들을 읽거나 설정하는데는 약간 헷갈리는 부분이 있습니다. 그건 각 폼 객체들이 약간씩 다른 동작을 하기 때문인데, 단순한 폼 뿐이라면 그냥 ID 를 지정하고 바로 접근하는게 아주 쉽고 빠릅니다. 하지만, 동일한 폼이 여러개 생긴다거나 동적으로 생성되거나 하는 경우 골치아파질 수 있습니다. 다행이도 jQuery 는 이런 접근을 아주 쉽게 도와줍니다. 바로 [ ] 표현식으로 쿼리를 지원하기 때문에 간단한 표현식으로 원하는 결과를 얻을 수 있는데, 폼 객체를 이를 이용해서 셀렉트 하는 방법이 있습니다. 여기서 Year 텍스트 필드의 값을 가져오고자 할때 아래와 같이 작성할 수 있습니다. $("#TestForm > input[name='T..

Q) 현재 주소값 중 ID 와 CATEGORY 값을 체크하여, 만약 두 값 모두 있을 경우 해당 메뉴만 굵게, ID 값만 있을 경우 ID 에 해당하는 메뉴들 모두 굵게, 없을 경우 메뉴 전체를 굵게 처리를 하려면? 테스트를 위한 설정은 아래와 같습니다. 주소 : /localhost/?id=A&category=1 메뉴 : 메뉴A-1 메뉴A-2 메뉴A-3 메뉴B-1 메뉴B-2 A) 이 경우 메뉴 A-1 만 굵게 되어야 하고, category 값이 없다면 id=A 에 해당하는 메뉴 모두 굵게 처리 하는 경우입니다. 현재 주소의 값중 id, category 가 어떤게 있는지 모르고 해당 값이 있냐 없냐에 따라 또 처리가 달라지기 때문에 복잡해 보이는 것이죠. 이게 복잡해 보이긴 해도 사실 간단히 해보면 단순합니..

브라우저에서 자바스크립트를 사용할 경우 여러 변수를 사용뒤 그 변수가 계속 남아 메모리를 차지하게 되는 것이죠. 특히 Ajax 를 사용해서 프로그래밍 하는 경우 이 문제로 인해 많은 리소스를 차지하게 될 수 있습니다. 이를 해결하는 간단한 방법이 있어 소개합니다. 아래의 코드처럼 return 을 try {} 구문으로 작성하고, finally {} 를이용해서 객체를 초기화 시키는 것입니다. try { return obj; } finally { obj = null; } 원 출처 및 자세한 내용, 테스트는 아래 사이트를 참고하세요. [블로그] Finally, the alternative fix for IE6's memory leak is available [w] http://www.hedgerwow.com/3..

자바스크립트에서 값을 넘길때 아래의 함수들을 쓰게 되는데, 세개의 함수는 각기 다른 차이가 있습니다. 각각 특수문자를 실행시 결과 화면입니다. 각 함수의 특징을 잘 살펴 적절한 곳에 사용하는게 중요하겠죠. escape('~!@#$%^&*(){}[]=:/,;?+\'"\\') %7E%21@%23%24%25%5E%26*%28%29%7B%7D%5B%5D%3D%3A/%2C%3B%3F+%27%22%5C encodeURI('~!@#$%^&*(){}[]=:/,;?+\'"\\') ~!@#$%25%5E&*()%7B%7D%5B%5D=:/,;?+'%22%5C encodeURIComponent('~!@#$%^&*(){}[]=:/,;?+\'"\\') ~!%40%23%24%25%5E%26*()%7B%7D%5B%5D%3D%3A%2F..

[출처] NIHILOGIC 제목: Compression using Canvas and PNG-embedded data 링크: http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html 이 글은 자바스크립트 소스를 Canvas를 이용해 무손실 PNG 파일로 기록함으로서 용량을 대폭 줄이는 방법을 소개하고 있습니다. 기본원리 부분을 인용하면 "For PNG we have two options, 24 bit and 8 bit. Using 24 bit RGB colors, we can store 3 bytes of data per pixel while 8 bit indexed colors only gives us 1 byte per pixel...

아래에 2가지의 CSS를 통해 라운드 테이블을 구현한 방법을 소개 합니다 테이블 + 자바스크립트 사용하는 방법 테이블에 속성에 설정값을 넣고, 자바스크립트로 DOM 객체를 동적 생성하여 구현하는 방법입니다. 이 방법은 테두리 색을 지정할 수 있다는 장점이 있습니다. 그리고 코드가 짧고, 단순하다는 점이 있습니다. 단점은 다른 옵션들은 없기 때문에 직접 코드를 수정해서 바꿔야 합니다. asdasdasd as daw e [링크] SIR - CSS [팁] 이미지 없이 모서리 라운드 테이블 만들어 최신글 구현 Nifty Corners Cube 라이브러리를 이용하는 방법 라운드 테이블을 다양한 옵션을 적용해서 만들 수 있는 라이브러리로 다운로드는 아래 링크에서 받으시면 됩니다. 다운로드 : Nifty Corner..

설명 applyElement() 함수는 객체의 바깥에 객체를 추가해 줍니다. 예제의 버튼을 누르게 되면 DIV 객체가 이미지의 외곽에 생성/추가 됩니다. 계속 버튼을 누를 경우 안쪽의 DIV 객체 테두리 색상이 점점 진해지게 됩니다. 잘못 보면 appendChild() 와 다를바 없어 보이지만, 이미지 객체의 바깥에 객체를 추가한다는게 중요합니다. 객체의 모습을 자세히 살펴보려면, FireFox의 'Dom Inspector' 같은 프로그램으로 확인 가능합니다. 원래 applyElement() 메소드는 IE 전용 DOM 확장 메소드입니다. 따라서 다른 브라우저에서는 지원하지 않기 때문에 사용이 불가능합니다. 이 메소드는 안쪽과 바깥쪽에 해당 객체를 추가할 수 있는데, W3C에서 권장하는 대체 메소드는 ap..