티스토리 뷰

Java, JavaScript

[JS] 활용 예제

체봄 2020. 8. 11. 13:32

※ 표 만들기

: <table> 태그 안에 행 수 만큼 <tr>태그를 써주고, 그 내부에 각 행의 열 수 만큼 <td>태그를 써준다.​

​

​

​

ex)

<form>
<table border=1 width=100>

<tr>
<td align=center> 1행 1열 </td>
<td align=center> 1행 2열 </td>
</tr>

<tr>
<td align=center> 2행 1열 </td>
<td align=center> 2행 2열 </td>
</tr>

</table>
</form>

 

실행 결과 >>

​

​

​

​

활용 예제)

이름, 이메일, 전화번호를 입력받는 주소록을 만들고,

완료 버튼을 눌렀을 때,

이름을 입력하지 않았거나 입력한 이메일에 '@' 기호가 없는 경우 경고 메시지를 띄우기

<html>
<head>
<title> 주소록 입력 </title>
<script>

function gosubmit() {
	if(document.frm.name.value=="") {	// 이름을 입력하지 않은 경우
		alert("이름이 입력되지 않았습니다.");
		document.frm.name.focus();	// 이름 입력 칸으로 커서를 이동
		return;
	}

	else if(document.frm.email.value.indexOf("@") == -1) {	// 입력한 이메일에 @ 가 없는 경우
		alert("이메일 형식 오류입니다.");
		document.frm.email.value="";	// 입력한 이메일을 지움
		document.frm.email.focus();	// 이메일 입력 칸으로 커서를 이동
	}

	else {
		document.frm.submit();	// 입력한 정보를 서버에 전송
		alert("완료되었습니다.");
	}
}
</script>

</head>


<body>
<center>
<h3><u> 주소록 </u></h3>

<form name=frm>

<table border=1 width=500>      // 표 작성

<tr>
<td align=center> 이름 </td>
<td>&nbsp;<input type=text name=name size=10></td>
</tr>

<tr>
<td align=center> 이메일 </td>
<td>&nbsp;<input type=text name=email size=25></td>
</tr>

<tr>
<td align=center> 전화번호 </td>
<td>
&nbsp;<input type=radio name=telsel value=핸드폰> 핸드폰
&nbsp;<input type=radio name=telsel value=집> 집
&nbsp;<input type=radio name=telsel value=직장> 직장
&nbsp;<input type=text name=telnum size=20>
</td>
</tr>

</table>

<br>
<input type=button value=완료 onClick=gosubmit()>&nbsp;&nbsp;
<input type=reset value=지우기>

</form>

</center>
</body>

</html>

실행 결과>>

​

이름을 입력하지 않은 경우 ->

​

이메일에 '@' 기호가 없는 경우 ->

​

바르게 작성하고 완료 버튼을 눌렀을 때 ->

​

​

​

활용 예제2)

판매 상품의 사진과 가격을 표시하고, 선택한 상품의 금액을 출력하기

<html>
<head>
<script language=javascript>

function check(flag) {
	if(flag=='1')
		document.frm.sum.value="800,000";
	else if(flag=='2') 
		document.frm.sum.value="600,000";

}

</script>

</head>


<body>
<center>
<h2><u>상품 선택</u></h2>

<table border=1 cellpadding=5 cellspacing=1>

<tr align=center>
	<td width=200><img width=150 height=150 src="노트북.jpg" alt="노트북" border=1></td>
	<td width=200><img width=150 height=150 src="아이패드.jpg" alt="아이패드" border=1></td>
</tr>

<tr align=center>
	<td><b>노트북</b><br>
	<b><font color=blue>800,000원</font></b></td>
	<td><b>아이패드</b><br>
	<b><font color=blue>600,000원</font></b></td>
</tr>


<form name=frm>
<tr align=center>
	<td>[선택]<input type=radio name=sel value=1 onClick=check('1')></td>
	<td>[선택]<input type=radio name=sel value=2 onClick=check('2')></td>
</tr>

<tr align=center>
	<td colspan=2><b>[주문금액]&nbsp;<input type=text name=sum size=20>원</b></td>
</tr>


</form>
</table>

</center>
</body>

</html>

​

실행 결과>>

​

<tr> 태그 안에 align=center를 써넣으면 해당 행의 내용이 모두 가운데 정렬된다!

​

표에서 width는 <table> 태그 안에 꼭 써주지 않고, 열을 나타내는 <td> 태그 내에 써도 된다!

​

Image 객체는 form의 하위 객체가 아니므로 <input type=~> 과 같은 형태로 사용하지 않는다.

​

<input type=reset> 과 <input type=button onClick="JavaScript:form의이름.reset()"> 는 같은 동작을 한다!

​

열을 합치려면 <td colspan=2> 와 같이 colspan을 이용한다.

​

​

활용 예제3)

사진을 클릭하면 새로운 팝업창에서 확대한 사진을 볼 수 있도록 하기

<html>
<head>
<script language=javascript>

function openwin(picture) {
	var win;
	win = window.open("", "childwin", "width=450, height=400");
	win.document.writeln("<html><body><center>");
	win.document.writeln("<img src="+picture+"><br>");
	win.document.writeln("<input type=button onClick=window.close(); value=창닫기>");
	win.document.writeln("</center></body></html>");
}
</script>
</head>


