문제1. 버튼 클릭시 카운트 올리는 코드 작성
문제2. 올린 카운트 줄이기(if문장으로 0이하로 내려가지 않게 처리하세요)
문제3. 카운트 리셋하기
목적1. if 구문은 여러가지 방법으로 작성할 수 있다.
목적2. HTML 문서 객체에 접근하여 변경할 contents를 변경할 수 있다.
목적3. 전역변수와 지역 변수가 어떻게 활용되는지 파악할 수 있다.
목적4. HTML문서객체와 javascript의 동작 원리를 파악할 수 있다.
풀이
자바스크립트를 동작 시킬 수 있는 버튼을 만들고, 동작된 javascript가 입력될 수 있는 html 요소가 필요함.
1. 카운트가 입력되 수 있는 태그와 button을 만든다
button에 자바스크립트가 동작될 수 있도록 onclick 속성을 넣어준다.
<p>태그에 id속성을 줘서 javascript가 쉽게 해당 객체에 접근할 수 있도록 만들어준다.
2. javascript를 입력한다.
함수를 이용하여 버튼 클릭시 작성된 javascript 코드가 자동으로 실행될 수 있도록 한다.
변수는 전역 변수로 준다. 전역변수는 함수 안에서도 접근할 수 있다.
함수안에 지역 변수로 작성할 경우, 버튼으로 함수를 call 할때마다 변수가 리셋되어 카운트를 올리거나 내릴 수 없다.
답
<body>
<p>현재 카운트 : <strong id="count">0</strong></p>
<button onclick="countUp();">올리기</button>
<button onclick="countDown();">0이하로 내리기</button>
<button onclick="countDown2();">0까지만 내리기 ver.1</button>
<button onclick="countDown3();">0까지만 내리기 ver.2</button>
<button onclick="countRset();">리셋</button>
<script>
var count=0;
//1.카운트 올리기
var countUp=function(){
count=count+1;
document.querySelector("#count").innerText=count;
};
//2.0이하로 내리기
var countDown=function(){
count=count-1;
document.querySelector("#count").innerText=count;
};
//3.0까지만 내리기 ver.1
var countDown2=function(){
if(count>0){
count=count-1;
document.querySelector("#count").innerText=count;
}
};
//3.0까지만 내리기 ver.2
var countDown3=function(){
if(count!==0){
count=count-1;
document.querySelector("#count").innerText=count;
}
};
//4. 카운트 리셋
var countRset=function(){
count=0;
document.querySelector("#count").innerText=count;
};
</script>
</body>
'Javascript' 카테고리의 다른 글
| 버튼 클릭시 자동 계산 되도록하기 (0) | 2019.11.05 |
|---|---|
| 입력된 내용 출력하기 (0) | 2019.11.05 |
| javascript로 HTML 문서에 접근하고 contents변경해보기 (0) | 2019.11.05 |
| Function(함수) (0) | 2019.11.04 |
| Array (배열) (0) | 2019.11.04 |
