ITWILL : 문서 객체 모델안의 if문에 return;의 역할, radio태그, checkbox태그

ITWILL학원 : 11강 JS기초 BY 정규태강사

1. if문에 return;의 역할

return : 문제발생시 다른 조건을 실행하지않는다. -> 지금 문제를 먼저 해결
예를들어 회원가입페이지의 필수항목인 아이디를 입력하지않았다면 그 다음 항목인 비밀번호는 아예 체크하지않겠다는 의미가 된다.

아래 태그는 if조건문이 연달아 있다.
첫번째 if는 아이디를 입력했는지 체크하는 조건이고 두번째 if는 비밀번호를 입력했는지 체크하는 조건문이다.

여기서 return;의 역활에 집중해보자.
아이디를 입력하지않았다면 비밀번호를 체크할 필요도 없다.
따라서 첫번째 if문에서 아이디가 없을시 return;를 주어 뒤의 비밀번호를 아예 체크하지않고 function이 종료된다.

function check(){
	if(inputId.length > 0){
		alert("사용자 ID : " + inputId + "\n" + userInfo.memo.value);
	}else{ // 아이디 입력값이 없을때
		alert("사용자ID를 입력하세요");
		document.userInfo.id.focus();
		return;	
	} 

	if(inputPw == ""){ //비밀번호 입력값이 없을 때
		alert("비밀번호를 입력하세요")
		document.userInfo.pw.focus();
	}
}

check();

2. 라디오 Radio 태그

라디오버튼은 동일한 name을 써야 한 그룹으로 묶인다.
value를 꼭 작성해주어여한다.

checked=”checked” 또는 checked라고 속성을 주면 해당 속성에 틱 된 상태로 출력된다.
만약 여러 태그를 다 checked한 경우, 제일 마지막 태그의 속성이 틱 된 상태로 출력된다.

아래 코드는 성별체크하는 라디오버튼이다.

<fieldset> //테두리생성되는 태그
	<form action="#" name="fr" method="get">
	<label> 성별 체크 : </label>
		<input type="radio" name="gender" value="여"> 여성
		<input type="radio" name="gender" value="남"> 남성
	<input type="button" value="성별체크유무" onclick="checkRa();">
	</form>
</fieldset>

여기서 성별을 틱하지않고 성별체크유무 버튼을 클릭하게되면
성별을 선택하라는 알림 팝업이 뜨고 난 뒤 focus()를 주는 checkRa() 함수를 만들어보자.

function checkRa(){ 
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
		womyn.focus();
	}
}

알림창은 잘 뜨지만 focus()는 티가 나지않는다
이럴때 enter를 눌러보면 여성라디오버튼에 굵은 검정테두리를 통해 focus가 됨을 알 수 있다.

enter를 안누르고 티나게 하는 방법은 없을까?
기존에는 보였으나 브라우저가 업데이트되면서 그런것같다는게 강사님의 의견.
w3school에서도 동일한 현상이 나타나는 것을 보니 방법이 없나보다..

3. 체크박스 checkbox 태그

라디오버튼과 다른 점은 중복체크가 가능하다는 점이다.
또한 체그해지도 가능하다

내 코드

function checkRa(){ //라디오버튼체크유무
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
//			womyn.focus(); //동일코드
//			document.forms["fr"].elements["gender"][0].focus(); //동일코드
		document.getElementsByName('gender')[0].focus();
	}else{
		checkRa = true;
	}
}

function checkCh(){ //체크박스체크유무
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkboth(){ //라디오버튼과 체크박스 둘다 체크했는지 확인
	console.log(checkRa == true)
	console.log(checkCh == true)
	if(checkRa == true && checkCh == true){
		return true;
	}else{
		return false;
	}
}

강사님 코드 => 다음시간에 다시

function checkRa(){
	let womyn = document.fr.gender[0];
	let men = document.fr.gender[1];

	if(womyn.checked == false && men.checked == false){
		alert("성별을 선택하세요")
			womyn.focus();
	}else{
		checkRa = true;
	}
}

	function checkCh(){ //내코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
	}else{
		checkCh = true;
	}
}


function checkCh(){ //강사님코드
	if(document.fr.hobby[0].checked == false
		&& document.fr.hobby[1].checked == false
		&& document.fr.hobby[2].checked == false){
		alert("취미를 한 개이상 선택하세요")
		document.getElementsByName('hobby')[0].focus();
		return;
	}

	checkRa();
	document.fr.submit();
}