[JavaScript] 개념 정리 - 문자열 함수, 타이머, Math함수(+난수생성하기)

문자열 함수

 

charAt

: 문자열에서 특정 인덱스 번호에 해당하는 문자가 무엇인지 반환해준다.

 

사용예시)

    <h1>String</h1>
    <h2>chartAt</h2>
    <script>
        var str = 'hello world';
        document.write(str.charAt(4));
    </script>

chartAt o

'h'가 0번의 인덱스 번호를 가지고 있기 때문에 4번은 'o'라고 출력이 되고 있다.

 

 

 

 

 

IndexOf, search

: 문자열에서 특정 문자가 있다면 해당 문자의 인덱스번호를 반환해준다.

 

사용예시)

    <h2>IndexOf, Search</h2>
    <script>
        var str = 'hello world';
        document.write(str.indexOf('world'), str.search('world'));
        // 출력 : 66 (빈 공간에도 인덱스 번호가 있다.) 없다면 -1 출력
    </script>

 

 

 

 

 

concat

: 배열을 병합할 때도 사용한 concat 함수. 문자열을 병합할 때도 사용 가능하다.

 

사용예시)

    <h2>concat</h2>
    <script>
        let str = 'hello world';
        let str2 = 'welcome universe';
        let str3 = str.concat(str2);
        document.write(str3);
    </script>

concat hello worldwelcome universe

 

 

 

 

 

replace

: 문자열에서 특정 문자를 다른 문자로 변경할 때 사용한다.

 

사용예시)

    <h2>replace</h2>
    <script>
        let str = 'hello world';
        let str2 = 'welcome universe';
        let str3 = str2.replace('welcome','bye');
        //welcom에서 bye로 변경하며 변수 str3에 저장 
        document.write(str2+'<br>');
        document.write(str3+'<br>');
        // 변수 str2의 값은 변동이 없고 str에는 변경된 값이 저장
    </script>

replace welcome universe bye universe

 

 

 

 

 

slice

: 인덱스 번호에 해당하는 문자열을 추출해준다.

  숫자 두개를 입력하는데 첫 번째 숫자부터 두번째 숫자까지의 값을 추출한다.

 

사용예시)

 

    <h2>slice</h2>
    <script>
        let str = 'hello world';
        let str4 = str.slice(0,5);
        // 변수 str의 값에서 인덱스 번호에 해당하는 값을 추출하여 str에 할당
        document.write(str+'<br>');
        document.write(str4+'<br>');
        // 유의할 점은 0,5에서 5는 5번인덱스까지가 아니라 그 앞번호까지의 값을 추출함
     </script>

slice hello world hello

 

 

 

 

 

split

: 분리되어 있지 않은 문자열에서 특정 문자열의 패턴을 이용하여 문자열을 분리하여 배열로 생성해준다.

 

사용예시)

    <h2>split</h2>
    <script>
        let org = 'html/css/javascript'; // 하나의 문자열로 값을 지정
        let new1 = org.split('/'); // org 변수의 문자열을 슬래시로 구분하여 배열생성
        document.write(new1);
        console.log(org, new1);
    </script>

split html,css,javascript

.개발자 도구로 확인해보면 org변수는 문자로 출력되고 있고, 변수 new1은 배열로 출력된 것을 볼 수 있다.

 

 

 

 

length

: 변수 안에 값의 길이, 즉 문자의 개수를 알려준다.

 

사용예시)

    <h2>length</h2>
    <script>
        let str = 'hello world';
        document.write(str.length);
    </script>

length 11

공백까지 포함해서 총 11개라고 출력되었다.

 

 

 

 

 

setTimeout

: 시간을 한 번 세팅하고 그 시간이 소모되면 특정 작업을 한 번 수행하는 함수

 

문법 setTimeout(할 일, 시간);    할 일 = 함수 = function(){}    시간은 millisecond 천분의 1초, 1000 = 1초

 

사용예시)

    <h2>setTimeout</h2>
    <script>
        setTimeout(function(){
            alert('반갑습니다');
        } ,4000);
    </script>

 

4초 후에 경고창이 뜬다

 

 

 

 

 

clearTimeout

: 함수로 지정한 할 일을 특정 상황에 따라 멈춰야 할 때 사용한다.

    <h2>setTimeout</h2>
    <script>
        // setTimeout(function(){
        //     alert('반갑습니다');
        // } ,4000);

        let timer = setTimeout(function(){
            aleart('반갑습니다');
        }, 4000);

        clearTimeout(timer);
    </script>

setTimeout으로 지정했던 작업을 변수 timer에 할당한 후 멈출 수 있다.

이미 celarTimeout을 실행했기 때문에 더이상 경고창이 뜨지 않는다.

 

 

 

 

 

setInterval

: 일정 시간마다 반복적으로 지정한 코드를 실행한다.

  웹페이지에서 자동으로 슬라이드가 넘어가는 효과는 이 함수로 작성하는 것!

 

사용예시)

    <h2>setInterval</h2>
    <script>
        setInterval(function(){
            alert('반갑습니다');
        }, 4000); 
        // 확인을 눌러도 4초마다 계속 뜨는 경고창이 생성됨
    </script>

clearTimeout과 마찬가지로 해지하려면

멈추려는 대상의 이름을 매개변수로 지정 후 clearInterval함수를 사용하면 된다.

 

 

 

 

 

Math 함수

함수	설명	예시
Math.abs	숫자를 절댓값(양수)으로 반환	Math.abs(-7.5); 결과: 7.5
Math.ceil	소수점을 무조건 올려서 반환	Math.ceil(7.1); 결과: 8
Math.floor	소수점을 무조건 내려서 반환	Math.floor(7.6); 결과: 7
Math.round	소수점을 반올림하여 반환	Math.round(7.6); 결과: 8
Math.random	0에서 1사이의 난수를 반환

 

Math.random

사용예시)

    <h2>Math.random</h2>
    <script>
        let randomNum = Math.random();
        document.write(randomNum);
    </script>

Math.random 0.04732507444602829

 

새로고침할 때마다 새로운 값(0에서 1사이의 소수점)이 출력된다

 

 

 

 

 

난수 생성하기

: 숫자 0에서 7사이의 난수를 생성하기

  웹페이지에서 페이지에 접속했을 때 슬라이드, 상품, 기사 등을 랜덤으로 출력하는 것에 응용한다.

 

사용예시)

    <h2>난수 생성하기</h2>
    <script>
        let ranNum = Math.random() * 10;
        //10을 곱하여 소수점을 한자리의 숫자로 올린다.
        let ranNum2 = Math.floor(ranNum);
        //소수점을 무조건 내려서 소수점을 버린다.
        //여기까지하면 0~9까지 생성이 된다.
        let ranNum3 = ranNum2 % 8;
        //ranNum2에 저장된 값을 8로 나눈 나머지가 저장이 된다.
        //최대값을 산정해보면 8%8은 0이며, 7%8은 7이 그대로 남아서 7이 된다.
        document.write(ranNum2);
    </script>