오전 문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="createBtn()">Create Button</button>
<script>
let createBtn = () => {
let btn = document.createElement("button");
btn.innerHTML = "Click me";
document.body.appendChild(btn);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id = "p1">This is a paragraph.</p>
<button onclick="createBtn()">Create Button</button>
<script>
let createBtn = () => {
let btn = document.createElement("button");
let child = document.getElementById("p1");
btn.innerHTML = "Click me";
document.body.insertBefore(btn, child);
}
</script>
</body>
</html>
숫자 게임
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number guessing game</title>
</head>
<body>
<div class="form">
<h1>Number guessing game</h1>
<p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>
<label for="guessField">Enter a guess:</label>
<input type="text" required id="guessField" min="1" max="100" placeholder="Enter your guess here">
<input type="submit" value="Submit guess" id="guessSubmit">
</div>
<div class="resultDisplay">
<p id="guesses"></p>
<p id="lastResult"></p>
<p id="lowOrHi"></p>
</div>
<script>
let randomNum = Math.floor(Math.random() * 100) + 1;
const guesses = document.getElementById("guesses");
const lastResult = document.getElementById("lastResult");
const lowOrHi = document.getElementById("lowOrHi");
const guessField = document.getElementById("guessField");
const guessSubmit = document.getElementById("guessSubmit");
let guessCnt = 1;
let resetBtn;
let checkGuess = () => {
const userGuess = Number(guessField.value);
if (guessCnt === 1) guesses.textContent = "Previous guesses: ";
guesses.textContent += userGuess + ' ';
if (userGuess === randomNum) {
lastResult.textContent = 'Congratulations! You got it right!';
lastResult.style.backgroundColor = 'green';
lowOrHi.textContent = '';
setGameOver();
} else if (guessCnt === 10) {
lastResult.textContent = '!!!GAME OVER!!! You loser...~';
lastResult.style.backgroundColor = 'black';
lastResult.style.color = 'white';
setGameOver();
} else {
lastResult.textContent = 'Wrong';
lastResult.style.backgroundColor = 'red';
if (userGuess < randomNum) {
lowOrHi.textContent = 'Last guess was too low! randomNum is more high!';
} else if (userGuess > randomNum) {
lowOrHi.textContent = 'Last guess was too high! randomNum is more low!';
}
}
guessCnt++;
guessField.value = '';
guessField.focus();
};
guessSubmit.addEventListener('click', checkGuess);
guessField.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
checkGuess();
}
});
let setGameOver = function() {
guessField.disabled = true;
guessSubmit.disabled = true;
resetBtn = document.createElement('button');
resetBtn.textContent = 'Start new Game';
document.body.appendChild(resetBtn); // body자식으로 추가하면 페이지의 제일 끝에 삽
resetBtn.addEventListener('click', resetGame);
};
let resetGame = function() {
guessCnt = 1;
const resetParas = document.querySelectorAll('.resultDisplay p');
for (const resetPara of resetParas) {
resetPara.textContent = '';
}
resetBtn.parentNode.removeChild(resetBtn);
guessField.disabled = false;
guessSubmit.disabled = false;
guessField.value = '';
guessField.focus();
lastResult.style.backgroundColor = 'white';
randomNum = Math.floor(Math.random() * 100) + 1;
};
</script>
</body>
</html>html collection, nodeList특징
collection/nodeList
-
html collection은 실시간으로 반영
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .red{color: red;} .blue{color:blue;} </style> </head> <body> <div class="red">안녕</div> <div class="red">안녕</div> <div class="red">안녕</div> <script> const temp = document.getElementsByClassName('red'); for(let i=0;i<temp.length;i++){ //.red 객체가 하나씩 들어감(3) temp[i].className = 'blue'; //클래스가 blue로 바뀜(실시간으로) // 그래서 위 for에서 .red는 2가 되고 그렇게 또 blue로 변환되고 다시 for문으로 가면 length가 1로 바뀌어서 for문을 빠져나가서 2번째가 변하지 못함 } //1번째, 3번째만 파랗게 변경됌 const temp = document.getElementsByClassName('red'); for(let i=temp.length-1;i>=0;i--){ temp[i].className = 'blue'; } //nodeList const temp = document.querySelectorAll('.red'); for(let i=0;i<temp.length;i++){ temp[i].className = 'blue'; } //순차적으로 다 blue적용 가능 </script> </body> </html> -
여러개를 동적으로 변환해야 한다면 이 성질을 꼭 기억해야 한다.
나머지 진도는 58일차에 몰아져있음
