자바스크립트 강의 들으면서 위치를 이용해서 함수를 만드는 상황이 많이 생긴다.
엘리먼트의 width, height 또는 위치 관련된 값을 가져오고 싶다면
getBoundingClientRect() 를 사용하여 정보를 얻어올 수 있다.
Rect = element.getBoundingClientRect();
여기서 Viewport는 사용자에게 보이는 화면이며
x,y가 (0,0)으로 좌측 상단을 기준으로 한다.
getBoundingClientRect()를 Rect라는 변수에 먼저 할당하고
const x = Rect.width
const y = Rect.height
으로 x,y 축 높이와 너비를 할당할 수 있다.
function randomNum(min, max) {
return Math.random() * (max - min) + min;}
만약 0에서부터 위와 같은 x,y의 값 사이에 있는 랜덤 한 숫자를 얻고 싶다면 위의 문법을 대입하여 두 사이에서 랜덤 한 수가 나오도록 만들 수 있다. Math.random을 이용하여 max값과 min값을 대입해 주면 된다. 참고로 max값이 5라면 5는 포함되지 않고 4 또는 4.%% 의 소숫자가 포함된 max값 이하의 값이 포함된다.
(Math.random이 아닌 Math.round도 있지만 이를 사용하면 난수가 고르게 분포되지 않는다고 한다.)
위의 randomNum 함수를 이용하여 각 min, max 값을 대입해 준다
const x = randomNum(x, x1);
const y = randomNum(y, y1);
그리고 box라는 새로운 엘리먼트를 생성하여
box.style.left = ${x}px;
box.style.top = ${y}px;
으로 box 엘리먼트에 left, top 값을 지정해 주면 끝!
Ref
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/random
'IT 개발' 카테고리의 다른 글
[JavaScript] 조건문 switch 언제 사용하는지 + 개념정리 (0) | 2021.07.01 |
---|---|
javascript enter key 이벤트 처리 시, 한글 두 번 입력될때 (이벤트 두 번 발생) (0) | 2021.06.29 |
[GIT & GITHUB] github 원격저장소에 Commit push하기 (0) | 2021.06.27 |
[드림코딩]자바스크립트 기초 정리 ⑩ 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs (0) | 2021.06.25 |
[드림코딩]자바스크립트 기초 정리 ⑨ 프로미스 Promise 개념 및 활용 (0) | 2021.06.24 |