본문 바로가기
FrontEnd/JavaScript

0901 JavaScript - 내장 객체 (2)

jeoniee 2022. 9. 1. 13:02
728x90
반응형

9월의 시작! 

대충 살자...아니 열심히 공부하자

 

 

 

오늘은 이어서 다른 페이지 로 넘어 가는 작업을 한다. 

 

->-> 그전 작업 참고 

 

2022.08.25 - [JavaScript] - 0825 JavaScript - 내장 객체, Location

 

0825 JavaScript - 내장 객체, Location

프론트엔드 내용이지만, 자바랑 문법이 같고 백엔드에서도 중요하다. 내장 객체 window - location  - history  - document - image,div,...  - form - text, password, textarea  - checkbox, radio  - sele..

jeoniee.tistory.com

 

 

 

window - text 내장 객체 

window - location

                 - history
                 - document - image,div,...
                                         - form - text, password, textarea
                                                      - checkbox, radio
                                                      - select

 

document .form이름.text상자이름 : form태그 글을 적을 수 있는 텍스트 상자 내장 객체 (배열!!!!!!!!!!!!!!!!!!!!!!!)

document.form이름.텍스트상자이름.변수()
     =>  document.form이름.텍스트상자이름.type 변수 : 텍스트 상자 타입 저장               
           document.form이름.텍스트상자이름.value변수 : 텍스트 상자에 입력 된 값 저장


document.form이름.텍스트상자이름.함수()
      => document.form이름.텍스트상자이름.focus() 텍스트상자 포커스(활성화)
           document.form이름.텍스트상자이름.blur() 텍스트상자 포커스 해제(활성화)
           document.form이름.텍스트상자이름.select() 텍스트상자 블럭화,드래그 입력값 선택(활성화)

 

 

<body>

<form action = "a.jsp" method = "get" name ="fr">
아이디 : <input type = "text" name = "id"><br>
비밀번호 : <input type = "password" name ="pass"><br>
자기소개 : <textarea name ="intro" rows = "10" cols = "20">자기소개</textarea><br>
<hr><hr>
<input type = "button" value = "정보확인" onclick="fun1()"><br>
<input type = "button" value = "정보변경" onclick="fun2()"><br>
<input type = "button" value = "제어" onclick="fun3()"><br>



</form>

</body>

 

value변수값 확인, 포커스, 깜빡임, 선택

<script>
function fun1(){
	alert(document.fr.id.type);
	alert(document.fr.id.value);
	document.fr.id.focus();
	document.fr.id.blur();
	document.fr.id.select();
}
</script>

 

 

value변수값 변경, 포커스

<script>
function fun2(){

	document.fr.id.value="kim";
	document.fr.id.focus();
}
</script>

 

 

1. id, password, 자기소개 상자에 value 값이 비어있을 경우, 아이디 상자 비어있음 창 뜨게 하기 

-> 아이디로 커서 옮겨서 깜빡거리게 하기  (포커스)

 

 

2. 입력 다 되어있을 경우, a.jsp 페이지로 이동.

 

<script>
function fun3(){
	alert(document.fr.id.value);
	if(document.fr.id.value==""){
		alert("아이디 상자 비어있음");
		document.fr.id.focus();
	}else if(document.fr.pass.value==""){
		//비밀 번호 비어있음,포커스
		alert("비밀번호 비어있음");
		document.fr.pass.focus();
		
	}else if(document.fr.intro.value==""){
		//자기소개 비어있음,포커스
		alert("자기소개 비어있음");
		document.fr.intro.focus();
	}else{
		//폼에 데이터를 가지고 action="a.jsp" 전송
		document.fr.submit();
	
	}
}
</script>

 

 

else 삭제 -> return 넣어도 값은 똑같다!

<script>
function fun3(){
	alert(document.fr.id.value);
    alert(document.fr.id.value.length);
	if(document.fr.id.value==""){
		alert("아이디 상자 비어있음");
		document.fr.id.focus();
		//함수 호출한 곳으로 되돌아감
		return;
		
	}if(document.fr.pass.value==""){
		//비밀 번호 비어있음,포커스
		alert("비밀번호 비어있음");
		document.fr.pass.focus();
		return;
		
	}if(document.fr.intro.value==""){
		//자기소개 비어있음,포커스
		alert("자기소개 비어있음");
		document.fr.intro.focus();
		return;
	}
		//폼에 데이터를 가지고 action="a.jsp" 전송
		document.fr.submit();
}
</script>

 

