'Javascript'에 해당되는 글 22건

  1. 2013.09.08 [Greasemonkey] 링크 주소 바꾸기
  2. 2010.03.31 Object Detection - 브라우저 구분
  3. 2009.06.25 자동화 서버는 개체를 작성할 수 없습니다.
  4. 2009.06.11 이동하지 않는 링크
  5. 2009.06.06 잘못 사용되는 마크업
  6. 2009.06.05 iframe을 사용한 글보기가 안보임
  7. 2009.06.03 한글 길이
  8. 2009.05.28 보이지 않는 게시판 글
  9. 2009.05.18 동작하지 않는 메뉴
  10. 2009.05.17 MSXML 확인
  11. 2009.05.17 [비교] 반복문 - foreach, for~in
  12. 2009.05.05 웹개발을 위한 IE 설정
  13. 2009.05.04 [IBM dWs] Ajax에서 XML 처리하기
  14. 2009.05.01 특정 경로를 통해서 접근하는 경우의 화면 처리
  15. 2009.04.30 자바스크립트 함수
  16. 2009.04.20 Javascript Event
  17. 2009.04.14 Javascript 로 XML 다루기 1
  18. 2009.04.14 Javascript
  19. 2009.04.02 Javascrpt 개체 접근하기
  20. 2009.02.27 자바스크립트 문자열에 특수문자가 들어가서 에러가 나는 경우
  21. 2009.02.20 동일한 이름의 자바스크립트 함수
  22. 2009.01.31 브라우저 판별법

[Greasemonkey] 링크 주소 바꾸기

- 파일 확장자는 user.js

- 모든 링크를 찾아서 주소를 변경한다.
	var links = document.getElementsByTagName("a");
	for(var i = 0 ; i < links.length ; i++){
		ahref = links[i].href;
		if(ahref.indexOf("http://1.2.4.130:8088") == 0){
			links[i].href = ahref.replace("http://1.2.4.130", "http://211.8.3.20");
		}
	}

- Gmail에서는 잘 안되는거 같아 실행을 지연시킨다. 
window.setTimeout(function(){
	//
}, 1000*3);

- 실행이 되긴 하지만 Gmail은 매번 페이지를 읽지 않으므로 다른 메일을 읽으면 동작하지 않는다.

- click 이벤트에 연결한다.
document.addEventListener('click', function(event) {
	ahref = "" + event.target;	
	if(ahref.indexOf("http://1.2.4.130:8088") == 0){
		window.location.href = "http://naver.com";
		event.stopPropagation();
		event.preventDefault();
	}
}, true);

- 현재 페이지가 이동하므로, 링크의 주소를 직접 고친다.
// ==UserScript==
// @name				Forwarding Trac IP
// @namespace		http://pantarei.tistory.com
// @description		Forwarding 130 to 20
// @include				https://mail.google.com/*
// @include				https://www.google.com/calendar/*
// @include				http://211.8.3.219/*
// ==/UserScript==

document.addEventListener('click', function(event) {
	if(event.target.tagName == "A"){
		ahref = "" + event.target;	
		if(ahref.indexOf("1.2.4.130") > 0){		
			event.target.setAttribute("href", ahref.replace("1.2.4.130", "211.8.3.20"));
		}
	}
}, true);
Trac 티켓 메일도 있지만 구글 캘린더에서도 Trac 링크가 있으므로 "http://"를 뺀다.
지메일에서 ":"와 같은 문자를 인코딩한다.
실제 발생한 click 이벤트가 처리되도록 막지 않는다.

- 지메일에서 구글 캘린더 알림 메일 링크
http://1.2.4.130:8088/projects/HelloTOW/attachment/wiki/WikiStart/fiddler.PNG //실제 링크
https://www.google.com/url?q=http%3A%2F%2F1.2.4.130%3A8088%2Fprojects%2FHelloTOW%2Fattachment%2Fwiki%2FWikiStart%2Ffiddler.PNG&usd=2&usg=AFQjCNH7xeM7IdMWgpYZBmGXde7gBgmWEg

- 2013-09-09
a 태그에서 실행되도록 추가


=-=>mouseover에 넣으면 더 좋을거 같다.





저작자표시 비영리 변경금지

Object Detection - 브라우저 구분

