JavaScript #18

210804
JavaScript #18

---

• 배경 이미지 만들기
  랜덤 배경이미지를 적용시켜보자

1. background.js 생성 및 html에 적용
2. img폴더에 이미지를 저장해둔다.

지난번 랜덤한 명언을 보여주는 것 과 비슷한 방식이다.

-background.js

const images = ["0.jpg", "1.jpg", "2.jpg"]

const chosenImage = images[Math.floor(Math.random() * images.length)]

console.log(chosenImage)

랜덤으로 이미지를 선택한다.

배경화면으로 지정하기 위해서는 html내에 와 같이 적용이 돼야한다.
즉 JS에서 이미지를 만들어서 html에 추가해야한다.

• createElement()
  Element를 생성한다.

const images = ["0.jpg", "1.jpg", "2.jpg"]

const chosenImage = images[Math.floor(Math.random() * images.length)]

const bImage = document.createElement("img")

console.log(bImage)

이렇게 img가 생긴다.

src를 적용시켜보자.

const images = ["0.jpg", "1.jpg", "2.jpg"]

const chosenImage = images[Math.floor(Math.random() * images.length)]

const bImage = document.createElement("img")

bImage.src = `img/${chosenImage}`

console.log(bImage)

html element를 생성했다.

주의할 점은 여기 img의 파일 이름과 확장자가 일치해야하는 것이다.

bImage.src = `img/${chosenImage}`

이 부분은 html에서

<img src="img/0.jpg">

와 같다.

이제 이 이미지를 body에 넣어보자.
-appendChild()

document.body.appendChild(bImage)

body에 html을 추가한다.

참고
https://nomadcoders.co/javascript-for-beginners/lobby
명언 출처
카카오톡 이모티콘 '명언인줄'