폼과 자바스크립트

id값이나 class 값을 사용해 폼 요소에 접근하기

 

-id값을 사용할 때는 폼 요소 하나에만 접근하고

-class값을 사용할 때는 여러 요소를 가져와 배열 형태로 저장

 

ex)예시문

id값 billingName인 요소를 찾아 소스를 표시할 것이다.

 

document.querySelecter("#billingName")

<input type="text" class="input-box" id="billingName" name="billingName">

 

텍스트 필드에 있는 값을 가져오기 위해서 텍스트 필드에 접근하는 소스 뒤에

value값을 붙여 쓴다.

 

ex)

document.querySelecter("#billingName").value

= "한라산"

 

name값을 사용해 폼 요소에 접근하기

- 폼 요소를 구별하고 접근할 수 있도록 HTML 초기부터 사용하던 방법

- form의 name값 부터 폼 요소의 name값까지 하나씩 지정한다.

 

ex)예시문

이름 항목의 텍스트 필드에 접근 하는 소스입니다.

document.ship.shippingname

<input type="text" class="input-box" id="shippingName" name="shippingName"

 

사용한 소스뒤에 .value를 붙인다.

배송 정보 이름 항목에 입력한 값을 가져온다.

ex)

document.ship.shippingName.value

="도레미"

 

폼 배열을 사용해 폼 요소 접근하기

- 폼 요소에 id나 class속성도 없고 name속성이 없을 때 사용한다.

 

-forms 배열에 첫 번째 요소를 지정합니다.

-forms[ 0 ] 안에 있는 요소를 모두 가져오면 자료형식 배열과 비슷한 형태로 저장된다.

-인덱스0 부터 2까지 저장 됬는지 확인할 수 있다. 

 

document.forms[ 0 ].elements

HTMLFormControlscollection( 3 )[input, input, button.order] 

0 : input -> 태그 아이디

1 : input -> 태그 비밀번호

2 : button.order -> button

length : 3

 

첫 번째 폼에 있는 첫 번째 요소의 값을 가져올 수 있다.

ex)예시문

document. forms[ 0 ] .  elements[ 0 ].value 

현재 문서  첫 번째 폼        첫 번째 요소   값

 

배송 정보 자동 입력 프로그램 만들기- 주문 정보 내용 가져오기

 

- 가장 먼저 체크 상자를 눌렀는지 체크를 한다?

 

아래 예시문을 보면 check 객체에 이벤트가 발생 했을 때 체크 상자를 눌렀을 때 처리할 함수 실행

ex)예시문 

var check =document.querySelector("#shippingInfo");//체크 상자의 id값을 가져와 저장
check.addEventListener("click",function(){
//check요소에 click 이벤트가 발생할 때 함수가 실행

 

if(check.checked == true) {  // 체크되었다면
document.querySelector("#shippingName").value = document.querySelector("#billingName").value; 

 // 주문 정보(이름)를 배송 정보(이름)에 복사
document.querySelector("#shippingTel").value = document.querySelector("#billingTel").value;

// 주문 정보(전화번호)를 배송 정보(전화번호)에 복사
document.querySelector("#shippingAddr").value = document.querySelector("#billingAddr").value;

// 주문 정보(주소)를 배송 정보(주소)에 복사
}
else{//체크 상자가 해제 되면 필드 정보를 비움
document.querySelector("shippingName").value="";
document.querySelector("shippingTel").value="";
document.querySelector("shippingAddr").value="";
}
});

 

check객체의 checked속성값이 true가 아닐경우 사용자가 직접 내용을 입력 할 수 있게 한다.

※check객체의 checked 속성은 체크 상자가 체크 되면 그값이 true가 됩니다.※

 

폼 요소에서 입력값 검증하기

 

- 입력된 값이 정해진 조건에 맞는지 검사 하는것(폼 벨리데이션)

 

ex)예시문 입력값 검증 프로그램 만들기 -아이디 글자 수 확인 하기

 

- 아이디 필드에 입력한 글자 수가 4-15자리 인지 확인후 아이디 필드에 접근

 

var userId = document.querySelector("#user-id");  // ‘아이디’ 필드를 가져와 변수에 저장

 

- userId요소에 change이벤트가 발생하면 checkId( )함수를 실행 하도록 지정한다.

 

userId.onchange=checkeId;

 

function checkId( ){

  if( userId.value.length < 4 | | userId.value.length > 15){ //4자리 이하이거나 15자리 이상일 경우 실행

      alert("4~15자리의 영문과 숫자를 사용하세요.")//오류 메시지 출력

      userId.select( )//다시 입력할 수 있도록 userId 필드 선택

   }

}

 

입력값 검증 프로그램 만들기-비밀번호 확인하기

 

- 비밀번호 필드와 비밀번호 확인 필드를 가져와 변수에 저장

 

pw1.onchange= checkpw; //비밀번호 필드 변수에 저장
pw2.onchange= comparepw; // 비밀번호 확인 필드 변수에 저장

 

- pw1요소에 change이벤트가 발생했을 때 checkPw( )함수 소스 추가

 

function checkPw( ){ //checkPw 함수도 선언 한다.

  if(pw1.value.length < 8){  

  alert("비밀번호는 8자리 이상이어야 합니다.")//오류 메시지 표시

 Pw1.value="";//비밀번호 필드 지움

 Pw1.focus( )//입력할 수 있게 포거싱

}

}

 

- Pw2요소에 change이벤트가 발생 했을 때 comeparePw()함수를 실행 할수 있게 지정

 

