JavaScript 정리 07

13 Feb 2019

Reading time ~4 minutes

JavaScript 정리 07 - 함수사용

함수

데이터형 반환

typeof()

경고창

alert()

출력

document.write()
document.writeln()
console.log()

정수

parseInt()

Math클래스

수학관련 클래스로 여러 함수가 존재

Math.abs()    // 절대값
Math.round()  // 반올림, 무조건 소수점이하 첫번째 자리에서 반올림
Math.ceil()   // 올림
Math.floor()  // 내림
Math.random() // 난수발생

문자열 함수

글자수(길이)는 속성으로 제공
- 함수가 아니다! “()”붙이면 에러발생

변수명.length

대문자 변환

변수명.toUpperCase()

소문자 변환

변수명.toLowerCase()

문자 하나 얻기

변수명.charAt(인덱스)

인덱스 얻기
- 자바처럼 startsWith는 없지만 lastIndexOf는 사용가능

변수명.indexOf('문자열')
변수명.lastIndexOf('문자열')

자식문자열 얻기

변수명.substring(시작인덱스, 끝인덱스+1);

앞 뒤 공백제거

변수명.trim()

특정문자로 구분하여 배열로 얻기

변수명.split('구분할문자열')

치환
- 가장 먼저 찾아지는 문자열만 바꾼다.
  - Java에선 모든 문자열을 바꾼다.

변수명.replace('찾을문자열', '변경할문자열');

재귀호출 함수

thread와 비슷, 지정된 시간마다 함수를 호출

setTimeout(호출할함수, ms)

날짜

Date클래스 사용
날짜는 서버의 날짜가 아니라 접속자의 날짜정보를 사용한다.
- 접속자별로 시간이 다르게 나올 수 있다!
  - 멱등성 위배
    - (위키) 멱등법칙, 멱등성(idempotent) : 수학이나 전산학에서 연산의 한 성질, 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미.

// 1. 생성
var 객체명 = new Date();

// 2. 함수호출
객체명.getYear()      // 1900을 더해줘야 현재연도가 나옴(잘안쓰임)
객체명.getFullYear()  // 현재연도
객체명.getMonth()+1   // 월, 자바처럼 0월부터 시작(+1 해야함)
객체명.getDay()       // 일

객체명.getHours()     // 시간
객체명.getMinutes()   // 분
객체명.getSeconds()   // 초

함수 사용 예제

<style type="text/css">
     #btnDiv { height:40px; }
     #output { 
          width:400px; 
          height:200px; 
          border:1px solid #333;  
          overflow:auto;/*스크롤바*/ 
     }
</style>

<body>
<div id="btnDiv">
     <input type="button" value="수학함수" onclick="useMath()"/>
     <input type="button" value="문자열함수" onclick="useString()"/>
     <input type="button" value="날짜함수" onclick="useDate()"/>
     <input type="button" value="재귀호출함수" onclick="useRecursive()"/>
</div>
<div id="output"></div>
</body>

