| form 관련 자바 스크립트 강좌 |
|
|
| |
| 운영자 |
 |
ㅣ 기사입력 |
2005/02/13 [15:55] |
|
|
|
|
javascript
|
자바스크립트는 netscape사에서 브라우저의 기능을 항상시킬 목적으로 LiveScript라는 언어를 만들었는데 이후 자바가 나오면서 이름을 자바 스크립트로 변경을 하였는데 자바와는 전혀 관계가 없는 브라우져 스크립트 언어이다.
기본 구조
<html>
<body>
<script language="javascript">
<!--
document.write(" 안녕하세요")
-->
</script>
</body>
</html>
데모 보기
주석처리
// 주석 입니다.
/* 주석 입니다.
자스스크립드 */
<html>
<body>
<script language="javascript">
<!--
// 주석 입니다.
/* 주석 입니다.
자스스크립드 */
document.write(" 안녕하세요")
-->
</script>
</body>
</html>
데모보기
문서헤드에 선언을 이용한 구조
(head 에 변수을 선언 후 body 에서 출력을 함 )
변수 : 자바스크립트는 html 와 같이 대소문자를 구분하지 않지만
변수는 대소문자를 구분하며 처음 시작은 Aa -Zz 나 _ 로
시작할 수있으며 나머지는 문자와 숫자로 구성된다.
<html>
<head>
<script language="javascript">
<!--
hi="안녕하세요 "
-->
</script>
</head>
<body>
<script language="javascript">
<!--
document.write(hi)
-->
</script>
</body>
</html>
데모보기
html 과 자바스크립트 나누기
<html>
<body>
<script language="javascript" src="script.js" >
</script>
</body>
</html>
script.js
<!--
document.write(" 안녕하세요 ")
-->
데모보기
연산자
| 연산자 |
설명 |
| + |
더하기 |
| - |
빼기 |
| * |
곱하기 |
| / |
나누기 |
| % |
나머지 |
| ++ |
증가 연산 |
| -- |
감소 연산 |
| && |
논리곱 |
| || |
논리합 |
| ! |
부정 |
| == |
같다. |
| != |
같지 않다. |
| < |
크다 |
| <= |
작거나 같다. |
| > |
크다 |
| <= |
크거나 같다 |
논리문
if 문
if(조건 ) {
참입니다.
} else {
거짓입니다.
}
==================================
<html>
<body>
<script language="javascript" >
hi="9"
if( hi > 1 ) {
document.write(" 참입니다. ")
} else {
document.write(" 거짓입니다. ")
}
</script>
</body>
</html>
데모보기
while
조건이 참인 동안 반복적으로 실행
while (조건) {
}
============================================
<html>
<body>
<script language="javascript" >
hi="1"
while( hi < 9 ) {
document.write(" 참입니다. <br>")
hi++
}
</script>
</body>
</html>
데모 보기
do while 문
while 문과 시슷하며 do 문은 적어도 do안에 문장이 한번은 실행이 되나는 것이다.
do{
} while ( 조건 ) ;
====================================
<html>
<body>
<script language="javascript" >
hi=1
do{
hi++
document.write(" 안녕하세요<br> ")
}while( hi < 3 );
</script>
</body>
</html>
데모보기
for 문
while 문과 같이 반복 실행과 같은 의미 이지만 조건 부분이 다르다.
for(변수 초기화 ; 조건 ; 변수 증감소 ) {
}
==============================
<html>
<body>
<script language="javascript" >
for( i =0 ; i <9 ; i++ ) {
document.write(" 안녕하세요<br> ")
}
</script>
</body>
</html>
데모보기
switch 문
switch(조건) {
case 0 :
break
case 1 : x=
break
default:
}
============================================
<html>
<body>
<script language="javascript" >
i= 2
switch(i) {
case 1:
document.write(" 안녕하세요 case1<br> ")
break
case 2:
document.write(" 안녕하세요 case 2<br> ")
break
default:
document.write(" 안녕하세요 default<br>i ")
}
</script>
</body>
</html>
데모보기
function 함수
function 함수를 이요하여 자신만의 함수를 선언 할 수 있다.
function function이름 ( f1 , f2, f2,.. ) {
}
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >
function say(p1 , p2) {
document.write(p1 ,p2 );
}
</script>
</head>
<body>
<script language="javascript" >
say("<h2>" ,"안녕하세요<br>");
say ("<font size=\"4\" color=\"#800000\"> ", " 안녕하세요 ");
</script>
</body>
</html>
데모 보기
윈도우 관련 함수
새창 열기
window.open ( "연결페이지","윈도우이름"," 가로크기 )
window.open('poll_view.html','poll','marginwidth=0,marginheight=0,resizable=no,scrollbars=yes,width=435,height=350')
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >
function winopen() {
window.open('j1.html','poll','scrollbars=yes,width=435,height=350')
}
</script>
</head>
<body>
<h1><center> 새창 열기
<form>
<input type=button value=새창열기 onClick=winopen() >
</form>
</body>
</html>
데모보기
이미지로 새창 열기
=================================================
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript" >
function winopen() {
window.open('j1.html','poll','scrollbars=yes,width=435,height=350')
}
</script>
</head>
<body>
<h1><center> 이미지로 새창 열기 <P>
<a href="#" onClick="winopen()" >
<img src="login.gif" border="0"></a>
</body>
</html>
데모보기
다른 유형 새창열기
<input type='button' value='결과보기' onclick="window.open('poll_view.html','poll','marginwidth=0,marginheight=0,resizable=no,scrollbars=yes,width=435,height=350')
창 닫기
<INPUT TYPE="button" VALUE="닫기" onClick="window.close()">
앞 뒤로 이동하기
window.history(-1);
window.history(1);
==============================================
<head>
<title> 자바 스크립드 데모 </title>
</head>
<body>
<h1><center> 앞 뒤로 가기 <P>
<form>
<input type=button onclick=window.history.go(-1) value=이전화면 ><p>
<input type=button onclick=window.history.go(1) value=앞화면 ><p>
</form>
<a href="#" onclick=window.history.go(-1) ><img src="login.gif" border="0" value=이전화면 ></a><p>
<a href="#" onclick=window.history.go(-1)>이전화면</a>
</body>
</html>
데모보기
alert
<html>
<head>
<title> 자바 스크립드 데모 </title>
<script language="javascript">
<!--
function al( p1 ){
alert(p1 + " hi님");
}
//-->
</script>
</head>
<body>
<h1><center> alert <P>
<form>
<input type=button value="alert 데모" onclick=al("안녕하세요") ><p>
</form>
<a href="#" onclick=al("안녕하세요") >클릭 </a>
</body>
</html>
데모보기
폼 관련 자바스크립드
자바스크립트로 폼을 검증하여 서버쪽에서 에러 처리 하는
것보다 효율적이다.
폼입력 ----> 자바스크립트로 검사 --> 서버에전송
p1.html
( 자바스크립드가 없는 일반적인 구조 )
<html>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="submit" value="보내기" >
</form>
</body>
</html>
===================================
add.php
<?
echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
?>
데모보기
|
서버에서 폼 검사
p2.html
( 자바스크립드가 없는 일반적인 구조 )
<html>
<body>
<form name="fname" action="addcheck.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="submit" value="보내기" >
</form>
</body>
</html>
===================================
// addcheck.php
<?
if(!$username) {
echo("
<script language='javascript'>
window.alert(' 이름이 없습니다')
history.go(-1)
</script>
");
exit;
}
<?
if(!$email) {
echo("
<script language='javascript'>
window.alert(' 메일 없습니다')
history.go(-1)
</script>
");
exit;
}
echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
?>
데모보기
|
자바 스크립드 이용
jp1.html
//첫번제 폼 document.forms[0].elements[0].value
//두번째 폼 document.forms[1].elements[0].value
<html>
<script language="javascript" >
function check() {
if(!document.forms[0].username.value)
{
alert(' 이름을 입력해 주십시오');
return;
}
if(!document.forms[0].elements[1].value) {
alert(' 메일을 입력해 주십시오');
return;
}
document.forms[0].submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>
===================================
add.php
<?
echo(" 당신의 이름은 $username 이고 메일은 $email 입니다. ");
?>
데모보기
===============================================================
// 직접 폼이름지정 document.fname.username.value
// 이름폼
// document.fname.email.value
// 메일 폼
<html>
<script language="javascript" >
function check() {
if(!document.fname.username.value)
{
alert(' 이름을 입력해 주십시오');
return;
}
if(!document.fname.email.value) {
alert(' 메일을 입력해 주십시오');
return;
}
document.fname.submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>
데모보기
======================================================
// focus 함수를 이용하여 return 후 커서 위치 지정
<html>
<script language="javascript" >
function check() {
if(!document.fname.username.value)
{
alert(' 이름을 입력해 주십시오');
document.fname.username.focus();
return;
}
if(!document.fname.email.value) {
alert(' 메일을 입력해 주십시오');
document.fname.email.focus();
return;
}
document.fname.submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check()">
</form>
</body>
</html>
데모보기
=================================================================
this
this 라는 함수를 이용하면 document.fname 을
form 함수로 줄여 쓸 수 있다.
// document.fname.email.focus();
// form.username.focus();
<html>
<script language="javascript" >
function check(form) {
if(!form.username.value)
{
alert(' 이름을 입력해 주십시오');
form.username.focus();
return;
}
if(!form.email.value) {
alert(' 메일을 입력해 주십시오');
form.email.focus();
return;
}
document.fname.submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check(this.form)">
</form>
</body>
</html>
데모보기
================================================================
confirm
// confirm 전송전 form 다시 확인 후 yes 면 true 을 반환
<html>
<script language="javascript" >
function check(form) {
if(!form.username.value)
{
alert(' 이름을 입력해 주십시오');
form.username.focus();
return;
}
if(!form.email.value) {
alert(' 메일을 입력해 주십시오');
form.email.focus();
return;
}
if( confirm(" 등록을 하시겠습니다.")) {
form.submit();
} else {
return;
}
}
</script>
<body>
<form name="fname" action="add.php" >
<br>이름 <input type='text' name="username" size='25'>
<br>메일<input type="text" name="email" size="25">
<br><input type="button" value="보내기" onclick="check(this.form)">
</form>
</body>
</html>
데모보기
|
라디오 폼 검사
<html>
<script language="javascript" >
function check(form) {
for( var i=0 ; i<form.ra.length ; i++ ) {
if(form.ra[i].checked == true ) {
alert ( i+1 + "선택 " );
break;
}
}
if(i == form.ra.length) {
alert(' 선택을 해야 합니다.');
return;
}
form.submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<input type="radio" name="ra" value="a"> A 번<br>
<input type="radio" name="ra" value="b"> b 번<br>
<input type="radio" name="ra" value="c"> c 번<br>
<input type="radio" name="ra" value="d"> d 번<br>
<input type="button" value="선택하기" onClick="check(this.form)" >
</form>
</body>
</html>
데모보기
|
checkbox 검사
<html>
<script language="javascript" >
function check(form) {
for( var i=0 ; i<form.ra.length ; i++ ) {
if(form.ra[i].checked == true ) {
alert ( i+1 + "선택 " );
}
}
form.submit();
}
</script>
<body>
<form name="fname" action="add.php" >
<input type="checkbox" name="ra" value="a"> A 번<br>
<input type="checkbox" name="ra" value="b"> b 번<br>
<input type="checkbox" name="ra" value="c"> c 번<br>
<input type="checkbox" name="ra" value="d"> d 번<br>
<input type="button" value="선택하기" onClick="check(this.form)" >
</form>
</body>
</html>
데모보기
|
기타 문의는 [email protected] (2001.2.5) |
|
|
|
|
|
|
| 기사입력: 2005/02/13 [15:55] 최종편집: ⓒ iwav |
|
|
| |
|
|
여행
윈도우서버 
