자바스크립트 입문 [JavaScript] - 자바스크립트로 랜덤배경화면 만들기-Document.createElement() , Node.appendchild()

2021-07-28

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

 

---

 

 

이번 포스팅에선 웹 브라우저에서 랜덤으로 배겨화면이 변화하도록 해봅시다.

먼저, background.js 라는 자바스크립트 파일을 생성한 뒤 HTML에 import 해줍시다.

img라는 폴더를 만든 후, 배경화면으로 지정하고 싶은 이미지를 저장해줍시다.

 

그리고 랜덤한 이미지를 선택하는 방법은 저번 포스팅에서 했던, 방식과 동일합니다.

const image = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

const chosnImage = image[Math.floor(Math.random() * image.length)];

console.log(chosnImage);

위와 같이 코드를 구현한 후, F5를 누를때마다, 콘솔창에서 choseImage가 랜덤으로 선택되는 것을 확인할 수 있습니다.

 

이제 해야할 것은 이 선택된 이미지를 HTML에 추가하는 것입니다.

지금까지는 해온건 JS를 통해 HTML의 뭔가를 가져오는 것이였지만

이번 포스팅에선 JS에서 이미지를 만들어 html에 추가해봅시다.

 

[Document.createElement()] 

 

HTML 문서에서 Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만듭니다.

.createElement( 'h1' )

위는 다음과 같은 코드를 생성합니다.

<h1></h1>

 

우리는 이미지를 생성하는 것이기 때문에, document.createElement("img")를 통해 img 폴더 안에 있는

img를 생성할 수 있습니다.

 

const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

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

const bgImage = document.createElement("img");

bgImage.src=`img/${chosnImage}`;

console.log(bgImage);

 

 

위와같은 코드로, 콘솔창에는 무작위로 이미지가 선택되고, 경로설정까지 할 수 있습니다.

마지막으로, 이 bgImage를 body 내부에 추가하면, 새로고침을 할 때마다 무작위로 배경화면이 설정될 것입니다.

이제 이 bgImage를 html에 추가해봅시다.

 

<추가>

.createElement( ) 말고도 자바스크립트를 이용해 문서에 HTML 요소를 추가할 수 있습니다.

• .createTextNode()
• .appendChild()

.createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어

.createTextNode( 'My Text' )

는 My Text라는 문자열을 만듭니다.

 

.appendChild()는 선택한 요소 안에 자식 요소를 추가합니다.

 

[document.body.appendchild()] 

 

.appendChild( ) 메소드는 한 요소를 특정 부모 노드의 자식 요소 리스트 중 마지막 자식으로 붙입니다. (Document.body.appenchild() 같은 경우, body의 마지막 자식으로 붙입니다.) 

// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.
var p = document.createElement("p");
document.body.appendChild(p);

 

이와 반대로, .prependChild는 가장 첫번째 자식으로 붙입니다.

 

우리는, 우리가 산출한 무작위 배경사진인 bgImage를 body의 마지막 자식으로 붙이면 되기때문에 

아래와 같은 코드를 작성합니다.

const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"];

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

const bgImage = document.createElement("img");

bgImage.src=`img/${chosnImage}`;

document.body.appendChild(bgImage);

 

 

 

오른쪽과 같이 <img src="img/?.jpg>가 html에 생성되고,  왼쪽과 같이 배경화면이 나타납니다.(배경화면으로 보이진않지만, CSS요소를 추가하면 배경화면같이 보일 수 있습니다. 이 포스팅에서는 CSS는 다루지않습니다.)

---

출처

Document.createElement() - Web API | MDN

 

JavaScript / 요소 추가하기 / .createElement(), .createTextNode(), .appendChild()

 

Node.appendChild() - Web API | MDN

 

노마드 코더 Nomad Coders