190624_Day51 <JavaScript5>

용진용진 2019. 6. 24. 19:24

2019. 6. 24. 19:24

190624_Day51

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>이미지 테스트</title>
    <script type="text/javascript">
        function imageChange2(imageName) //자바 클래스와 등가, 자바스크립트 함수는 일급 객체 , 고로 메소드안에 메소드도 가능하다!
        {
            console.log('img3의 이미지 소스  = ' + document.img3.src);
            if(imageName == 'jpg'){
                document.img3.src = "ebi.jpg"                        
            }else if ( imageName == 'hak'){
                document.img3.src = "hak.png"                
            }else if ( imageName == 'gif'){    
                document.img3.src = "ebi.gif"
            }
        }
    </script>

</head>
<body>
    <h3>자바스크립트를 통한 이미지 조작</h3>
    <hr>
    <img 
        name = "img3"
        src = "ebi.gif"
        width="400" height="300"
        onmouseover="imageChange2('jpg')"
        onmouseout = "imageChange2('hak')"
        onmousedown = "imageChange2('gif')"
    >




</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>오늘의 날짜 출력</title>
   <script type="text/javascript">
      function printDate(){
          var now = new Date();//now: 현재 날짜의 모든 정보가 저장.
          var dayStr=['일','월','화','수','목','금','토'];
          //dayStr의 자료형? Array배열!!

          var dayStr='일월화수목금토';  
          //          0123456
          //dayStr의 자료형? String문자열!!


          var year = now.getFullYear();
          var month = now.getMonth()+1;//1월~12월 :0~11 
          var date = now.getDate();
          var h = now.getHours();
          var m = now.getMinutes();
          var s = now.getSeconds();
          var day = now.getDay();//일요일~토요일 (0~6)
          /*
          document.write(year+'년 '+month+'월 '+date+'일 '+
                  h+'시 '+m+'분 '+s+'초 ('+dayStr[day]+'요일)');

          document.write('<br>'+year+'년 '+month+'월 '+date+'일 '+
                  h+'시 '+m+'분 '+s+'초 ('+dayStr.substr(day,1)+'요일)');

          document.write('<br>'+year+'년 '+month+'월 '+date+'일 '+
                  h+'시 '+m+'분 '+s+'초 ('+dayStr.charAt(day)+'요일)');
          */

          var str=year+'년 '+month+'월 '+date+'일 '+
                   h+'시 '+m+'분 '+s+'초 ('+dayStr.charAt(day)+'요일)';

          var d1 = document.getElementById('d1');
          //d1의 자료형? Element ---> 속성 innerHTML
          d1.innerHTML = str;        
          setTimeout('printDate()', 1000);
          //1초후에 printDate()호출

      }//printDate
   </script>
</head>

<!-- today_print.html -->
<body onload = "printDate()">
<!--  
    body 엘리먼트의 내용이 브라우저에 전체 출력 되었을 때 실행될것 onload
 -->
    <H3>오늘 날짜</H3>
    <hr>
<!-- 
    <script type="text/javascript">
    var now = new Date();
    var dayStr = ['일','월','화','수','목','금','토'];

    var dayStr = '일월화수목금토';            

    var year = now.getFullYear();
    var month = now.getMonth();
    var date = now.getDate();
    var h = now.getHours();
    var m = now.getMinutes();
    var s = now.getSeconds();
    var day = now.getDay();

    document.write(year + '년' + month + '월' + date + '일' + 
                h + '시' +  m + '분' +  s + '초 (' + dayStr[day] + ')');
    document.write('<br>' + year + '년' + month + '월' + date + '일' + 
            h + '시' +  m + '분' +  s + '초 (' + dayStr.substr(day,1) + ')');
    document.write('<br>' +year + '년' + month + '월' + date + '일' + 
            h + '시' +  m + '분' +  s + '초 (' + dayStr.charAt(day) + ')');
    //day가 요일 일(0) ~ 토(1)
</script>
 -->
     <div id="d1"></div>



