Javascript+jQuery+Ajax 12일차

입력 요소 값 가져오기

값 설정하기

$("셀렉터").val("내용");

값 읽어오기

text, select(드롭다운)

var input = $("셀렉터").val();

드롭다운요소의 경우 사용하지 않는 <option> 태그라 하더라도 value 속성값을 부여해야 한다.

<select name='foo'>
    <option value="">--- 선택하세요 ---</option>
    <option value="bar">item 1</option>
</select>

라디오 버튼의 경우

- 셀렉터가 여러 개를 의미하는 경우이므로 그 중에서 선택된 항목만 지정하는 셀렉터를 사용해야 한다.

- 라디오는 하나만 선택 가능하므로 가져온 결과 자체는 단일 값이다.

var input = $("셀렉터:checked").val();

체크박스의 경우

- checked 가상 클래스를 통해 가져온 대상이 배열 상태가 되므로 이를 반복문으로 처리해야 한다.

- 배열의 요소는 선택된 체크박스들에 대한 HTML태그가 된다.

- 그러므로 각 HTML 태그를 다시 jQuery 객체로 변환하여 사용해야 한다.

var input = $("셀렉터:checked");

for (var i=0; i<input.length; i++) {
 
    // 배열에 포함된 원소(HTML태그)를 jQuery객체로 변환
 
    var tmp = $(input[i]);
 
    ...
 
}

포커스 강제 지정

$("셀렉터").focus();

입력 요소 제어

$.each() 함수

- 배열을 탐색하는 jQuery 기능

var data = ['hello', 'world'];
 
 
 
// 배열을 탐색하면서 원소의 수만큼 콜백함수가 호출된다.
 
$.each(data, function(index, item) {
 
    // index는 순차적으로 0, 1
 
    // item은 순차적으로 'hello', 'world'
 
});

- 배열의 원소가 HTML 객체인 경우 jQuery로 변환하여 사용해야 한다.

  ex) 체크박스

var data = ['<input type="checkbox" />', '<input type="checkbox" />'];
 
 
// 배열을 탐색하면서 원소의 수 만큼 콜백함수가 호출된다.
 
$.each(data, function(index, item) {
 
    // $(item) 형태로 객체를 생성하여 처리 가능
 
});

원래의 목적은 객체를 탐색하는 기능

var data = { name: 'hello', userid: 'world', age: 20};
 
 
$.each(data, function(index, item) {
 
console.log(index + " >> " + item);
 
});

JSON 객체를 넣으면 인덱스로 key, 아이템으로 value를 리턴해준다.

입력요소 관련 submit 이외의 이벤트

포커스가 들어온 경우

$("셀렉터").focus(function([e]) {
 
    ...
 
});

포커스가 빠져나간 경우

$("셀렉터").blur(function([e]) {
 
    ...
 
});

상태가 변경된 경우

change 이벤트는 주로 라디오, 체크박스, 드롭다운에 대하여 활용도가 높다.

$("셀렉터").change(function( [e] ) {
 
    ...
 
});

텍스트를 입력하는 요소일 경우

내용이 변경되고 포커스가 빠져나올 때 이벤트가 발생한다.

체크박스나 라디오 버튼의 경우

선택 상태가 변경된 즉시 발생한다.

드롭다운의 경우

선택 상태가 변경된 즉시 발생한다.

프로퍼티 설정

- HTML 태그에서 값을 갖지 않는 속성 : property

- 값을 갖는 속성 : attribute

프로퍼티의 적용 여부 조회

특정 프로퍼티의 적용여부를 boolean 값으로 조회한다.

checked, disabled, selected

var is = $("셀렉터").prop('프로퍼티 이름');

ex) 체크박스의 disabled 속성이 적용되어 있는지 여부 확인

<input type="checkbox" class='foo' disabled />

// 속성이 적용되어 있으므로 true
 
var ok = $(".foo").prop('disabled');

프로퍼티의 설정/해제

prop 함수에 두 번째 파라미터로 boolean 값을 전달하면 프로퍼티를 강제로 설정하거나 해제할 수 있다.

$(".foo").prop('disabled', true|false);

정규표현식

- 문자열의 형식을 검사하기 위한 정형화된 식

- 모든 프로그래밍 언어에서 공통적으로 사용한다.

Javascript에서 정규표현식 사용

var regex = /정규표현식/;
 
if ( !regex.test("검사할문자열")) {
 
    // ... 정규표현식에 부합하지 않을 경우의 처리
 
}

주요 정규표현식

숫자 모양에 대한 형식 검사

/^[0-9]*$/

영문으로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z]*$/

  

한글로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣]*$/

  

영문과 숫자로만 구성되었는지에 대한 형식 검사

/^[a-zA-Z0-9]*$/

  

한글과 숫자로만 구성되었는지에 대한 형식 검사

/^[ㄱ-ㅎ가-힣0-9]*$/

  

이메일 형식인지에 대한 검사. 아이디@도메인의 형식을 충족해야 한다.

/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

  

'-'없이 핸드폰번호인지에 대한 형식검사.

/^01(?:0|1|[6-9])(?:\d{3}|\d{4})\d{4}$/

  

'-'없이 전화번호인지에 대한 형식검사. 각 부분에 대한 자리수도 충족시켜야 한다.

/^\d{2,3}\d{3,4}\d{4}$/

  

'-'없이 주민번호에 대한 글자수 및 뒷자리 첫글자가 1~4의 범위에 있는지에 대한 검사

/^\d{6}[1-4]\d{6}/