[3주][3일][5~8th] JAVASCRIPT: 로그인 창 구현해보기, 이벤트 핸들러.

**document 객체**

 *개념 : 문서에 대한 정보를 알려주는 객체

 

1. 문서 배경색과 글자색 바꾸기

 

헤드

function bg(col){
 document.bgColor=col;
}

function fg(col){
 document.fgColor=col;
}
function cho(){
 document.bgColor="white";
 document.fgColor="black";
}

바디

초기값
<input type="radio" name="bgcolor" onclick="cho()"><br><br>
문서 배경색 바꾸기
<input type="radio" name="bgcolor" onclick="bg('pink')">pink
<input type="radio" name="bgcolor" onclick="bg('yellow')">yellow
<input type="radio" name="bgcolor" onclick="bg('gray')">gray
<br><br>문서 글자색 바꾸기
<input type="radio" name="fgcolor" onclick="fg('red')">red
<input type="radio" name="fgcolor" onclick="fg('green')">green
<input type="radio" name="fgcolor" onclick="fg('blue')">blue

 

 (1) 초기 화면에서 pink 라디오 버튼을 누르면

 

 (2) 화면 배경이 pink색으로 바뀐다

 

 (3) 같은 방법으로 노랑,

 

 (4) 회색으로 눌렀을 때

 

 (5) 자 이제 글자색을 바꿔보자. 우선 빨강!

function fg(col){
 document.fgColor=col;
}

 

 (6) 초록색~

 

 (7) 파랑~으로 변했다 /(ㅇ_ㅇ)/

 

 (8) 초기값을 누르면, 짜잔~! 원래 화면으로 돌아갔다.

function cho(){
 document.bgColor="white";
 document.fgColor="black";
}

초기값
<input type="radio" name="bgcolor" onclick="cho()"><br><br>

 

 

2. 버튼 누를 때 이미지가 바뀌는 이벤트

전체 소스

헤드

function imgchg(){
 document.images[0].border="10";
 document.images[0].height=500;
 document.images[0].width=500;
 document.images[0].src="1.jpg";
}
function imgchg2(){
 document.img1.border=10;
 alert("이미지높이:"+document.img1.height);
}
function chgover(){
 document.imgr.src="1.jpg";
}
function chgout(){
 document.imgr.src="02.jpg";
}

바디

<img src="03.jpg" name="img1">
<input type="button" value="이미지속성값변경" onclick="imgchg()">
<input type="button" value="이미지속성값변경2" onclick="imgchg2()">
<img src="02.jpg" name="imgr" onmouseover="chgover()" onmouseout="chgout()">

 

 (1) 처음에 불러온 03.jpg, 그리고 버튼 2개가 아래의 그림으로 설정되어 있다.

 

 (2) "이미지속성값변경" 버튼을 클릭하면,

       아래 그림과 같이 내가 지정한 "02.jpg" 이미지 파일로 변경된 것이 보인다.

헤드

function imgchg(){
 document.images[0].border="10";
 document.images[0].height=500;
 document.images[0].width=500;
 document.images[0].src="1.jpg";
}

바디

<input type="button" value="이미지속성값변경" onclick="imgchg()">

 

 

 (3) "이미지속성값변경2" 버튼을 클릭하면,

      이미지에 테두리가 지정되는 것과 alert메시지로 이미지높이를 출력한다.

헤드

function imgchg2(){
 document.img1.border=10;
 alert("이미지높이:"+document.img1.height);
}

바디

<input type="button" value="이미지속성값변경2" onclick="imgchg2()">

 

 (4) 이미지에 마우스 롤오버 효과 주기

헤드

function chgover(){
 document.imgr.src="1.jpg";
}
function chgout(){
 document.imgr.src="02.jpg";
}

바디

<img src="02.jpg" name="imgr" onmouseover="chgover()" onmouseout="chgout()">

  -> 이미지에 마우스를 갖다 대면

 

 지정된 이미지로 바뀐다!

 

 

3. 폼의 속성과 메서드 출력하기

 

전체 소스

헤드

function con(){
 alert(document.fr.action);
 alert(document.fr.method);
 alert(document.fr.name);
}
function sub(){
 document.forms[0].submit();
}

바디

<form action="a.jsp" method="get" name="fr">
<input type="text" name="id">
<input type="button" value="확인" onclick="con()">
<input type="button" value="전송" onclick="sub()">

 