</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>회원가입 폼</title>
    <script type="text/javascript">
        /* 
            등록 버튼 클릭시 validCheck() 호출 -> 유효성 검사

            1. 아이디, 비번, 비번확인, 이름, 주민, 주소에 대한 빈값 체크
                -> 빈값일 때 입력 메시지 (alert) 출력
            2. 비번과 비번확인 일치 체크
            3. 주민번호의 숫자값과 자릿수 체크'
            4. 직업을 선택했는지 체크

            => 1~4 체크가 잘 되었을 때 welcom.html 페이지로 이동!
            => <form>태그의 속성 action에 명시된 url이동! -> submit()함수 사용
            => document.form명.submit();
        */
        function validCheck()
        {
            var f = document.joinForm;
            var id = f.id.value;
            var pass = f.pass.value;
            var pass2 = f.pass2.value;
            var name = f.name.value;
            var ssn1 = f.ssn1.value;
            var ssn2 = f.ssn2.value;
            var phone1 = f.phone1.value;
            var phone2 = f.phone2.value;
            var phone3 = f.phone3.value;
            var addr = f.addr.value;
            var job = f.job.value;
            // pass, pass 2 name ssn1 ssn2 phone1 2 3 addr job
            if(id == '')
            {
                alert("입력 안된 값이 있어요!");
                f.id.focus();
            }else if(pass == '' || pass2 == ''){
                alert("비번 확인!");
                f.pass.focus();
            }else if (pass != pass2)
            {
                alert("비밀번호 불일치");                    

            }else if(name == ''){
                alert("이름 확인!");
                f.name.focus();
            }else if(ssn1 == '' || ssn2 == ''){
                alert("주민번호 확인!");
                f.ssn1.focus();
            }else if (isNaN(ssn1) || isNaN(ssn2) || ssn1.length != 6 || ssn2.length != 7){
                alert("올바르지 않은 주민번호!");
                f.ssn1.value = '';
                f.ssn2.value = '';
                f.ssn1.focus();
            }else if(phone1 == '' || phone2 == '' || phone3 == ''){
                alert("휴대폰 번호 확인!");
                f.phone1.focus();
            }else if(addr == '' ){
                alert("주소 확인!");
                f.addr.focus();
            }else if(job == '==선택==' ){
                alert("직업  확인!");
                f.job.focus();
            }else{
                return true;
                //submit 버튼 클릭시 action속성에 명시된 url이동
            }
            return false; //submit실행 x
        }

        function juminMove()
        {
            console.log('ssn1의 입력값>>>'+ 
                    document.joinForm.ssn1.value);
            if(document.    joinForm.    ssn1.        value.length == 6)
            //자료형 document form 엘리먼트 input엘리먼트 string
                {
                    document.joinForm.ssn2.focus();
                }
        }
    </script>
</head>
<body>

  <center>
  <h3>회원가입폼</h3>
 <form name = "joinForm" action = "welcome.html">
  <table  cellpadding="5" bgcolor="eeeeee">
    <tr align="right">
        <td>I D:</td>
        <td><input type="text" name="id" > 
            <input type="button" value="중복확인" tabindex="-1"> 
            <!-- tabindex로 바로 tab으로 넘어갈 수 있다.  -->
        </td>
        <!-- 
             <input>태그의 속성
         readonly    ===> 읽기전용(쓰기금지)  : 자바 setEditable(false)
         disabled    ===> 비활성화                   : 자바 setEnabled(false)
         -->
    </tr>
    <tr>
        <td>비 번:</td>
        <td><input type="password" name="pass"> </td>
    </tr>
    <tr>
        <td>비번확인:</td>
        <td><input type="password" name="pass2"></td>
    </tr>
    <tr>
        <td>이 름:</td>
        <td><input type="text" name="name"></td>
    </tr>
    <tr>
        <td>주민번호:</td>
        <td><input type="text" name="ssn1" size="6"
                   maxlength="6" onkeyup = "juminMove()">
             -
            <input type="password" 
                   name="ssn2" 
                   size="7"
                   maxlength="7">
        </td>
    </tr>
    <tr>
        <td>전화번호:</td>
        <td><input type="text" name="phone1" size="4"> -
            <input type="text" name="phone2" size="4"> -
            <input type="text" name="phone3" size="4">
        </td>
    </tr>
    <tr>
        <td>주소</td>
        <td><input type="text" name="addr"></td>
    </tr>
    <tr>
        <td>직업</td>
        <td>
             <select name="job">        
                <option >==선택==</option>      
                <option >학생</option>
                <option>공무원</option>
                <option>언론/출판</option>
                <option>군인/경찰</option>
                <option>일반사무직</option>
                <option>영업직</option>
                <option>기술/전문직</option>
                <option>보건/의료</option>
                <option>자영업</option>
                <option>주부</option>
                <option>기타</option>
             </select>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
           <!-- <input type="submit" value="등록"> -->
           <button type = "submit" onclick = "return validCheck()">등록</button>
           <!-- <input type="reset" value="취소"> -->
           <button type="reset">취소</button>
        </td>        
    </tr>
    </table>
   </form> 
  </center>
</body>

</html>

