문자를 출력하기 위해 배열만들기

const quotes= [
    {
        quoto:"헬로자바" ,
        autohor:"자바"
    },
    {
        quoto:"츄르죠" ,
        autohor:"야옹"
    }, 
    {
        quoto:"낮잠자고 싶다" ,
        autohor:"냥냥펀치"
    }, 
    {
        quoto:"자바스크립트는 어렵다" ,
        autohor:"제이쿼리"
    }, 
    {
        quoto:"제이쿼리는 한물갔다" ,
        autohor:"자바스크립트"
    }, 
    {
        quoto:"파이썬은 겉멋만들었다" ,
        autohor:"자바"
    },
     {
        quoto:"자바는 촌스럽다" ,
        autohor:"파이썬"
    },
     {
        quoto:"CSS가 필요해" ,
        autohor:"html"
    },
     {
        quoto:"그리드는 공부했니?" ,
        autohor:"css"
    }
];

• 10개의 배열이 있다, 이 배열은 index 0부터 9까지 있으며 이 9개를 랜덤으로 출력할것이다.

랜덤함수와 소숫점을 버림, 올림하는 함수

Math.random() // 0에서 1사이의 실수를 출력한다 ex) 0.111245, 0.89865
Math.round()//소숫점을 버림해주는 함수
Math.ceil()//소숫점을 정수로 올림해주는 함수
Math.floor()//소숫점을 정수로 버림해주는 함수

• 1~9까지의 수를 랜덤으로 뽑으려면 Math.random()*10을 해주면 될것이다.

  Math.floor(Math.random() * 10); //0~9까지의 정수를 랜덤으로 출력

랜덤으로 문자1/ 문자2 영역 구분해서 출력하기

const quoteAndAutor =quotes[Math.floor(Math.random() * quotes.length)];

quote.innerText = quoteAndAutor.quoto;
autor.innerText = quoteAndAutor.autohor;

• 위에서 만든 랜덤한 정수를 배열의 숫자로 적용하여 변수로 선언하였다,
• quotoes의 배열 안에는 quoto와 autohor 2개의 속성이 있기때문에 .속성 으로 원하는 속성을 가지고 올수있다.
• 아까 선언해두었던 2개의 영역안에 innerText를 활용하여 각 속성을 나누어 출력해준다

랜덤으로 그림 삽입하기

const images = [
    "flower.jpg",
    "mountains.jpg",
    "window.jpg"
]
const chosenImage = images[Math.floor(Math.random() * images.length)]

• 랜덤으로 출력할 이미지들의 이름을 배열로 만든다
• 위에 썼던 랜덤 숫자 출력하는 코드를 활용하여 랜덤으로 images의 배열을 출력하도록 한다.

자바스크립트로 이미지태그 생성하기

const bgImage=document.createElement("img"); //img태그를 추가한다

bgImage.src=`img/${chosenImage}`; //랜덤으로 images배열에 있는 img의 이름을 가지고와 img src태그에 넣는다.

console.log(bgImage); //<img src = "img/flower.jpg">

document.body.appendChild(bgImage); // 바디태그 안에 child태그로 bgImage를 삽입한다

• 이 코드로 img태그가 body태그 아래쪽에 들어가 그림이 랜덤으로 출력된다.