자바스크립트 #01 구구단 구현하기
개발환경
개발 툴
- VSCODE
플러그인
- Live Server (RUN시 브라우저가 열리면서 결과 확인 가능)
- code runner
자바스크립트도 다른 언어와 비슷하다.
처음에 자바스크립트를 봤을 때 웹을 만들기 위한 부가적인요소인 줄 알았다. CSS HTML과 함께 쓰여야 하는줄 알았음
그런데 이 또한 C C++ JAVA와 같이 하나의 언어이다.
자바스크립트만으로 로직을 구성할 수 있다.
자바스크립트에서 ==말고 ===으로 한다.
==는 자동으로 자료형을 변환하고, 값만 비교한다.
===는 자료형까지 비교한다.
5 == '5' -> true (문자와 숫자 비교인데 true가 나옴)
5 === '5' (false) 문자, 숫자 자료형이 다르기 때문에 false
이외에도 !=, !==도 마찬가지로 같은 결과가 나오니 JS에선 ==대신 ===을 사용한다.
변수는 var로
자바스크립트에서 숫자, 문자열, 객체 모두 var자료형으로 처리한다.
객체
JS에서 객체는 다음과 같이 선언한다.
var zero = {
firstName: 'water',
lastName: 'melon'
};
var zero = new Object();
zero.firstName = 'water';
zero.lastName = 'melon';속성(Property)
객체안의 멤버변수를 속성이라고 부른다. 더 나아가 콤마로 구분되는 것까지 속성이라고 한다.
위에서 (firstName: 'water', lastName: 'melon' )이 zero객체의 속성이다.
키, 값(value)
속성에서 firstName, lastName이 객체의 키, water,melon이 값이라고 부른다.
속성의 값에 접근하는 방법은 다음과 같다.
zero.firstName;
zero['firstName'];
zero.lastName;
zero['lastName'];객체안의 객체(속성)
객체안에 속성값으로 객체가 들어갈 수 있다. 그 방법은 아래와 같다.
var zero = {
body: {
height: 180,
weight: 67
}
};zero객체안에 body객체를 속성으로 정하여, 그 하위에 height, weight키와 180, 67 값을 갖는 객체를 생성한다.
배열
배열은 []로 감싼다.
var arr0 = new Array();
var arr1 = [];
var arr2 = [1, "Hello", [1,2,3], {hi:1}];배열안의 값을 요소라고 하고, 콤마로 구분한다.
요소에는 숫자, 문자열, 배열, 객체들이 들어갈 수 있다.와
배열의 길이를 선언할 필요 없다. 자동으로 늘고 줄어든다.
함수
여러 함수 표현식을 알아보자
function addOne(x){
var y = x + 1;
return y;
}var addOne = function(x){
var y = x + 1;
return y;
};구구단 구현하기
대략적인 개념은 알았으니 구구단을 직접 구현해보자.
구현할 로직은 다음과 같다.
- 랜덤한 문제를 출제한다.
- 답을 입력한다.
- 답이 맞는지 체크한 후 다시 1번으로 돌아간다.
설계
랜덤한 숫자를 제시하기 위해서 1~9까지의 랜덤 수를 가져오는 메소드나 로직을 사용한다.
랜덤한 구구단 문제를 내기 위해서 먼저 컴퓨터도 답을 알고 있어야한다.
내가 입력한 데이터와 정답을 검증해야한다.
정답이 검증되면 loop를 다시 돈다.
구현에 필요한 지식을 학습해보기
JS에서 HTML화면에 구구단 문제를 출력할 줄 알아야한다.
정답을 입력할 입력창을 만들어아햔다.
정답입력시 빈 칸이면 경고창을 출력해야한다.
오답일시 같은 문제에서 빈 입력창을 출력해야한다.
정답 제출 버튼을 만들어야한다.
HTML화면에서 받은 데이터를 JS에서 받아 검증할 수 있어야 한다.
먼저 HTML에 제출할 문제를 나타낼 요소들을 만들어보자.
전체화면에서 정중앙에 위치하려고 한다.
그러기 위해서 style설정을 진행해야한다.
div의 크기를 전체화면으로 설정하기 위해서 먼저 상위요소인 html, body 길이를 지정해주어야한다.
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
.wrapper{
width:100%;
height:100%;
background: pink;
}
.problem{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%)
}
</style>margin이 기본적으로 8px으로 설정되어있으므로 이를 지워준다.
출력될 문제를 중앙으로 정렬시키기 위해서 다음 방법을 이용했다.
https://nuli.navercorp.com/community/article/1132794?email=true
HTML요소에 접근하는 방법 (문제를 랜덤하게 출제하도록 내용 변경하기)
document.getElementByID('id') 메소드
괄호에 들어가는 문자열과 일치하는 id 속성을 가진 HTML요소를 찾고, 이를 나타내는 Element객체를 반환한다.
ID가 없는 요소에 접근하려면 Document.querySelector() -> 모든 선택자를 사용할 수 있다.
.innerHTML - element content의 내용을 변경한다.
document.getElementById("submit").onclick = function(){
document.getElementById("problemContent").innerHTML="Correct";
document.getElementById("problemContent").innerHTML="Wrong;
}submit라는 ID를 가진 요소를 찾고 해당 요소가 클릭되었을때 해당 함수를 수행한다.
problemContent요소의 내용을 다음 문자열로 변경한다.
이를 응용해서 버튼클릭시 난수를 발생시켜보자
var result;//정답
//min ~ max범위까지 난수생성
var generateRandom = function(min, max){
var numArr = new Array();
numArr[0]= Math.floor(Math.random() * (max - min + 1)) + min;
numArr[1]= Math.floor(Math.random() * (max - min + 1)) + min;
result = numArr[0] * numArr[1];
document.getElementById("problemContent").innerHTML=numArr[0] + " X " + numArr[1];
return numArr;
}
//start버튼을 클릭시 문제가 출제된다.
document.getElementById("start").onclick = function(){
var numArr = generateRandom(1, 9);
}
해당함수는 min, max를 인자로 받아 해당 범위내의 난수를 발생시키는 함수이다.
결과는 전역변수인 result에 저장되며, problemContent내용을 발생한 두 난수 곱셈식으로 변경한다.
입력된 값과 정답 비교하기
submit 버튼을 클릭했을 때 입력데이터와 정답을 비교해보는 부분을 구현해보자
//submit 버튼을 클릭했을때 수행되는 메소드
document.getElementById("submit").onclick = function(){
//answer input텍스트에서 입력된 데이터를 받아온다.
var ans = document.getElementById("answer").value;
console.log(result);
//입력데이터가 비어있을경우 나오는 경고창
if(ans === '')
{
alert("Input your answer");
return ;
}
else if(ans == result)
{
//입력데이터가 정답일때 Correct내용의 창을 띄워주고 새로운 문제를 출제한다.
alert("Correct!");
generateRandom(1, 9);
}
else if(ans != result)
//오답일때 해당문구로 변경한다.
document.getElementById("problemContent").innerHTML="Retry";
}정답 및 오답일 때 input박스로 포커싱 및 입력데이터 비우기
정답이나 오답을 제출했을때 input박스로 포커싱을 옮기고 입력데이터를 비우는 기능을 구현하고자한다.
getElementById().value로 데이터를 받아오고 해당 데이터를 비워봤는데 되지않았다.
getElementById().innerText, HTML으로 받아와 내용을 출력해보니 HTML에 작성된 input코드내용을 불러왔다.
!!!
!input의 데이터 비우기 위해 위의 방법을 해봤는데 null이아닌 '' 즉 문자열로 null을 넣으려고하니까 안되었던 것 같다. ..
https://eond.com/javascript/361749
var answer = document.getElementById("answer").value = null; // = '';이 아닌 null으로 명시를 해주어야한다! answer은 element객체이므로 문자열이 아니다!이제 input 박스에 포커스를 주어보자.
function clearInput(){
var answer = document.getElementById("answer");
answer.value = null;
answer.focus();
}한꺼번에 null로 지정하고 focus를 할 수 없으므로 하나씩 나누어서 처리했다.
결과