(1) 바디에서 텍스트상자 1개와 버튼 2개를 만들었다.

 

(2) 확인 버튼을 누르면 문서에 대한 form의 action값,

헤드

function con(){
 alert(document.fr.action);
 alert(document.fr.method);
 alert(document.fr.name);
}

바디

<form action="a.jsp" method="get" name="fr">
<input type="text" name="id">
<input type="button" value="확인" onclick="con()">

 

method값...

 

name값을 경고창으로 알려준다.

 

(3) 전송 버튼을 누르면...

 

action에서 지정했던 "a.jsp"의 경로로 가는데, 지금은 서버와 연결되어있지 않고 jsp의 정보가 없으므로 페이지 에러가 뜬다. 후에 jsp를 배우고 서버와 연동시킬 경우 이 부분이 해결될 것이다!

 

소스는 이렇다.

헤드

function sub(){
 document.forms[0].submit();
} //submit()메서드는 폼 아래에서 위와 같이 활용 가능하다.

바디

<form action="a.jsp" method="get" name="fr">
<input type="text" name="id">
<input type="button" value="확인" onclick="con()">
<input type="button" value="전송" onclick="sub()">

 

4. 아이디, 패스워드, 텍스트 창을 동작시켜보기!

  우리가 네이버에 들어가면, 로그인 하는 창이 따로 만들어져 있잖아? 그 원리를 조금이나마 이해하

  고자 수업을 들으면서 만들어보았다. 한번 들여다보자.

 

헤드

function txt(){
 alert(document.fr.id.type+"\n"+document.fr.id.name+"\n"+document.fr.id.value);
 document.fr.id.focus(); //출력 후 텍스트상자 안의 커서 깜빡임
 document.fr.id.select(); //텍스트상자값을 선택할 수 있음
}
function txt1(){
 alert(document.fr.passwd.type+"\n"+document.fr.passwd.name+"\n"
   +document.fr.passwd.value);
 document.fr.id.focus();
}
function txt2(){
 alert(document.fr.ta.type+"\n"+document.fr.ta.name+"\n"
   +document.fr.ta.value);
 document.fr.id.focus();
}
function check(){
 if(document.fr.id.value==""){
  alert("id를 입력하라고라고라고라고");
  document.fr.id.focus(); //id 포커스 깜빡
  return;
 }else if(document.fr.passwd.value==""){
  alert("패스워드 입력하세요!");
  document.fr.passwd.focus();
  return;
 }else if(document.fr.ta.value==""){
  alert("텍스트를 입력하세요!");
  document.fr.ta.focus();
  return;
 }document.fr.submit();
}
function check2(){
 if(document.fr.id.value==""){
  alert("id를 입력하라고라고라고라고");
  document.fr.id.focus(); //id 포커스 깜빡
  return false;
 }else if(document.fr.passwd.value==""){
  alert("패스워드 입력하세요!");
  document.fr.passwd.focus();
  return false;
 }else if(document.fr.ta.value==""){
  alert("텍스트를 입력하세요!");
  document.fr.ta.focus();
  return false;
 }
}

바디

<form action="a.jsp" method="get" name="fr" onsubmit="return check2()">
<input type="text" name="id">
<input type="password" name="passwd">
<textarea rows="5" cols="10" name="ta"></textarea><br><br>
<input type="button" value="텍스트상자정보" onclick="txt()">
<input type="button" value="패스워드상자정보" onclick="txt1()">
<input type="button" value="textarea상자정보" onclick="txt2()">
<input type="button" value="제어" onclick="check()">
<input type="submit" value="전송">
</form>

 

(1) 실행하면 창이 뜬다. 왼쪽부터 id, password, 텍스트박스이다.

 

(2) 아이디를 입력하고 "텍스트상자정보" 버튼을 누르면 아래와 같은 창이 뜬다.

function txt(){
 alert(document.fr.id.type+"\n"+document.fr.id.name+"\n"+document.fr.id.value);
 document.fr.id.focus(); //출력 후 텍스트상자 안의 커서 깜빡임
 document.fr.id.select(); //텍스트상자값을 선택할 수 있음
}

 

(3) 패스워드를 입력하고 버튼을 누르면, 아래와 같은 창이 뜬다.

     패스워드 비번이 출력된다 -_-;;

function txt1(){
 alert(document.fr.passwd.type+"\n"+document.fr.passwd.name+"\n"
   +document.fr.passwd.value);
 document.fr.id.focus();
}

 

