본문 바로가기
낙서장/JAVA

java 시작 d-day 5

by "뭉치" 2021. 8. 8.
728x90
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
 <script type="text/javascript">
  function goSite() {
  //var(변수를 선언하겠다) move라는것을..
  var move=document.getElementById("move");
  location.href=move.value;
 }
 </script>
 </head>

 <body>
 <!--select 속성 id에 nove라는 값 onchange는 값이 바뀌었을때 goSite()를 호출하는것.-->
  <select id="move" onchange="goSite()">
  <option value="http://www.daum.net">daum>
  <option value="http://www.naver.com">naver>
  <option value="http://www.google.com">google>
 </body>
</html>

----------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
 function test02() {
 /* document.가지고와라 getElementbyId를..;
 str에 txt.value를 입력받고...*/
  var txt=document.getElementById("txt");
  var str=txt.value;
  if(str.length>10) { //length문자열의 길이
   alert("10자 이하로 입력하세요!");
   return; //함수를 끝내라.
  }
  alert("입력된 문자열은 "+str+" 입니다.");
 }

 </script>
 </head>

 <body>
 <!--<input type="text" value="이힝" id="txt" /><br/> 이렇게 입력해 놓으면 입력되어있다.
 (뒤에 회색으로 있는 듯이 글자를 연하게 넣을수 있을까?-->
  문자열 입력:<input type="text" id="txt" /><br/>
  <input type="button" value="문자열 테스트" onclick="test02()"/>
 </body>
</html>

------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
 /*가입버튼을 눌렀을때의 액션입력
 document.getElementById로 가져온다.*/
 function reg() {

 //var id=document.getElementById("id");
  //var id2=id.value; 이걸 줄여서 한줄에 쓴다.밑에처럼
  var id=document.getElementById("id").value;
  var pwd=document.getElementById("pwd").value;
  var snum=document.getElementById("snum").value;
  var email=document.getElementById("email").value;

  if(id.length>12 || id.length<8) {
   alert("아이디를 8자~12자 사이로 입력하세요");
   return;//함수 끝내기.
  }
 }
 
 
  </script>
 </head>
 
 <body>
<form>
 <table width="400" border="1">
  <tr>
   <td>아이디(8~10자사이)</td>
   <td><input type="text" id="id"/></td>
  </tr>
  <tr>
   <td>비밀번호(8자이하)</td>
   <td><input type="password" id="pwd"/></td>
  </tr>
  <tr>
   <td>주민등록번호(-제외)</td>
   <td><input type="text" id="snum"/></td>
  </tr>
  <tr>
   <td>이메일</td>
   <td><input type="text" id="email"/></td>
  </tr>
  <tr>
   <td colspan="2" align="center">
   <input type="button" value="가입" onclick="reg()"/>
   <input type="button" value="취소" />
 </body>
</html>

-------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
 /*가입버튼을 눌렀을때의 액션입력
 document.getElementById로 가져온다.*/
 function reg() {
  //var id=document.getElementById("id");
  //var id2=id.value; 이걸 줄여서 한줄에 쓴다.밑에처럼
  var id=document.getElementById("id").value;
  var pwd=document.getElementById("pwd").value;
  var snum=document.getElementById("snum").value;
  var email=document.getElementById("email").value;

  if(id.length>12 || id.length<8) {
   alert("아이디를 8자~12자 사이로 입력하세요");
   return;//함수 끝내기.
  }
 //비밀번호체크
 if(pwd.length>8) {
  alert("비밀번호는 8자 이하로 입력해주세요.");
  return;
 }
 if(snum.length != 13) {
  alert("주민번호는 13자리 이어야합니다.");
  return;
 }
 //이메일 체크하기. @가 포함되어야 한다.
 /* @의 갯수를 세기 위해서 변수를 선언했다. count
 oli999@nate.com
 012345678910...
 charAt(i)가 @를 찾을때 까지 증가해서 찾은뒤 for문을 빠져나오는 if문;;
 */
 var count=0;
 for(var i=0; i<email.length;i++) {
  if(email.charAt(i)=='@') { //@갯수 세기.
   //count++;
   count=count+1;
  }
  if(count!=1) {// @의 갯수가 1개가 아닌경우
    alert("이메일 형식에 맞지 않아요!");
    return;
   }
 
  }
 
  }
  </script>
 </head>
 
 <body>
<form>
 <table width="400" border="1">
  <tr>
   <td>아이디(8~10자사이)</td>
   <td><input type="text" id="id"/></td>
  </tr>
  <tr>
   <td>비밀번호(8자이하)</td>
   <td><input type="password" id="pwd"/></td>
  </tr>
  <tr>
   <td>주민등록번호(-제외)</td>
   <td><input type="text" id="snum"/></td>
  </tr>
  <tr>
   <td>이메일</td>
   <td><input type="text" id="email"/></td>
  </tr>
  <tr>
   <td colspan="2" align="center">
   <input type="button" value="가입" onclick="reg()"/>
   <input type="button" value="취소" />
 </body>
</html>

---------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
 function test() {
  //배열:데이터들을 연속적으로 모아 놓은것.
  //많은 양의 데이터들이 있을때 관리하기 쉽다.
  var arr=new Array(3); //데이터가 3개 들어갈 배열선언.
  arr[0]="진달래";
  arr[1]="민들래";
  arr[2]="개나리";
  //배열의 요소들 출력하기.
  for(var i=0;i<arr.length;i++) {
  document.write(arr[i]+"<br/>");
  }
 }
  </script>
 </head>

 <body>
  <input type="button" value="test" onclick="test()"/>
 </body>
</html>

------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
  var count=0;
  function changeImg() {//img1의 제어권을 img1에 넣어라 ;;여기에 img/2.jpg를 넣어라;;
   var img1=document.getElementById("img1");
   img1.src="img/2.jpg";
  }
  function changeImg2() {
   //document.getElementsByTagName("테그명");
   //위는 테그명에 해당되는 엘리먼트들을 배열로 얻어옴.
   var img=document.getElementsByTagName("img");//s <-- 여러개를 얻어온다.;;
   count=count+1;
   //이미지를 번갈아가면서 바꾸기.
   if(count%2==1) {
    img[0].src="img/2.jpg";
    img[1].src="img/1.jpg";
   }else{
    img[0].src="img/1.jpg";
    img[1].src="img/2.jpg";
   }

  }
  </script>
 </head>

 <body>
  <div align="center">
 <input type="button" value="이미지바꾸기" onclick="changeImg()"/><br/>
 <input type="button" value="이미지바꾸기2" onclick="changeImg2()"/><br/>
 <img id="img1" src="img/1.jpg"/><br/>
 <img id="img2" src="img/2.jpg"/>
 
 </body>
</html>

----------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <script type="text/javascript">
  function register() {
   var name=document.frm.name;
   var pwd=document.frm.pwd;
   if(name.value=="" || pwd.value=="") {
    alert("아이디 혹은 비밀번호가 입력되지 않았습니다.");
    return; //함수를 끝내라.
   }
   //frm이라는 폼에 name 속성이 여러개면 자동으로 배열로
   //얻어온다.
   var hobby=document.frm.hobby;
   var strHobby="취미:";
   for(var i=0;i<hobby.length;i++) {
    if(hobby[i].checked){
     strHobby=strHobby+" "+hobby[i].value;
    }
   }
   alert(strHobby);
   document.frm.submit();//서버로 데이터를 전송하라.
  }
  </script>
 </head>

 <body>
 <form name="frm" action="server.html"> <!--서버로 전송하기 전에 검사할때 쓰이는 거임. -->
 아이디<input type="text" name="name"/><br/>
 비밀번호<input type="text" name="pwd"/><br/>
 취미<br/>
 <input type="checkbox" value="여행" name="hobby"/>여행
 <input type="checkbox" value="음악" name="hobby"/>음악
 <input type="checkbox" value="낚시" name="hobby"/>낚시
 <input type="checkbox" value="낮잠" name="hobby"/>낮잠
 <br/>
 연령대<br/>
 <input type="radio" value="10대" name="age"/>10대
 <input type="radio" value="20대" name="age"/>20대
 <input type="radio" value="30대" name="age"/>30대
 <input type="radio" value="40대이상" name="age"/>40대이상
 <br/>
 <input type="button" value="회원가입" onclick="register()"/>
 </form>
 </body>
</html>

----------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <style type="text/css">
  .myDiv1 {
   position:absolute;
   top:70px;
   left:360px;
   width:300px;
   height:300px;
   font-size:=10pt;
   background-color:#99FF99;
  }
  .myDiv2 {
   position:absolute;
   top:70px;
   left:50px;
   width:300px;
   height:300px;
   font-size:=10pt;
   background-color:#FFCCFF;
  }
  </style>
  <script type="text/javascript">
 function hidDiv() {
  var dv=document.getElementById("dv");
  dv.style.display="none" //숨기기
 }
 function showDiv() {
  var dv=document.getElementById("dv");
  dv.style.display="block";
 }

  </script>
 </head>

 <body>
 <a href="javascript:hidDiv()">div숨기기</a>
  <a href="javascript:showDiv()">div보이기</a>
  <div class="myDiv1">
 <img src="img/1.jpg"/><br/>
 가수 김장훈이 또다시 ‘미친 짓’에 나서고 있다. 수년전 유류피해로
 심신이 치쳤을 서해안 주민을 달래고자 서해안페스티벌을 열기도 했고,
 독도 수호의 의지를 다진다는 취지로 독도페스티벌을 사비로 개최한 김장훈이다.
  </div>
<div id="dv" class="myDiv2">
  <img src="img/2.jpg"/><br/>
 김장훈 측은 “기부의 경우에서처럼 아무리 말려도 어쩔 수 없는 노릇”이라고 말했다.
 김장훈도 걱정이 됐던 모양인지 자신의 미니홈피에 글을 올렸다.“처음 느낀 돈에 대한 두려움”
 이라는 표현이 우선 등장한다. “처음 공연을 하겠다고 이야기했을 때 사무실 직원들의
 표정을 잊지 못한다”고도 했다.
</div>
 </body>
</html>
728x90
저작자표시 비영리 변경금지

'낙서장 > JAVA' 카테고리의 다른 글

java 기초 d-day 7  (0) 2021.08.08
java 기초 d-day 6  (0) 2021.08.08
java 시작 d-day 4  (0) 2021.08.08
java 시작 d-day 3  (0) 2021.08.08
java 시작 d-day 2  (0) 2021.08.08

관련글

댓글

티스토리툴바

티스토리툴바