정규식(정규표현식) 테스트( RegularExpression )

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>정규식 테스트</title>
</head>
<body>
    <h3>RegExp 테스트</h3>
    <script type="text/javascript">
        var str = '  script ' ; // 맨 앞 공백 3개, 뒤에 공백 2칸
        //앞 뒤 공백 제거하기 
        str.trim();
        document.write(str + " " + str.trim().length);

        var str = '  script ' ;
        //trim 쓰지 말고...
        document.write("<br>" + str + " " + str.replace(' ', '').length);
        //맨 앞에 빈칸만 없애주네...
        document.write("<br>" + 'str의 문자열 길이 = ' +str.replace(/ /g,'').length);

        document.write('<br>str의 문자열길이(replace)='+
                  str.replace(/(^\s+)|(\s+$)/g,'').length);
        //패턴 검사 !! (데이터 검사 - 문자, 숫자, 길이)
        //횟수 관련 부호 : ?:(0,1)        *:( 0 ~ 무 한 대 )        +:( 1 ~ 무한대 )

        var a = ' '; var b = []; var c = {}; var d = /표현식/;
        var e = new RegExp("패턴");

        // a의 자료형 String
        // b의 자료형 배열
        // c의 자료형 JSON{키,밸류, 키,밸류 ...}
        // d,e의 자료형 RegExp객체 

        var str2 = 'abcA';
        // str2 영문자 검사!
        var regExp1 = /^[a-zA-Z]+$/
        // /하고 ^ 사이에 공백 있으면 안되네...
        // var regExp1 = /패턴/플래그;
        // 패턴내의 '^' : 문장의 시작
        // $ : 문장의 끝
        // 참고) [^abc] ==> a, b ,c 문자를 제외하고~
        //        ^[abc] ==> a 또는 b 또는 c문자로 시작하는 ~ 

        document.write('<br> 영문자 검사' + regExp1.test(str2) )
        //str2문자열을 regExp1패턴에 검사해서 일치하면 true를 리턴!

        var str3 = '12345';
        var regExp2 = new RegExp('^[\\d]+$'); // ^[\d]+$ 에서 \d 가 0~9 
        // 따옴표 때문에 \\d 쓰는것.
        document.write('<br>숫자 검사 : ' + regExp2.test(str3));

        var jumin1 = '960202';

        var juminPattern1 = /^[\d]{6}$/;
        // {m, n} : m:최소값 n:최대값
        // {3, 6} : 횟수 3이상 6이하, {6} : 6회, {3,} : 3회 이상
        document.write('<br>주민번호 앞자리 검사 : ' +
                        juminPattern1.test(jumin1) );    

        // 문제 ) 아이디를 검사 할 수 있는 패턴 idPattern을 정의하시오.
        // idPattern -> regExp객체
        // 아이디 조건 => 8~12자리, 영문자와 숫자조합, 영문자 시작

        var idcheck = 'asdfasdf';
        var idcheck = 'asdfasdf12';
        var idcheck = 'gil123df';

        var idPattern2 = new RegExp('^[a-zA-Z]{1}[a-zA-Z\\d]{7,11}$');

        document.write('<br>' + idcheck + ' 아이디 패턴을 검사! ' + idPattern2.test(idcheck));

        //문제 ) 비밀번호 검사 (5자리)

        var pass = 'aa!s5';
        var passPattern2 = new RegExp('/(?=.*\\d)(?=.*[~`!@#$%\^&*()-+=])(?=.*[a-zA-Z]){5}$/');

        document.write('<br>' + pass + ' 비밀번호 패턴을 검사! ' + passPattern2.test(pass));

    </script>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>새창열기테스트</title>
  <script>
     function win_open(){
        //window == 브라우저
        //window.open('새창에보여질URL주소','타겟명','윈도우(=브라우저)특성');
        //window.open(); 빈탭열기
        //window.open('child_window.html','_self'); 현 브라우저에 명시된 URL열기
        window.open('child_window.html','childWin',
                'toolbar=yes,location=0,status=1,menubar=1,'+
                'scrollbars=no,resizable=yes,width=300,height=200,'+
                'top=100,left=100');    
     }
  </script>
</head>
<!-- window_openTest.html -->
<body>
 <h3>새창열기테스트</h3>
 <hr>
 <form name="parentForm">
     이름: <input type="text" name="username">
 </form>
 <button onclick="win_open()">새창열기</button>


</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>자식창</title>
    <script type="text/javascript">
        // 부모창의 username값 얻어오기
        // 부모 윈도우창에 대한 레퍼런스 : opener( ==open window!! )
        // opener.document == 부모창의 문서, document.~ == 현재 문서
        //alert('부모폼의 이름 : ' + opener.document.parentForm.username.value);
        function initForm(){
            //alert('부모폼의 이름:'+ opener.document.parentForm.username.value);
            document.childForm.username.value
            = opener.document.parentForm.username.value;
          }

          function toParent(){
            opener.document.parentForm.username.value
              = document.childForm.username.value;
          }

    </script>
</head>
<!-- child_window.html -->
<body onload="initForm()">
   <h3>child_window(자식창)</h3>
   <hr>
   <form name="childForm">
        이름: <input type="text" name="username">
   </form>
   <br>
   <button onclick="toParent()">이름전달(to부모창)</button>
</body>

</html>

'클라우드 기반 웹 개발자 과정 공부 > JS' 카테고리의 다른 글

190621_Day50 <JavaScript4> (0)	2019.06.21
190620_Day49 <JavaScript3> (0)	2019.06.20
190619_Day48 <JavaScript - 1,2> (0)	2019.06.19

Yong Study

190624_Day51 <JavaScript5>

'클라우드 기반 웹 개발자 과정 공부 > JS' 카테고리의 다른 글

+ Recent posts

티스토리툴바