'FIle'에 해당되는 글 1건

  1. 2012.02.09 막무가내식 jQuery를 진짜 jQuery답게 고쳐보자.
2012.02.09 11:20
홍보배너링크
홍보배너링크


시작하기에 앞서 아래의 소스들은
$(document).ready(function(){
      여기에 정의 되어 있어야 한다.
});

1. 주석에 설명된 시나리오는
<input type="text" name="fruit" id="fruit" value="입력하세요.">
이와같이 기본값이 입력하세요. 라고 정의되어있는데 이 때 텍스트박스를 클릭했을 때
텍스트박스를 빈값으로 바꾸고싶다면. 아래와 같이 정의하라는 것.


위 소스는 type이 text인 모든 input태그에 클릭이벤트가 적용 된다.
위소스의 문제는 무엇일까? 무언가 어색한데? 아니 익숙한가?
문제는 어색하기도하고 익숙하기도 하다는 것. 익숙한 javascript 문법이 들어가 있다.
this.value="";
정상적으로 실행되기는 하지만 글쎄... jQuery에는 jQuery식으로 작성해야 하지 않을까?^^
$(this).val("");
jQuery로 작성하면 표준코딩이 가능하다.
표준이 지켜지지 않는경우는 같은 javascript코드를 사용하더라도 지원하는 브라우져가 다르기 때문에 발생한다.



2. 위에서는 클릭했을 때 '입력하세요.'라는 기본값이 사라지도록 했었는데... 아래에서는 아무것도 작성하지 않고
다른 컨트롤을 클릭했을 때, 즉 포커스를 잃었을 때 "" 빈 값을 다시 '입력하세요.'라고 기본값 셋팅 해준다.

여기서도 위에서와 같은 어색함이 감돈다.
if($(this).val()=="")
  $(this).val("입력하세요");
이와같이 수정하면 되겠다.

만약에 현재 포커스를 잃은 text박스에 값을 이리 바꾸고 저리 바꾸고 이리 돌리고 저리 돌려서
셋팅을 하려고 한다면? $(this).val();과같은 코드를 계속 쓰기엔 무식하지 않겠는가?
var txt = $(this).val();
이처럼 변수를 사용하면 깔끔하게 코딩할 수 있지 않을까?^^



3. 콤보박스에서 선택된 옵션의 text를 출력하는 기능을 가지고 있다.


4. 콤보박스에서 value 프라퍼티(property)를 출력하는 기능을 가지고 있다.

4번 소스의 문제점은 콤보박스를 구성하는 시나리오에 따라 발생할 소지가 있다.
4-1. 아래처럼 콤보박스가 구성되면 4번 소스의 결과가 'a'값이 출력된다.

<select>

<option>a</option>

<option>b</option>

</select>


4-2. 아래처럼 구성되면 4번 소스의 결과가 'A' 값이 출력된다.
<select>

<option value="A">a</option>

<option value="B">b</option>

</select>


무엇이 정답일까? 글쎄 사용하기 나름이겠지만 내가 생각하는 답은 4-2 이다.
4-1의 결과인 a값을 출력하고 싶다면 .text()를 사용하는게 옳다고 본다.


5. 아래 소스는 찾아보기 버튼을 통해 파일을 선택 했을 때 <file>태그에 할당되는 경로 값을
가져오고 싶을 때 사용한다.

 

 

<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript">
 $(function() {
  $('#btn').click(function() {
   console.log($('#f').val());
   // document.getElementById('f').select();
   
   var realPath = document.getElementById('f').baseURI;
   console.log(realPath);
  });
 });
</script>
</head>
<body>
<input type="file" id="f">
<input type="button" id="btn" value="click!">
</body>
</html>

신고
크리에이티브 커먼즈 라이선스
Creative Commons License
홍보배너링크
Posted by 신나는 뒤벨로퍼 Imovator

티스토리 툴바