- Published on
✨ 바닐라 JS 크롬 앱 만들기 #6 강의 정리
- 글쓴이
📌 목차

💁🏻
- INTRODUCTION
- WELCOME TO JAVASCRIPT
- JAVASCRIPT ON THE BROWSER
- LOGIN
- CLOCK
- QUOTES AND BACKGROUND
- TO DO LIST
- WEATHER
Quotes and background
6.0 Quotes
수업 목표: 1. Array안에 있는 element에 접근하기 & 2. 명언이랑 작가를 화면에 보여주기
- array 만들기 - quote.js에
- quote.js에서 div랑 span들을 가져와야해.
- Array의 길이만큼 숫자에 접근해야해 -> Math.module 사용 (js가 공짜로 제공)
Math.random()은 0부터 1사이의 랜덤한 숫자를 제공해
Math.random() * 10하면 우리가 원하는 한자리 수 숫자를 얻을 수 있어.
대신, 이 값을 정수로 쓰기 위해 정수로 만드는 세가지 방법을 쓸거야.
1.round ->반올림해서 정수로 만들어줘
2.ceil ->숫자를 무조건 올림
3.floor ->숫자를 무조건 내림. 소수점 이하 버림
지금은 floor을 쓸거야.
Math.floor(Math.random() * 10)
//10은 명언 개수를 의미야
quote.innerText = todaysQuote.quote
author.innerText = todaysQuote.author
6.1 background
수업 목표 : random한 배경 사진을 화면에 보이게 하기
quote.js랑 비슷
- array만들기
- random으로 나오도록 식 만들어주기
- JS에서 이미지를 만들어서 HTML에 추가해보기 (이전에는 다 HTML에서 가져왔지) JS에서 이미지를 만들기
- document.createElement(img)를 이용해서 만들 수 있어
- 그리고 우린 bgImage.src를 쓸 수 있으니
bgImage.src =
img/${chosenImage}
;
HTML에 추가해보기
- bgImage를 HTML의 Body 내부에 추가하는거야.
- js 파일에 documet.body.appendChild(bgimage);로 추가하면돼.
6.2 Recap
- 숫자 랜덤 만들기
Math.random()*10
=> 정수만들려고 일단 키우기 - 숫자 소수점 내림
Math.floor()
- document.createImage() -> html 태그 만드는 법 js에서!
- document.body.appendChild();