'자바스크립트'에 해당되는 글 5건

  1. 2011/10/13 숫자인지 체크하는 자바스크립트..
  2. 2011/10/11 Javascript에서 사용하는 HTML Parser라고 합니다.
  3. 2011/10/11 자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리
  4. 2011/10/10 자바스크립트에서 form의 데이터를 문자열로 가져오기 (2)
  5. 2008/01/08 Free Javascript Editor - EditArea

숫자인지 체크하는 자바스크립트..

|



전화번호를 입력할 때..

000-0000-0000
(000)000-0000

이런형태로 입력하자나요..
요런걸.. 00000000000 형태로 받고 싶어서 만든 간단한 자바 스크립트입니다.

필요한 분들은 참고하세요~~





예제를 웹브라우저에서 열어보면

00000000000
11111111111

요렇게 나올 겁니다.


크리에이티브 커먼즈 라이선스
Creative Commons License


Trackback 0 And Comment 0

Javascript에서 사용하는 HTML Parser라고 합니다.

|



Javascript에서 HTML을 파싱할 때 사용할 수 있는 라이브러리라고 합니다.

http://ejohn.org/blog/pure-javascript-html-parser/ 에 방문해 보면 
Pure JavaScript Html Parser라고 나와있네요..
간단한 소스 설명도 되어 있습니다.

http://ejohn.org/apps/htmlparser/ 에서 테스트를 할 수 있는데요..
대략 테스트해보니.. XML형태로 제대로 만들어주네요~

나중에 유용하게 사용할 수 있을 것 같습니다.

htmlparser.js 파일은 http://ejohn.org/files/htmlparser.js 에서 다운로드 하세요..
js 소스도 한번 보세요.. 300줄 밖에 안되는데요.. 정규식이랑 아주 지대로 쓴것 같네요~

혹시 몰라서 파일로도 올려놓을게요.. ^^

 
크리에이티브 커먼즈 라이선스
Creative Commons License


Trackback 0 And Comment 0

자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리

|


제레미 키스가 쓴 방탄 Ajax라는 책에서 관련 자료를 가져왔습니다.

원격 서버 접근

보안상의 문제로 자바스크립트에서 다른 도메인의 자바스크립트를 접근하는 것은 기본적으로 안됩니다.
특히 Ajax와 같은 XMLHttpRequest를 통해서 접근하는 것은 불가능하죠..
즉, 다음과 같이 접근할 수는 없다는 겁니다.


XMLHttpRequest를 사용하는 방법으로는 기본적인 웹 API를 이용할 수 없다고 합니다. 
그런데 script를 이용하면 이런 보안상의 제약을 없앨 수 있다고 합니다. 
다음과 같이 다른 도메인에 있는 자바스크립트 파일을 읽어올 수 있기 때문이죠.


이런 형태로 요청할 수 있다면, JSON 파일도 요청할 수 있다고 합니다.
Ajax에서 XML, Text와 함께 리턴 타입으로 많이 사용하는 JSON은 기본적으로 javascript 구문이기 때문에 가능하다고 합니다.
그러나 원격 서버에서 JSON으로 결과를 리턴해 주지 않는다면 소용은 없겠죠.. 

어쨌든 이렇게 자바스크립트로 가져오려면 경우에 따라서 동적으로 새로운 script를 생성해야 할 필요도 있을 겁니다.
다음과 같이 처리하면 가능하다고 하네요



위 소스는 url을 자바스크립트로 head에 추가하는 함수입니다. 
그리 복잡하지는 않죠.. script라는 요소를 만들고, type이나 src와 같은 속성을 넣고, head 하위에 추가하는 겁니다.

하지만, 일반적인 웹서비스는 이런 형태로 구성되어 있지는 않죠... ^^ 
대부분은 자체의 서버에 요청을 하고, 해당 서버에서 원격 서버로 연결하는 프록시 방식을 많이 이용하고 있는 듯 합니다.
어쨌든 위와 같은 방식도 있구나 하고 보시면 될 것 같습니다.

onload 이벤트 처리

웹 프로그래밍을 하면서 이런 경험은 한번 쯤 있을 겁니다.
특정 함수를 head에 있는 자바스크립트에서 실행을 해야 하는데, 
그 함수내에 document.getElementsByTagName("a")과 같은 소스가 들어가 있는 경우, 
아직 페이지가 로드 되지 않아서 제대로 처리가 안되는 때가 있습니다.

