티스토리 뷰

Java, JavaScript

[JS] 여러 가지 객체 - 2

체봄 2020. 8. 11. 13:29

이번 포스트에서는 Form 객체의 하위 객체들을 다뤄본다.

​

​

​

​

[Text 객체]

​

: <input type="text">으로 표현

 

ex)

<html>
<head>
<script language="javascript">
<!--

function printInfo() {
	str="이름 : "+document.f1.Name.value+"<br>"
	str+="나이 : "+document.f1.Age.value+"<br>"
	str+="주소 : "+document.f1.Addr.value+"<br>"
	document.write(str)
}

//-->
</script>
</head>

<body>
<form name=f1>

이름 : <input type="text" name="Name" size=10>
나이 : <input type="text" name="Age" size=5>
주소 : <input type="text" name="Addr" size=20>

<input type="reset" value="취소">
<input type="button" value="확인" onClick="printInfo()">

</form>
</body>
</html>

text 객체를 3개 만들어 각각 이름, 나이, 주소를 입력한 다음 확인 버튼을 누르면 printInfo() 메소드가 실행된다.

text 객체에 입력한 값을 가져오려면 우선 form 객체의 이름 f1을 적고 그 내부 객체 Name / Age / Addr의 이름을 적은 다음 그 내부의 value 값을 얻으면 된다. (ex: document.f1.Name.value)

​

​

​

​

[Password 객체]

: 입력한 값이 ● 로 보여 암호 입력 시 사용한다.

​

속성, 메소드는 Text 객체와 거의 동일하다.

​

​

​

​

[Textarea 객체]

: 여러 줄을 입력할 때 사용하는 객체

​

속성, 메소드는 Text 객체와 거의 동일하나 이벤트핸들러에는 추가적으로 onKeyDown, onKeyPress, onKeyUp이 있다.

​

ex)

<html>
<head><title>textarea 예제</title></head>

<body>
<h3> textarea 객체를 사용해봅시다 ! </h3>
<hr noshade>

<form name = frm1>
제 목 : <input type="text" name=title size=20> <p>

<textarea name=content cols=50 row=10>
자유롭게 의견을 남겨주세요^-^
</textarea>

</form>

</body>
</html>

 

​

​

​

[Hidden 객체]

: 숨겨진 입력양식을 위한 객체

​

속성은 Text 객체와 거의 동일하다.

​

​

​

​

[Button 객체]

 

​

​

​

​

[Submit 객체]

: <input type="submit">으로 표현

​

입력을 서버로 전달!

​

속성 : type, name, value

메소드 : click()

이벤트 핸들러 : onClick

​

​

​

​

[Reset 객체]

: <input type="reset">으로 표현

​

모든 입력 값을 초기화 !

​

​

속성 : type, name, value

메소드 : click()

이벤트 핸들러 : onclick

​

​

​

​

[FileUpload 객체]

: 자신의 컴퓨터에 있는 파일을 업로드할 때 사용하는 객체

​

<input type="file">로 사용 !

실행 시 파일 이름이 들어가는 글상자와 파일을 찾는 찾기 버튼이 생긴다.

​

ex)

<html>
<head>
<title> 입력양식 예제 </title>
</head>

<body>
<h3> 댓글 작성 </h3>
<hr noshade>

<form name=frm1>
아이디 : <input type=text name=id size=15> <p>
비밀번호 : <input type=password name=pw size=15> <p>
댓글 : <p>
<textarea name=content cols=50 rows=10> </textarea> <p>
첨부파일 : <input type=file name=filename> <p>

<input type=submit value="전송">
<input type=reset value="취소">
<br>
</form> 

</body>
</html>

실행 결과>

​

​

​

​

[Radio 객체]

​

: 단일 선택을 위한 객체 (다중 선택 X)

​

​

속성 : value, name, checked, type (checked를 쓰면 해당 객체가 기본 선택되어있음)

메소드 : click()

​

ex)

<html>
<head>
<title> 입력양식 예제 </title>
<script language="javascript">

function printMessage(form) {
	for(var i=0; i<form.drive.length; i++) {
		if(form.drive[i].checked == true) 
			alert(form.drive[i].value + " 드라이브가 선택되었습니다.")
	}
}
</script>
</head>

<body>
<h3> 드라이브 선택 </h3>
<hr noshade>

<form name=frm1>
<input type=radio name=drive value=1번 checked> 1번 드라이브 <br>
<input type=radio name=drive value=2번> 2번 드라이브 <br>
<input type=radio name=drive value=3번> 3번 드라이브 <br>
<input type=radio name=drive value=4번> 4번 드라이브 <br>
<input type=radio name=drive value=5번> 5번 드라이브 <br><br>

<input type=button value=확인 onClick="printMessage(this.form)">
</form>
</body>
</html>

실행 결과>

​

​

​

​

​

​

[Checkbox 객체]

: 다중선택을 위한 객체

​

​

속성 : name, value, checked, defaultChecked, type

​

​

종합 ex) 설문지 만들기

