[Day 6] Ⅲ. JacvaScript 1
2. JavaScript 기초
- 숫자 맞추기 제작
1. 화면 구성
2. 설명(일반 언어로)
| 간단하게 숫자 만들기 게임을 만들고 싶다. 숫자는 1과 100 사이의 수 중에서 무작위로 선택되어야 하고, 플레이어는 10번의 기회 안에 그 숫자를 맞춰야 한다. 각 순서마다 숫자를 맞췄는지 틀렸는지는 당연히 알려줘야 하고, 틀렸다면 큰지 작은지도 포함해서 알려줘야 한다. 또한 이전에 써냈던 번호들도 보여줘야 한다. 게임은 플레이어가 숫자를 맞추거나 기회를 모두 소진하면 끝나게 된다. 게임이 끝나면 플레이어가 다시 게임을 할 것인지 묻게 된다. |
3. 설명을 작은 단계로 쪼개기
- 1과 100 사이의 숫자 중 무작위 추출.
- 1부터 플레이어의 순서를 기록.
- 플레이어에게 숫자를 맞출 수 있게 함.
- 숫자를 맞추면 어딘가에 저장, 사용자가 이전에 입력한 숫자를 볼 수 있도록 함.
- 숫자가 일치하는지 확인.
- 일치한다면? 1. 축하메세지 표시, 2. 더이상 맞출 필요 없음, 3. 다시 게임을 할지 묻기
- 불일치하고 차례가 남아있다면? 1. 틀렸다고 알림, 2. 다른 숫자 입력하도록 함, 3. 차례가 1 증가
- 불일치하고 차례가 없다면? 1. 게임 종료를 알림, 2. 더이상 맞출 필요 없음, 3. 다시 게임을 할지 묻기
- 게임이 재시작되면 게임의 구조와 UI는 완전히 리셋되며, 처음부터 다시 로직이 시작됨.
4. 환경 설정
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>숫자 맞추기</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>숫자 맞추기</h1>
<p>1과 100사이의 숫자 중에서 하나의 숫자가 선택되었습니다.</p>
<p>10번의 기회 안에 숫자를 맞춰보세요.</p>
<p>입력한 숫자가 큰지 작은지 알려줄 것입니다.</p>
<div class="form">
<label for="guessField">숫자를 입력하세요: </label>
<input type="text" id="guessField" class="guessField">
<input type="submit" value="확인" class="guessSubmit">
</div>
<div class="resultParas">
<p class="guesses"></p>
<p class="lastResult"></p>
<p class="lowOrHi"></p>
</div>
<script src="script.js"></script>
</body>
</html>
- style.css
html {
font-family: sans-serif;
}
body {
width: 50%;
max-width: 800px;
min-width: 480px;
margin: 0 auto;
}
.lastResult {
color: white;
padding: 3px;
}
- script.js
// randomNumber는 수학적인 알고리즘을 통하여 1과 100 사이의 임이의 수를 만들어서 randomNumber에 저장.
var randomNumber = Math.floor(Math.random() * 100) +1;
// index.html에 있는 결과문장에 들어갈 요소.
var guesses = document.querySelector('.guesses');
var lastResult = document.querySelector('.lastResult');
var lowOrHi = document.querySelector('.lowOrHi');
// 사용자의 값을 입력하고 저장하여 불러오는 데 사용.
var guessSubmit = document.querySelector('.guessSubmit');
var guessField = document.querySelector('.guessField');
// 몇번 입력했는지 기록하고 reset 시 사용하는 변수.
var guessCount = 1;
var resetButton;
guessField.focus();
/*
함수: 재사용이 가능한 코드의 묶음.
한 번만 명시하면 몇번이고 실행 가능.
전체적인 코드에서의 반복을 줄일 수 있음.
keyword name() {
code();
}
*/
function checkGuess() {
var userGuess = Number(guessField.value);
if (guessCount === 1) {
guessCount.textContent = 'Previous guesses: ';
}
guesses.textContent += userGuess + ' ';
if (userGuess === randomNumber) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.getElementsByClassName.backgroundColor = 'green' ;
lowOrHi.textContent = ' ';
setGameOver();
} else if (guessCount === 10) {
lastResult.textContent = '!!!GAME OVER!!!'
setGameOver();
} else {
lastResult.textContent = 'Wrong!';
lastResult.style.backgroundColor = 'red';
if(userGuess < randomNumber) {
lowOrHi.textContent = 'Last guess was too low!';
} else if (userGuess > randomNumber) {
lowOrHi.textContent = 'Last guess was too high!';
}
}
/*
사용자가 입력한 숫자의 횟수.
사용자가 입력한 숫자를 공백으로 만들어줌.
입력 상자에 커서 위치.
*/
guessCount++;
guessField.value = ' '
guessField.focus();
}
/*
이벤트: 버튼을 클릭하면 코드가 실행되기 위한 응답.
eventlistener: 발생된 이벤트를 처리하는 것
eventhandler: 이벤트가 발생했을 때 실행되는 코드블럭
*/
guessSubmit.addEventListener('click', checkGuess);
function setGameOver() {
guessField.disabled = true;
guessSubmit.disabled = true;
// reset button 생성
resetButton = document.createElement('button');
resetButton.textContent = 'Start new game';
document.body.appendChild(resetButton);
resetButton.addEventListener('click', resetGame);
}
function resetGame() {
guessCount = 1;
var resetParas = document.querySelectorAll('.resultParas p')
/*
for 반복문
프로그래머가 지정한 코드의 부분을 조건이 부합할 때까지 실행.
*/
for (var i = 0 ; i < resetParas.length; i++) {
resetParas[i].textContent = ' ';
}
resetButton.parentNode.removeChild(resetButton);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = ' ';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNumber = Math.floor(Math.ramdom() * 100) + 1;
}
- 연산자(Chrome의 개발자도구-Consol)
1. 더하기 + : 문자열도 결합 가능
2. 빼기 -
3. 곱하기 *
4. 나누기 /
5. 복합 대입 연산자 += or -= or *= or /=
- 위 사진을 예시로 들면, name += hello 는 name = name + hello 와 같다.
6. 비교 연산자: true/false을 구분할 때 사용
- ===(or ==) : 값이 서로 같은지를 비교할 때
- !== : 값이 서로 다른지를 비교할 때
- < , > : 값의 크기를 비교할 때
- for 반복문: 프로그래머가 지정한 코드의 부분을 조건이 부합할 때까지 실행하는 것.
for (시작값, 종료조건, 증감식)
- 객체: 하나의 그룹 안에 관계되는 기능들을 모아놓은 것.
1. 속성: 객체 안의 변수
2. Method: 객체 안의 함수
'STUDY > CODING' 카테고리의 다른 글
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 8 (0) | 2019.08.29 |
|---|---|
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 7 (0) | 2019.08.26 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 5 (0) | 2019.08.24 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 4 (0) | 2019.08.23 |
| [GSIT-POSTECH-DSC107] 웹 프로그래밍 기초 3 (0) | 2019.08.23 |