로직 상에는 아무 문제가 없는데, 답답해지죠.. -.-
이런 경우, 보통 body 태그에 onload="함수"와 같이 사용하거나, 
html 소스의 맨 하단에 그와 같은 함수를 두어서 해결하기도 합니다. 

그런데 방탄 Ajax란 책에서 보면 body 태그에 넣는 것과 같이 스크립트 코드와 html 코드가 함께 있는 것은 바람직 하지 않다고 합니다.
prepareLinks라는 함수를 호출할 때 다음과 같은 형식으로 사용할 수 있다고 합니다. 


window.onload에 대해서는 이미 아시는 분들도 많겠지만, body 태그에 onload=""와 같은 것이죠
위 소스는 html 내의 앵커(a) 태그를 찾아서 설정된 href로 이동하지 않고, doSomething 함수를 수행하도록 바꾸는 겁니다.

그런데 이와 같이 사용할 경우, 단 하나의 함수만 지정할 수 있다고 합니다.
여러 개의 함수를 순차적으로 실행할 경우에는 다음과 같이 addLoadEvent 함수를 사용할 수 있다고 하네요..



음.. 꽤나 복잡해 보입니다. 익명함수를 많이 사용하는 듯 해요
테스트는 안해 봤지만, 잘 되겠죠..

오랜만에 책 좀 보다가 생각나서 정리해 봤습니다.
 
크리에이티브 커먼즈 라이선스
Creative Commons License


Trackback 0 And Comment 0

자바스크립트에서 form의 데이터를 문자열로 가져오기

|


자바스크립트에서 form의 데이터를 문자열로 가져오기

간단한 자바스크립트 팁에 대해서 설명하려고 합니다. 
Ajax를 활용하다 보면, Form안에 있는 데이터를 문자열로 모아서 처리해야 하는 종종 경우가 있습니다. 

즉, 폼 필드 내를 반복하면서 이름과 값을 추출해서 다음과 같은 형태로 리턴하는 거죠..

name=mini&title=xml&date=20080613

이런 문자열을 만들기 위한 함수를 먼저 하나 만들어 보겠습니다. 


간단한 형태죠.. 먼저 encodeURIComponent는 폼의 값을 정상적으로 서버에 전송하기 위해서 자바스크립트에서 제공하는 인코딩을 수행합니다. 
전송 중에 발생할 수 있는 데이터 손실을 피하기 위해 사용하는 거라고 생각하면 됩니다. 

그리고 나머지는 큰 무리 없이 이해가 될 겁니다. 
위의 문자열을 만들기 위해 =와 &로 연결해 주는 거니까요.. 


그런데 위 소스는 문제점이 두가지가 있습니다. 
첫번째는 문자열이 다음과 같이 마지막에 &로 끝나게 됩니다.

name=mini&title=xml&date=20080613&

서버에서 처리하는데 큰 문제는 없겠지만 아무래도 좀 꺼림직 하죠.. ^^
하지만 그것보다 더 큰 문제가 하나 더 있습니다.
자바스크립트는 클라이언트 환경에서 실행되는 프로그램입니다. 
즉, 클라이언트의 PC 상황에 따라 처리 속도가 결정되는 것이죠..
그런데 위처럼 문자열을 계속적으로 연결하게 되면 코드 실행 속도를 저하시키는 문제가 발생합니다. 

이런 문제를 해결하기 위해서 자바스크립트의 배열을 활용하면 됩니다.
그럼 최적화된 소스를 한번 살펴보시죠..


이렇게 함으로써 앞에서 이야기 한 두가지 문제를 모두 해결하게 됩니다. 
간단한 자바스크립트 팁이었습니다. 


아.. 위 소스를 테스트 해보시려면 다음 소스가지고 하시면 됩니다. 




크리에이티브 커먼즈 라이선스
Creative Commons License


Trackback 0 And Comment 2

Free Javascript Editor - EditArea

|


EditArea라는 자바스크립트 에디터가 있습니다.

무료로 사용할 수 있구요.. 소스포지에서 받을 수 있습니다.

http://www.cdolivet.net/editarea/ 에서 보면 내용을 볼 수 있구요..
http://www.cdolivet.net/editarea/editarea/exemples/exemple_full.html 에서 예제를 볼 수 있습니다.
http://sourceforge.net/project/showfiles.php?group_id=164008 에서 소스를 받을 수 있다고 하네요..

간단하게 예제 화면 하나 올려봅니다.

사용자 삽입 이미지



크리에이티브 커먼즈 라이선스
Creative Commons License


Trackback 0 And Comment 0
prev | 1 | next