onclick 활용 복습해보기

Javascript 복습 할 겸 onclick을 활용하여 한번 클릭하면 홀수, 두번째 클릭하면 짝수라고 나오게 하려는 걸 연습해보자.

과거 메모장을 만든 페이지에서 학습하려고 한다.

그때 onclick으로 클릭하면 'Hello!'라는 메세지가 나오는 경고창이 열리게 함수를 만들었다.

 

<script>    
    function hey() {
        alert('Hello!')
	}
</script>

 

일단 카운트업을 해줘야한다. 클릭했을때 누군가는 수를 세어야 하니까.

<script>
    function hey() {
        let count = 1;
        alert('Hello!')
    }
</script>

그리고 조건문을 달아 주어야 한다. 짝수와 홀수를 어떻게 구분해야할까?

전에 기본문법 중 나눈값의 나머지를 알 수 있는게 있었다.

[4 % 2 ==] 4를 2로 나눈뒤의 나머지 값을 도출해라. 이런 모양 이였다.

 

이를 활용하여 조건문을 달아주자. alert 메세지도 바꿔주자.

<script>
    function hey() {
        let count = 1;
        if (count % 2 == 0) {
            alert('짝수!')
        } else {
            alert('홀수!')
        }
    }
</script>

카운터가 1부터 시작이며, 이를 2로 나눴을때 나머지가 0일 경우에 '짝수'라는 경고창이 뜨고, 그게 아닐경우 '홀수!'라는 경고창이 뜨게 만들었다.

 

이제 그 카운터를 키워야겠지?

<script>
    function hey() {
        let count = 1;
        if (count % 2 == 0) {
            alert('짝수!')
        } else {
            alert('홀수!')
        }
        count = count + 1;
    }
</script>

count = count + 1; 이라는 문구로 카운트는 매번 커지게 된다.

 

이를 좀 더 간략하게 쓰는 방법이 존재한다. count += 1; 이라고 입력하면 같은 뜻이다.

<script>
    function hey() {
        let count = 1;
        if (count % 2 == 0) {
            alert('짝수!')
        } else {
            alert('홀수!')
        }
        count += 1;
    }
</script>

 

동작을 확인해보자.

첫번째 클릭

 

두번째 클릭..?

 

세번째 클릭....????

모두다 홀수라고 나온다?..

 

다시 내가 만든 함수를 천천히 살펴보자.

<script>
    function hey() {
        let count = 1;
        if (count % 2 == 0) {
            alert('짝수!')
        } else {
            alert('홀수!')
        }
        count += 1;
    }
</script>

천천히 첫 줄부터 확인해 봐야겠다.

함수 안의 내용은 다음과 같다.

let count = 1; count에 1을 주고

if (count % 2 == 0) 만약에 2로 나눈값이 0이라면

alert (‘짝수!’) ‘짝수!’라는 경고창을 띄우고

else 그게 아니라면

alert(‘홀수!’) ‘홀수!’라는 경고창을 띄워라

count += 1; 카운트는 기존보다 +1 된다.

이런식으로 풀이 가능하다. 그러면 마지막줄이 실행되고 나서? 다시 맨 처음으로 돌아가겠지?

 

맨 처음은?

let count = 1; count에 1을 주고

...?

아?

점점 커져야 하는데, 마지막 줄로 +1이 되어봤자 다시 1을 줘버리니까 항상 홀수가 뜰 수 밖에 없다.

 

let count = 1; 를 매번 실행하지 않게 함수 밖으로 빼주면 문제가 해결된다.

<script>
	let count = 1;
    function hey() {
        if (count % 2 == 0) {
            alert('짝수!')
        } else {
            alert('홀수!')
        }
        count += 1;
    }
</script>

함수 hey()가 불려지더라도 let count = 1; 로 주어진 값은 바뀌지 않는다. 오히려 마지막 줄 count += 1; 으로 인해 커질 것 이다.

 

이렇듯이 변수를 함수안에서 선언해서 쓰다보면 그 함수가 새로 시작할때 매번 새로 시작하니 알아두면 좋다.

이런 변수를 전역변수라고 부른다. 함수와 상관없이 사용할 수 있는 함수이다.

 

수정을 했으니 동작을 다시 확인해보자.

첫번째 클릭

 

두번째 클릭

 

세번째 클릭

 

좋군, 이상 없이 잘 작동하고 있다.

 

---