113 pending comments from Eric, Eric, Eric, Eric, Phil are awaiting approval.
2008-02-18 08:23:23
제 기억에, submit 버튼의 name을 이용하는 방식은 브라우저에서 지원하지 않는 경우가 있습니다. IE6가 그랬던 것 같은데, 해결책으로 사용하신 것과 같이 스크립트를 같이 사용하면 되지만 약간 불안한게 사실이죠.
강군 2008-02-18 01:16:16
그리고 w3c 페이지를 보던중에 $$() 라는 자바스크립트 함수를 보게 되었는데.. Unobtrusive Javascript 방식에서 꼭 필요한 함수더군요. 그거와는 사용법이 틀리지만..$$('div.classname div input.classname') 또는 $$('#idname elementname') 로...사용할 수 있는 함수입니다. 문제점이 있을수도 있으나 보시고 지적해주시기 바랍니다... function $tn(tn,p){var af=[];p=(!p)?document:$(p);if(!tn){af.push(document);return af;}if(tn.charAt(0)=='#'){af.push($(tn.substr(1)));return af;}var cc=tn.indexOf('.'),cs=null;if(cc>-1){cs=tn.substr(cc+1);tn=tn.substr(0,cc);}af=$fnd(p,tn,cs);return af;}function $tns(tn,ps){var fa=[];if(!tn)return fa;if(!ps)ps=document.childNodes;for(var i=0;i<ps.length;i++)fa=fa.concat($tn(tn,ps[i]));return fa;}function $$(a,f){if(!a)return [];var a=a.split(' '),e=null;for(var i=0;i<a.length;i++)e=$tns(a[i],e);if(f&&e.length){for(var i=0;i<e.length;i++){if(e[i])f(e[i]);}}return e;}function $fnd(p,tn,cs){var f=[],e;if(!p)p=document;for(var i=0;i<p.childNodes.length;i++){e=p.childNodes[i];if(e.nodeName.toLowerCase()==tn||!tn){if(cs){if(e.className==cs)f.push(e);}else f.push(e);}f=f.concat($fnd(e,tn,cs));}return f;}
그냥 쓰다 보니 의미전달이 잘 안되는 부분이 있는 것 같아서 핵심은 하나의 폼안에 submit 버튼에 name 속성을 지정해주고 서버에서는 어떤 submit 버튼의 이름값이 존재하는지 체크한후에 응답을 하면 될것 같습니다. cancel,send,diradd 처럼 submit 버튼이 여러개더라도 눌려진 버튼의 이름이 서버로 전송됩니다. 물런 폼안에 값도 같이요.
강군 2008-02-18 01:16:16
^^ 방법을 찾았습니다. input type='submit' name='cancel' value='취소' 입니다. cancel 값이 폼으로 전송된 경우 hidden 으로 숨겨둔 이전 페이지값을 location 해줍니다. (체크 잘해야 할 부분인듯...^^) 그외 다중 카테고리 선택등에도 submit 로 name 값만 바꾸어 서버로 전송을 날립니다. 그럴경우 post,get 에 들어온 폼값을 체크하여 각 값을 수정, 쓰기등에서 다시 재활용합니다. 즉 모바일 같은 곳에서 카테고리선택하다 글이 날라가면 황당하겠죠. post로 받은 값을 다시 content에 넣어 줍니다. subject 도 그렇고.. 자바스크립트가 안되면 전부 서버로 값을 넘깁니다. 자바스크립트가 되는 경우 해당폼의 이름의 값에 적절한 조치(AJAX 나 폼 체크등..)를 합니다. 물런 서버로 넘어온 경우 각 폼의 어떤 버튼이 클릭되었는지도 체크합니다. 하나의 전송에 하나의 폼에 ~필요한 버튼은 input type='submit' 로 다 집어넣습니다. 카테고리 넣고 추가 삭제 역시 POST를 받아가면서 처리하는 거죠. 어떤가요 ? STANDARD 맞는 거 같은 가요 ? ^^
2008-02-17 03:18:18
저라면 취소 버튼을 <a>로 하고 스타일로 모양을 맞췄을 것 같습니다. :)
강군 2008-02-15 03:18:18
[다음으로] [취소] 이렇게 버튼이 두개 있다면 취소는 어떻게 해야 하죠 ? 그렇다고 a 로 할려니 ~ 보기가 흉하고.. 그렇다고 폼을 전송하는 [다음으로] 이걸 a 로 걸면 폼이 전송이 안되고...방법이 있을까요 ?
강군 2008-02-15 03:18:18
현석님 ~ input 버튼은 결국 폼을 전송과 RESET 인데.. reset 이 아닌 link 를 거는 방법은 없을 까요 ?
강군 2008-02-14 21:12:12
마크업은 마크업만이 존재하고 스크립트는 스크립트만이 존재...정말 퍼펙트 하네요. 요즘 그런것이 가능할수 있을 런지....하여튼 자바스크립트를 쓰는걸 밥먹는 것보다 좋아하는 저로서 한번 도전해보아야 겠네요.
강군 2008-02-14 21:12:12
데려 묻는 것에 대하여 반문하게 되네요..ㅋㅋㅋ 아마 표준 휴유증이 시작된것 같습니다.
강군 2008-02-14 21:12:12
Unobtrusive Javascript 뿐만 아니라 스타일도 분리..맞다고 생각합니다. 하지만 좀만 생각하면 알수 있지 않을 까요 ? history.go(-1) 같은 경우 자주쓰이죠 .. 하지만 REFERER 주소를 받아보면 이전페이지는 알수 있습니다. 그것도 잘 요리해주면 이전을 초기페이지로 갈수도 있게 해주고요. 궂이 쓸데없는 자바스크립트는 생략하는게 옳고 필요한 경우 페이지마다 스크립트를 두는것도 옳다고 봅니다. 배보다 배꼽이 커지는 경우가 생기더라도...다만 내공으로 그런걸 감안해주어야 하겠죠.
2008-02-14 19:10:10
Unobtrusive Javascript라고 하는 개념입니다. 스크립트와 마크업이 완전히 분리되는 것을 말합니다. 정답은 없지만, 마크업에 이벤트 핸들러가 없으니 코드도 간결해지고 보기도 편하죠. 반면 간단한 이벤트의 경우 배보다 배꼽이 더 커질 수도 있고요.
강군 2008-02-14 02:17:17
아랫글이 이해가 안될까 싶어 다시 씁니다. w3c에는 마크업만이 되어있고..onclick 같은 이벤트 속성은 없더군요. onclick을 스크립트 파일에서 일일이 지정해야 할까요 ?
강군 2008-02-14 02:17:17
아 분리를 하다보니 onclick 이벤트가 또 문제네요.. w3c 사이트에 보니 onclick='이벤트' 이것보다. id.onclick=function(){....} 이렇게 하는 구문이 보이던데...이것도 자바스크립트로 빼야 할까요 ?
2008-02-14 01:16:16
스크립트도 CSS와 분리를 하는 것이 좋습니다. CSS는 되고 스크립트가 안될때도 고려하면 분리가 완전하게 되겠죠. :)
2008-02-14 01:16:16
onclick='javascript:...'는 폐기된(deprecated) 구문입니다. 바로 쓰시는게 맞아요.
강군 2008-02-14 01:16:16
그리고 자바스크립트에서 대부분 STYLE을 씁니다. style='display:none' 으로 해놓고 자바스크립트에서 display:block 을 해줍니다. 만약에 CSS는 먹히고 JS는 안먹힐 경우 ~ 문제가 발생하지 않을 까요 ?물런 그런 브라우져는 흔치 않지만 만약에 ...이럴 경우 display:none 설정을 JS 로 설정을 해주어야 하는 걸까요 ? JS는 흔히 이벤트 위주의 코드이기에 ~ 난감하기 이를때 없습니다. 어떤 방법이 없을 까요 ?
강군 2008-02-14 01:16:16
onclick='javascript:...' 이 표현이 맞을까요 ? onclick='...' 이런 표현이 맞을까요 ? 궂이 javascript를 다음에서 명시해주던데..그 차이점은 무엇인가요 ? 아무도 글을 안남기길래 들어온 김에 글 남기고 갑니다. ~
2008-02-13 00:15:15
W3C의 마크업 검사 페이지도 폼을 제작할 때 테이블을 사용한 것을 보실 수 있습니다. 무조건 테이블을 빼는게 좋은게 아닌것 같습니다. 하위호환성 문제도 있고요.
강군 2008-02-12 23:14:14
오늘 또 한가지 배웁니다. style을 빼면 ie3에서 볼때 처럼 이뻐야 한다. 음~ table을 너무 안쓰는 것은 죄악이라 생각됩니다. 요즘은 표준이란답시고 무식하게 table을 빼는데...그건 아닌것 같네요.
강군 2008-02-12 22:13:13
다시 맘이 바뀌었습니다. http://validator.w3.org/ 이 사이트에서 p 로 input 버튼 을 감싸는 군요. http://validator.w3.org/ 이 사이트의 마퀴업을 배우는게 좋겠네요.
강군 2008-02-12 22:13:13
그냥 div 로 하기로 맘 먹었습니다. p는 문자 내용을 감쌀때 ...쓰는게 맞겠네요.
강군 2008-02-12 22:13:13
style 이 없을때 p가 여백으로 더욱 참신하게 나옵니다. div보다...하지만 p는 block 중에 문자열에 해당하는 것 같기도 하구요. 문자열이 아닌 글입력 input 을 감쌀때 p를 써도 괜찮을 까요 ?
강군 2008-02-11 21:12:12
동감합니다. 좋은 모범 사이트가 되도록 노력하겠습니다. 그럼 ~ 차후에 제가 만든 사이트에 태클 많이 부탁드립니다.
2008-02-11 21:12:12
아, 그리고 굳이 국내와 국외를 비교한 것은 아니고 국내에는 이러한 것들의 연구가 너무 안되어 있어서 관련 자료가 거의 없거든요. 그래서 자연스럽게 국외 자료를 생각했는데, 국내도 국내 실정에 맞게, 특히나 이 부분은 우리가 더 경험이 많으니까 좋은 자료들이 많이 나왔으면 좋겠습니다.
제 기억에, submit 버튼의 name을 이용하는 방식은 브라우저에서 지원하지 않는 경우가 있습니다. IE6가 그랬던 것 같은데, 해결책으로 사용하신 것과 같이 스크립트를 같이 사용하면 되지만 약간 불안한게 사실이죠.
강군 2008-02-18 01:16:16
그리고 w3c 페이지를 보던중에 $$() 라는 자바스크립트 함수를 보게 되었는데.. Unobtrusive Javascript 방식에서 꼭 필요한 함수더군요. 그거와는 사용법이 틀리지만..$$('div.classname div input.classname') 또는 $$('#idname elementname') 로...사용할 수 있는 함수입니다. 문제점이 있을수도 있으나 보시고 지적해주시기 바랍니다... function $tn(tn,p){var af=[];p=(!p)?document:$(p);if(!tn){af.push(document);return af;}if(tn.charAt(0)=='#'){af.push($(tn.substr(1)));return af;}var cc=tn.indexOf('.'),cs=null;if(cc>-1){cs=tn.substr(cc+1);tn=tn.substr(0,cc);}af=$fnd(p,tn,cs);return af;}function $tns(tn,ps){var fa=[];if(!tn)return fa;if(!ps)ps=document.childNodes;for(var i=0;i<ps.length;i++)fa=fa.concat($tn(tn,ps[i]));return fa;}function $$(a,f){if(!a)return [];var a=a.split(' '),e=null;for(var i=0;i<a.length;i++)e=$tns(a[i],e);if(f&&e.length){for(var i=0;i<e.length;i++){if(e[i])f(e[i]);}}return e;}function $fnd(p,tn,cs){var f=[],e;if(!p)p=document;for(var i=0;i<p.childNodes.length;i++){e=p.childNodes[i];if(e.nodeName.toLowerCase()==tn||!tn){if(cs){if(e.className==cs)f.push(e);}else f.push(e);}f=f.concat($fnd(e,tn,cs));}return f;}
강군 2008-02-18 01:16:16
아 ~ 한가지더 submit 버튼마다 자바스크립트를 덮어 버립니다. 말씀하신 Unobtrusive Javascript 방식으로..
강군 2008-02-18 01:16:16
그냥 쓰다 보니 의미전달이 잘 안되는 부분이 있는 것 같아서 핵심은 하나의 폼안에 submit 버튼에 name 속성을 지정해주고 서버에서는 어떤 submit 버튼의 이름값이 존재하는지 체크한후에 응답을 하면 될것 같습니다. cancel,send,diradd 처럼 submit 버튼이 여러개더라도 눌려진 버튼의 이름이 서버로 전송됩니다. 물런 폼안에 값도 같이요.
강군 2008-02-18 01:16:16
^^ 방법을 찾았습니다. input type='submit' name='cancel' value='취소' 입니다. cancel 값이 폼으로 전송된 경우 hidden 으로 숨겨둔 이전 페이지값을 location 해줍니다. (체크 잘해야 할 부분인듯...^^) 그외 다중 카테고리 선택등에도 submit 로 name 값만 바꾸어 서버로 전송을 날립니다. 그럴경우 post,get 에 들어온 폼값을 체크하여 각 값을 수정, 쓰기등에서 다시 재활용합니다. 즉 모바일 같은 곳에서 카테고리선택하다 글이 날라가면 황당하겠죠. post로 받은 값을 다시 content에 넣어 줍니다. subject 도 그렇고.. 자바스크립트가 안되면 전부 서버로 값을 넘깁니다. 자바스크립트가 되는 경우 해당폼의 이름의 값에 적절한 조치(AJAX 나 폼 체크등..)를 합니다. 물런 서버로 넘어온 경우 각 폼의 어떤 버튼이 클릭되었는지도 체크합니다. 하나의 전송에 하나의 폼에 ~필요한 버튼은 input type='submit' 로 다 집어넣습니다. 카테고리 넣고 추가 삭제 역시 POST를 받아가면서 처리하는 거죠. 어떤가요 ? STANDARD 맞는 거 같은 가요 ? ^^
저라면 취소 버튼을 <a>로 하고 스타일로 모양을 맞췄을 것 같습니다. :)
강군 2008-02-15 03:18:18
[다음으로] [취소] 이렇게 버튼이 두개 있다면 취소는 어떻게 해야 하죠 ? 그렇다고 a 로 할려니 ~ 보기가 흉하고.. 그렇다고 폼을 전송하는 [다음으로] 이걸 a 로 걸면 폼이 전송이 안되고...방법이 있을까요 ?
강군 2008-02-15 03:18:18
현석님 ~ input 버튼은 결국 폼을 전송과 RESET 인데.. reset 이 아닌 link 를 거는 방법은 없을 까요 ?
강군 2008-02-14 21:12:12
마크업은 마크업만이 존재하고 스크립트는 스크립트만이 존재...정말 퍼펙트 하네요. 요즘 그런것이 가능할수 있을 런지....하여튼 자바스크립트를 쓰는걸 밥먹는 것보다 좋아하는 저로서 한번 도전해보아야 겠네요.
강군 2008-02-14 21:12:12
데려 묻는 것에 대하여 반문하게 되네요..ㅋㅋㅋ 아마 표준 휴유증이 시작된것 같습니다.
강군 2008-02-14 21:12:12
Unobtrusive Javascript 뿐만 아니라 스타일도 분리..맞다고 생각합니다. 하지만 좀만 생각하면 알수 있지 않을 까요 ? history.go(-1) 같은 경우 자주쓰이죠 .. 하지만 REFERER 주소를 받아보면 이전페이지는 알수 있습니다. 그것도 잘 요리해주면 이전을 초기페이지로 갈수도 있게 해주고요. 궂이 쓸데없는 자바스크립트는 생략하는게 옳고 필요한 경우 페이지마다 스크립트를 두는것도 옳다고 봅니다. 배보다 배꼽이 커지는 경우가 생기더라도...다만 내공으로 그런걸 감안해주어야 하겠죠.
Unobtrusive Javascript라고 하는 개념입니다. 스크립트와 마크업이 완전히 분리되는 것을 말합니다. 정답은 없지만, 마크업에 이벤트 핸들러가 없으니 코드도 간결해지고 보기도 편하죠. 반면 간단한 이벤트의 경우 배보다 배꼽이 더 커질 수도 있고요.
강군 2008-02-14 02:17:17
아랫글이 이해가 안될까 싶어 다시 씁니다. w3c에는 마크업만이 되어있고..onclick 같은 이벤트 속성은 없더군요. onclick을 스크립트 파일에서 일일이 지정해야 할까요 ?
강군 2008-02-14 02:17:17
아 분리를 하다보니 onclick 이벤트가 또 문제네요.. w3c 사이트에 보니 onclick='이벤트' 이것보다. id.onclick=function(){....} 이렇게 하는 구문이 보이던데...이것도 자바스크립트로 빼야 할까요 ?
스크립트도 CSS와 분리를 하는 것이 좋습니다. CSS는 되고 스크립트가 안될때도 고려하면 분리가 완전하게 되겠죠. :)
onclick='javascript:...'는 폐기된(deprecated) 구문입니다. 바로 쓰시는게 맞아요.
강군 2008-02-14 01:16:16
그리고 자바스크립트에서 대부분 STYLE을 씁니다. style='display:none' 으로 해놓고 자바스크립트에서 display:block 을 해줍니다. 만약에 CSS는 먹히고 JS는 안먹힐 경우 ~ 문제가 발생하지 않을 까요 ?물런 그런 브라우져는 흔치 않지만 만약에 ...이럴 경우 display:none 설정을 JS 로 설정을 해주어야 하는 걸까요 ? JS는 흔히 이벤트 위주의 코드이기에 ~ 난감하기 이를때 없습니다. 어떤 방법이 없을 까요 ?
강군 2008-02-14 01:16:16
onclick='javascript:...' 이 표현이 맞을까요 ? onclick='...' 이런 표현이 맞을까요 ? 궂이 javascript를 다음에서 명시해주던데..그 차이점은 무엇인가요 ? 아무도 글을 안남기길래 들어온 김에 글 남기고 갑니다. ~
W3C의 마크업 검사 페이지도 폼을 제작할 때 테이블을 사용한 것을 보실 수 있습니다. 무조건 테이블을 빼는게 좋은게 아닌것 같습니다. 하위호환성 문제도 있고요.
강군 2008-02-12 23:14:14
오늘 또 한가지 배웁니다. style을 빼면 ie3에서 볼때 처럼 이뻐야 한다. 음~ table을 너무 안쓰는 것은 죄악이라 생각됩니다. 요즘은 표준이란답시고 무식하게 table을 빼는데...그건 아닌것 같네요.
강군 2008-02-12 22:13:13
다시 맘이 바뀌었습니다. http://validator.w3.org/ 이 사이트에서 p 로 input 버튼 을 감싸는 군요. http://validator.w3.org/ 이 사이트의 마퀴업을 배우는게 좋겠네요.
강군 2008-02-12 22:13:13
그냥 div 로 하기로 맘 먹었습니다. p는 문자 내용을 감쌀때 ...쓰는게 맞겠네요.
강군 2008-02-12 22:13:13
style 이 없을때 p가 여백으로 더욱 참신하게 나옵니다. div보다...하지만 p는 block 중에 문자열에 해당하는 것 같기도 하구요. 문자열이 아닌 글입력 input 을 감쌀때 p를 써도 괜찮을 까요 ?
강군 2008-02-11 21:12:12
동감합니다. 좋은 모범 사이트가 되도록 노력하겠습니다. 그럼 ~ 차후에 제가 만든 사이트에 태클 많이 부탁드립니다.
아, 그리고 굳이 국내와 국외를 비교한 것은 아니고 국내에는 이러한 것들의 연구가 너무 안되어 있어서 관련 자료가 거의 없거든요. 그래서 자연스럽게 국외 자료를 생각했는데, 국내도 국내 실정에 맞게, 특히나 이 부분은 우리가 더 경험이 많으니까 좋은 자료들이 많이 나왔으면 좋겠습니다.