'Javascript'에 해당되는 글 7건

  1. 2014.09.01 IE9 자바스크립트 이슈 해결 - F12 (개발자도구)를 누를때만 자바스크립트가 실행되는 문제 (2)
  2. 2011.10.24 정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기)
  3. 2011.10.21 구글맵 javascript API v3에 대한 정리~ (3)
  4. 2011.10.13 숫자인지 체크하는 자바스크립트.. (이메일 체크하는 자바스크립트도 추가) (1)
  5. 2011.10.11 Javascript에서 사용하는 HTML Parser라고 합니다.
  6. 2011.10.11 자바 스크립트의 원격 서버 접근 및 onLoad 이벤트 처리
  7. 2011.10.10 자바스크립트에서 form의 데이터를 문자열로 가져오기 (2)

IE9 자바스크립트 이슈 해결 - F12 (개발자도구)를 누를때만 자바스크립트가 실행되는 문제

|




IE 9의 개발자 도구(F12) 이슈

웹 개발에서 브라우저 호환성은 중요한 이슈다. 

특히, 인터넷 익스플로러(IE)는 웹 표준에 대한 이슈가 꾸준히 제기되고 있다. 


최근 프로젝트를 진행하면서, IE9 브라우저 사용자가 특정 메뉴에 접속할 때, 화면이 나타나지 않는 경우가 있었다. 

HTML 소스를 다른 페이지의 HTML과 비교해도 차이는 없었다. 


한가지 특이한 사항은, 디버깅하려고 개발자 도구에 접속면 페이지가 정상적으로 나온다는 점이었다.  

분명 개발자 도구와 관련이 있는 것이라고 판단했다. 


문제의 원인은 바로 console.log() 함수였다. 

IE9 브라우저에서 console.log()를 인식하지 못해, 자바스크립트 오류가 발생한 것이다. 


예전에는, 자바스크립트 디버깅을 위해 alert() 함수를 주로 사용했다. 

alert() 함수를 사용해도 충분했지만, 계속 확인 버튼을 눌러줘야 한다는 단점이 있었다. 

만약, 실수로 for 문 내부에 alert() 함수를 넣을때의 당황스러움은 한번쯤 느껴봤을 것이다. 


이후 브라우저 개발자 도구가 보편화되면서 window.console 객체가 등장한다. 

IE, 크롬, 파이어폭스 등에서 F12 버튼을 누르면 개발자 도구가 나타나고, 

'콘솔' 메뉴를 선택하면 console.log()의 값들을 확인할 수 있다. 


IE는 window.console 객체를 버전 8부터 지원을 했는데, IE9 버전까지는 한가지 문제점이 있다. 

바로 개발자 도구가 열려있지 않으면, window.console 객체를 null로 인식해 에러가 발생한다는 점이다.

그래서 IE9에서 해당 메뉴를 선택할 때, 자바스크립트 오류로 화면이 열리지 않았고,

디버깅하려고 개발자 도구에 들어갔을 때, 비로소 화면이 나타났던 것이다. 



IE9에서 console.log의 올바른 사용법

이 문제를 해결하는 방법은 간단하다. 

console.log()를 사용하기 전에 window.console 객체가 있는지 확인하면 된다.


한 줄로 간단히 사용하려면 다음과 같이 쓸 수 있다. 


"콩 심은 데 콩 나고 팥 심은 데 팥 난다."는 속담처럼, 원인이 없는 결과는 없다. 

문제점을 찾고 해결하는 것도 개발자의 중요한 능력중의 하나가 아닐까.






Trackback 0 And Comment 2

정규식으로 전화번호 형식 변경하기 (-포함해서 출력하기)

|



전화번호를 다루는 프로그래밍을 하다보면 포맷이 다른 경우가 많습니다. 
그래서 중간에 )나 -가 들어가 있는 경우는 그대로 두고, 숫자만 있는 경우 포맷을 변경해서 -를 추가하는 javascript를 구성해 봤습니다. 

즉, 다음과 같은 형태로 처리 된다고 보시면 됩니다. 

021112222 -> 02-111-2222
03111112222 -> 031-1111-2222
0101112222 -> 010-111-2222 

이와 같은 작업을 하기 위해서 두가지 방법이 있습니다. 
전체 자리수를 확인하고 if ~ else를 통해서 경우의 수를 모두 처리하는 방법이겠죠. 

그런데 좀 세련되어 보이지 않습니다. 
그래서 정규식(Regular Expression)을 사용해 보기로 하겠습니다. 

구성한 예제는 다음과 같습니다. 



상당히 간단하게 되어 있는 것 같죠.. ^^
이해하지 못하고 사용하는 것은 본인 소스가 아니라고 봐야 합니다. 
그래서 간단히 위 소스를 설명하도록 하지요..

정규식에서 괄호()를 사용하면 순서대로 $1, $2, $3... 와 같이 불러서 사용할 수 있습니다. 
위 정규식을 살펴보면 괄호가 3개 있는 것을 알 수 있습니다. 

먼저 맨 뒤 괄호부터 보시죠..