length

문자열.변수 => 문자열.length => 문자열 길이 저장 변수 

<script>
alert(document.fr.id.value.length);
</script>



 

연습 문제 

아이디 상자에 입력된 값은 5자 입력
 5자가 아니면, 아이디 상자는 5자 입력, 포커스, 되돌아감. 

<script>
if(document.fr.id.value.length!=5){

		alert("아이디 상자는 5자 입력");
		document.fr.id.focus();
		return;
	}
</script>

 

연습 문제 1

비밀번호 상자에 입력된 값은 7자 이상 입력
7자보다 작으면, "비밀번호 상자는 7자 이상입니다." , 포커스, 되돌아감 출력
<script>
if(document.fr.pass.value.length<7){
			alert("비밀번호는 7자 이상입니다.");
			document.fr.pass.focus();
			return;
		}
</script>

 

연습 문제 2

자기소개 상자에 입력된 값은 4자~9자 사이 입력
4자 보다 작고 9자보다 크면, "자기소개 상자는 4자~9자 사이 입력", 포커스, 되돌아감
<script>
if(document.fr.intro.value.length<4 || document.fr.intro.value.length>9){
			alert("자기소개 상자는 4자~9자 사이 입력");
			document.fr.intro.focus();
			return;
		}
</script>

window - checkbox 내장 객체 

window - location

                 - history
                 - document - image,div,...
                                         - form - text, password, textarea
                                         - checkbox, radio
                                           - select

 

 

document .form이름.checkbox이름 : form태그 checkbox 내장 객체  (배열!!!!!!!!!!!!!!!!!!!!!!!!)


document.form이름.checkbox이름.변수()
           => document.form이름.checkbox이름[0]..type  변수 : checkbox 타입 저장               
                document.form이름.checkbox이름[0]..value 변수 : checkbox 입력 된 값 저장
                document.form이름.checkbox이름[0]..checked 변수 : checkbox 체크 된 값 저장 (true/false)

document.form이름.checkbox이름.함수() 
         => document.form이름.checkbox이름[0]..click() : checkbox 체크

 

 

 

 

<form action = "a.jsp" method = "get" name ="fr">
성별 : <input type = "radio" name = "ra" value ="남" checked>남자
	   <input type = "radio" name = "ra" value ="여" >여자<br>
취미 : <input type = "checkbox" name ="ch" value="여행" checked>여행
	   <input type = "checkbox" name ="ch" value="게임">게임<br>
	   
<hr><hr>
<input type = "button" value = "정보확인" onclick="fun1()"><br>
</form>

<script>
function fun1(){
	alert(document.fr.ra[0].type);
	alert(document.fr.ra[0].value);
	alert(document.fr.ra[0].checked);
}
</script>

 

 

 

checked 변수에 false 값 저장, 
정보 변경 - checked 된 값들을 지워줌 
function fun2(){

	document.fr.ra[0].checked=false;
}

=>  체크 해제 하는 것 

 

 

두번째 라디오 박스 click() 적용 
function fun2(){
	document.fr.ra[0].checked=false;
}	document.fr.ra[1].click();

=> 여에 선택되어 있으면 false 라고 나온다.

 

 

 

제어하기

 

1. if : 첫번째 라디오 박스와 두번째 라디오 박스가 동시에  체크가 안되어있으면
(성별)라디오박스 체크하세요. 되돌아가기 출력 

2.else if : 첫번째 체크박스와 두번째 체크박스가 동시에  체크가 안되어있으면
(성별)체크박스 체크하세요. 되돌아가기 출력 

3.else : 폼태그 서버 전송

 

<script>
function fun3(){
	if(document.fr.ra[0].checked==false && document.fr.ra[1].checked==false){
		alert("라디오박스 체크하세요");
		return;
		//(성별)라디오박스 체크하세요.	
	}else if(document.fr.ch[0].checked==false && document.fr.ch[1].checked==false){
		alert("체크박스 체크하세요");
		return;
	}else{
		document.fr.submit();
	}
}
</script>

window - select 내장 객체 

window - location

                 - history
                 - document - image,div,...
                                         - form - text, password, textarea
                                                      - checkbox, radio
                                                      - select

 

document .form이름.목록상자이름 : form태그 목록 상자 내장 객체 

