① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>회원가입 유효성 체크</title>

        <script type="text/javascript">

               function validate() {

                       // 이메일검사

                       // 4글자이상(\w=[a-zA-Z0-9_],[\w-]:'-'까지는 허용) @ 나오고

                       // hanmail.net, naver.com, lycos.co.kr, iei.or.kr

                       // 1글자 이상(주소).글자 1~3 반복

                       var userid = document.getElementById("userid");

                       // 첫글자는 반드시 영문소문자, 4~12자로 이루어지고, 숫자가  하나 이상 포함되어야한다.

                       // 영문소문자와 숫자로만 이루어져야 한다.

                       // \d : [0-9] 같다. {n,m} : n에서 m사이

                       if(!chk(/^[a-z][a-z\d]{3,11}$/, userid, "잘못된 형식의 ID입니다.")) return false;

                       if(!chk(/[\d]/, userid, "잘못된 형식의 ID입니다.")) return false;

                       //alert(re.test(userid.value));

                      

                       var pass = document.getElementById("pass");

                       var pass1 = document.getElementById("pass1");

                       if(!pwchk(pass, pass1, "비밀번호가 다릅니다."))

                       //if(!pwchk(pass.value, pass2.value)) return false;

                      

                       // 이름 검사 : 2글자 이상,한글로만 입력

                       // 통과하지 못하면 한글로 2글자 이상을 넣으세요 메세지 출력

                       var name = document.getElementById("name");

                       if(!chk(/^[-]{2,}$/, name, "한글만 입력하세요!!!(2글자 이상)")) return false;


  var email = document.getElementById("email");

                       if(!chk(/^[\w-]{4,}@[\w-]+(\.\w+){1,3}$/, email, "이메일 형식이 잘못되었습니다."));

 

                       var tel1 = document.getElementById("tel1");

                       var tel2 = document.getElementById("tel2");

                       var tel3 = document.getElementById("tel3");

                      

                       if(tel1.value != ''){

                       if(!chk(/^0(2|1[016789])$/, tel1, "앞자리는 2~3자리 숫자")) return false;

                       if(!chk(/^\d{3,4}$/, tel2, "둘째자리는 3~4자리 숫자")) return false;

                       if(!chk(/^\d{4}$/, tel3, "셋째자리는 4자리 숫자")) return false;

                       }

                       var email = document.getElementById("email");

                                     

                       //return false;

               }

               function chk(re, e, msg){

                       if(re.test(e.value)) return true;

                       alert(msg);

                       e.value="";

                       e.focus();

                       return false;

               }

               function pwchk(e1, e2, msg){

                       if(e1 == e2) return true;

                       alert(msg);

                       e.value="";

                       e.focus();

                       return false;

               }

        </script>

</head>

<body> 

        <h1>회원가입 유효성 체크</h1>

       

        <form action="" method="post" onsubmit="return validate();">

               <!-- input타입이 텍스트인경우 일반 텍스트로 입력받는다. -->

               <label for="userid">* 유저아이디</label>

               <input type="text" name="userid" id="userid" /> <br />

              

               <!-- password 경우 입력한 값이 보이지 않는다. -->

               <label for="pass">* 비밀번호</label>

               <input type="password" name="pass" id="pass" /> <br />

               <label for="pass1">* 비밀번호확인</label>

               <input type="password" name="pass1" id="pass1" /> <br />

               <label for="name">* 이름</label>

               <input type="text" name="name" id="name" /> <br />

               <label for="email">* 이메일</label>

               <input type="text" name="email" id="email" /> <br />

 

               <label for="tel1">전화번호</label>

               <input type="text" name="tel1" id="tel1" maxlength="3"/>-

               <input type="text" name="tel2" id="tel2" maxlength="4"/>-

               <input type="text" name="tel3" id="tel3" maxlength="4"/> <br />

              

               <!-- select option 한가지를 선택하도록 한다. -->

               <label for="job">직업</label>

               <select name="job" id="job">

                       <option>개발자</option>

                       <option>프로그래머</option>

                       <option>자영업자</option>

               </select> <br />

              

               <!-- radio 여러개 선택이 불가능하다. -->

               <label for="gender">성별</label>

               <input type="radio" name="gender" value ="m" />

               <input type="radio" name="gender" value ="f" />   <br />

                <label for="hobby">취미</label>

               

                <!-- checkbox 여러개 선택이 가능하다. -->

                <input type ="checkbox" name="hobby" value="reading" /> 독서

                <input type ="checkbox" name="hobby" value="drama" /> 드라마보기

                <input type ="checkbox" name="hobby" value="soccer" /> 축구 <br />

                <input type ="checkbox" name="hobby" value="movie" /> 영화보기

                <input type ="checkbox" name="hobby" value="basket" /> 농구

                <input type ="checkbox" name="hobby" value="game" /> 게임 <br />

               

                <!-- 입력한 값을 리셋한다. -->

                <input type="reset" value="리셋" />

               

                <!-- 입력한 값을 제출한다. -->

                <input type="submit" value="완료" />

        </form>

</body>

</html>


② 실행 화면

회원가입 유효성 체크

회원가입 유효성 체크






- -


독서 드라마보기 축구
영화보기 농구 게임


블로그 이미지

모데스티

