리액트를 해왔던 내가 실무에서 주어진 코드가 바닐라 자바스크립트.....라는걸....
알고난 후 다시 자바스크립트 강의를 듣고 있다.
듣는중 재미있는 퀴즈를 간단히 만들어봐서 기록한다.
이 퀴즈를 통해서 변수에 저장해서 클릭횟수나, 정답 입력횟수를 알려줄수 있다는걸 배웠다!
html 은 아래와 같다.
<p>태조이성계가 태어난 연도는?</p>
<input type="text" id="answer">
<button id="send-answer">제출</button>
<script>
우선 count를 초기값 0으로 만든다. (저장소)
-> 이걸 만드는 이유는 3번 틀리면 멍청이를 띄워야 하기때문!
그다음 클릭 이벤트 함수를 만들고
그안에 answer에 입력된 값을 유저답안 변수에 넣고
만약, 유저답안이 1335 와 같으면 alert으로 성공이라는걸 띄워줘
만약 3번 이상이거나 유저답안과 틀린 답이면 멍청아를 띄워줘 라는 이야기다.
var count = 0;
document.querySelector('#send-answer').addEventListener('click', function(){
count += 1;
var 유저답안 = document.querySelector('#answer').value;
if (유저답안 == '1335') {
alert('성공')
} else if (count >= 3 && 유저답안 != '1335'){
alert('멍청아')
}
});
이 게임을 만드는 과정을 통해서 변수를 만들어서 초기값을 만들어주고 저장하는 법을 배웠고.
만약이라는 if 문을 통해서 값을 내보낼수 있다는걸 배웠다!
하나하나 직접 코드를 짜는 맛이란 복잡하지만 나름 짜릿하다!
실무에 들어와 정말 하나하나 해나가는게 버겁지만 열심히 해봐야겠다!
2년후의 내가 궁금하다!
반응형
'javascript' 카테고리의 다른 글
switch문 사용법과 언제사용하는지? else if 와 비슷한 switch (0) | 2024.02.15 |
---|---|
javascript new 를 사용하는 이유 (0) | 2024.02.15 |
javascript로 button 만들어서 열고 닫기 만들기 (0) | 2023.12.04 |
진짜 모르겠는 함수 매개변수? 인수? 그게 뭔데 (0) | 2023.11.09 |
setInterval() , clearInterval() 이란 무엇일까 (0) | 2023.11.06 |