마우스 클릭에 따른 숫자 증가
실습1
설계1
- p 태그와 button 태그를 이용하여 마우스를 클릭할 때마다 숫자를 증가시킨 것을 화면에 반영하고, 콘솔 창에는 클릭할 때마다 console.log()를 통해 “oops” 글자를 출력한다.
- innerText 활용
- getElementById() 및 querySelector() 활용
- Form에서 버튼을 클릭할 때마다 event.preventDefault()를 하지 않으면 지속적으로 렌더링이 발생되므로, event.preventDefault()를 사용한다.
코드1
⇒ vanilla-study.html
<!DOCTYPE html>
<html>
<body>
<h1>Review Vanilla JS</h1>
<form>
<p>total : 0</p>
<button id="btn">click</button>
</form>
</body>
<script>
let cnt = 0;
const btn = document.getElementById("btn");
const p = document.querySelector("p");
function handleClick() {
cnt += 1;
console.log("oops...");
p.innerText = `total : ${cnt}`;
}
btn.addEventListener(
"click",
() => (event.preventDefault(), handleClick())
);
</script>
</html>
화면1
실습2
설계2
- total을 보여주는 p 태그도 querySelector() 가 아닌 getElementById()로 해보면 어떨까 생각해서 변화를 줘 보았다.
코드2
⇒ vanilla-study.html
<!DOCTYPE html>
<html>
<body>
<h1>Review Vanilla JS</h1>
<form>
<p id="total">total : 0</p>
<button id="btn">click</button>
</form>
</body>
<script>
let cnt = 0;
const btn = document.getElementById("btn");
const p = document.getElementById("total");
function handleClick() {
cnt += 1;
console.log("oops...");
total.innerText = `total IS ${cnt}`;
}
btn.addEventListener(
"click",
() => (event.preventDefault(), handleClick())
);
</script>
</html>
화면2
실습 3
- 확실히 내 것으로 만들기 위해서 마지막 숫자 증가 코드 짜보기
코드 3
⇒ vanilla-study.html
<!DOCTYPE html>
<html>
<body>
<h1>This is Irish Web Page...</h1>
<form>
<span id="msg">Your clicked Number is 0...</span>
<button id="btn">Click!</button>
</form>
</body>
<script>
let counter = 0;
const msg = document.getElementById("msg");
const btn = document.getElementById("btn");
const controlBtnEvent = () => {
counter += 1;
console.log("You clicked the Button!");
msg.innerText = `Your clicked Number is ${counter}...`;
};
btn.addEventListener(
"click",
() => (event.preventDefault(), controlBtnEvent())
);
</script>
</html>
화면3
느낀점
이번 주제가 React를 본격적으로 복습하고 실습하기 이전에 vanilla JS를 복습하자는 생각이 강하게 들었던 이유 중에 하나다.
getElementById()는 자유롭게 사용할 수 있나? 사용자 정의 함수는 자유롭게 생성할 수 있나? addEventListener를 자유롭게 사용할 수 있나?가 궁금했다.
예전에 react 강의 말고 vanilla 강의를 들었을 때에도 이 개념을 배우기는 했지만, 그 당시에는 js 공부보다는 오히려 html과 css 공부를 했던 경향이 더 강했었다.
그러다 보니, 내가 이 vanill js의 기초적인 부분을 잘 이해하고 있는지 궁금했다. 당연히, 처음 시도를 했을 때는 강의 소스를 많이 참고했다.
하지만, 최대한 혼자 해결해보기 위해 원리 등을 파악하고자 했고 그 결과 3번만에 내 소스코드로 온전히 만들 수 있었다. 역시, 노력이 가장 중요한 것 같다는 생각이 든다.
#Software Engineer #IRISH