자료실
2011. 11. 14. 19:44
<웹 디자이너를 위한 jQuery> 본문 예제소스입니다.
여기를 클릭하세요 ☞ 다운로드
여기를 클릭하세요 ☞ 다운로드
----------------------------------
chapter02/04/sample8.html은 아래 소스를 활용하세요~~. 댓글 참고.
sample8.html'자료실' 카테고리의 다른 글
| (예제소스) 이제 실전이다, HTML5&CSS3 사이트 제작의 모든 것 (6) | 2012.04.11 |
|---|---|
| Xcode4.1 & 4.2 & 4.3 사용자를 위한 가이드 (9) | 2012.01.24 |
| (예제소스) 빅 데이터 시대를 위한 NoSQL 핵심 가이드 (0) | 2011.12.19 |
| (예제소스) 웹 디자이너를 위한 jQuery (13) | 2011.11.14 |
| (예제소스) 처음부터 다시 배우는 HTML5 & CSS3 (6) | 2011.09.08 |
| 16진수 색상 코드 (2) | 2011.08.24 |
댓글을 달아 주세요
오타발견
2011.12.07 10:16chapter02/01/sample5.html
- <sapn> -> <span> 수정
접신님, 정확한 지적 감사합니다. 바로 공지해놓겠습니다.
2011.12.07 11:05 신고zip파일이 손상된 파일인가봅니다. chapter01~02 만 풀리네여~
2012.02.02 09:35다시 업로드 부탁드려요~
다시 다운로드 해서 압축을 풀어보았는데요. 문제 없이 풀립니다. 혹, 문제가 있으시면 chief@roadbook.co.kr로 연락 주시면 이메일로 보내드리도록 하겠습니다. 감사합니다.
2012.02.02 10:43 신고오타. 36p red가 read로 찍힘.
2012.02.22 12:38앗, 여원아빠님 지적하신 오탈자는 마침 아래 사이트에 등록되어 있습니다.
2012.02.22 22:33 신고http://www.roadbook.co.kr/53
감사합니다.
브라우저 출력하면 첫번째줄이 홀수니까 odd가 지정한 red색이 나와야 하는거 아닌가요? 제가 잘못이해 한건가요?
2012.02.22 12:47아 색인의 초기값이 0부터 시작하는 군요. 죄송.^^;; 삭제!
2012.02.22 12:52혹시이제 다운로드 안되나요? ㅠㅠ제가 책을 이제 샀는데 ㅠㅠㅠ
2015.04.06 01:23안녕하세요. 다운도르가 되는데요? 다시 한번 부탁드립니다. 클릭하시면 별도 페이지가 뜨고 다운로드 버튼이 보일겁니다. 수고하세요~~.
2015.04.06 10:33 신고chapter02/04/sample8.html 수정 부탁드립니다. .one()을 사용해서 한번만 출력되어야만 하는데, 책도, 예제로 올라온 샘플도 모두 빨간 글씨가 계속 출력됩니다. .one()을 사용하지 않은 소스입니다. 책에 오타라면 적어도 샘플 예제에는 제대로 된 예제를 올려놔주셔요. 기다리겠습니다.
2015.04.13 00:01안녕하세요. 확인후에 바로 수정예제 올려놓고 공지하겠습니다. 아마도 버전 갱신이 있는 듯 보입니다.
2015.04.13 16:44 신고안녕하세요. 역자님의 답변을 첨부합니다. 참고하세요.
2015.04.14 11:47 신고(인덴트가 제대로 먹질 않네요. 감안해서 봐주세요. ㅠㅠ)
해당 파일은 업데이트해놓도록 하겠습니다.
감사합니다.
-----------------------------------
안녕하세요 독자님
역자 신대호 입니다.
말씀하신 부분 검토하였습니다.
문제가 되었던 빨간 글씨가 계속 추가되었던 부분에 대해 설명드리겠습니다.
$(function(){
$("form").submit(function(){
if($("input[name='name']").val()==""){
if(("span").css("color") !="red")
$("input[name='name']").css("border","1px solid red").after("<span>이름을 입력해 주세요</span>");
$("span").css("color","red");
}
return false;
}
});
});
전송 버튼 클릭시 해당 스크립트가 호출되는데 내용을 보면 우선 span 태그에 css 속성 color이 있는지 체크 합니다.
체크후 존재 하지 않으면 붉은 글씨를 그 뒤에 출력하는 내용 입니다.
문제는 위 코드가 브라우져 버전 문제인지 어느순간부터 $("span").css("color") 가 "red"를 반환하지 않고 rgb(255, 0, 0)으로 반환하고 있는데서 발생합니다.
실제 스크립트를 디버깅해보면 $("span").css("color") 의 값이 rgb(255,0,0) 으로 반환됩니다.
말씀하신 one은 특정이벤트를 한번만 실행하게 하는 메소드 인데 그렇게 되면 submit 기능조차 한번만 실행되고 그 다음부턴 실행하지 않습니다.
즉, 필수 요소를 체크하고 값을 넣고 한번더 "전송" 버튼을 눌러 실행해야 하는데 one으로 묶인 구문은 실행되지 않습니다.
같은 동작에 같은 오류를 제거 할수 있는 방법은 여러가지를 생각해 볼수 있습니다.
비교 구문을 아래와 같이 변경합니다.
1.
if(("span").css("color") !="rgb(255, 0, 0)"){...}
직설적으로 문자열로 비교하는 방법인데 좋지 않습니다. 띄어쓰기 까지 맞아야 하고 괜시리 복잡해 집니다.
2.
if($("span").length == 0){...}
전체 코드안에 span 태그가 단 하나만 존재 하므로 span태그의 갯수로 붉은 글씨 출력 여부를 확인합니다.
이 방법또한 span 태그 갯수가 복수가 되거나 하면 사용하기 힘듭니다.
3. span tag에 id 값을 주고 해당 id 값을 직접적으로 확인합니다.
if($("input[name='name']").val()==""){
if($("#warning").length == 0){
$("input[name='name']").css("border","1px solid red").after("<span id='warning'>이름을 입력해 주세요</span>");
$("span").css("color","red");
}
return false;
}
보통 개발하면서 3번 같이 해결하는 케이스가 많을것 같습니다.
언제나 그렇듯 개발에 정답은 없습니다.
누군가 보았을때 이해하기 쉽고 해당 기능을 명확히 수행한다면 어떤 방법으로도 해당기능을 구현할수 있으리라 생각됩니다.
문제 없이 돌아가는 코드로 업데이트 해두겠습니다.
감사합니다.