([0-9]{4})

바로 0~9까지의 숫자를 4자리 가져온다는 겁니다.
실제 전화번호의 마지막 뒷자리는 4자리로 구성되어 있습니다.

이어서 중간 부분을 살펴보시죠..

([0-9]*)

0~9까지의 숫자 나머지 전부를 가져오라는 겁니다.
즉, 전화번호의 앞부분과 맨 뒷부분을 식별하고 나머지는 중간 자리로 판단한다는 것이죠..

그럼.. 가장 복잡한 앞부분을 살펴보도록 하겠습니다.

(^02.{0}|^01.{1}|[0-9]{3})

복잡해 보이지만 하나씩 풀어보면 쉽습니다. 
^02.{0} : ^는 정규식에서 시작을 의미하죠.. 02로 시작할 경우이구요.. "."은 문자 하나를 나타내는데.. {0}이니 이 문장은 "02"만 추출하겠다는 겁니다. 
^01.{1} : 마찬가지로 01로 시작하는 것이고 .{1} 이므로 이후 1자리까지 추출한다는 것이죠.. 01x로 시작하는 휴대폰을 의미합니다.
[0-9]{3} : 0~9까지 숫자 중 3자리만 추출한다는 것입니다.

이 세 가지 경우를 "|"로 연결하고 있으므로 셋 중의 하나를 선택한다고 보시면 됩니다. 

이렇게 하면 세 가지 숫자가 나오고 이것을 -로 연결하라는 것이 위 정규식의 의미가 되겠죠.. ^^

PHP와 같은 곳에서도 직접 정규식을 사용할 수 있으므로 다음과 같이 사용하면 바로 전화번호를 변경할 수 있겠네요.. 



preg_replace() 함수가  PHP에서 정규식을 통해 문자열을 치환하는 것이네요~

그럼. 즐프하세요 ^^ 
 



Trackback 0 And Comment 0

구글맵 javascript API v3에 대한 정리~

|



간만에 모바일 웹으로 구글 맵을 다룰 필요가 있어 Google Map Javascript API v3을 사용해봤습니다.
구글 사이트에 정리가 잘 되어 있기는 하지만 간략하게 내용을 정리해 보려고 합니다. 

먼저 Google Map JavaScript API v3에 대한 프리젠테이션 자료입니다. 1시간으로 비교적 길지만 시간날 때 한번쯤 들어보면 괜찮을 것 같네요. 
모바일 환경등을 지원하기 위해 기존 Map의 속도를 향상시키기 위한 내용들이 앞부분에 나와 있네요..

 

Google Map JavaScript API v3으로 데스크탑과 모바일 환경을 지원하고 있구요.
기존의 JavaScript API는 더 이상 지원하지 않기 때문에 버전 3으로 마이그레이션 하라고 권고하고 있습니다.  

실제 튜토리얼을 살펴보면 굉장히 쉽게 이해할 수 있을 겁니다.
체감상으로도 속도도 향상된 것 같은데요. Google Map의 튜토리얼 페이지는 다음과 같습니다.

http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/tutorial.html 

한글로 잘 설명되어 있죠.. ^^
그리고 아이폰과 안드로이드와 같은 휴대용 기기에서 사용할 때의 내용에 대해서는 다음 페이지에서 자세히 설명하고 있네요.

http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/basics.html#Mobile

마지막으로 실제 예제들을 보면서 자신이 필요한 부분만 가져다 쓰는 것이 좋겠죠.
그래서 Sample Source를 다음 페이지에서 제공합니다.  

 http://code.google.com/intl/ko-KR/apis/maps/documentation/javascript/examples/index.html

저의 경우에는 모바일 환경에서 작은 이미지로 페이지를 호출하는 것이 필요해서 다음과 같이 컨트롤과 드래그 기능들을 모두 false로 설정해서 만들었습니다. 실행하는 화면은 다음과 같습니다. 


위 화면을 만든 소스는 다음과 같으니 참고하시기 바랍니다. 




Trackback 0 And Comment 3

숫자인지 체크하는 자바스크립트.. (이메일 체크하는 자바스크립트도 추가)

|




숫자 체크하는 자바스크립트


전화번호를 입력할 때..

000-0000-0000
(000)000-0000

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

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




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

00000000000
11111111111

요렇게 나올 겁니다.


이메일 체크하는 자바스크립트

회원 가입 같은 것을 할 때 이메일을 체크하는 경우가 종종 있습니다. 이때 사용할 수 있는 예제입니다. 

http://wizard.ncafe.net/wt/25 를 참고했구요. 이외에도 쓸만한 내용이 있네요. 






Trackback 0 And Comment 1

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줄 밖에 안되는데요.. 정규식이랑 아주 지대로 쓴것 같네요~

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



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 함수를 사용할 수 있다고 하네요..


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

오랜만에 책 좀 보다가 생각나서 정리해 봤습니다.



Trackback 0 And Comment 0

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

|



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

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

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

name=mini&title=xml&date=20080613

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


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

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

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

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

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

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


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

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







Trackback 0 And Comment 2
prev | 1 | next