input 태그에는 innerHTML이 아닌 .value로 접근한다.
p 태그에는 .innerHTML로 접근
1. 주어진 값에 1을 더해서 반환하는 함수를 무명 함수로 만들어보자.
2. 주어진 값에 1을 더해서 반환하는 함수를 화살표 함수로 만들어보자.
무명함수(람다식),화살표함수 둘은 결국 함수명을 변수에 저장해놓고 쓰는 것.
매개변수를 못쓴다 등의 얘기가 아님.
화살표 함수에서 {' 'return } ' '이 비어 있으면 {return}이 생략 가능함. 하지만 두 줄이상일 경우 중괄호 생략이 불가하다.
1. 무명함수 function 옆에 함수명이 없다.
<body>
<p id="test"></p>
<script>
let plus = function(a) {
return a + 1
}
document.getElementById("test").innerHTML = plus(4)
</script>
2. 화살표 함수로 만들기. return과 중괄호를 생략해주었다.
(변수 선언으로 함수를 써먹는 것에 익숙지 않다.)
<body>
<p id="test"></p>
<script>
let plus = (a) => a + 1
document.getElementById("test").innerHTML = plus(2)
</script>
</body>
<Mini Project>
<!DOCTYPE html>
<html lang="en">
<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>숫자 맞추기 게임</title>
</head>
<style>
button {
border: black solid 2px;
}
</style>
<body>
<script>
const randn = Math.floor((Math.random()*100)+1);
let count = 0;
function calc() {
let x = document.getElementById("x").value;
count++;
if(x > randn){document.getElementById("z").value = "높습니다."};
if(x < randn){document.getElementById("z").value = "낮습니다."};
if(x == randn){document.getElementById("z").value = "같습니다."};
document.getElementById("y").value = count;
}
</script>
<h1>숫자 맞추기 게임</h1>
<p>이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. 숫자는 1부터 100 사이에 있습니다.</p>
<label>숫자: </label><input type="text" id="x"> <button onclick="calc()">확인</button>
<br><label>추측횟수: </label> <input type="text" id="y">
<br><label>힌트: </label> <input type="text" id="z">
</body>
</html>
<보충>
1~100의 난수를 생성하는 법: Math.floor((Math.random()*100)+1)
Math.random은 0과 1사이의 임의의 수를 형성한다.
'🗃️javascript > DOM 조작' 카테고리의 다른 글
| js 복습 문제들 (0) | 2023.04.14 |
|---|---|
| js 객체 생성(생성자, class), 상속 (0) | 2023.04.13 |
| 화면 배경색 바꾸기 (0) | 2023.04.09 |
| 문서 객체 다루기(2)[ 스크립트 아래에 노드 추가, 삭제] (0) | 2023.04.05 |
| 문서 객체 다루기(1)[ 노드 선택 속성 및 메서드, 노드 조작] (0) | 2023.04.03 |