반응형
랜덤 숫자 생성 방법 : Math.random()
자바스크립트에서 랜덤숫자를 생성하려면 Math.random()을 사용하면 된다.
사용예시
Math.random()은 0에서 부터 사용자가 지정한 범위 값 미만을 실수로 랜덤하게 생성할 수 있다. 예시를 보면 0~10미만의 수까지를 생성할 수 있다.
const randomNumber = Math.random()* 10;
실행결과
console.log로 값을 찍어보면 정수가 아니라 실수 값으로, 소수점까지 출력된걸 볼 수 있다. 그렇다면 소수점을 없애면 정수로 랜덤한 값을 얻을수 있다는 것!
소수점 제거 방법
자바스크립트에서 소수점을 제거하는 방법은 4가지가 존재한다.
1. Math.round(); : 소수점을 반올림 한 값을 반환
2. Math.ceil(); : 소수점을 올림해서 반환
3.Math.floor(); : 소수점을 내림해서 반환
4.Math.trunc(); : 소수점을 내림해서 반환
- Math.floor()와 Math.trunc()는 소수점을 내림한다는 기능에선 같지만, Math.floor()는 음수에서도 내린 값을 반환하고 Math.trunc는 소수점 이하를 제거한 값을 반환하는데서 차이점이 있다.
사용 예시
사용 예시는 아래 코드와 같다. 결과 값을 확인하기 위해 각각 console.log로 값을 찍어서 확인해보자.
const randomNumber = Math.random()* 10;
const testRound = Math.round(randomNumber);
const testCeil = Math.ceil(randomNumber);
const testFloor = Math.floor(randomNumber);
const testTrunc = Math.trunc(randomNumber);
console.log(`랜덤 값 : ${randomNumber}`);
console.log(`round : ${testRound}`);
console.log(`ceil : ${testCeil}`);
console.log(`floor : ${testFloor}`);
console.log(`trunc : ${testTrunc}`);
const testFloor2 = Math.floor(-10.2);
const testTrunc2 = Math.trunc(-10.2);
console.log(`음수 floor : ${testFloor2}`);
console.log(`음수 trunc : ${testTrunc2}`);
실행 결과
메서드에 맞게 잘 실행되는걸 확인할 수 있다.
랜덤숫자 응용 - 이미지 랜덤선택
Math.random()을 사용해 이미지를 랜덤으로 선택해보자.
먼저 JS가 있는 폴더에 이미지를 몇개 넣어 폴더를 만든 뒤, Visual Studio Code로 폴더를 가져온다.
소스코드
HTML코드와 자바스크립트 코드를 작성하자.
<!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>Momentum</title>
</head>
<body>
<div class="testImg"></div>
<script src="index.js" defer></script>
</body>
</html>
//img삽입을 위해 div의 클래스요소를 가져옴
const divImg = document.querySelector(".testImg");
//이미지 파일명을 리스트로 저장, 랜덤함수로 1개 선택
const showImg = ["1.gif","2.gif","3.gif"];
const chosenImage = showImg[Math.floor(Math.random() * showImg.length)];
//img태그 생성을 위해 createElement() 사용
const randomImg = document.createElement("img");
//랜덤 선택한 이미지의 경로 저장
randomImg.src=`randomImg/${chosenImage}`;
//랜덤선택한 이미지를 div에 추가
divImg.appendChild(randomImg);간단하게 이미지 이름을 리스트에 저장해 Math.random()으로 랜덤으로 선택한 다음 createElement를 사용해 이미지를 추가하는 코드이다.
실행결과
웹페이지를 새로고침할 때 마다 이미지 파일이 랜덤으로 바뀌는걸 확인할 수 있다.
반응형
'Develop > Frontend' 카테고리의 다른 글
| [JS] 반복함수 : setInterval 과 setTimeout (시계구현) (0) | 2024.07.02 |
|---|---|
| [JS] 사용자 입력 값(input 등) 가져오기 & 새로고침 이벤트 막기 (0) | 2024.07.02 |
| [JS] HTML 태그 가져오기와 Event (0) | 2024.07.02 |
| [JS] JavaScript 기초 (0) | 2024.07.02 |
| [JS] 자바스크립트 시작하기 - Visual Studio Code (0) | 2024.07.02 |