<body>
<center>
<h2><u>이미지 확대하기</u></h2>

<table border=1 cellpadding=5 cellspacing=1> 
<tr align=center>
	<td width=200><img width=150 height=150 src=노트북.jpg alt=노트북 onClick=openwin('노트북.jpg')></td>
	<td width=200><img width=150 height=150 src=아이패드.jpg alt=아이패드 onClick=openwin('아이패드.jpg')></td>
</tr>

<tr align=center>
	<td><b>노트북</b><br>
	<font color=blue>800,000 원</font><br></td>
	<td><b>아이패드</b><br>
	<font color=blue>600,000 원</font><br></td>

</tr>
</table>
<br>
사진을 클릭하면 확대해서 볼 수 있습니다.

</center>
</body>
</html>

​

새로운 팝업창을 열어 그 창에서의 동작을 지정하는 openwin 메소드의 형태 자주 사용된다!!

​

​

​

실행 결과>>

​

​

​

활용 예제4)

주소찾기 버튼을 누르면 새 팝업창에 주소 목록이 뜨고, 그 중 하나를 클릭하면 해당 주소가 입력되도록 만들기

​

<html>
<head>
<script language=javascript>
function searchAddr() {
	var win;
	win=window.open("", "", "width=400, height=400");
	
	win.document.writeln("<html><body>");
	win.document.writeln("<center><h4>주소 찾기</h4></center><hr>");
	win.document.writeln("<li><a href=\"JavaScript:opener.document.frm.addr.value='서울시 광진구'; opener.window.focus();\">서울시 광진구</a><br>");
	win.document.writeln("<li><a href=\"JavaScript:opener.document.frm.addr.value='서울시 노원구'; opener.window.focus();\">서울시 노원구</a><br><hr>");
	win.document.writeln("<center><form><input type=button value=닫기 onClick=\"opener.window.focus();window.close();\"></form></center>");
	win.document.writeln("</body></html>");
	win.document.close();

}
</script>
</head>


<body>
<center>
<h2><u>상품 주문</u></h2><br>

<form name=frm>
<table border=1 width=500>

<tr>
<td align=right>상품명</td>
<td><input type=text name=itemname size=15></td>
</tr>
<tr>
<td align=right>고객명</td>
<td><input type=text name=custname size=15></td>
</tr>
<tr>
<td align=right>주 소</td>
<td><input type=text name=addr size=30>&nbsp;<input type=button value=주소찾기 onClick=searchAddr()>
</tr>
<tr>
<td align=right>전화번호</td>
<td><input type=text name=tel size=10></td>
</tr>
<tr align=center>
<td colspan=2> <input type=submit value=주문>&nbsp;<input type=reset value=취소>
</tr>

</table>
</form>


</body>
</center>
</html>

실행 결과>>

주소찾기 버튼을 클릭했을 때 ->

'서울시 노원구'를 클릭했을 때 ->

​

소스코드의 searchAddr() 메소드를 분석해보자!

​

우선 주소찾기 버튼을 클릭하면 searchAddr() 메소드가 실행되고, window.open 명령에 의해 팝업창이 하나 뜬다.

window.open 명령만 수행한다면 빈 팝업창이 뜨겠지만, searchAddr 메소드 내부에서 win.document.writeln 명령을 통해 새 팝업창에 코드를 작성해주었다.

미리 작성한 html 파일의 이름을 window.open의 첫번째 인자에 넣어주어 여는 방법도 있지만, 따로 파일을 만들지 않고 이와 같이 한 파일 내에서 할 수도 있다는 것을 알아두자.

​

​

<li> 태그는 여러 항목이 있을 때 그 항목을 구분하여 표시하는 역할을 한다. 아래 사진의 빨간색 부분과 같다.

​

​

<a href= ~> 내의 코드는 해당 하이퍼링크를 클릭했을 때 그 동작을 행하겠다는 의미이다.

<a href=\"JavaScript:opener.document.frm.addr.value='서울시 광진구';opener.window.focus();\">서울시 광진구</a>

opener는 현재 창을 열도록 한 윈도우를 의미한다.

즉, 이 예제에서는 상품주문 창에서 '주소찾기' 버튼을 누름으로써 현재 창이 열렸기 때문에 opener는 상품주문 창이 된다.

'서울시 광진구'라고 쓰여 있는 하이퍼링크를 클릭하면, 상품 주문 창의 주소에 '서울시 광진구'가 자동 입력된다.

그리고 opener.window.focus(); 코드에 의해 상품 주문 창에 focus가 맞춰진다.

<a> 태그 내에 두가지 동작이 ;으로 구분되어 있고, 이 두가지 동작이 \"에 의해 묶여있다. 이 때, "가 아니라 \"를 쓴 이유는 괄호 바로 옆에 있는 "와 혼돈이 생기는 걸 방지하기 위해서이다.

'닫기' 버튼을 누르면 상품 주문 창에 focus가 맞춰지고, 주소 찾기 창은 닫힌다.

​

반응형
저작자표시

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

[JS] 여러 가지 객체 - 2  (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

댓글