Cross-Browsing 을 고려할 때 IE 인지 FF 인지를 구별하는게 아니라
객체의 존재 유무를 따져야 한다.(Object Detection)
특정 브라우저에서 지금은 지원하지 않는 기능을 나중에 구현할 수도 있고, 기능을 더이상 지원하지 않을 수도 있다.
저작자표시 비영리 변경금지

자동화 서버는 개체를 작성할 수 없습니다.

사용자 컴퓨터에 설치된 XML Paser가 없거나 버전이 낮아서 생기는 현상
이라고 한다.

MSXML 버전 테스트하느라 IE 추가기능관리에서 XML DOM Document 를 사용안함으로 설정했었다.

Y사 홈페이지에서는 msxml3(또는 그 이전 버전)만 사용하는지, msxml4 를 사용할 수 있는데 이런 에러가 발생했다.
저작자표시 비영리 변경금지

이동하지 않는 링크

어떤 WAS 메뉴얼에서 링크를 클릭해도 이동이 안됨

- this.parent.frames('tableFrame').location.href 를 this.parent.frames.mainFrame.location.href 으로 변경하면 된다.
저작자표시 비영리 변경금지

잘못 사용되는 마크업

a 요소는 anchor로써 웹에서 다른 자원을 참조한다는 의미를 갖고 있음.
다른 자원을 참조하지 않으면서도 a 요소를 사용하는 것은 적절하지 않고
또한 시각장애인은 이를 링크라고 오인한다.

다른 자원을 참조한다는 의미를 지니지 않으면서 화면상의 인터페이스만을 조작하고자 하는 목적을 지니고 있을 때에는 button 요소를 사용한다.(링크도 아니고 폼 전송도 아닌 경우 사용)
button 요소는 외관상 input type="submit" 요소와 동일한 모양을 하고 있음.
input 요소와 다른점은 button 요소는 시작 태그와 닫기 태그가 존재하고 내부에 다른 콘텐츠(텍스트, 이미지)를 담을 수 있어 풍부한 표현을 지원하며 form 을 전송하지 않는다.
button 요소의 type="button" 속성을 정확하게 명시해 주지 않으면 form을 전송하도록 기능하는 웹 브라우저도 있으므로 반드시 명시할 것.

인쇄, 뒤로 버튼은 다른 자원을 참조하기 위한 링크가 아니므로 a 요소를 사용하면 의미에 맞지 않습니다.
인쇄를 하거나 히스토리 기능을 하는 뒤로가기 버튼은 button 요소를 사용하여 마크업 해야 합니다.
button 요소는 다른 자원을 참조하지도 않고 form을 전송하지도 않는 경우 즉,  단순한 사용자 인터페이스 조작의 의미를 가질 때 사용합니다.

form에 action 값이 비어 있고 input 요소를 사용해야 할 검색 버튼을 a 요소로 마크업 한것은 이 form이 HTML로 수행 가능한 submit 기능을 자바스크립트에 전적으로 의존해서 수행하고 있다는 것을 보여줍니다.

- 출처
웹 접근성 연구소
저작자표시 비영리 변경금지

iframe을 사용한 글보기가 안보임


모 주간지 이벤트 게시판이 FF에서 위와 같이 보인다.
1. 기껏 objFrame을 가져와 놓고 직접 iframe을 참조하고 있다.
2. getRetry()를 계속 호출한다. 왜?
3. 그리고 iframe을 사용하는 이유는 뭘까?
저작자표시 비영리 변경금지

한글 길이

Z건설사 B시스템에서 담당자가 데이터를 입력했는데 변경이 되지 않는 경우가 발생
확인결과 데이터베이스 컬럼 길이를 넘어가는 데이터가 입력되었음.
응용프로그램에서 예외처리를 소리없이(?) 하고 있었음.

그런데 문제는 Javascript에서 데이터 길이를 확인하는데 이런 에러가 발생하였음.[각주:1]

이건 아니잖아

=-=> getByteLength()와 비교, escape() 고찰
  1. 물론 클라이언트단 유효성검사를 우회하는 방법이 많긴 하지만 [본문으로]
저작자표시 비영리 변경금지

보이지 않는 게시판 글


D 개발자 포털의 게시판이 FF에서는 보이지 않는다.
소스는 다음과 같다.


document.all 을 쓰고 있다.
IE에서는 개체이름이나 아이디로 직접 접근이 가능하고,
document.all.개체이름 또는 document.all.개체아이디로도 접근이 가능하다.

