Math.random( ) : 랜덤한 실수값을 도출해 낼 때 사용
Math.random()
0~1 사이의 랜덤한 실수값
Math.random()*10
0-10사이의 랜덤한 실수값
Math.floor(2.1) 소수점잘라내기
Math.floor(Math.random()*10) 0이상 9이하의 랜덤한 정수 (0~10 실수를 내림하기 했으니까)
그래서 로또번호를 뽑을때는 (45까지)
Math.floor(Math.random()*45)+1
0~44까지의 번호가 도출되고 로또 번호는 1~45니까 +1 하기
소수점 값을 없애기 위해 Math.floor 많이 씀 !!
- 확인하기 버튼을 누르면 0 ~ 2사이의 랜덤한 정수를 얻어내서 p요소의 innerText에 출력하고
내가 선택한 숫자와 같은지 비교해서 같으면 알림창에 "win" 이라고 출력하고
맞춘 횟수를 1 증가시키는 프로그래밍을 해 보세요.
let count=0; // 횟수를 저장할 값
document.querySelector("#checkBtn").addEventListener("click", function(){
// 0~2 사이의 랜덤한 정수 얻어내기
let ranNum=Math.floor(Math.random()*3); // 2.xxx까지 나오니까 3을 곱하기 !
document.querySelector("#result").innerText=ranNum;
// 선택한 숫자 얻어내기
let myNum=Number(document.querySelector("#selectedNum").value);
// 만일 랜덤한 정수와 내가 선택한 숫자가 같다면
if (ranNum==myNum){
동기와 비동기 alert("win!");
count=count+1;
document.querySelector("#count").innerText=count;
}
});횟수를 저장할 변수 먼저 만들어주고
0~2 사이의 랜덤한 정수를 얻기 위해 Math.random() 써주기
근데 소수점 떼야하니까 Math.floor로 묶기 ! !
count변수 1씩 올려주는 거 보고
함수 어디 안에 들어가야하는지 ! 위치 중요
- ranNum과 myNum이 일치했을 때 알림창이 먼저 뜨고 그걸 끈 후에야 일치하고 있던 ranNum 값이 보여지는 이유
-> 비동기 때문 !
동기와 비동기
- 비동기 : 해당 작업이 완료되지 않아도 다음 작업으로 넘어가는 것
출력된 문서객체의 정보를 수정하는 작업(innerText, style,...)은
웹브라우저 입장에서 약간은 무거운(시간이 살짝 걸리는) 작업이다.
따라서 해당 작업은 동기로 처리하지 않고 비동기로 처리한다.
비동기 처리 도중에 alert창이 떴고, alert창이 뜨면 그 창이 닫아지기 전까지 웹브라우저는 아무 일도 못한다.
실행순서가 넘어왔다고 해서 그 전 작업이 성공했다는 보장은 없음
- 동기 : 해당 작업이 완료되어야 그 다음 작업으로 넘어가는 것
-예시
[ 동기 처리 방식 ]
스타벅스에 갔다
카운터에 가서 메뉴를 주문하고 내 메뉴가 나올 때 까지 카운터에서 계속 기다린다.
메뉴가 나오면 메뉴를 받아들고 카운터에서 나온다.
[ 비동기 처리 방식 ] javascript에 많은 처리방식, 해당 작업이 완료되지 않아도 다음 작업으로 넘어가는 것
(여기는 직원이 한명 뿐, 한명이 주문도 받고 메뉴도 준비하는 등 모든 일을 처리) => 웹브라우저 : 1 process, 1 thread 뿐
스타벅스에 갔다
카운터에 가서 메뉴를 주문하고 진동벨을 받아들고 카운터에서 나온다.
메뉴가 다 준비되었다는 진동벨이 울리면 메뉴를 받아온다.
-> 메뉴를 받기 전 진상손님이(alert) 직원과 싸운다면 ? (동기처리로 싸우고 있는 것, 끝나기 전까지 아무것도 못함)
-> 메뉴 안나옴
- 가위바위보 게임
<body>
<h1>가위 바위 보</h1>
<select id="myPick">
<option value="0">가위</option>
<option value="1">바위</option>
<option value="2">보</option>
</select>
<button id="startBtn">시작</button>
<p id="computerPick"></p>
<script>
let data=["가위", "바위", "보"]
document.querySelector("#startBtn").addEventListener("click", function(){
// 0 or 1 or 2 중에 하나의 랜덤한 숫자 얻어내기 (숫자: 배열의 방번호로 쓰기 좋음)
let ranNum=Math.floor(Math.random()*3);
// 랜덤한 숫자를 data 배열의 방번호로 활용해서 com의 패를 출력한다.
document.querySelector("#computerPick").innerText=data[ranNum];
// 나의 숫자(패) 읽어오기( myPick도 숫자지정하기위해 option에 value값주기 )
let myNum=Number(document.querySelector("#myPick").value);
if (myNum==ranNum){
alert("비겼지롱 ㅎ");
} else if(myNum==0 && ranNum==2){
alert("이겨따 !!!!!");
} else if(myNum==1 && ranNum==0){
alert("이겨따 !!!!!");
} else if (mynum==2 && ranNum==1){
alert("이겨따 !!!!!");
} else {
alert("에 졌대요 ㅋㅋ");
}
});랜덤한 숫자가 0, 1, 2 이렇게 생기니까 내가 선택하는 옵션의 값도 숫자로 지정하기 !
근데 값(value)는 문자열로 인식되니까 Number로 묶어주기
document.querySelector("#computerPick").innerText=data[ranNum];이게 제일 헷갈렸는데
data배열에 ranNum 변수명을 직접 넣어서 ! 그 안의 값이 도출되게 하기(0, 1, 2)
데이터는 직접넣는 경우도 있고 변수명으로 넣는 방법도 있다
따라서 배열도 숫자를 직접 넣을수도 있고 ! 숫자가 들어있는 변수명을 넣을수도 있음 *** 넘 헷갈려따
