국비지원학원/HTML,JavaScript,jQ

78일차-JavaScript+a

초코맛 2019. 2. 18. 00:30
반응형
*저장소 (repository)_Git
  • git을 쓰게되면 로컬 레파지토리에 저장되고..?
  • workspace : eclipse
    • 소스저장-버전이 없다
    • 그냥File은 unstaged/ 변경된 파일을 스테이지(선택된 파일(stage))에 올리기 위한 과정 add to index->Commit
    • commit을 했을때 Local repository로 이동 (이때 ignored된 파일은 올라가지 않는다)
  • Local repository : Git : HDD-Lan환경에서 사용가능하나 집에가서는 사용할 수 없게 됨.
    • Commit되면 올라가고
  • Remote repository : GitHub
    • push되면 올라간다.
    • 원격저장소에 push/pull
  • 우리는 git을 설치하지 않고 egit으로 사용~~


*정규식(Regular Expression) 
  • 문자열을 편하게 검색하는 기능
  • 검색, 치환기능 사용
  • 형식)
    • /정규식문자열/
    • g-모든 문자열 검색
    • i-대소문자를 구분할 필요가 없을때
  • ex)
    • var data ="abc abc abc";
    • data.replace('a', 'kk');//kkababcabc
    • data.replace(/a/g,'kk');//kkbckkbckkbc
    • data.replace(/a/ig,'kk');//kkbckkbckkbc
  • ex)
    • data="abc123abzdkk"
    • data.replace(/[a-z]/g,"")//범위
    • /a-z/  만하게 되면 a,-,z하나씩만 찾아 바꾼다.
    • /a-zA-Z0-9ㄱ-힣]/g 단,특수문자는 범위가 없어 다 써주어야 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     function regexp(){
           var data="abcㄱdef123가a나다ABC!~$zzz햏";
           
           var output="원본 : "+data+"<br/>";
           output+="가장 처음 등장하는 문자 하나 삭제  <strong>"+data.replace(/a/,"")+"</strong><br/>";//슬래쉬안에는  "도쓰지 않는다.슬래쉬를 넣는순간 정규식이 되는거고 없으면 그냥변수
           
           output+="특정 소문자 삭제  <strong>"+data.replace(/a/g,"")+"</strong><br/>";
           output+="특정 대소문자 삭제  <strong>"+data.replace(/a/ig,"")+"</strong><br/>";
           output+="모든 소문자 삭제  <strong>"+data.replace(/[a-z]/g,"")+"</strong><br/>";
           output+="모든 대문자 삭제  <strong>"+data.replace(/[A-Z]/g,"")+"</strong><br/>";
           output+="모든 숫자 삭제  <strong>"+data.replace(/[0-9]/g,"")+"</strong><br/>";
           output+="모든 한글 삭제 <strong>"+data.replace(/[ㄱ-힣]/g,"")+"</strong><br/>";
           
           document.getElementById("output").innerHTML=output
     }//regexp
     function chk(){
           var obj=document.frm;
           var txt1=obj.txt1.value;
           
           //대소문자만 입력했는지 체크
           if(txt1.replace(/[a-z]/ig,"")!=""){
                alert("영문자만 입력 가능.");
           }//end if
           
           var txt2=obj.txt2.value;
           //숫자만 입력했는지 체크
           if(txt2.replace(/[0-9]/g,"")!=""){
                alert("숫자만 입력 가능.");
           }//end if
           
           var txt3=obj.txt3.value;
           //숫자만 입력했는지 체크
           //if(txt3.replace(/[a-zA-Zㄱ-힣0-9]/g,"")==""){
          if(txt3.replace(/[~!@#$%^&*()_+-=<>,.:;?/{}|\]/g,"")!=""){
                alert("특수문자만 입력 가능.");
           }//end if
           
     }//chk
</script>
</head>
<body>
     <input type="button"value="클릭" class="btn"  onclick="regexp()"/>
     <form name="frm">
     
     <label>대문자와 소문자만 입력가능</label>
     <input type="text" name="txt1" class="inputBox"/><br/>
     
     <label>숫자만 입력가능</label>
     <input type="text" name="txt2" class="inputBox"/><br/>
     
     <label>특수문자만 입력가능</label>
     <input type="text" name="txt3" class="inputBox"/><br/>
     
     <input type="button" value="클릭" class="btn"  onclick="chk()"/>
     </form>
     
     <div id="output"></div>
</body>
</html>



*페이지 이동(유효성 검증)
  • window.location이라는 객체 사용
  • window.location.href="URL";     //==<a href="  ">-뒤로 가기 가능, a tag는 get방식이었던것 처럼 이것도 get방식 post는 post라고 썻을때만!
  • window.location.replace("url");   //get방식 -뒤로가기 불가능!
  •  
  • //<<페이지 이동+폼태그의 서브밋기능
  • <form>태그 전체에 해당되어


<submit>//<<바로 전송해 버림
submit기능 : <form>태그가 감싸고 있는 모든 HTML Form Control의 값을 가지고 전송.
document.폼이름.submit();
//값을 넘기려면 꼭 submit으로

*경고성 정보 팝업
  • alert("경고성 정보"); //메세지[확인]
*사용자의 의중 묻기
  • confirm("메세지");   //메세지[예][아니요]-true/false


*<map>
  • 이미지를 자르지 않고 특정좌표에 링크를 생성하는 태그
  • //조각조각 자르지 않고 여러 링크를 넣는게 가능해짐
  • <map id=" " name=" " >//id와 name은 거의 같은 값이 들어간다.
          <area shape="rect" coords="x1, y1(시작점), x2, y2(끝점)" href="url" title="tool tip text_풍선도움말" />
                 ......
  • </map>
  • =>좌표와 링크 를 이 안에서 설정 (시작점과 끝점 좌표를 설정하여 그 안을 클릭되게 만들어줌.)

  • 사용할 이미지
  • <img src="이미지 경로" usemap="#mapid"/>
  • 이렇게 링크가 생긴다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     function pageMove(sel){
           //alert(sel.value);
           if(sel.selectedIndex !=0){//선택한 옵션이 처음 옵션이  아닐 때
                if(confirm(sel.value+"사이트로  이동하시겠습니까?")){
                     //location.href="http://"+sel.value;  //GET방식으로 이동 - 뒤로가기 가능
                     location.replace("http://"+sel.value);  //GET방식으로 이동 - 뒤로가기 불가능
                     //<<그냥 링크타고 들어갈땐 href 로그인 하고  뒤로갈때는 replace
                     
                }//end if
           }//end if
     }//pageMove
     
     function office(off_name,url){
           if(confirm(off_name+"사이트로 이동하시겠습니까?")){
                location.href=url;
           }//end if
     }//office
</script>
</head>
<body>
     <!-- this: 이벤트를 발생시킨 특정 HTML Form Control태그 자신  -->
     <!-- <input type="text" onkeyup="alert(this.value)"/>
     <input type="button" value="클릭"  onclick="alert(this.value)"/>
     <input type="radio" value="선택"  onclick="alert(this.value)"/>선택<br/>-->
      <select onchange="pageMove(this)">
           <option>---자주가는 사이트---</option><!-- 크롬은  옵션사이 값이 출력..?? -->
           <option value="daum.net">다음</option>
           <option value="naver.com">네이버</option>
           <option value="google.com">구글</option>
           <option value="drive.google.com">구글드라이버</option>
           <option value="rgo4.com">알고사</option>
           <option value="nate.com">네이트</option>
     </select>
     
     <div>
     <!-- 이미지를 자르지 않고 특정 좌표에 링크를 설정할 경우  사용하는 tag -->
           <map id="seoulMap" name="seoulMap">
<!--            <area shape="rect" coords="295,265,332,280"  title="강남구청" alt="강남구청" target="new새창"  href="http://www.gangnam.go.kr/main.do">
                <area shape="rect" coords="145,235,190,250"  title="영등포구청" alt="영등포구청"  href="http://www.ydp.go.kr/main/main.do">
                <area shape="rect" coords="325,77,360,95"  title="노원구청" alt="노원구청" href="http://www.nowon.kr/">
                <area shape="rect" coords="85,270,117,288"  title="구로구청" alt="구로구청"  href="http://www.guro.go.kr/www/NR_index.do">
-->
                <area shape="rect" coords="295,265,332,280"  title="강남구청" alt="강남구청"  onclick="office('강남구청','http://www.gangnam.go.kr/main.do')">
           <!--  href="office('강남구청','http://www.gangnam.go.kr/main.do')"은  HTML영역이라 가지 않는다.office는 다른영역이라 불리지  않음!(그래서404) on~자바스크립트영역이라 부를수 있었던것 -->
                <area shape="rect" coords="145,235,190,250"  title="영등포구청" alt="영등포구청"  href="javascript:office('영등포구청','http://www.ydp.go.kr/main/main.do')">
           <!-- 속성값의 영역변경 : HTML영역에서  javascript영역으로 변경할 때에는 javascript: 을 붙여준다  =>onxxx를 쓴것과 동일하게 됨/요즘엔 잘쓰지 않는다...-->
                <area shape="rect" coords="325,77,360,95"  title="노원구청" alt="노원구청" href="javascript:office('노원구청','http://www.nowon.kr/')">
                <area shape="rect" coords="85,270,117,288"  title="구로구청"  alt="구로구청"  href="javascript:office('구로구청','http://www.guro.go.kr/www/NR_index.do')">
           </map>
           
           <img src="images/map.gif" usemap="#seoulMap"/>
     </div>
</body>
</html>



*meta tag
<!DOCTYPE html>
<html>
<head>
<!-- meta: HTML내 charset설정, head태그 사이에서만 사용 -->
<meta charset="UTF-8">
<!-- 검색엔진에 사이트의 설명을 제공하는 경우  -->
<meta name="discription" content="국비지원 무료교육,java,,,">
<!-- 일정시간 이후 페이지를 이동해야하는 경우
     <meta http-equiv="refresh" content="초;url"/>
-->
<meta http-equiv="refresh" content="5;http://sist.co.kr">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
     window.onload=function(){
           pageMove();
     }//function
     var cnt=0;
     function pageMove(){
           cnt++;
           if(cnt==5){
                location.href="http://sist.co.kr";
           }//end if
           setTimeout(pageMove(),1000);
            /* 이렇게 이동하는것보다 meta tag를 이용하는게 낫다! */
     }//pageMove
     
</script>
</head>
<body>
     접속하신 http://test.com은 2019년 2월 15일 부터  http://sist.co.kr로 도메인이 변경됩니다.<br/>
     5초후에 사이트를 이동합니다.<br/>
     바로 이동하실려면 <a href="http://sist.co.kr">여기</a>를  눌러주세요.
</body>
</html>


 

반응형
저작자표시 비영리 변경금지

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

80일차-javaScript_회원가입 유효성 검증(더해야 함)  (0) 2019.02.20
79일차-javaScript_페이지 이동 방법과 popup창  (0) 2019.02.19
77일차-JavaScript_함수  (0) 2019.02.17
76일차-JavaScript_값  (0) 2019.02.15
75일차-Javascript_함수(function)  (0) 2019.02.14

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글78일차-JavaScript+a

관련글

티스토리툴바