<html>
<head>
<title> 간단한 설문지 </title>
<script>
function complete(form) {
	alert("확인 되었습니다.")

str="이 름 : "+form.Name.value+"<p>";
if(form.Sex[0].checked == true)
	str+="성 별 : "+form.Sex[0].value+"<p>";
else	
	str+="성 별 : "+form.Sex[1].value+"<p>";
str+="생년월일 : "+form.Birth.value+"<p>";
str+="주 소 : "+form.Addr.value+"<p><p>";
str+="취 미 : ";
for(var i=0; i<form.Hobby.length; i++) {
	if(form.Hobby[i].checked == true)
		str+=form.Hobby[i].value + " ";
}
str+="<p>주 량 : ";
for(var i=0; i<form.Alch.length; i++) {
	if(form.Alch[i].checked == true) {
		str+=form.Alch[i].value+"<p>";
		break;
	}
}
str+="자기소개 : "+form.Intro.value+"<p>";


document.write(str);
}
</script>
</head>

<body>
<form>

이 름 : <input type="text" name=Name size=15> <br>
성 별 : <input type="radio" name=Sex value=남> 남
	<input type="radio" name=Sex value=여> 여 <br>
생년월일 : <input type="text" name=Birth size=15> <br>
주 소 : <input type="text" name=Addr size=25> <br> <br>

1. 당신의 취미는? <br>
<input type="checkbox" name=Hobby value=영화감상> 영화감상 <br>
<input type="checkbox" name=Hobby value=독서> 독서 <br>
<input type="checkbox" name=Hobby value=티비보기> 티비보기 <br><br>
2. 당신의 주량은? <br>
<input type="radio" name=Alch value=알쓰> 알쓰 <br>
<input type="radio" name=Alch value=1병> 1병 <br>
<input type="radio" name=Alch value=2병이상> 2병 이상 <br><br>
3.자기소개 <br>
<textarea name=Intro cols=50 rows=10> </textarea> <br><br>

<input type="reset" value=다시>
<input type="submit" value=완료 onClick=complete(this.form)>
	
</form>
</body>
</html>

 

text, textarea, submit, reset, radio, checkbox 객체를 응용한 종합 예제이다.

설문지를 작성하고 완료 버튼을 누르면 선택한 정보들이 출력된다.

​

​

​

​

[Select 객체]

: <select> 태그로 사용,

<option> 태그를 이용하여 각 리스트를 나열

리스트 상자나 콤보 상자를 꾸미는데 사용됨

 

ex)

<html>
<head>
<title> select 객체 예제 </title>
<script language="javascript">
<!--
function my_select(form) {
	var str = "장바구니 : ";
	for(var i=0; i<form.fish.length; i++) {
		if(form.fish.option[i].selected == true) {
			str += form.fish.option[i].text +" ";
		}
	}
	alert(str);
}
//-->
</script>
</head>

<body>
<h3> 생선 가게 </h3>
<hr noshade>

<form name = my_form>
	<select name=fish size=4 multiple>
		<option value=고등어 selected> 고등어
		<option value=갈치> 갈치
		<option value=오징어> 오징어
		<option value=문어> 문어	
	</select>
	<p>
	<input type=button value=선택 onClick="my_select(this.form)">
</form>
</body>
</html>

​

select에서 size를 4로 하면 4개의 항목이 모두 보이고, 1로 하면 한 항목씩만 보인다.

select 내에 multiple을 써주면 ctrl키나 shift키를 통해 다중선택이 가능하고, 쓰지 않으면 단일선택만 가능하다.

고등어에 selected를 써주었기 때문에 아무것도 누르지 않았을 때 고등어가 선택 되어있다.

​

​

​

​

[Frame 객체]

: <frameset>, <frame> 태그에 대한 객체

<frameset> 태그의 rows, cols 속성으로 나누는 기준에 대한 상하좌우가 정의됨

<body> 태그를 쓰지 않음

 

ex)

<html>
<head>
<script language=javascript>
function colorChange(color) {
	parent.left.document.bgColor=color;
	// document.bgColor='color'; 와 동일

}
</script>
</head>

<body>
<a href="javascript:colorChange('yellow')"> 배경색 바꾸기 </a>

</body>
</html>

left.html

 

<html>
<head> 
<title>프레임 연습</title>
</head>


<frameset cols="50%, 50%">
	<frame src="left.html" name="left">
	<frameset rows="50%, 50%">
		<frame src="up.html" name="up">
		<frame src="down.html" name="down">
	</frameset>
</frameset>
</html>

이 html 파일을 열어보면 다음과 같은 창이 뜬다.

​

​

frameset을 이용해 창의 가로를 반으로 나누고, 나눠진 오른쪽에서 세로로 반으로 나누었기 때문에 위와 같이 창이 3개로 분할되어 나온다.

left.html만 존재하고 up.html과 down.html은 존재하지 않기 때문에 존재하지 않는 html파일은 이 페이지에 연결할 수 없다고 뜬다.

left.html 에서는 '배경색 바꾸기'를 누르면 배경색이 노란색으로 바뀌도록 하였다.

 

 

반응형
저작자표시

'Java, JavaScript' 카테고리의 다른 글

[JS] 활용 예제  (0) 2020.08.11
[JS] 여러 가지 객체 - 1  (0) 2020.08.11
[Java] 선택 정렬(Selection Sort)  (0) 2019.08.16
[Java] 삽입 정렬(Insertion Sort)  (0) 2019.08.16
[Java] 직렬화(Serialization)  (0) 2019.08.13

댓글