2010/04/28 19:24
4월 28일 보강 ASP2
<script>
function function1()
{
if ( form1.name1.value=="" )
{
alert("이름을 입력하세요");
form1.name1.focus();
return false;
}
if ( form1.name1.value.length !=3 )
{
alert("이름을 제대로 입력하세요");
form1.name1.focus();
return false;
}
if ( form1.mail1.value.indexOf("@") == -1 )
{
alert ("[전자우편]을 입력하세요!");
form1.mail1.focus();
return false;
}
if ( form1.index1.value.length <10 )
{
alert ("제목을 10자이상 입력하세요");
form1.index1.focus();
return false;
}
if ( form1.ta1.value.length <10 )
{
alert ("내용을 10자이상 입력하세요");
form1.ta1.focus();
return false;
}
}
</script>
<center>
<h2><u> 상담 하기</u> </h2>
<br>
<form name=form1 onSubmit="return function1()">
<table border=1 align=center>
<tr>
<td>이 름</td>
<td><input type=text name=name1></td>
</tr>
<tr>
<td>e-mail</td>
<td><input type=text name=mail1></td>
</tr>
<tr>
<td>제 목</td>
<td><input type=text name=index1></td>
</tr>
<tr>
<td>내 용</td>
<td><textarea rows=5 cols=60 name=ta1></textarea></td>
</tr>
<tr>
<td colspan=2 align=center> <input type=submit value='쓰기'> <input type=reset value='취소'> </td>
</center>
</table>
</form>
2010/04/07 16:32
Java수업(1) 인터넷활용-JavaScript
-* JavaScript에서 텍스트창이 공백일 경우 경고창을 띄우는 소스이다.
<script>
function check1()
{
//form1에 있는 form중에서, name1이라는 form의 값이 공백이면
if (form1.name1.value=="")
{
//경고창을 내보낸다
alert("이름을 입력하세요");
//경고창을 낼 경우 보내지 않는다.
return false;
}
if (form1.id1.value=="")
{
alert("아이디를 입력하세요");
return false;
}
// isNaN 문자면 경고창 띄우기
if (isNaN(form1.age1.value==""))
{
alert("나이를 입력하세요");
return false;
}
}
</script>
<form name=form1 onSubmit="return check1()">
이름 : <input type=text name=name1> <br>
아이디 : <input type=text name=id1> <br>
나이 : <input type=text name=age1> <br>
<input type=submit value="보내기">
</form>
2010/04/01 01:48
HTML수업(7) 인터넷활용-HTML
frame을 나눠놓으면, 페이지 전체가 바뀌지 않고도 다른 페이지를 표시할 수가 있어서 편리하다.
왼쪽프레임에 링크를 쭉 걸어놓고 오른쪽 프레임에 결과값이 출력되게 할 수도 있고,
위쪽프레임에 메뉴들을 정리해놓거나 음악을 틀어놓고 아래프레임에서만 작업할 수도 있다.
이번 포스트에서는 이미 짜여져 있는 프레임 안에, 다른 문서가 들어가게 하도록 소스를 짜보겠다.
<body>태그는 본문을 나타내지만, 본문을 여러개로 쪼갤 것이므로 <body>대신 <frameset>태그를 사용한다.
<table>태그를 사용하듯, 프레임셋 안에 프레임을 나눠준다.
사용예1)
<frameset cols="20%,*,200">
<frame src="left1.htm">
<frame src="center1.htm">
<frame src="right1.htm">
</frameset>
cols속성을 사용하면 수직으로 나눠진다.
20%는 먼저 20%의 공간을 주겠다는 뜻이고, 200은 200픽셀을 주겠다는 것을 의미한다. *은 나머지공간을 부여.
사용예2)
<frameset rows="300,*">
<frame src="top1.htm" name=top1>
<frameset cols="200,*>
<frame src="left1.htm" name=left1>
<frame src="right1.htm" name=right1>
</frameset>
</frameset>
rows옵션은 수평으로 나눠준다. 이 경우 좌우로 나눠주고싶으면 다시한번<frameset>태그를 사용해야하며,
<frameset>태그는 나눈만큼 한번에 닫아주는 것이 중요하다. 중간에 닫지 말고 끝에 몰아서 닫아주자.
사용예2 에서는 name옵션으로 프레임에 이름을 부여해주었다.
나중에 프레임 내에서 특정 프레임에 문서를 띄우려고 할 때 필요하다.
ex) <a href="____" target=right1>오른쪽에출력</a>
위와같이 target을 right1로 주면 아까 right1이라고 지정해두었던 오른쪽프레임에 해당 링크가 출력된다.
위와같은 사용예2의 index문서를 만드려면, index, top1, left1, right1. 총 4개의 문서가 필요하다.
왼쪽프레임에서는 1,2,3,4메뉴에 따라 각각의 프레임에 출력해보는 연습을 해보자.
일단 전체적인 인덱스 소스이다.
<frameset rows="100,*">
<frame src="frame_top.htm" name=top>
<frameset cols="200,*">
<frame src="frame_left.htm" name=left>
<frame src="frame_right.htm" name=right>
</frameset>
</frameset>
이렇게 틀을 잡아놓으면, 우선 전체적인 3개로 나뉜 틀 안에 각각의 문서들이 출력되어있을것이다.
물론, frame_top, frame_left, frame_right 라는 문서는 이미 만들어놓았다고 가정한다.
상단프레문서(frame_top.htm)에 들어갈 소스는 아래와 같다
<body>
상단프레임입니다.
</body>
우측프레임문서(frame_right.htm)에 들어갈 소스는 아래와 같다
<body>
오른쪽프레임입니다.
</body>
왼쪽프레임문서(frame_left.htm)에 들어갈 소스는 아래와 같다
<body>
왼쪽프레임입니다. <p>
<br><br>
네이버를 띄워봅시다.<p>
<a href="http://www.naver.com" target=top>1.상단프레임에 출력</a><p>
<a href="http://www.naver.com" target=right>2.우측프레임에 출력</a><p>
<a href="http://www.naver.com" target=new1>3.새로운 창에 출력</a><p>
<a href="http://www.naver.com" target=left>4.현재프레임에 출력</a><p>
</body>
위의 인덱스프레임을 나눌 때 이미 프레임에 target명을 지정해놓았기 때문에,
링크를 걸 때 target옵션만 지정해주면 해당 프레임에 문서가 출력된다.
여기서 조금 응용하여,
frame_top1.htm
frame_right1.htm
frame_new1.htm
frame_left1.htm
네 개의 문서를 만들고,
frame_left.htm문서의 소스에 들어간 http://www.naver.com 대신 위 네개의 링크를 걸어주면,
페이지가 바뀌게 된다.
결과는 아래와 같다.
http://toco.nayana.com/frame.htm
첫화면에서는 프레임에 흰 배경의 문서를 각각 지정해주고,
링크를 누르면 파란색이 배경인 문서를 각 프레임에 타겟팅 해주었다.
다음포스트에는 폼 양식을 짤 수 있는 <form>,<input type>등의 태그에 대해 다룰것이다.
최근 덧글