• setInterval
  • dom
  • 객체
  • length

1) setInterval

어제 잠깐 배웠던 setInterval를 활용해 간단한 출력을 해보았다.

    <script>
        'use strict';
        
        let cnt = 0;
        const make=()=>{
            document.write(`출력 : ${cnt} <br>`)
            cnt++;
        }
        setInterval(make, 1000);
    </script>

make함수를 1000(1초)의 인터벌을 두어 호출하게 된다.

처음엔 0이었던 cnt가 출력이 되고 ++로 인해 1씩 늘어나 출력이 된다.

 

2-1) dom#1

    <script>
        'use strict';
        let dom = document.querySelector('.box')
        let btn = document.querySelector('button')

        btn.addEventListener('click', function(){
            dom.innerHTML = '안녕';
        })
    </script>

button인 btn을 click 하면 dom인 box안에 안녕이 추가된다.

 

2-2) dom#2

        let dom = document.querySelector('.box');
        let btn1 = document.querySelector('.btn1')
        let btn2 = document.querySelector('.btn2')

        let cnt = 0;
        let timerID = null, interval = 1000;

        dom.innerHTML = cnt;
        
        function make(){
            cnt++;
            dom.innerHTML = cnt;
        }
        btn1.addEventListener('click', function(){
            clearInterval(timerID);
        })
        btn2.addEventListener('click', function(){
            timerID = setInterval(make , interval);
        })

시작 button을 누르면 make함수가 1초의 인터벌을 두고 실행되고 중지 button을 누르면 정지하게 된다.

 

3) 객체

객체는 각종 사물을 정의한 뒤 키값과 메서드 값을 넣을 수 있다.

let colors = {
    red : 'red',
    green : 'green',
    blue : 'blue'
}

let gold = 'gold';
colors[gold] = gold;

// 객체명은 변수규칙과 동일하다
console.log(`colors객체명 안에 red키 값 : ${colors.red}`);
console.log(`colors객체명 안에 green키 값 : ${colors['green']}`);
console.log(`colors객체명 안에 blue키 값 : ${colors['blue']}`);
console.log(`colors객체명 안에 gold키 값 : ${colors['gold']}`);



colors객체명 안에 red키 값 : red
colors객체명 안에 green키 값 : green
colors객체명 안에 blue키 값 : blue
colors객체명 안에 gold키 값 : gold

colors객체 안에 red, green, blue 키를 넣은 후 각각 값을 부여했다.

그리고 추가로 gold를 정의하고 colors[gold]로 colors객체에 추가했다.

키의 값을 호출할 땐 colors.red 또는 colors['red']로 호출할 수 있다.

 

    <script>
        'use strict';
        let dog = {
            name : '황구',
            age : 2,
            color : '갈색',
            addr : '영통구',
            food : '고구마'
        }
        document.write(`이름 : ${dog.name} <br>`);
        document.write(`나이 : ${dog.age} <br>`);
        document.write(`색상 : ${dog.color} <br>`);
        document.write(`주소 : ${dog.addr} <br>`);
        document.write(`음식 : ${dog.food} <br>`);
    </script>

객체

이처럼 객체의 원하는 키 값만 출력할 수 있다.

 

메서드는 객체의 행동이다.

    <script>
        'use strict';
        let cat = {
            name : '흰둥이',
            age : 3,
            color : '흰색',
            food : '츄르',

            // this - 객체 자기 자신(cat)
            eat : function(){
                document.write(`${this.name}는 ${this.food}을 먹는다 <br>`);
            },
            sleep : function(){
                document.write(`${this.name}는 잠을 잔다 <br>`);
            },
            run : function(){
                document.write(`${this.name}는 달린다 <br>`);
            }
        }
        document.write(`이름 : ${cat.name} <br>`);
        document.write(`나이 : ${cat.age} <br>`);
        document.write(`색상 : ${cat.color} <br>`);
        document.write(`음식 : ${cat.food} <br>`);
        document.write(`-----------------------<br>`);

        // 메서드 : 객체.메서드()
        // 함수() : 객체가 존재하지 않는다

        cat.eat();
        cat.sleep();
        cat.run();
    </script>

메서드

메서드에는 함수가 들어갈 수 있으므로 메서드를 출력하면 각 메서드의 함수들이 호출된다.

 

4) length 

    <script>
        'use strict';
        let x = prompt('글자를 입력하세요.')

        document.write(`글자수 : ${x.length}`);
    </script>

공백과 .이 포함되어 12라는 결괏값이 출력됐다.

이를 이용해 여러 예제에 적용이 가능하다.

    <script>
        'use strict';
        let userid;

        userid = prompt('아이디를 입력하세요.');
        if(userid.length>=8 && userid.length<=12) {
            alert('사용 가능한 아이디입니다.');
        } else {
            alert('8 ~ 12 글자 사이 다시 입력하세요.');
        }
    </script>

prompt로 입력을 받은 userid의 length가 if문의 조건에 따라 다른 alert창이 나오게 된다.

 

    <script>
        'use strict';
        let code;
        code = prompt(`코드 번호 입력`);
        let len;
        let m="";
        len = code.length;
        for (let i = 0; i+len < 6; i++) {
            m= '0'+m;
        }
        document.write(m+code);
    </script>

code를 받아 총 6자리의 제품번호로 변환하고 싶을 때 length를 사용하면 된다.

code의 자릿수를 확인한 후 for문의 i와 합쳐 6이 될 때까지 m을 늘려간다. 

m=0

m=00

m=000

...

그 후 처음 받았던 code와 합치면 6자리 숫자로 출력된다.

티스토리툴바