'Web/Client'에 해당되는 글 19건
- 2010/01/18 javascript에서 $가 포함된 String을 replace 할때 주의점
- 2009/09/24 IE에서만 발생하는 javascript 오류, 잘못된 인수입니다.
- 2009/01/15 javascript replaceall의 방법에 따른 처리 속도 비교 (6)
- 2008/11/20 우리나라는 IE6의 비율은 여전히 높다. (1)
- 2008/11/14 url 파라메터를 javascript로 받기
- 2008/11/12 간단한 javascript 페이징 처리
- 2008/09/02 롤링 스크립트
- 2008/07/01 javascript 로 구현한 한글 자소 분리 (2)
- 2008/05/13 운영체제와 브라우저 체크 (1)
- 2008/01/24 크로스 브라우징을 위한 function 코드 작성시 팁
- 2008/01/24 어플리케이션 내장 IE의 웹개발시 border값 제거
- 2008/01/16 javascript의 relaceAll 을 대체할만한 split 와 join (1)
- 2008/01/07 javascript로 브라우저 중앙에 레이어 뛰우기
- 2007/08/20 자바스크립트로 구현한 튤팁(Tooltip)
- 2007/08/06 Ajax 호출시 JSON 으로 리턴 받기
- 2007/07/31 java냐 javascript이냐?
- 2007/02/23 javascript include 클래스
- 2007/02/08 iframe 과 같은 object 태그
- 2007/02/06 javascript 오류 보고에 대한 발상?
javascript에서 $가 포함된 String을 replace 할때 주의점
기이한현상.. 왜그럴까요? -_-;
이유는 replace가 뒤에오는 string을 정규식으로 해석을 하려고 해서 발생한 문제다.replace(/abc(d)ef/, "$1"); 의 경우 abcdef 가 d로 바뀌는데 이건 괄호안에 문제를 대치하겟다는 의미가 된다. 그래서 해당 경우도 $를 같은 형태로 해석해서 발생하는 문제로 사료된다.
하지만, 테스트 케이스의 경우엔 앞의 문제가 정규식도 아닌 string이었음에도 뒤에 $를 특수코드로 인지하는건 버그에 속하는게 아닌가 생각이 든다. 딱히 이것은 모두 string이다라고 하는 메서드를 따로 제공하거나 옵션을 줄수 있도록 지원해야 맞을것 같다.
아래 $가 들어간 정규식의 의미를 보자. replace를 쓸땐 아래 코드들을 피해야가야할 것이다.
http://www.regular-expressions.info/refreplace.html
'Web > Client' 카테고리의 다른 글
| javascript에서 $가 포함된 String을 replace 할때 주의점 (0) | 2010/01/18 |
|---|---|
| IE에서만 발생하는 javascript 오류, 잘못된 인수입니다. (0) | 2009/09/24 |
| javascript replaceall의 방법에 따른 처리 속도 비교 (6) | 2009/01/15 |
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
- Posted by byuli on 2010/01/18 18:25
- 받은 트랙백이 없고
- 댓글이 없습니다.
IE에서만 발생하는 javascript 오류, 잘못된 인수입니다.
오류 : 잘못된 인수입니다. 코드를 보시면 아시겠지만, height는 음수값이 들어갈수 없기때문에 발생한 버그입니다. 하지만 IE에서만 이를 문제로 삼으며, 다른 브라우저 (FF,safary,chrome)에서는 음수값을 넣은 라인을 무시하여, 오류를 발생시키지는 않습니다.
이 문제는 오히려 IE가 javascript를 옳바르게 해석하는것 같네요. 라인을 무시하고 erorr를 뱉지 않으면 라인이 무시되었는지 알수가 없지요.
'Web > Client' 카테고리의 다른 글
| javascript에서 $가 포함된 String을 replace 할때 주의점 (0) | 2010/01/18 |
|---|---|
| IE에서만 발생하는 javascript 오류, 잘못된 인수입니다. (0) | 2009/09/24 |
| javascript replaceall의 방법에 따른 처리 속도 비교 (6) | 2009/01/15 |
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
- Posted by byuli on 2009/09/24 16:53
- 받은 트랙백이 없고
- 댓글이 없습니다.
javascript replaceall의 방법에 따른 처리 속도 비교
방법 1 ) split&join을 이용하는 방법
방법 2 ) 정규식을 이용한 방법
방법 3 ) 루프문을 이용한 방법
비교 방법은 5,655,000 개의 문자열을 두개의 다른 문자로 치환하는 방법으로 했다. 3가지 방법 모두를 IE6, Safari, FF3, Chrome 에서 조사 했다.
결과를 보면,
방법 3의 while 문을 이용한 방법은 모든 부라우저에서 테스트 할수 없었다. 모두 다운 되버렸다. FF의 firebug에서는 out of memory라는 오류 메시지를 뿌려주었다. 그러므로 쓰면 안되는 방법인것이다.
방법2의 정규식을 이용한 방법은 특이하게 IE에서만 좋은 성능을 발휘했다. IE외에 브라우저 특히 Safari 에서는 성능이 확연하게 떨어졌다. 파이어폭스만 그나마 나은 성능을 보여주고 있다.
방법1은 IE를 제외한 브라우저에서 모두 최고의 성능을 발휘했다. 특히 Chrome 의 경우는 다른 브라우저들에 비해 최고의 빠른 속도를 보여줬다.
필자의 결론,
위 각 브라우저의 성능을 테스트해본 결과 방법 1의 split&join을 이용하는 방법이 정규식을 이용한 치환방법보다 좋으나, IE의 서비스 점유율을 볼때 IE에서 최적의 성능을 보이는 방법 2의 정규식을 이용한 방법을 무시 할수는 없다.
그러므로, 개발자가 할수 있는 가장 좋은 방법은 IE때만 정규식을 치환하는 방법을 사용하고 나머지는 모두 split&join을 이용하는 방법으로 구현하는것이 최선의 방법이 아닐까 한다.
'Web > Client' 카테고리의 다른 글
| javascript에서 $가 포함된 String을 replace 할때 주의점 (0) | 2010/01/18 |
|---|---|
| IE에서만 발생하는 javascript 오류, 잘못된 인수입니다. (0) | 2009/09/24 |
| javascript replaceall의 방법에 따른 처리 속도 비교 (6) | 2009/01/15 |
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
우리나라는 IE6의 비율은 여전히 높다.
W3Counter (http://www.w3counter.com/globalstats.php) 에서 공개한 Web Browser의 사용율을 보면, IE7이 근소차이로 IE6을 앞선 것을 볼 수 있다. 강제 배포가 이루 어지기 전인 2008년 초보다 많은 차이를 보이고 있는 것은 MS의 IE7 배포 전략이 먹혀 들었다고 볼 수 있다.
물론, Firefox가 27%에 육박한다는 점을 볼때, 블로그와 같은 웹 사이트 위주로 배포되고 있는 것 같고, 블로그를 운영하는 유저는 아주 평이한 사용자로는 보기 힘들며 어느정도 고급 사용자들의 수치라는 점을 고려하자. 그리고 리서치 대상도 미국이 26%임으로 이것이 세계적인 추세라고 100% 말하기엔 무리가 있고 어느 정도는 이런 추세로 가고 있다고 봐야겠다.
이제 세계적으로는 IE7의 사용 비율이 높아 지고 있는 시점에 우리나라는 과연 어느정도 일까? 본인이 맏고 있는 서비스의 브라우저 이용 비율을 알아봤다. IE7이 아닌 IE의 비율이 62%이다. 본인이 알기론, 연초 강제 업데이트로 부터 많은 사용자가 IE7로 갈아 탔지만, 아직까지는 IE6의 사용자는 아직 절대적으로 많은 수치다.
이 IE6의 점유율로만 볼때는, 우리가 아무리 웹표준을 지향하고 외치고 있지만, IE6브라우저 자체가 웹표준을 지향하지 않기때문에 웹표준의 의미 자체도 의미가 모호하게 된다.
그럼 여기서 왜 우리나라는 MS의 노력에도 불구하고 유독 IE7의 비율이 낮은 이유를 알아보자. 이유는 아래 두가지로 함축해 볼 수 있다.
1. IE7는 업그레이드 할만한 메리트가 없다.
좀 더 웹표준에 가까운 브라우저로 업그레이드 되었지만, 이건 어디까지나 개발자의 시점에 불과 하고, 사용자가 볼때는 그저 외관이 한 층 세련되게 변했고 탭 브라우징이 추가되었다는 것 뿐이다. 게다가, IE6보다 좀 무겁고 렌더링 속도 또 한 느린 IE7은 일반 사용자라도 쉽게 체감할 수 있는 수준이 었다.
더욱이 우리나라 환경에서는 IE6로도 인터넷을 접하는데는 아무런 장애요소가 없다. 굳이 무겁고 느린 브라우저로 업데이트 할 필요는 없던 것이다.
2. IE7 강제적으로 인스톨 되지 않는다
MS에서는 IE7를 강제 업데이트를 통해서 보급할것이라 했지만, 사실 이 '강제'라는 말은 정확한 표현은 아니다. 통상, 자동 업데이트를 유효하게 하고 있으면, 마이크로소프트가 공개한 보안 업데이트 프로그램 등은, 백그라운드에서 다운로드 및 인스톨 한다. 사용자가 의식 할 것은 없다. 이것은 어찌보면, 강제 업데이트에 속한다고 볼 수 있다.
그렇지만, IE7는 자동 업데이트를 유효하게 하고 있어도, 모르는 사이에 인스톨 되지 않는다. 자동적으로 진행되는 것은, IE7의 다운로드까지일 뿐이다. 백그라운드에서의 다운로드가 종료하면, 데스크탑의 왼쪽하단에 「업데이트의 준비를 할 수 있습니다」라는 메세지가 표시고 이 메세지를 클릭하면, IE7를 인스톨 할지 묻는 윈도우가 표시된다. 이때 사용자는 설치 하지 않음을 클릭하면 설치되지 않는다.
이 두가지 요소로 볼때, 비교적 얼리어답터(early adoptor) 가 많은 우리나라는 성능이 떨어지는 IE7임을 알고 설치 여부를 묻는 질문에 설치를 선택하지 않았을 것이고, 더구나 MS는 프로그램 추가/삭제를 통해서 IE6로 복귀하는 메뉴를 두어서 좀 써보고 무겁다고 판단한 사용자들은 다시 IE6로 회귀했을 가능성이 높다.
몇몇의 사이트를 보면 IE6 이하 브라우저는 아예 지원하지 않는다는 문구를 넣은 사이트도 보이지만, 이는 방문자의 60%에게 서비스를 하지 않는다고 선포한 것과 다름이 없다. 우리의 직업은 웹사이트로 돈을 버는 직업인데, 사용자의 60%를 포기할 수 없음은 당연하고, 절대적으로 IE6를 고려하지 않을 수 없다.
본인이 개발자 입장에서 가장 비표준인 IE6에서 그나마 좀 표준을 지향한 IE7로 업그레이드 하고 싶지만, 그러지 못하는 이유도 거기에 있다.
여담으로 더 한가지 고려할점은, 아직도 1024 * 768 의 해상도를 이용하는 사용자가 많다는 것이다. 최소, 1280 * 1024의 비율은 사용할것 같은데, W3Counter 에서 공개한 차트에서도 그렇고 본인이 맡은 사이트에서도 42%의 비율이 나왔다. 본인은 집과 사무실 모두 24인치의 1920 * 1200 을 쓰는데 좀 놀라운 수치가 아닐 수 없다.
'Web > Client' 카테고리의 다른 글
| IE에서만 발생하는 javascript 오류, 잘못된 인수입니다. (0) | 2009/09/24 |
|---|---|
| javascript replaceall의 방법에 따른 처리 속도 비교 (6) | 2009/01/15 |
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
| 롤링 스크립트 (0) | 2008/09/02 |
- Posted by byuli on 2008/11/20 23:36
- 받은 트랙백이 없고
- 댓글 하나 달렸습니다.
url 파라메터를 javascript로 받기
사용방법은 아래와 같다. 존재하지 않는 파라메터를 콜 할경우엔 당연히 undifined를 리턴한다. 적절히 붙여 사용하면 유용하겠다.
Download
'Web > Client' 카테고리의 다른 글
| javascript replaceall의 방법에 따른 처리 속도 비교 (6) | 2009/01/15 |
|---|---|
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
| 롤링 스크립트 (0) | 2008/09/02 |
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
- Posted by byuli on 2008/11/14 18:47
- 받은 트랙백이 없고
- 댓글이 없습니다.
간단한 javascript 페이징 처리
아래와 같은 간단한 페이징 처리를 위한 소스다. ul 태그의 li 태그를 모두 display:none; 시킨 다음에 해당 페이지의 li 태그만 노출시키는 구조이다. 일단 마크없을 다 뿌리기때문에 10페이지 내의 간단한 페이징 처리에 용이하다.
파일 다운로드
'Web > Client' 카테고리의 다른 글
| 우리나라는 IE6의 비율은 여전히 높다. (1) | 2008/11/20 |
|---|---|
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
| 롤링 스크립트 (0) | 2008/09/02 |
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
- Posted by byuli on 2008/11/12 12:26
- 받은 트랙백이 없고
- 댓글이 없습니다.
롤링 스크립트
DIV 블럭으로 쌓은 UL 태그로 마크업을 작성한 후에 script 를 호출하면, 한줄로 롤링되는 전광판 형태로 구현이 가능하다.
자 일단 demo 페이지를 열어보자. (ctrl + 링크클릭)
Demo
사용방법
'Web > Client' 카테고리의 다른 글
| url 파라메터를 javascript로 받기 (0) | 2008/11/14 |
|---|---|
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
| 롤링 스크립트 (0) | 2008/09/02 |
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
- Posted by byuli on 2008/09/02 19:52
- 받은 트랙백이 없고
- 댓글이 없습니다.
javascript 로 구현한 한글 자소 분리
java 로 짜여진 한글 자소 분리 소스를 발췌해서 javascript 로 바꾸었다. (찾아보니 javascript로된 소스는 없었다.)
사용 방법은 아래와 같다.
array 형태로 리턴되며, string 으로 변환하고 싶으면 join() 메서드를 이용하여 변환하면 된다.
위 코드 실행시, 리턴값은 아래와 같다.
소스 다운 받기
'Web > Client' 카테고리의 다른 글
| 간단한 javascript 페이징 처리 (0) | 2008/11/12 |
|---|---|
| 롤링 스크립트 (0) | 2008/09/02 |
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
운영체제와 브라우저 체크
Station.os() 의 리턴값이 WINDOW, MAC, UNIX, LINUX 로 나올 수 있다.
Station.Browser () 의 리턴값이 IE6 , IE7, FF, NETSCAPE, OPERA 로 나올 수 있다.
특징으로는, Station.os 처음 호출시에만 비교연산하고 생성된 리턴값으로 자기 자신을 오버라이팅하여, 이후 다시 비교 연산 작업을 하지 않는다.
Demo
Syntax
'Web > Client' 카테고리의 다른 글
| 롤링 스크립트 (0) | 2008/09/02 |
|---|---|
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
- Posted by byuli on 2008/05/13 19:10
- 받은 트랙백이 없고
- 댓글 하나 달렸습니다.
크로스 브라우징을 위한 function 코드 작성시 팁
그러나 이 이코드의 단점은 해당 function 을 호출할때 마다 매번 if문을 거처야 한다는 것이다. 그래서 아래와 같이 바꾸면 해결할 수 있다.
위 코드는 처음 한번만 if문을 거친후에 자기 자신을 오버라이딩해서 그에 맞는 메서드를 리턴하도록 되어 있다.
'Web > Client' 카테고리의 다른 글
| javascript 로 구현한 한글 자소 분리 (2) | 2008/07/01 |
|---|---|
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
- Posted by byuli on 2008/01/24 20:57
- 받은 트랙백이 없고
- 댓글이 없습니다.
어플리케이션 내장 IE의 웹개발시 border값 제거
기본적으로 body에는 border값이 들어가 있다. 웹브라우저로 볼때는 보이지 않지만, 다른색(회색또는흰색이 아닌)으로 치장된 어플리케이션에 넣어서보면 선명한 라인을 볼 수 있다. 이를 없애기 위해서는 body에 border:none; 의 CSS를 넣어주면된다.
그러나 DTD를 선언한 페이지에서는 html, body, 에 똑같이 border:none; 옵션을 적용해주어야 사라진다.
'Web > Client' 카테고리의 다른 글
| 운영체제와 브라우저 체크 (1) | 2008/05/13 |
|---|---|
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
- Posted by byuli on 2008/01/24 20:38
- 받은 트랙백이 없고
- 댓글이 없습니다.
javascript의 relaceAll 을 대체할만한 split 와 join
javascript 의 relaceAll 메서드는 정규식을 이용한 치환밖에 되지 않는다. 보통 문자 치환은 String대 String 으로 하는데, 정규식을 이용해야하는 relaseAll 메서드를 이용할수 없다. 그래서 여러 개발자들은 해당 문자가 있는지 여부를 조사하는 indexOf메서드를 사용해 루프문을 돌아 relace시키는 function 을 만들어 사용한다.
하지만, replaceAll을 대체할만한 아래 아주 기발한 아이디어 하나가 있다. 별다른 펑션을 만들지 않고도 아래 한줄이면 간단히 구현된다.
참재미있지 아니한가~ :)
'Web > Client' 카테고리의 다른 글
| 크로스 브라우징을 위한 function 코드 작성시 팁 (0) | 2008/01/24 |
|---|---|
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
- Posted by byuli on 2008/01/16 22:45
- 받은 트랙백이 없고
- 댓글 하나 달렸습니다.
javascript로 브라우저 중앙에 레이어 뛰우기
document.documentElement.clientWidth : 현재 브라우저의 document 넓이를 반환.
300 : 뛰울 레이어의 가로 사이즈.
document.documentElement.scrollLeft : 브라우저의 document의 스크롤이 이동한 넓이.
※ 전체 크기에서 레이어 사이즈를 뺀것을 반으로 나누고, 스크롤 한 길이만큼을 더해준것이다.
document.body 대신에 document.documentElement 를 사용한 이유는 DTD 타입을 선언한 페이지에서는 document.body 의 값을 내뱉지 못한다. body에서 얻지 못한값은 documentElement 로 얻을수 있다.
'Web > Client' 카테고리의 다른 글
| 어플리케이션 내장 IE의 웹개발시 border값 제거 (0) | 2008/01/24 |
|---|---|
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
- Posted by byuli on 2008/01/07 20:03
- 받은 트랙백이 없고
- 댓글이 없습니다.
자바스크립트로 구현한 튤팁(Tooltip)
by junsung park */
var bTooltip =
{
tip_id : "btooltip",
makeLayer : function (str)
{
var tip_obj = document.getElementById(this.tip_id);
if (tip_obj==undefined)
{
var tip = document.createElement("div");
tip.id = this.tip_id;
tip.style.backgroundColor= "#FFFFE1";
tip.style.fontFamily= "돋움";
tip.style.fontSize= "12px";
tip.style.padding= "2px";
tip.style.color= "#000";
tip.style.border= "1px solid #000";
tip.style.position= "absolute";
tip.style.zIndex= "99999";
tip.style.display= "none";
document.body.appendChild(tip);
tip.appendChild(document.createTextNode(str));
}
moveLayer : function (e)
{
if (document.all)
{
xp = event.clientX + document.documentElement.scrollLeft;
yp = event.clientY + document.documentElement.scrollTop;
}else
{
xp = e.pageX;
yp = e.pageY;
}
xp += 10;
yp += 10;
var tip_obj = document.getElementById(this.tip_id);
if (tip_obj!=undefined)
{
tip_obj.style.top = yp + "px";
tip_obj.style.left = xp + "px";
tip_obj.style.display= "block";
}
hiddenLyaer : function (e)
{
var to = e?e.relatedTarget:event.toElement;
var to_id = null;
try
{
to_id = to.id;
}
catch (e)
{
to_id = null;
}
return;
{
try
{
document.getElementById(this.tip_id).removeNode(true);
}
catch (e){}
}else
{
try
{
document.body.removeChild(document.getElementById(this.tip_id));
}
catch (e){}
}
},
on : function (tg)
{
var str = tg.title;
tg.title= "";
bTooltip.makeLayer(str);
tg.onmouseover = new Function("bTooltip.makeLayer('" + str + "')");
tg.onmousemove = new Function("bTooltip.moveLayer(arguments[0])");
tg.onmouseout = new Function("bTooltip.hiddenLyaer(arguments[0])");
}
}
아래처럼 최대한 사용하기 편하게 되어 있다. 예외처리도 다 했다. 다만, 튤팁에 들어갈 내용에 따옴표가 들어간다면 서블릿단에서 이미 처리되어 뿌려줘야 겠다. 이부분은 어쩔수 없는 부분 같다.
사용법
<a href="" onmouseover="bTooltip.on(this)" title="어쩌고">에이링크</a>
'Web > Client' 카테고리의 다른 글
| javascript의 relaceAll 을 대체할만한 split 와 join (1) | 2008/01/16 |
|---|---|
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
- Posted by byuli on 2007/08/20 20:12
- 받은 트랙백이 없고
- 댓글이 없습니다.
Ajax 호출시 JSON 으로 리턴 받기
Ajax가 호출하는 페이지의 결과값을 아래처럼 JSON형태로 출력하게 한다. 이때 주의 할점은 배열의 Object 명을 명시 하지 않는다.
list :
[
{
img_url : ".../20070806_164500_ban_superstar.gif" ,
link_url : "/superstar/Top.htm" ,
link_target : "_self"
},
{
img_url : ".../20070806_164500_ban_superstar.gif" ,
link_url : "/superstar/Top.htm" ,
link_target : "_self"
}
]
}
responseText 로 리턴 받은 text값을 이제 javascript 의 object 배열로 변경 시켜주면된다. 변경시켜주는 방법에는 여러가지가 있는데, 필자는 아래와 같은 방법을 선호한다. 가장 간단한 방법인 듯 하다.
try {
logobanner= eval('(' + obj + ')');
}catch(e){}
responseText 로 리턴 받은 text 값의 parameter명이 obj라고 할때, 이 obj를 eval함수로 괄호와 함께 묶어주면 logobanner 이라는 이름으로 object배열이 선언 된다. try cath문으로 묶은 이유는 이 obj가 배열 object형태로 리턴되지 않는 예외경우를 대처하기 위한 구문이다.
실제 사용해보니 xml보다 간편했다. 장단점이 있지만, 굳이 xml을 사용하지 않아도 된다면 JSON형태로의 개발을 추천한다.
'Web > Client' 카테고리의 다른 글
| javascript로 브라우저 중앙에 레이어 뛰우기 (0) | 2008/01/07 |
|---|---|
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
| iframe 과 같은 object 태그 (0) | 2007/02/08 |
- Posted by byuli on 2007/08/06 22:09
- 받은 트랙백이 없고
- 댓글이 없습니다.
java냐 javascript이냐?
2000년 대학교 시절에 교수님이 이런말을 했었다.
"자바스크립트가 자바보다 더 발전할 수 있다."나는 그때 당시 이 말을 그냥 흘려 들었다. 사실 난 자바스크립트는 쉽고, 자바는 어렵다 정도 그정도 지식에 머물러 있었기 때문이다. 하지만, 지금에서야 그말이 선겸지명이 있는 말이었고, 그 의미를 알 것 같다.
1. 개인의 PC 사양은 날이 갈수록 높아지고 있다. 그래서 PC에서 처리 할 수 있는 데이터의 양이 증가해도 문제가 없다는 것이다. 그것은 사업자가 서비스 프로그램의 데이터 처리를 PC에서 처리하면 효율적이다 라는 것과 같다. 그만큼 서버의 부담을 덜을 수 있지 않겠는가?
2. 예전에는 웹서비스의 중요한 기술적인 목표가, 속도나 안전성이었다고 한다면, 요즘은 UI(user interface)다. 디자인이 훌륭해야하고 사용성이 편리 해야 한다는것이다. 그것은 웹서비스뿐만이 아니라 IT전체적인 트렌드가 아닐까 한다.
3. 웹 기술에서 '동기식 통신' 방식의 페이지 리로드는 리소스 낭비다. 불필요한 페이지나 이미지가 리로드가 되지 않는 Ajax나, Flex등 진보한 클라이언트 기반 기술들이 쏟아지고 있다. 이런, UI를 해치지 않고 백단에서 Data처리를 하는 '비동기식 통신'방식은 요즘 웹기술의 트렌드라 할수 있다.
위의 근거로, 앞으로의 서비스 기술들은, javascript 와 flex 또는 실버라이트 같은 클라이언트 기술들의 싸움이 될것이다. 그에 따라 이 기술을 보유한 개발자가 곽광 받을것이다.
물론, java를 모르고 javascript를 잘 개발할 수 있다고 생각하지 않는다. javascript 기술을 보유한 개발자도 java 를 해야하지만, java개발자도 java만 하도록 그 트렌드가 내버려 두지 않을것 이다.
'Web > Client' 카테고리의 다른 글
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
|---|---|
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
| iframe 과 같은 object 태그 (0) | 2007/02/08 |
| javascript 오류 보고에 대한 발상? (0) | 2007/02/06 |
- Posted by byuli on 2007/07/31 22:27
- 받은 트랙백이 없고
- 댓글이 없습니다.
javascript include 클래스
여러개의 클래스을 각각의 *.js 파일로 만들어 놓고, 사용되는 클래스들만 import하여 쓸수 있게 하는 class를 만들었다. (회사 지인의 아이디어이고 코드만 만들어봤다.)
Include class blog.byuli.com
2007 03 23
*/
var Byuli= {
default_path: null,
setPath: function(url){
this.default_path= url;
},
include: function()
{
var jsList= this.include.arguments;
for ( var i=0; i<jsList.length; i++ )
{
var tag= "<script languge=\"javascript\"";
tag+= "src=\"" + this.default_path + jsList[i] + ".js?ver=1.1\"></script>";
document.write(tag);
}
}
}
보면 알겠지만, document.write로 코드를 써준다. 아래처럼 javascript로 element를 생성할수도 있지만 head가 onload된 상태에서만 동작하기때문에 쓸수가 없다.
el.src = url;
document.getElementsByTagName('head')[0].appendChild(el);
위 클래스를 쓰는 방법은 아래와 같다. 먼저 javascript 파일이 존재하는 절대 경로를 입력하고 아래에 각 js파일을 인자로 넘기면 된다.
Byuli.include(
"/byuli/util.js",
"/byuli/ajax.js",
"/byuli/string.js"
);
어려운 코드가 아니나, java처럼 class 단위로 분리한 javascript 파일을 효율적으로 import 할수 있는 방법으로써 좋은 아이디어라고 생각된다.
'Web > Client' 카테고리의 다른 글
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
|---|---|
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
| iframe 과 같은 object 태그 (0) | 2007/02/08 |
| javascript 오류 보고에 대한 발상? (0) | 2007/02/06 |
- Posted by byuli on 2007/02/23 11:33
- 받은 트랙백이 없고
- 댓글이 없습니다.
iframe 과 같은 object 태그
이유는 ie 7에서만 되더라구요 -_-;; 전혀 쓸일은 없다는거저...
다들 "이렇게도 되는구나" 라고 생각하시어요 =ㅁ=
<object width="300" height="300" type="text/x-scriptlet">
<param name="url" value="http://daum.net">
<param name="selectablecontent" value="0">
<param name="scrollbar" value="1">
</object>
'Web > Client' 카테고리의 다른 글
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
|---|---|
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
| iframe 과 같은 object 태그 (0) | 2007/02/08 |
| javascript 오류 보고에 대한 발상? (0) | 2007/02/06 |
- Posted by byuli on 2007/02/08 09:47
- 받은 트랙백이 없고
- 댓글이 없습니다.
javascript 오류 보고에 대한 발상?
아래 코드는 오류가 발생 했을때 error로그를 변수에 담고, onload이벤트가 발생하면 서버로 오류 내용을 전달하는 방식이다.
Error class by blog.byuli.com
2007 02 06
*/
var Error= {
errerlog : "",
onErrorEvent: function(e)
{
var page= location.href;
Errer.errerlog+= "[errer] " + page + " : " + e.toString() + "\n";
},
reportEerror : function ()
{
if(this.errerlog!="")
{
/* 오류 보고 request 하는 코드
ex) hf.location.href= "./js_log.jsp?msg=" + this.errerlog;
**/
}
}
}
아래는 onerror 이벤트가 발생시 호출될 메서드를 명시한다.
오류때마다 서버로 패킷을 던질경우, 서버부하를 초래 함으로 onload되었을때 일괄 전송 되도록 한다.
Error.reportEerror();
}
그닥 어려운 코드는 아니나, javascript 오류에 대해 그간 방관 했던것에 문제를 제기하고, 오류보고를 해야한다는 발상과 아이디어는 좋다고 생각된다.
'Web > Client' 카테고리의 다른 글
| 자바스크립트로 구현한 튤팁(Tooltip) (0) | 2007/08/20 |
|---|---|
| Ajax 호출시 JSON 으로 리턴 받기 (0) | 2007/08/06 |
| java냐 javascript이냐? (0) | 2007/07/31 |
| javascript include 클래스 (0) | 2007/02/23 |
| iframe 과 같은 object 태그 (0) | 2007/02/08 |
| javascript 오류 보고에 대한 발상? (0) | 2007/02/06 |
- Posted by byuli on 2007/02/06 19:44
- 받은 트랙백이 없고
- 댓글이 없습니다.


getUrlParameter.html