웹표준을 위한 자바스크립트 사용

[g6man]

개념이 잘 안잡힌 상태에서 홈페이지를 만들고 더군다나 표준을 지켜가면서 만들기란 어렵더군요...
일단 기존에 있는 자료를 최대한 활용하기 위해 게시판부터 **보드를 선택했습니다만,
표준적이지 못한 부분이 많아서 힘들었습니다.
그래도 꽤 표준화되어있는 게시판이었는데...
일단 validation에 사용하던 비표준 속성들(required 나 email같은)을
자바스크립트로 setAttribute로 바꾸었습니다만...
과연 잘한짓인지 그게 잘한거라면 target도 그렇게 처리하려고 합니다. ^^;;
여러 고수님들의 의견 부탁드립니다.

[g6man]

덧붙여서 ie에서 createElement로 만든 radio버튼이 제대로 동작하지
않는 것 같습니다만...
그래서 ie는 innerHTML로 만들었습니다.
AJAX를 좀 활용하려 하니 쉽지만은 않네요...
FF의 XMLHTTPRequest가 IE의 XML보다 느린것 같기도 하고요...
(실제로 너무 느리더군요... iframe은 빠른데... -_-;;)

[eouia]

일단, createElement로 만든 내용이 제대로 동작하지 않는다는 것은 잘 이해가 안되네요. 일단 그럴리 없다.. 라고 답변드린 후, 뭔가 다른 이유가 있지 않을까 생각해봅니다.

비표준 속성을 쓰기 위해서는 DTD역시 손봐주는 것이 좋을 듯 합니다. 그러나, DTD를 제대로 이해못하는 브라우저에서는 문제가 될 수도 있겠습니다.
소소한 딜레마인데, "XHTML 1.0(혹은 1.1)"이냐 또는 "XHTML에 준하는 XML"이냐, 어느 쪽을 선택하느냐에 따라 다르겠지요.
아래에 관련된 논의가 있었습니다.
http://css.macple.com/forum/showthread.php?t=98

[g6man]

function add_design_price(index, price, subject, checked)
{
if (!subject) return;

var div = document.getElementById("ctl_"+frm_design);
if (g4_is_ie) {
if (checked)
div.innerHTML += '<input type="radio" id="design_'+index+'" name="design[]" checked="checked" value="'+price+'" onclick="get_sum_price(this.value);" />';
else
div.innerHTML += '<input type="radio" id="design_'+index+'" name="design[]" value="'+price+'" onclick="get_sum_price(this.value);" />';
div.innerHTML += '<label for="design_'+index+'">'+subject+'<'+'/label>';
} else {
var rd = document.createElement("input");
rd.type = "radio";
rd.id = "design_"+index;
rd.name = "design[]";
rd.value = price;
if (checked) rd.checked = "checked";
rd.setAttribute("onclick","get_sum_price(this.value);");
div.appendChild(rd);
var lb = document.createElement("label");
lb.setAttribute("for", "design_"+index);
lb.appendChild(document.createTextNode(subject));
div.appendChild(lb);
}
}

ctl_~x 라은 div에 <input type="radio" ~/>를 추가하는 함수입니다.
ie에서 onclick이 제대로 인식되지 않아서 name을 배열로 주었습니다.

[eouia]

테스트해보지 않았음을 전제로 말씀드리자면,
setAttribute대신,

function callback_func_name(e) {
...
}
...
rd.onclick=callback_func_name;
...
같은 callback assign이나.. 혹은,

rd.addEventListener("onclick",...) (IE에서는 rd.attatchEvent("onclick",...)) 처럼 EventListener를 이용하는 방법이 맞을 것 같습니다.
onclick은 attribute가 아니라 event이기 때문에 .setAttribute()로는 처리가 제대로 안될거라고 생각해봅니다.

function add_design_price(index, price, subject, checked)
{
if (!subject) return;

var div = document.getElementById("ctl_"+frm_design);
if (g4_is_ie) {
if (checked)
div.innerHTML += '<input type="radio" id="design_'+index+'" name="design[]" checked="checked" value="'+price+'" onclick="get_sum_price(this.value);" />';
else
div.innerHTML += '<input type="radio" id="design_'+index+'" name="design[]" value="'+price+'" onclick="get_sum_price(this.value);" />';
div.innerHTML += '<label for="design_'+index+'">'+subject+'<'+'/label>';
} else {
var rd = document.createElement("input");
rd.type = "radio";
rd.id = "design_"+index;
rd.name = "design[]";
rd.value = price;
if (checked) rd.checked = "checked";
rd.setAttribute("onclick","get_sum_price(this.value);");
div.appendChild(rd);
var lb = document.createElement("label");
lb.setAttribute("for", "design_"+index);
lb.appendChild(document.createTextNode(subject));
div.appendChild(lb);
}
}

ctl_~x 라은 div에 <input type="radio" ~/>를 추가하는 함수입니다.
ie에서 onclick이 제대로 인식되지 않아서 name을 배열로 주었습니다.

[g6man]

역시 자바스크립트는 제겐 복잡&심오한 세계입니다...

파이어폭스의 XMLHTTPRequest가 MSXML에 비해
상당히 느린 듯 한데 원래 그런것인지요?
hidden iframe을 사용하지 않고 AJAX로 DB select를 구현하려니
익스플로러는 상당히 빨랐습니다만(버그가 있더군요... 너무 캐싱에 의존하는것인지
값이 바뀌어도 바뀐값이 적용되지 않았습니다. 그래서 주고받을 때 시간값을
주어서 항상 값이 바뀌도록 꽁수를 써서 해결했습니다.) 파이어폭스는
상대적으로 매우 느렸습니다. 0.x초와 2~3초의 차이 정도?
(직접 시간을 측정하지는 않았습니다.)

[visharp]

딴지는 아니옵고....

rd.addEventListener("onclick",...)
--> rd.addEventListener("click",...)

addEventListener에는 on이 안붙더군요.

그냥 오타셨을 수도 있겠지만
많은 분들이 보는 포럼인 만큼,
헤매실 분도 계실 듯 하여..