function comparePw( ){ 

  if(pw1.value != Pw2.value){ 

    Pw2.value=""; //비밀번호 확인 필드 지움

    Pw2.focus( )//다시 입력할 수 있게 포커싱 

 }

}

 

- 입력한 비밀번호가 지워지고 다시 입력할 수 있게 비밀번호 필드 안에 커서가 놓여 있을 것이다.

 

다양한 폼 요소 다루기

-선택 목록에서 학과를 선택하고 라디오 버튼과 체크상자를 사용해 원하는 항목을 선택할 수 있습니다.

- 사용자가 선택할 수 있게 만든 요소는 폼 요소 라고 한다.

 

선택 목록 및 옵션 항목에 접근 하기

- 선택 목록은 <option>사용해 여러 항목을 한꺼번에 지정한다

  원하는 목록을 선택하는 요소이다.

 

ex) 예시문 

document.testForm.major

<select name="major" onchange="displaySelect()">

 

-name값이 Form이고 선택목록 name값이 major요소

 즉 요소 선택 목록에 접근할 수 있다.

 

 HTMLoptionsCollection( 7 )

- 0 : option

- 1 : option

- 2 : option

- 3 : option

- 4 : option

- 5 : option

- 6 : option

   length:7  :  옵션 항목의 개수가 저장 되어있다.

   selectedIndex : 0 사용자가 선택한 옵션의 인덱스 값이 저장됩니다.

 

- 선택 목록중 다섯 번째 옵션 항목에 접근하기

  document.testForm.major.options[ 4 ] // 다섯 번째 항목에 접근

 

- 다섯 번째 선택한 옵션의 항목을 화면에 표시

 document.testForm.majoroptions[ 4 ].innerText //innerText속성을 사용해 접근

 

- 선택한 옵션의 항목을 서버로 넘겨주는지 알고 싶을 때

 document.testForm.major,options[ 4 ].value // 서버 전달 값

 

선택 목록에서 사용자가 선택한 옵션 항목 찾아내기

 

- 사용자가 선택한 항목이 index값에 저장 되서 화면에 표시

 

var selectMenu =document,testForm.major;

function displaySelect( ){ 

  var selectedText =selectMenu.options[selectMenu.selectedIndex].innerText;

  //선택한 옵션의 innerText를 가져와 selected 변수에 저장

 alert("["+selectedText+"]를 선택했습니다.")

}

 - 선택 목록을 가져와 selectMenu변수에 저장

 - selectMenu.selectedIndex를 통해 알아낸다

 - innerText를 사용해 표시 한다

 - selected 저장된 내용이 알림창에 표시된다. 

 

라디오 버튼과 체크 상자에 접근하기

 

-여러 개의 항목에서 하나의 항목을 선택할 수 있다.

- 여러 개의 항목을 선택할 수 있다.

 

ex) 예시문

document.testForm.subject

RadioNodeList( 3 )[ input, input, input, input, "" ]

 

-name값을 가진 요소가 여러 개이기 때문에 RadioNodeList 노드 리스트 형태로 저장됩니다.

- 맨 끝에 "";표시 된다 value값인데 아직 아무값도 선택하지 않았기 때문에 빈 값이 들어 있습니다.

 

-checked 속성은 기본값이 false 입니다. 선택하면 값이 true로 바뀝니다.

- 첫 번째 항목은 선택되지 않았기 때문에 false로 표시 되고, 두 번째 항목은 

  선택이 되었기 때문에 true로 표시 됩니다.

 

document.testForm.subject[ 0 ].checked

false 

document.testForm.subject[ 1 ].checked

true

 

비동기 처리 함수

 

- 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고

  다음 코드를 먼저 실행하는 자바스크립트의 특성을  의미합니다.

- 서버로 부터 데이터를 요청하고 받아올 때까지 기다려 주지 않고 다음 코드를 먼저 실행 합니다.

 

비동기 처리의 두 번째 사례

또 다른 비동기 처리 사례는 setTimeout()입니다. setTimeout()은 Web API의 한 종류입니다. 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행합니다. 아래 코드를 보겠습니다.

 

비동기 처리에 대한 이해가 없는 상태에서 위 코드를 보면 아마 다음과 같은 결과값이 나올 거라고 생각할 겁니다.

• ‘Hello’ 출력
• 3초 있다가 ‘Bye’ 출력
• ‘Hello Again’ 출력

그런데 실제 결과 값은 아래와 같이 나오죠.

• ‘Hello’ 출력
• ‘Hello Again’ 출력
• 3초 있다가 ‘Bye’ 출력

setTimeout() 역시 비동기 방식으로 실행되기 때문에 3초를 기다렸다가 다음 코드를 수행하는 것이 아니라 일단 setTimeout()을 실행하고 나서 바로 다음 코드인 console.log('Hello Again');으로 넘어갔습니다. 따라서, ‘Hello’, ‘Hello Again’를 먼저 출력하고 3초가 지나면 ‘Bye’가 출력됩니다.

 

콜백 함수로 비동기 처리 방식의 문제점 해결하기

앞에서 자바스크립트 비동기 처리 방식에 의해 야기될 수 있는 문제들을 살펴봤습니다. 이러한 문제들은 어떻게 해결할 수 있을까요? 바로 콜백(callback) 함수를 이용하는 것입니다. 앞에서 살펴본 ajax 통신 코드를 콜백 함수로 개선해보겠습니다.

      이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다.

비유로 이해하는 콜백 함수 동작 방식

- 콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다.      그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면   

  전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님      입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당

  자리를 알아볼 수도 있습니다.

 

- 콜백 함수 : 데이터가 준비된 시점에서 동작 수행을 할 수 있습니다.