• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

JavaScript 정리 08

14 Feb 2019

Reading time ~4 minutes

JavaScript 정리 08 - 정규식, 페이지이동, map태그, meta태그

정규식(Regular Expression)

  • 문자열을 편하게 검색하는 기능
    • 검색, 치환할 때 사용
  • 정규식문자열을 쓸 때는 “나 ‘를 사용하지 않는다.
    • g : 글로벌, 모든 문자열 검색
    • i : 대소문자 구분할 필요가 없을 때
/정규식문자열/ig

var data = "abcabcabc";

data.replace('a', 'kk'); // kkbcabcabc
data.replace(/a/g, 'kk'); // kkbckkbckkbc

var data2 = "AbcAbcAbc";

data2.replace(/a/g, 'kk'); // AbcAbcAbc
data2.replace(/a/ig, 'kk'); // kkbckkbckkbc

var data3 = "abc123ab2dKK";

data.replace(/[a-z]/g, "");

/[a-z]/    // 소문자
/[A-Z]/    // 대문자
/[0-9]/    // 숫자
/[ㄱ-힣]/   // 한글

/[a-zA-Z!#]/ // 여러 조건을 한번에 입력가능
  • 대괄호없이 “a-z”만 쓰게되면 “a-z”라는 문자열을 찾아 지우게 된다.
    • 다 없애기 위해선 대괄호로 묶으면 a~z까지 범위를 잡을 수 있다.
<body>
      <input type="button" value="클릭" class="btn" onclick="regexp()"/>
      <div id="output"></div>
</body>

<script type="text/javascript">
     function regexp() {
          var data = "abcㄱdef123가a나다ABC!~$zzz햏a-z";
          
          var divNode = document.getElementById("output");
          var output = "";
          
          output += "<ul><li><strong>원본 데이터 :  "+data+"</strong></li>";
          output += "<li>가장 처음 등장하는 a 삭제 : " +  data.replace(/a/,"")+"</li>";  
          output += "<li>모든 a 삭제 : " + data.replace(/a/g,"")+"</li>";
          output += "<li>대괄호 없는 a-z 삭제 : " + data.replace(/a-z/g, "") +"</li>";
          output += "<li>모든 소문자 삭제 : " + data.replace(/[a-z]/g, "") +"</li>";
          output += "<li>모든 대문자 삭제 : " + data.replace(/[A-Z]/g, "") +"</li>";
          output += "<li>모든 영문자 삭제 : " +  data.replace(/[a-zA-Z]/g, "") + "</li>";
          output += "<li>모든 숫자 삭제 : " +  data.replace(/[0-9]/g, "") +"</li>";
          output += "<li>모든 한글 삭제 : " +  data.replace(/[ㄱ-힣]/g, "") +"</li>";
          
          divNode.innerHTML = output;
     }
</script>

01

  • 정규식을 이용하면 비밀번호 검증이 쉽다
<body>
      <form name="frm">
            <label>대문자와 소문자만 입력가능</label><br/>
            <input type="text" name="txt1" class="inputBox"/><br/>
            <label>숫자만 입력가능</label><br/>
            <input type="text" name="txt2" class="inputBox"/><br/>
            <label>특수문자만 입력가능</label><br/>
            <input type="text" name="txt3" class="inputBox"/><br/>
            <input type="button" value="클릭" class="btn" onclick="chk()"/>
      </form>
      <div id="output"></div>
</body>

<script type="text/javascript">
     function chk() {
          var obj = document.frm;
          
          var txt1 = obj.txt1.value;
          // 대소문자만 입력했는지 체크
          if( txt1.replace(/[a-zA-Z]/g, "") != "" ) {
               alert("영문자만 입력가능합니다.");
               obj.txt1.value="";
               return;
          }
          
          var txt2 = obj.txt2.value;
          // 숫자만 입력했는지 체크
          if (txt2.replace(/[0-9]/g, "") != "") {
               alert("숫자만 입력가능합니다.");
               obj.txt2.value = "";
               return;
          }
          
          var txt3 = obj.txt3.value;
          // 특수문자만 입력했는지 체크
          if (txt3.replace(/[~!@#$%^&*()_+={}\[\];:]/ig, "") != "") {
               alert("특수문자만 입력가능합니다.");
               obj.txt3.value = "";
               return;
          }
     }
</script>

02

Confirm Dialog

  • alert()은 사용자에게 경고성 정보를 제공
  • 사용자의 의중을 묻고 싶을 때 confirm() 사용
var flag = confirm('메시지'); // 확인-true, 취소-false 반환

03

페이지 이동

  • window.location 객체 사용
    • GET방식으로 이동
    • HTML a태그와 같은 기능
// GET방식, <a href="">와 동일, 뒤로가기 가능
window.location.href="URL"; 

// GET방식, 뒤로가기 불가능, 기존 URL치환하여 이동하는 방식
window.location.replace("url");
  • submit
    • href는 값을 가지고 이동할 수 없다.
    • input태그 type을 submit은 페이지 이동하 시 유효성 검증을 못한다.
      • JS로 유효성 검증 후 form태그가 감싸고 있는 모든 HTML Form Control의 값을 전송
document.폼이름.submit();
  • JS에서 this는 이벤트를 발생시킨 자신(element, tag, node)
<!-- this : 이벤트를 발생시킨 특정 node -->
<input type="text" onkeyup="alert(this)"/>
<input type="button" value="클릭" onclick="alert(this.type)"/>
<input type="radio" value="선택" onclick="alert(this.value)"/>선택<br/>

04

  • location 예제
<body>
<select onchange="pageMove(this)">
      <option selected>--- 자주 가는 사이트 ---</option>
      <option value="daum.net">다음</option>
      <option value="naver.com">네이버</option>
      <option value="google.com">구글</option>
      <option value="sist.co.kr">SIST</option>
</select>

<script type="text/javascript">
     function pageMove(sel) {
          if(sel.selectedIndex != 0) { // 선택한 옵션이 처음 옵션이  아닐 때
               if(confirm(sel.value+" 사이트로 이동하시겠습니까?")){
                    location.href="http://"+sel.value; // GET방식  이동
               }
          }
     }
</script>

05

  • location.href를 location.replace로 변경하면 뒤로가기를 할 수 없다.
// location.href = "http://"+sel.value; // 뒤로가기 가능
location.replace("http://"+sel.value); // 뒤로가기 불가능

06

  • 일반적으로 로그인 후 메일을 읽고 로그아웃을 하면 뒤로가기를 할 수 없게 막는다.
    • location.replace()같이 뒤로가기를 막는 처리를 하여 사용자 정보를 보호한다.

이미지에 여러 링크걸기

07

  • 아래처럼 한 이미지에 링크를 걸면 이미지 어딜 클릭해도 한 링크로 이동한다.
<a href="http://어떤사이트"><img src="images/map.gif"/></a>
  • map태그
    • 이미지를 자르지 않고 특정 좌표에 링크를 생성하는 태그
    • area태그로 좌표와 링크를 설정할 수 있다.
<map id="아이디" name="이름" >
    <area shape="rect" coords="x1,y1,x2,y2" href="URL" title="" />
    ...
</map>
<img src="이미지경로" usemap="#아이디"/>

08

<div>
      <!-- 이미지를 자르지 않고 특정 좌표에 링크를 설정할 경우 사용하는  map태그 -->
      <map id="seoulMap" name="seoulMap">
            <area shape="rect" coords="293,256,339,296" target="_blank" href="http://www.gangnam.go.kr/main.do" title="강남구청"/>
      </map>
      <img src="images/map.gif" usemap="#seoulMap" />
</div>

09

  • JS와 map태그를 함께 사용하는 예제
<div>
      <!-- 이미지를 자르지 않고 특정 좌표에 링크를 설정할 경우 사용하는  map태그 -->
      <map id="seoulMap" name="seoulMap">
            <area shape="rect" coords="293,256,339,296"  onclick="moveOffice('강남구청','http://www.gangnam.go.kr/main.do')"  title="강남구청"/>
            <area shape="rect" coords="149,230,191,254"  href="javascript:moveOffice('영등포구청','http://www.ydp.go.kr/main/main.do')" title="영등포구청"/>
            <area shape="rect" coords="324,53,377,123"  href="javascript:moveOffice('노원구청','https://www.nowon.kr/')"  title="노원구청"/>
            <area shape="rect" coords="74,264,121,292"  href="javascript:moveOfficE('구로구청','http://www.guro.go.kr/')"  title="구로구청"/>
            <area shape="rect" coords="238,186,279,213"  href="javascript:moveOffice('중구청','http://www.junggu.seoul.kr/index.jsp')" title="중구청"/>
      </map>
      <img src="images/map.gif" usemap="#seoulMap" />
</div>

<script type="text/javascript">
      function moveOffice(officeName, url) {
            if (confirm(officeName+" 사이트로 이동하시겠습니까?")) {
                  location.href=url;
            }
      }
</script>
  • href는 HTML영역, JS 함수호출이 안된다.
<area shape="rect" coords="293,256,339,296"  href="moveOffice('강남구청','http://www.gangnam.go.kr/main.do')"  title="강남구청"/>
  • onclick영역은 JS영역, onclick으로 함수를 호출하면 된다.
<area shape="rect" coords="293,256,339,296"  onclick="moveOffice('강남구청','http://www.gangnam.go.kr/main.do')"  title="강남구청"/>
  • HTML영역을 JS영역으로 바꿀 수 있다
    • “javascript:”을 사용하면 : 뒤 영역을 HTML에서 JS영역으로 변경된다
<태그 속성="javascript:속성값" />

<area shape="rect" coords="149,230,191,254"  href="javascript:moveOffice('영등포구청','http://www.ydp.go.kr/main/main.do')" title="영등포구청"/>

10

메타태그

  • head태그내에 존재
  • HTML내 charset설정
<meta charset="UTF-8">
  • 검색엔진에 사이트의 설명을 제공하는 경우에도 사용

11

  • 또 meta태그를 이용해서 자동으로 페이지 이동가능
<meta http-equiv="refresh" content="초;url"/>

페이지 자동 이동

  • 시간이 지나 자동으로 페이지 이동을 시킬 수 있다.
    • 재귀호출함수 사용(setTimeout())
    • 또는 위에서 배운 meta태그를 사용해서 페이지를 이동시킬 수 있다.
<body>
접속하신 http://text.com는 2019년 2월 15일부터 http://sist.co.kr로  도메인이 변경됩니다.<br/>
5초후 사이트를 이동합니다.<br/>
바로 이동하시려면 <a href="http://sist.co.kr">여기</a>를 눌러주세요.
</body>

<script type="text/javascript">
      window.onload = () => {
            pageMove();
      }
      
      var cnt = 0;
      
      const pageMove = () => {
            cnt++;
            if(cnt == 5) {
                  location.href="http://sist.co.kr";              
            }
            setTimeout(pageMove, 1000); // 재귀함수 호출
      }
</script>
  • 위처럼 JS 함수로 이동 또는 아래처럼 meta태그로 이동
<meta http-equiv="refresh" content="5;http://sist.co.kr"/>

JavaScript