로또만들기_재료

1. 배열만들기 Array().fill()

Array(45).fill()//undefined가 45개인 배열을 만듦

 

2. 배열과 반복문 : 배열명.map( () => {})

const candidate = Array(45).fill().map((element, index) => index+1);
//undefined 45개로 구성된 배열을 앞에서 부터 각각 index+1로 바꿈
//(45) [undefined, undefined, ---, undefined]
//(45) [1,2,3,4,---,45]

 

3. 랜덤으로 겹치지 않게 숫자 뽑기 (vs 야구게임과 비교)

(1) 야구게임

1~9까지 있는 배열에서 랜덤으로 하나씩 뽑아서 옮기고 삭제하기를 반복

const pull = Array(9).fill().map((el,in)=> in+1);
const answer=[];
for(let n=0 ; n<4 ;i++){
	const randomIndex = Math.floor(Math.random()*pull.length);
	answer.push(pull[randomIndex]);
    pull.splice(randomIndex,1);
   };

 

(2) 로또

1~45까지 있는 배열을 랜덤으로 섞은 다음 1~6까지 숫자를 잘라서 뽑아냄

const candidate = Array(45).fill().map((el,in) => in+1);
shuffle = [] ;
while (candidate.length>0){
	const randomIndex = Math.floor(Math.random()*candidate.length);
    const spliceArray = candidate.splice(randomIndex,1);
    shuffle.push(spliceArray[0]);
    };
const answer = candidate.slice(0,6)

*splice는 return값으로 잘라낸 요소들로 구성된 배열값을 가짐

**splice는 원래의 배열을 변경시킴

***slice는 새로운 배열을 만들어냄

 

4. 정렬 : 배열명.sort(( ) => { })

배열명.sort((a,b) =>{return a-b}) //오름차순으로 정리
배열명.sort((a,b) =>{return b-a}) //내림차순으로 정리

answer.sort((a,b) => a-b)//answer배열을 내림차순으로 정리

 

5. setTimeout( ( ) => {}, )

setTimeout(함수, 밀리초)

-> 밀리초가 지난 후에 함수를 실행함

*함수와 함수호출은 다름

setTimeout(() => {console.log('hello')}, 3000)//3초 뒤에 console.log('hello') 실행

 

6. document.createElement, append

https://ssooccoo.tistory.com/15

자바스크립트로 html에 글쓰기

 

createElement에 추가적인 내용

<div id = 'here'> </div>

<script>
const divtag = document.createElement('div') //일단 div태그를 만듦
divtag.className = 'ball' //그 태그의 class가 ball임
divtag.textContent ='클래스 네임 볼' //그 태그의 내용값은 클래스 네임 볼임
document.querySelector('#here').append(divtag) //html의 id가 here인 태그에 넣음
</script>

7. CSS

(1)display 설정 : block level element vs inline element vs block inline element 차이

block level element	자동 줄바꿈, width, height 지정o, margin,padding 지정가능
inline element	자동 줄바꿈x, width, height 지정x, margin 위아래에 적용할 수 없음
block inline element	자동 줄바꿈x, width, height 지정o

(2)css는 각각 선택자 사이에 ;하면 안 됨 

 

(3) border-radius 

border만 하면 사각형의 테두리가 생김

border-radius -> 꼭짓점을 둥글게

width와 height의 길이를 같게 하면 원이 만들어짐

 

(4) 텍스트 정렬

text-align -> text의 좌우 정렬에 사용

line-height -> text의 위아래 정렬에 사용

 

 

8. var과 let의 차이, setTimeout 분석하기

https://ssooccoo.tistory.com/20

https://ssooccoo.tistory.com/26