랜덤 숫자 (math.random) / .createElement() / 단락요소 생성

명언만들기

명언을 넣은 array를 만들어준다.

const saying = [
    {a : "유행은 유행에 뒤떨어질 수 밖에 없게 만들어진다.",
    b : "가브리엘(코코)샤넬"},
    {a: "미래는 탁한 거울이다. 누구든 들여다 보려 하면 늙고 근심 어린 얼굴의 희미한 윤곽만 볼 뿐이다.",
    b: "짐 비숍" },
    {a: "현재뿐 아니라 미래까지 걱정한다면 인생은 살 가치가 없을 것이다.",
    b: "윌리엄 서머셋 모옴"},
    {a: "일 분 전만큼 먼 시간은 없다.",
    b: "짐 비숍"},
    {a: "당신은 지체할 수도 있지만 시간은 그러하지 않을 것이다.",
    b: "벤자민 프랭클린"},
    {a: "미래에 사로잡혀있으면 현재를 있는 그대로 볼 수 없을 뿐 아니라 과거까지 재구성하려 들게 된다.",
    b: "에릭 호퍼"},
    {a: "우리는 오늘은 이러고 있지만, 내일은 어떻게 될지 누가 알아요?",
    b: "윌리엄 셰익스피어"},
    {a: "과거에서 멀어질수록 나 자신의 인격 형성에 더 가까워진다.",
    b: "이자벨 에버하트"}
];

array안에서 어떻게 접근하느냐

8개의 명언이 있다.

마지막은 n-1로 접근한다.

0부터 7까지 주는 function이 필요하다.

무작위로 숫자 출력하기 math.random()

math module에는 다양하게 숫자를 출력하는 함수들이 있다.

Math - JavaScript | MDN

그 중 숫자를 랜덤으로 출력해주는 math.random()을 사용한다.

Math.random() - JavaScript | MDN

Math.random() * 10

0부터 10사이의 숫자를 무작위로 얻는다.

소수점 아래까지 포함해서 나오기에 안나오기 해주자.

Math.round(), ceil(), floor()

Math.round(3.14)
3
Math.ceil(3.14)
4
Math.floor(3.14)
3

 

round() 반올림, ceil() 올림, floor() 내림

floor와 범위 10까지를 써서 만든다.

적용하기

const todaySpirit = saying[Math.floor(Math.random() * saying.length)];
console.log(todaySpirit.a);
console.log(todaySpirit.b);

 

saying array는 0~7까지 들어있다. length는 8이다.

saying.length로 길이만큼 범위를 지정해주고 무작위로 나온 값을 floor로 내림해줘 번호를 가져온다.

무작위로 이미지 가져오기.

무작위 작업은 명언 작업과 동일하다.

const Images = [
    "0.jpg",
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    "5.jpg",
    "6.jpg",
    "7.jpg",
    "8.jpg",
    "9.jpg",
    "10.jpg",
    "11.jpg",
    "12.jpg",
    "13.jpg"
];

사진명을 숫자로 해주고 파일 하나에 다 넣어주고 이름이 일치하게 array를 만들어준다.

JavaScript만을 이용해 img적용하기

: 이미지 삽입 요소 - HTML: Hypertext Markup Language | MDN

이미지를 적용하는 방식은 html에서 아래 구성으로 진행한다.

<img src="위치/파일명" alt="이미지설명" >

이 작업을 javaScript만으로 할 수 있다.

document.createElement()

Document.createElement() - Web API | MDN

let element = document.createElement(tagName[, options]);

지정한 tagName의 HTML 요소를 만들어 반환한다.

const bgImage = document.createElement("img");
bgImage.src = `images/${이미지명}`;
bgImage.alt = "이미지 설명"

위처럼 javaScript에 작성하면 html에 아래태그가 만들어진다.

<img src="images/이미지명" alt="이미지 설명">

appendchild, prepend

Node.appendChild() - Web API | MDN

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

Element.prepend() - Web APIs | MDN

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

적용하기

const randomImage = Images[Math.floor(Math.random() * Images.length)];
const bgImage = document.createElement("img");
bgImage.src = `images/${randomImage}`;
bgImage.alt = "my cute cat!!"
document.body.prepend(bgImage);

무작위로 가져오는 이미지명 함수를 src에 적용하면 해당이미지가 랜덤으로 나오게 된다.