자료실 2011. 11. 14. 19:44
<웹 디자이너를 위한 jQuery> 본문 예제소스입니다.

여기를 클릭하세요 ☞ 다운로드 

----------------------------------

chapter02/04/sample8.html은 아래 소스를 활용하세요~~. 댓글 참고.

sample8.html


posted by 로드북

댓글을 달아 주세요

  1.  Addr  Edit/Del  Reply 접신

    오타발견
    chapter02/01/sample5.html
    - <sapn> -> <span> 수정

    2011.12.07 10:16
  2.  Addr  Edit/Del  Reply 짱순이

    zip파일이 손상된 파일인가봅니다. chapter01~02 만 풀리네여~
    다시 업로드 부탁드려요~

    2012.02.02 09:35
    •  Addr  Edit/Del Favicon of https://roadbook.co.kr 로드북

      다시 다운로드 해서 압축을 풀어보았는데요. 문제 없이 풀립니다. 혹, 문제가 있으시면 chief@roadbook.co.kr로 연락 주시면 이메일로 보내드리도록 하겠습니다. 감사합니다.

      2012.02.02 10:43 신고
  3.  Addr  Edit/Del  Reply 여원아빠

    오타. 36p red가 read로 찍힘.

    2012.02.22 12:38
    •  Addr  Edit/Del Favicon of https://roadbook.co.kr 로드북

      앗, 여원아빠님 지적하신 오탈자는 마침 아래 사이트에 등록되어 있습니다.
      http://www.roadbook.co.kr/53
      감사합니다.

      2012.02.22 22:33 신고
  4.  Addr  Edit/Del  Reply 여원아빠

    브라우저 출력하면 첫번째줄이 홀수니까 odd가 지정한 red색이 나와야 하는거 아닌가요? 제가 잘못이해 한건가요?

    2012.02.22 12:47
    •  Addr  Edit/Del 여원아빠

      아 색인의 초기값이 0부터 시작하는 군요. 죄송.^^;; 삭제!

      2012.02.22 12:52
  5.  Addr  Edit/Del  Reply 최유경

    혹시이제 다운로드 안되나요? ㅠㅠ제가 책을 이제 샀는데 ㅠㅠㅠ

    2015.04.06 01:23
    •  Addr  Edit/Del Favicon of https://roadbook.co.kr 로드북

      안녕하세요. 다운도르가 되는데요? 다시 한번 부탁드립니다. 클릭하시면 별도 페이지가 뜨고 다운로드 버튼이 보일겁니다. 수고하세요~~.

      2015.04.06 10:33 신고
  6.  Addr  Edit/Del  Reply 김동일

    chapter02/04/sample8.html 수정 부탁드립니다. .one()을 사용해서 한번만 출력되어야만 하는데, 책도, 예제로 올라온 샘플도 모두 빨간 글씨가 계속 출력됩니다. .one()을 사용하지 않은 소스입니다. 책에 오타라면 적어도 샘플 예제에는 제대로 된 예제를 올려놔주셔요. 기다리겠습니다.

    2015.04.13 00:01
    •  Addr  Edit/Del Favicon of https://roadbook.co.kr 로드북

      안녕하세요. 확인후에 바로 수정예제 올려놓고 공지하겠습니다. 아마도 버전 갱신이 있는 듯 보입니다.

      2015.04.13 16:44 신고
    •  Addr  Edit/Del Favicon of https://roadbook.co.kr 로드북

      안녕하세요. 역자님의 답변을 첨부합니다. 참고하세요.
      (인덴트가 제대로 먹질 않네요. 감안해서 봐주세요. ㅠㅠ)
      해당 파일은 업데이트해놓도록 하겠습니다.
      감사합니다.

      -----------------------------------
      안녕하세요 독자님
      역자 신대호 입니다.
      말씀하신 부분 검토하였습니다.
      문제가 되었던 빨간 글씨가 계속 추가되었던 부분에 대해 설명드리겠습니다.

      $(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번 같이 해결하는 케이스가 많을것 같습니다.

      언제나 그렇듯 개발에 정답은 없습니다.
      누군가 보았을때 이해하기 쉽고 해당 기능을 명확히 수행한다면 어떤 방법으로도 해당기능을 구현할수 있으리라 생각됩니다.
      문제 없이 돌아가는 코드로 업데이트 해두겠습니다.

      감사합니다.

      2015.04.14 11:47 신고