Math.floor()은 내림 Math.ceil () 올림 Math.round() 는 반올림
랜덤함수
변수 에다 이미지변수에 있는 내용들을 랜덤으로 출력하는 코드 입니다. (아래 명언 및 배경설정 적용시 들어감)
명언/인용구 (quote) , (author) 적용 하기
1. JS
js(자바스크립트)
1. 배열 quote 에다 배열(array)를 저장해준다.
2~18. 내용 적기
20. 변수 quote 에다 document( html에 있는) .querySelector(위치에 해당하는 곳)을 가져와서 저장. 여기서는 div 요소에 아이디가 quote 인 span 요소에 첫번째span을 의미함.
21. 변수 author 에다 document( html에 있는) .querySelector(위치에 해당하는 곳)을 가져와서 저장. 여기서는 div 요소에 아이디가 quote 인 span 요소에 두번째span을 의미함.
24. 변수 todaysQuote 에다 저장한다. 무엇을? => 1번줄의 변수 quotes의 내용을 내용갯수만큼 랜덤으로 나오는데 그 수를 내림한 값을 저장한다. (내림(Math.floor)을 안한다면 값은 1.2 , 1.23123 , 1.3241123, 0.123123 와 같은 수가 나온다. quotes 변수는 배열을 이용한 명언들이 들어있는데, 그 배열을 출력하기 위해서는 인덱스 0~ ? 까지 있는데, 실수가 나오게 된다면 배열의 인덱스로 값을 출력을 하지 못하게 된다.)
26. quote ( 첫번째 span을 가리킨다고위에서 설명했다. *20번줄) 에다 todaysQuote (quotes 배열에서 랜덤으로 하나를 뽑은 *24번줄에서 설명함)의 quote(명언 값)를 저장해준다.
27. author ( 두번째 span을 가리킨다고위에서 설명했다. *21번줄) 에다 todaysQuote (quotes 배열에서 랜덤으로 하나를 뽑은 *24번줄에서 설명함)의 quote(명언 값)를 저장해준다.
2. HTML
html
* 설명이 늦었는데 새로운 js파일을 생성해줄때마다, script 를 이용하여 위 사진과 같이 연결시켜주어야 한다. 만약 해당 js 위치를 연결 시키지 않는다면, 출력이 되지 않는다. <<< JS 파일을 만들고 가장 먼저 해주는 일
1. div 요소에 아이디 quote 2. 첫번째 span (js 설명할때 첫번째 span 이라고 하는 부분이 이부분임. 첫번째 span 값에는 quote 를 저장한다 했는데 이부분에 quote가 들어가는거임) 3. 두번째 span (그렇다면 이부분은 js 설명할때 두번째 span 이라고 하는 부분인데, 두번째에 들어가게 js에서 설정한대로 author값이 들어가서 출력됨)
배경(background image) 설정하기
1. JS
JS
1. 변수 image 에 사진 파일이름을 배열형태로 저장한다.
3. 변수 chosenImage에 변수image(1번줄에 사진들을 배열의 형태로 저장해둔)를 랜덤으로 뽑아주는 기능을저장.
추가 설명:
math.random()은 랜덤한 숫자를 가져다줌, 그치만 그 숫자들은 0과 1사이임.
그러니까 0.xxx 같은 숫자들을 뜻함. 그래서 0과 어떤수 사이의 랜덤한 수를 가져오고 싶을때는 그냥 그 길이 수(lengh)를 곱해주면 된다. 어떤 수든 상관 없음. == 여기서는 배열의 길이만큼 곱해주면 됨
8. 변수 bgImage에 자바스크립트에서 html element 을 만든(생성)것을 저장.
10. bgImage 변수 의 소스(source) 즉, 위치를 정의함.
12. html에 body 에 bgimage를 마지막에 추가함.
* append (가장뒤에오게함), prepend(가장위에 오게함)
3. 결과
출력 화면
저기 사진위에 it aint over till its over. 이라는 명언(quote) 와 말한사람을 나타내는,저자(author) kim 이 출력된것을 볼 수 있다.
-인용구 설정하기 추가 설명-
만약 span 순서가 틀렸다면, author가 먼저나오고 quote가 뒤에 나왔을 것이다.
저 quote 와 author 글 + 배경화면 은 브라우저가 새로고침이 될때마다 랜덤함수에 의해서 랜덤으로 바뀐다.