특이한 점은 보이지 않는 textare에 iframe에 들어갈 내용을 가지고 있다.
저작자표시 비영리 변경금지

동작하지 않는 메뉴

FF로 Q사 사이트를 방문해서 메뉴를 눌러도 화면이 변경되지 않는다.
IE에서는 제대로 동작한다.
음... 소스를 보자.


대충 이렇다.
lnk를 직접 참조하고 있다. IE에서만 가능. 그래서 document.getElementById() 를 사용하라고 나온다.
그리고 anchor 태그에 클릭이벤트를 발생시켰다. 함수가 아니라고 나옴.

이렇게 구현하는 것이 어떨까?


=-=> 근데 굳이 이렇게 할 이유가...http://www.plyfly.net/76 봐봐
저작자표시 비영리 변경금지

MSXML 확인

 

<script type="text/javascript">
var vers = ["MSXML.DOMDocument", "MSXML2.DOMDocument"
	, "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument.4.0"
	, "MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.6.0"
	, "MSXML2.DOMDocument.7.0", "MSXML2.DOMDocument.8.0"];

for(var s in vers){	
	try{		
		new ActiveXObject(vers[s]);		
		document.write(vers[s] + " : Success <br />");	
	}catch(e){
		document.write(vers[s] + " : <span style='color:red;'>Fail</span> <br />");	
	}
}</script>

 

Microsoft XML 파서(MSXML)의 버전 목록

 

- IE 추가 기능 사용/사용 안함

 

- 추가 기능 관리는 인터넷 옵션 - 프로그램 에서도 관리가능함.

 

- Internet Explorer를 사용하는 MSXML 버전을 확인하는 방법

IE에서 사용하는 MSXML 버전을 Filemon을 이용해서 확인하는 방법이다.

 

 

저작자표시 비영리 변경금지

[비교] 반복문 - foreach, for~in

 

 

Java

for (String s : arr) {
    System.out.println("s=" + s);
}

람다?

 

Javascrpt

var person = {fname:"John", lname:"Doe", age:25};
for(x in person){
    txt = txt + ", " + person[x];
}

for (variable in [object | array]) {
    statements
}
--
var arr = ["pantarei", "siliuse", "mir"];  
for(var i = 0 ; i < arr.length ; i++){ 	alert(arr[i]); }  
for(var i in arr){ 	alert(arr[i]); }

 

Python

languages = ['Java', 'Python', 'C']
for language in languages:
    print(language)
}

 

PHP

foreach($customers as $customer){
    echo $customer;
}

 

Perl

여기도 추가
foreach my $string ( @array ) {
    print $string;
}

 

 

JSTL

<c:forEach>

 

Shell

$ for i in 1 2 3
> do
> echo $i
> done
1
2
3

$ for i in 1 2 3; do echo $i; done
1
2
3
$ for n in `find /etc -size 0`; do echo `ls -l $n`; done //xargs를 쓰는게 좋지

awk

 

Windows Command

> for %a in (1 2 3) do @echo %a

 

Oracle

FOR - Cursor

 

 

저작자표시 비영리 변경금지

웹개발을 위한 IE 설정

- 페이지 확인 설정

- 스크립트 오류 알림 설정

저작자표시 비영리 변경금지

[IBM dWs] Ajax에서 XML 처리하기

웹에서 XML 자료를 가져온 후 파이프라인을 거쳐 원하는 정보를 정해진 형식으로 추출해서 출력하는 여러 방법을 보여준다.

Ajax에서 XML 처리하기, Part 1: 네 가지 방법
Ajax에서 XML 처리하기, Part 2: Ajax와 XSLT를 이용하는 방법 두 가지 

Ajax에서 XML 처리하기, Part 2- Ajax와 XSLT를 이용하는 방법 두 가지.pdf

Ajax에서 XML 처리하기, Part 3: JSON을 사용하고 프록시 피하기


이 글에서는 간단한 Ajax 라이브러리를 만들어 사용한다.(ajax-simple.js)
미국립 기상청(NWS) 사이트에서 날씨 정보를 가져온다.

접근 방법 1. DOM 트리 탐색
웹프록시를 거쳐서 데이터를 가져온 뒤 브라우저가 DOM에서 값을 추출해서 보여준다.