document.form이름.목록상자이름.변수()
      => document.form이름.목록상자이름.type 변수 : 목록상자이름 타입 저장               
           document.form이름.목록상자이름.value 변수 : 목록상자이름 선택 된 값 저장
          document.form이름.목록상자이름.selectedIndex 변수 : 목록상자이름 선택되어진 값의 순서

     => document.form이름.목록상자이름.함수() 
          document.form이름.목록상자이름.focus() : 목록상자 포커스

 

 

 

목록상자 제어 
<script>
function fun1(){
	alert(document.fr.se.type);
	alert(document.fr.se.value);
	alert(document.fr.se.selectIndex);
	document.fr.se.focus();
}
</script>

 

 

</script>
</head>
<body>
<form action = "a.jsp" method = "get" name ="fr">
<!-- size ="3" multiple -->
목록상자 : <select name ="se" >
		<option value = "1">목록1</option>
		<option value = "2" selected>목록2</option>
		<option value = "3">목록3</option>
		   </select>

	   
<hr><hr>
<input type = "button" value = "정보확인" onclick="fun1()"><br>
<input type = "button" value = "정보변경" onclick="fun2()">
<input type = "button" value = "제어" onclick="fun3()">
</form>
</body>

 

 

목록 정보 변경

 

선택 된 순서 값 변경 (목록 2에서, 변경 버튼을 누르면 목록3으로 바뀐다. 0 -> 1 -> 2)

<script>
function fun2(){
	
	document.fr.se.selectedIndex=2;
}
</script>

 

 

 

 

 

 

 

연습문제 1

선택된 목록의 value 값이 "" 이면, "목록 선택 하세요.", 포커스, 되돌아가기 출력
<script>
function fun3(){
	if(document.fr.se.value==""){
		alert("목록 선택하세요.");
		document.fr.se.focus();
		return;
	}document.fr.submit();
	
}
</script>

 

 

값을 0을 줘도 가능하다. 

if(document.fr.se.value==0){
		alert("목록 선택하세요.");
		document.fr.se.focus();
		return;
	}document.fr.submit();

 

 

 

회원가입 페이지 만들어보기 
<script type ="text/javascript">

function fun1(){
	if(document.fr.id.value==""){      //자기소개 누락
		alert("아이디 입력하세요")
		document.fr.id.focus();
		return;
	}
	if(document.fr.pass.value==""){   //비밀번호 누락
		alert("비밀번호 입력하세요")
		document.fr.pass.focus();
		return;
	}
	if(document.fr.intro.value==""){   //자기소개 누락 
		alert("자기소개 입력하세요")
		document.fr.intro.focus();
		return;
	}
	if(document.fr.ra[0].checked==false || document.fr.ra[1].checked==false){   //성별 체크 누락
		alert("성별 체크하세요")
		document.fr.ra.focus();
		return;
		
	}
	if(document.fr.ch[0].checked==false || document.fr.ch[1].checked==false){  //취미 누락 
		document.fr.ch.focus();
		return;
		
	}
	if(document.fr.se.value==0){  //목록상자 누락 
		document.fr.se.focus();
		return;
		
	}
		document.fr.submit();
	//전송 
}

</script>

 

<form action = "a.jsp" method = "get" name ="fr">
아이디 : <input type = "text" name = "id"><br>
비밀번호 : <input type = "password" name ="pass"><br>
자기소개 : <textarea name ="intro" rows = "10" cols = "20">자기소개</textarea><br>
성별 : <input type = "radio" name = "ra" value ="남"  >남자
	   <input type = "radio" name = "ra" value ="여" >여자<br>
취미 : <input type = "checkbox" name ="ch" value="여행" >여행
	   <input type = "checkbox" name ="ch" value="게임">게임<br>
	   목록상자 : <select name ="se" >
			<option value = "">목록 선택하세요</option>
			<option value = "1">목록1</option>
			<option value = "2">목록2</option>
			<option value = "3">목록3</option>
		    </select> <br>
	   
<hr><hr>
<input type = "button" value = "전송" onclick="fun1()"><br>



</form>

 

728x90
반응형
저작자표시 (새창열림)

'FrontEnd > JavaScript' 카테고리의 다른 글

0916 JavaScript - jQuery, Ajax - DB연결  (2) 2022.09.16
0908 JavaScript - JQuery  (0) 2022.09.08
0825 JavaScript - 내장 객체, Location  (0) 2022.08.25
0727 JavaScript - 내장 함수  (0) 2022.08.25
0727 JavaScript - For 반복문 ~ while 반복문  (0) 2022.08.25

'FrontEnd/JavaScript' Related Articles

티스토리툴바