,

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>숫자와 문자 변환 정규식</title>

        <script type="text/javascript">

               function execute() {

                       // aaa bbb 결과를 합쳐서 result 보여주기

                       var aaa = document.getElementById("aaa");

                       var bbb = document.getElementById("bbb");                   

                       // 정규식을 이용한 숫자 검사

                       /*

                              정규식 작성법

                              1. var re = /정규식/;

                              2. var re = new RegExp("정규식");

                       */

                       var re = /^[0-9]+$/; // ^[0-9]+$ 시작부터 끝까지 모두 숫자

                       // 유효성 검사(validation)

                       if(!re.test(aaa.value)){

                              alert("숫자만 넣어라.!!");

                              aaa.value=""; // 숫자가 아닐결우 aaa.value 공백으로

                              aaa.focus(); // 다시 입력받기위해 커서가 aaa 값이 들어오는 곳으로 옮겨진다.

                              return;

                       };

                       //alert(parseInt(aaa.value)+parseInt(bbb.value));

                       /* var result = document.getElementById("result");

                       result.innerHTML = Number(aaa.value)+Number(bbb.value); */

                       // 문자->숫자 : parseInt(), Number() (실수인 경우 : parseFloat())

                       var r = parseInt(aaa.value) + Number(bbb.value);

                       if(isNaN(r)){

                              r='숫자를 넣어라!';

                       }

                       document.getElementById("result").innerHTML = r;

               }

        </script>

</head>

<body>

        <input type="button" value="결과보기" onclick="execute();" />

        <input type="text" id="aaa" /> +

        <input type="text" id="bbb" /> =

        <!-- div 가로길이 모두를 차지하고 span 태그안에 가진 내용만큼만 차지한다. -->

        <span id="result"></span>

</body>

</html>


② 실행화면

숫자와 문자 변환 및 정규식 + =


블로그 이미지

모데스티

,

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>날짜 (DATE)</title>

        <script type="text/javascript">

               var no;

              

               function init() {

                       var target = document.getElementById("target");

                       var t = new Date();

                       target.innerHTML = t.getFullYear() + "-" + (t.getMonth()+1) + "-" + t.getDate()

                                                             + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

                       // target.innerHTML = new Date();

                       // setInterval window객체에 있는 메소드이다.

                       // 원래는 window.setInterval이지만 window 생략가능하다.

                       no = setInterval(setTime, 1000); // setInterval 실행되면 고유번호가 no 대입

                       //alert(no);

               }

               function setTime() {

                       var target = document.getElementById("target");

                       var t = new Date();

                       target.innerHTML = t.getFullYear() + "-" + (t.getMonth()+1) + "-" + t.getDate()

                                                            + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();

                      

                       // 2012-09-11 16:14:00 식으로 출력

                      

               }

</script>

</head>

<body onload="init();">

        <!--

                onload : body 만들어지고 난뒤에 실행

                >> 첫화면에서 어떤 이벤트가 일어나게 하고 싶을경우

         -->

        <input type="button" value="멈춰라" onclick="clearInterval(no);" />

        <input type="button" value="다시시작!" onclick="init();" />

        <div id="target"></div>

</body>

</html>


② 실행 화면

날짜 (DATE)



블로그 이미지

모데스티

,

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>구구단</title>

<script type="text/javascript">

        function execute(){

               // 실행을 클릭시 div target 구구단이 나오도록

               var target = document.getElementById("target");

               var html ="<table align='center' border ='1' width='800'>";

               html += "<tr align='center'>"

               html += "<th>구분</th>"

               for(var i=2; i<10; i++){

                       html += "<th>" + i + "</th>";

               }

               html += "</tr>";

               for(var i=1; i<10; i++) {

                       html += "<tr align='center'>"

                              html += "<th> X" + i +"</th>";

                       for(var j=2; j<10; j++){

                              html += "<td>"+ j + "*" + i + "=" + i*j + "</td>";

                       } html += "</tr>";

               }

               html += "</table>";

               target.innerHTML = html;

        }

</script>

</head>

<body>

        <input type="button" value="실행" onclick="execute();" />

        <div id="target"></div>

</body>

</html>


② 실행 화면

구구단



블로그 이미지

모데스티

,

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>자바스크립트</title>

        <script type="text/javascript">

               // 한줄주석

               /* 여러줄 주석 */

               var no=1; // 오로지 var 타입의 변수만 존재, 일종의 멤버변수

               function hello(){

                       // alert창은  Modal dialog : 경고용으로 사용

                       alert("안녕~세상아~!!!"); // 내장 함수(메소드)

                       // DOM(Document Object Model) : HTML Tree형태의 객체로 구조화

                       // getElementById : Id element 찾아 가지고 온다.

                       var target = document.getElementById("target");

                       alert(target);

                       // innerHTML 같은 id 갖는 태그안에 '안녕!!!!' 넣게 된다.

                       target.innerHTML='안녕!!!!';

                       }

                       // gugu div 계속해서 클릭할 때마다 증가된 숫자가 증가하도록

               function add() {

                              var gugu = document.getElementById('gugu'); // 쓰도록 하자!!!

                              if(no%10==0){

                                      gugu.innerHTML += '<h5>ㅋㅋㅋ</h5>';

                              } else {

                                      gugu.innerHTML += '<input type="button" value="버튼'+no+'" />';

                              }

                              no++;

                       }      

        </script>

</head>

<body>

        <h1 id="target"></h1>

        <!--

               on으로 시작하는 것은 javascript에서만 사용

               javascript Event Driven Model : 이벤트가 발생할 경우 행동을 한다.

        -->

        <input type="button" value="눌러줘!" onclick="hello();"/>

        <div id="gugu" onclick="add();" style="border-style: solid;">

               0

        </div>

</body>

</html>


② 실행 화면

자바스크립트

0


블로그 이미지

모데스티

,