Rainbow
폼과 자바스크립트 본문
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 통신 코드를 콜백 함수로 개선해보겠습니다.
이렇게 콜백 함수를 사용하면 특정 로직이 끝났을 때 원하는 동작을 실행시킬 수 있습니다.
비유로 이해하는 콜백 함수 동작 방식
- 콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같습니다. 일반적으로 맛집을 가면 사람이 많아 자리가 없습니다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니죠. 만약 식당에서 자리가 생기면
전화로 자리가 났다고 연락이 옵니다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같습니다. 손님 입장에서는 자리가 날 때까지 식당에서 기다리지 않고 근처 가게에서 잠깐 쇼핑을 할 수도 있고 아니면 다른 식당
자리를 알아볼 수도 있습니다.
- 콜백 함수 : 데이터가 준비된 시점에서 동작 수행을 할 수 있습니다.
'web > javascript' 카테고리의 다른 글
for문 if문 (0) | 2021.01.16 |
---|---|
브라우저 객체 모델(BOM) (0) | 2021.01.08 |
문서 객체 모델 (BOM) (0) | 2020.12.31 |
Arry 객체 (0) | 2020.12.30 |
함수와 이벤트 (0) | 2020.12.15 |