parseInt()
문자열 인자를 구문분석하여 특정 진수(수의 진법 체계에 기준이 되는 값)의 정수를 반환한다.
Math.random()
- 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환한다.
- 이 값은 사용자가 원하는 범위로 변형할 수 있다.
- 난수 생성 알고리즘에 사용되는 초기값은 구현체가 선택하며, 사용자가 선택하거나 초기화할 수 없다.
첫 번째 프로젝트 시-작 !
html
<body>
<div class="container">
<div class="row max-height align-items-center text-center">
<div class="col">
<button class="btn btn-outline-secondary">Click Me!</button>
</div>
</div>
</div>
</body>
js
const body = document.querySelector('body'); // 태그를 호출한다.
const btn = document.querySelector('button');
const colors = ['lightgreen', 'lightblue', 'lightyellow']
body.style.backgroundColor = 'salmon';
btn.addEventListener('click', colorChange); // function 뒤에 ()가 없다.
function colorChange() {
const colorIdx = parseInt(Math.random()*colors.length); // 순서를 랜덤으로 만들기
body.style.backgroundColor = colors[colorIdx]; // 랜덤으로 배열 안의 컬러를 선택한다.
}
위 코드는 아래 링크에 있는 자바스크립트 프로젝트를 활용 및 참고하여 작업하였습니다.
https://jsbeginners.com/javascript-projects-for-beginners/#below-list
100+ JavaScript Projects for Beginners! [ Solutions Provided! ]
Looking for JavaScript projects to get more JavaScript practice? Here's a list of over 100 javascript projects for beginners!
jsbeginners.com
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 js / 프로젝트3] 이미지 슬라이더 / forEach() / classList.contains() (0) | 2021.07.06 |
|---|---|
| [자바스크립트 js / 프로젝트2] input에 입력된 내용 보여주기 / 메시지 전달 (0) | 2021.07.06 |
| [자바스크립트 js] async / await / try catch문 / finally문 / 비동기 실행 (0) | 2021.07.05 |
| [자바스크립트 js] axios (0) | 2021.07.04 |
| [자바스크립트 js] promise 객체 종류 (0) | 2021.07.04 |