- Ajax 의 XMLHttpRequest 객체는 같은 도메인으로만 요청이 가능한데 이를 해결하기 위해 웹 프록시를 사용한다.
웹 프록시는 한 서버로 보낸 요청을 다른 서버로 전달하는 방법이다.
아파치 웹 서버에서 프록시는 ProxyPass 규칙으로 구현한다.(웹 서버 구성을 바꿀 권한이 있어야 하겠지)

- DOM에서 값을 추출하기
접근 방식 2: 서버쪽 XSLT
서버에서 데이터를 가져온 뒤 XSLT 를 사용하여 XML 을 HTML 로 변환한 다음, HTML 코드를 브라우저로 전송한다.

- 리눅스에 있는 xsltproc 이라는 명령행 XSLT 프로세서를 이용한다.
Perl 스크립트로 xsltproc, wget 을 사용해서 파이프라인 구성 =-=> wget 은 자바 URLConnection 으로 가능하지 않나?

접근 방식 3: 클라이언트쪽 XSLT
웹프록시를 거쳐 데이터를 가져온 뒤 브라우저에서 XSLT 변환을 해서 보여준다.

- 인터넷 익스플로러, 파이어폭스, 오페라 등 주요 브라우저는 모두 나름대로 XSLT 처리를 지원한다.
파이어폭스와 오페라는 XSLTProcessor 객체를 제공한다. 인터넷 익스플로러는 문서 모델을 확장하여 XSLT 처리를 지원한다.
 
접근 방식 4: JSON과 동적 script 태그
야후 파이프를 거쳐 데이터를 가져온 뒤 브라우저에서 보여준다.

- Ajax 동일 도메인 제약 문제(same domain problem) 해결하기
(아파치 ProxyPass 규칙을 설정하는 등) 웹 서버 구성을 변경
다른 서버의 데이터를 긁어오는 서버 스크립트를 작성
야후 파이프(Yahoo! Pipes) 같은 외부 서비스 이용(여기에는 script tag hack 같은 기법이 추가된다.)

- script 태그를 동적으로 생성하기
 페이지를 읽은 후에 자바스크립트 코드를 읽어들인다. =-=> onload 에 두면 안되나?
- JSON



저작자표시 비영리 변경금지

특정 경로를 통해서 접근하는 경우의 화면 처리

특정 경로를 통해서 들어오는 경우 브라우저 위치를 지정해 준다.

- 요청을 처음 처리하는 컨트롤러에서 특정 경로를 통해서 들어오는 경우를 찾아서 적절한 값을 넘겨 받을 수도 있다.
그러나 뷰에 대한 처리를 정의하는 것이므로 화면단에서 처리하는 것이 적절하다.
저작자표시 비영리 변경금지

자바스크립트 함수

저작자표시 비영리 변경금지

Javascript Event

저작자표시 비영리 변경금지

Javascript 로 XML 다루기

- XML 파일 : IE

- XML 파일 : FF

- XML 데이터 : IE

- XML 데이터 : FF

=-=> 클래스로 만들어서 IE의 xml 속성도 구현할 필요가 있음.

저작자표시 비영리 변경금지

Javascript



저작자표시 비영리 변경금지

Javascrpt 개체 접근하기

개체가 여러개인 경우만 고려한 코딩이 많다.[각주:1]
개체가 없거나 1개인 경우도 고려해야 한다.

- 아래와 같이 호출하는 경우는 단일개체로 처리해야 한다. 배열이 아님.


  1. 항상 경계를 고려해야 함 [본문으로]
저작자표시 비영리 변경금지

자바스크립트 문자열에 특수문자가 들어가서 에러가 나는 경우

\로 처리해 주면 된다.

- 파일 인코딩이 잘못된 경우에도 발생할 수 있다.

저작자표시 비영리 변경금지

동일한 이름의 자바스크립트 함수

동일한 함수명이 있어도 된다.
자바스크립트에서는 함수도 변수처럼 사용될 수 있기 때문에 마지막에 선언된 함수가 실제 호출되는거 같다.
인자의 개수는 상관없다.
 
저작자표시 비영리 변경금지

브라우저 판별법

ajaxian 에 재미있는 글이 올라왔다.
IE 를 구별하는 가장 짧은 방법이라고 한다. (현재, 여기도 가보시라)

Gareth Heyes 가 그의 블로그에 Firefox, IE, Safari, Chrome, Opera 를 구별하는 한줄짜리 스크립트를 포스팅했다.
저작자표시 비영리 변경금지

티스토리툴바