<script type="text/javascript">
     // 함수 사용
     function useMath() {
          var divNode = document.getElementById("output");
          var output = "";
          
          var i = -2;
          output += i+"의 절대값 : "+Math.abs(i)+"<br/>";
          
          i = 0.45;
          output += i+"의 반올림: "+Math.round(i)+"<br/>";
          
          i = 0.35;
          output += i+"의 올림: "+Math.ceil(i)+"<br/>";
          
          i = 13.8;
          output += i+"의 내림: "+Math.floor(i)+"<br/>";
          
          divNode.innerHTML = output;
     }
     
     function useString() {
          var divNode = document.getElementById("output");
          var output = "";
          
          var msg = "오늘은 수요일입니다. 수AbCdeF";
          output += msg+"의 글자수 : "+msg.length+"<br/>";
          output += msg+"의 모두 대문자 : "+msg.toUpperCase()+"<br/>";
          output += msg+"의 모두 소문자 : "+msg.toLowerCase()+"<br/>";
          
          output += msg+"에서 '수'글자의 인덱스 :  "+msg.indexOf("수")+"<br/>";
          // indexOf()는 L->R, lastIndexOf()는 R->L
          output += msg+"에서 '수'글자의 인덱스 :  "+msg.lastIndexOf("수")+"<br/>";
          output += msg+"에서 '화'글자의 인덱스 :  "+msg.indexOf("화")+"<br/>"; // 없으면 -1 출력
          
          // 특정 인덱스에 해당하는 문자하나 얻기
          output += msg+"에서 5번째 인덱스의 문자열 : "  +msg.charAt(4)+"<br/>";
          // 인덱스 사이에 해당하는 자식문자열 얻기 :  substring(시작인덱스,끝인덱스+1);
          output += msg+"에서 4~6번째 인덱스의 자식문자열 : "  +msg.substring(4,6+1)+"<br/>";
          
          // 특정문자로 구분하여 배열로 얻기
          msg = "노진경,김희철.김정윤,박영민,최지우";
          var arrData = msg.split(",");
          
          var sa = 1;
          for(var i=0; i<arrData.length; i++) {
               output+= "<marquee  scrollamount="+sa+">"+arrData[i]+"</marquee><br/>"
               sa+=3;
          }
          
          // 앞 뒤 공백제거
          msg = "  A Bc   ";
          output += "["+msg+"]에서 앞 뒤 공백 제거 : ["  +msg.trim()+"]<br/>";
          // 특정 문자열 치환 : L->R 진행하면서 가장 먼저 나오는  문자열 하나만 치환
          msg = "김정윤,박영민,노진경,김희철,오영근";
          output += "["+msg+"]에서 '영' 제거 : ["  +msg.replace("영","호")+"]<br/>";
          
          divNode.innerHTML = output;
     }
     
     function useDate() {
          var divNode = document.getElementById("output");
          var output = "";
          
          // 날짜정보는 접속자 컴퓨터의 시간정보.(접속자 마다 다른  날짜 정보가 얻어질 수 있다.)
          var date = new Date();
          
          output+=date+"<br/>";
          // getYear()는 1900더해야 현재 연도가 나옴
          output+=date.getYear()+"<br/>";
          // 년 월 일
          output+=date.getFullYear()+" "+(date.getMonth()+1)+"  "+date.getDay()+"<br/>";
          
          output += "시 : "+date.getHours()+"<br/>";
          output += "분 : "+date.getMinutes()+"<br/>";
          output += "초 : "+date.getSeconds()+"<br/>";
          divNode.innerHTML = output;

          if(date.getSeconds() == 50){
               useRecursive();
          }
          
          // 재귀호출함수, 지정한 시간에 함수를 호출해주는 함수  setTimeout(함수명, msg)
          setTimeout(useDate, 1000);
     }
     
     function useRecursive() {
          var divNode = document.getElementById("output");
          var output = "<img src='../common/image/img2.jpg'>";
          divNode.innerHTML = output;
     }
</script>

HTML5 지원 속성

autofocus속성을 주면 커서가 이동하고 시작됨

<input type="text" autofocus="autofocus" />

tabindex 속성
- 탭을 눌렀을 때 다음에 이동할 태그순서를 명시가능

tabindex="1" // 1,2,3...

JS에서 커서를 요청할 때

커서 이동시키기

document.폼이름.control명.focus();

이벤트

window.event객체를 사용하여 처리
onOOO 제공한다.(onclick, onchange, … )
window.event.keyCode 또는 window.event.which로 키보드이벤트 처리할 때 눌린 키의 키값을 얻을 수 있다.
- 함수는 onkeydown, onkeyup, onkeypress에 의해 호출
- 이벤트리스너 keydown, keyup, keypress에 의해 호출

function 함수명() {
    // 키코드값얻기(which와 keyCode 결과는 동일)
    window.event.keyCode
                .which
}

숙제

this와 정규식을 사용한 풀이

<body>
<div>
      <form name="frm">
      <input type="text" name="input" value="abcy12Ab3456Z"/>
      <input type="button" id="lowerCase" value="소문자" />
      <input type="button" id="upperCase" value="대문자" />
      <input type="button" id="number" value="숫자" />
      </form>
</div>
<div id="output"></div>
</body>

<script type="text/javascript">
      window.onload = function() {
            document.getElementById("lowerCase").addEventListener("click",  viewCase);
            document.getElementById("upperCase").addEventListener("click",  viewCase);
            document.getElementById("number").addEventListener("click",  viewCase);
      }
      
      function viewCase() {
            var obj = document.frm;
            var divNode = document.getElementById("output");
            var data = obj.input.value;
            var output = "";
            
            console.log("???");
            if (this.value == '소문자') {
                  output += "소문자 : "+data.replace(/[A-Z0-9]/g,"");
            } else if (this.value == '대문자') {
                  output += "대문자 : "+data.replace(/[a-z0-9]/g,"");
            } else if (this.value == '숫자') {
                  output += "숫자 : "+data.replace(/[A-Za-z]/g,"");
            }
            
            divNode.innerHTML = output;
      }
</script>

JavaScript