(4) 텍스트상자에 입력된 정보가 아래 그림처럼 경고창에 출력된다.

function txt2(){
 alert(document.fr.ta.type+"\n"+document.fr.ta.name+"\n"
   +document.fr.ta.value);
 document.fr.id.focus();
}

 

(5) 다음은 "제어" 버튼의 기능이다.

아이디를 입력하지 않으면 메시지가 뜬다. 입력하라고라고라고

function check(){
 if(document.fr.id.value==""){
  alert("id를 입력하라고라고라고라고");
  document.fr.id.focus(); //id 포커스 깜빡
  return;
 }else if(document.fr.passwd.value==""){
  alert("패스워드 입력하세요!");
  document.fr.passwd.focus();
  return;
 }else if(document.fr.ta.value==""){
  alert("텍스트를 입력하세요!");
  document.fr.ta.focus();
  return;
 }document.fr.submit();
}

 

(6) 패스워드도 마찬가지다

function check(){
 if(document.fr.id.value==""){
  alert("id를 입력하라고라고라고라고");
  document.fr.id.focus(); //id 포커스 깜빡
  return;
 }else if(document.fr.passwd.value==""){
  alert("패스워드 입력하세요!");
  document.fr.passwd.focus();
  return;
 }else if(document.fr.ta.value==""){
  alert("텍스트를 입력하세요!");
  document.fr.ta.focus();
  return;
 }document.fr.submit();
}

 

(7) 텍스트상자역시 비어있는 꼴을 몬~본다~ 완벽주의자녀석이다.

function check(){
 if(document.fr.id.value==""){
  alert("id를 입력하라고라고라고라고");
  document.fr.id.focus(); //id 포커스 깜빡
  return;
 }else if(document.fr.passwd.value==""){
  alert("패스워드 입력하세요!");
  document.fr.passwd.focus();
  return;
 }else if(document.fr.ta.value==""){
  alert("텍스트를 입력하세요!");
  document.fr.ta.focus();
  return;
 }document.fr.submit();
}

 

(8) "전송" 버튼의 기능 역시 마찬가지다. 그러나 "제어" 버튼과 "전송" 버튼의 차이가 있다.

     바로 return값을 돌려주느냐, 마느냐의 여부이다. "제어" 버튼은 return을 그대로 돌려주는 것에 반해,  "전송" 버튼은 그렇지 않고 return false를 한다. 왜일까? 왜냐하면 전송버튼은 submit 타입으로 되어있기 때문이다.

<form action="a.jsp" method="get" name="fr" onsubmit="return check2()">

...

<input type="button" value="제어" onclick="check()">
<input type="submit" value="전송">

</form>

subimt 타입은 함수 기능을 수행함과 동시에 페이지 이동을 수행해버리는데, form태그에서 onsubmit속성이 그걸 막아준다. onsubmit="return check2()" 을 해줌으로써 return값을 check2()메서드로 보내고, check2에서 if문을 사용하여 그때그때 return false로 페이지 이동을 막는 것이다!

 

 

마지막으로 모두 입력하고 전송 버튼을 누르면 페이지가 이동한다.

 

5. 체크박스

전체 소스

헤드

function sel(){
 alert(document.fr.hob[0].type+"\n"+document.fr.hob[0].name);
 alert(document.fr.hob[0].value+"\n"+document.fr.hob[0].checked);
 alert(document.fr.hob[1].value+"\n"+document.fr.hob[1].checked);
 alert(document.fr.hob[2].value+"\n"+document.fr.hob[2].checked);
}

바디

<form action="a.jsp" method="get" name="fr">
<input type="checkbox" name="hob" value="독서">독서
<input type="checkbox" name="hob" value="여행">여행
<input type="checkbox" name="hob" value="등산">등산
<input type="button" value="선택" onclick="sel()">
</form>

(1) 실행하면 아래와 같은 창이 뜬다

(2) 독서를 체크하고 선택 버튼을 누르면 아래 경고창에 체크박스의 type과 name이 뜬다

 

(3) 독서가 체크되었으므로, checked 속성에 true값이 출력된다.

(4) 독서에만 체크되었기 때문에, 여행은 false가 출력된다.

 

(5) 역시 등산에도 false가 출력될 것이다.

길고 긴 자바스크립트 시간이 끝났지롱 ~!

s(ㅇ_ㅇ)/