자바스크립트를 이용하여,
구구단을 구현하는 예제입니다.
예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.
구현 방법
1. 순수 자바스크립트
2. vue.js
2. vue.js
화면 결과
1. 순수 자바스크립트
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1. 변수 선언
let num1 = Math.ceil(Math.random() * 9);
let num2 = Math.ceil(Math.random() * 9);
let answer = num1 * num2;
//2. 화면 구성
//제목
let title = document.createElement('h1');
title.textContent = '구구단';
document.body.append(title);
//문제: x 곱하기 x 는?
let word = document.createElement('div');
word.textContent = `${num1} 곱하기 ${num2}는?`
document.body.append(word);
//정답 form
let form = document.createElement('form');
document.body.append(form);
let input = document.createElement('input');
form.append(input);
//정답 입력 후 확인 버튼
let btn = document.createElement('button');
btn.textContent = "클릭"
form.append(btn);
//결과
let result = document.createElement('div');
document.body.append(result);
//3. form 이벤트리스너 함수
form.addEventListener('submit', function(event) {
//console.log(input.value, answer);
event.preventDefault();
if (Number(input.value) === answer) { //Number를 이용하여 string을 number로 변환
result.innerHTML = "딩동댕";
//문제 새로 내기
num1 = Math.ceil(Math.random() * 9);
num2 = Math.ceil(Math.random() * 9);
word.textContent = `${num1} 곱하기 ${num2}는?`
answer = num1 * num2;
input.value = '';
input.focus();
} else {
result.innerHTML = "땡";
input.value = '';
input.focus();
}
});
</script>
</body>
</html>
2. vue.js
간단한 구현 내용으로 vue.js cdn을 설치하였습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script> //vue.js cdn설치
</head>
<body>
<div id="app">
<h1>구구단</h1>
<div> {{ num1 }} 곱하기 {{ num2 }} 는?</div>
<form @submit.prevent="checkFn">
<input type="text" v-model="value" ref="input" />
//focus() 처리를 위하여 ref 사용
<button>결과</button>
</form>
<div>{{result}}</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
num1: Math.ceil(Math.random() * 9), //1-9까지 랜덤 숫자
num2: Math.ceil(Math.random() * 9), //1-9까지 랜덤 숫자
value: "",
result: "",
},
methods: {
checkFn() {
if (this.num1 * this.num2 === parseInt(this.value)) {
this.result = "딩동댕"
this.value = ""
this.$refs.input.focus(); //$refs.ref이름으로 focus() 사용
this.num1 = Math.ceil(Math.random() * 9);
this.num2 = Math.ceil(Math.random() * 9);
} else {
this.result = "땡"
this.value = ""
this.$refs.input.focus();
}
}
}
})
</script>
</body>
</html>
parseInt()
String을 Number 타입으로 바꾸는 함수 입니다.
타입을 바꾸기 위해 Number() 또는 String()을 사용하기도 합니다.
parseIng() 예제
parseInt("10"); // 10
parseInt("-10") // -10
parseInt("10.5"); // 10
parseInt(" 10"); // 10
parseInt("10 "); // 10
parseInt("k10"); // NaN
parseInt(""); // NaN
vue.js의 예제에서
console.log(typeof (this.num1 * this.num2), this.value) 로 확인을 해보면
결과는 this.num1 * this.num2는 number, this.value는 string 입니다.
parseInt()로 this.value를 Number로 변환 시켜주었습니다.
반응형
'개발 > Javascript' 카테고리의 다른 글
| [js] 자바스크립트로 숫자야구 게임 구현하기 (0) | 2020.12.18 |
|---|---|
| [js] 자바스크립트로 끝말잇기 구현하기 (0) | 2020.12.16 |
| [js] 자바스크립트로 검색 기능 구현하기 (9) | 2020.12.07 |
| [js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) (2) | 2020.12.06 |
| [js] 자바스크립트 map(), filter() 사용법(ft. 배열) (0) | 2020.12.03 |
댓글