버튼을 클릭하면 명언이 나와요
-이름이 나와요
완성된 모습
문제 내용
json파일에 배열로 생성한 내용이 30개가 있습니다.
("명언"과 "사람 이름" 입니다.)
여기에 저장된 내용들을 랜덤하게 출력을 하라는 문제입니다.
저는 2개로 만들어 봤어요.
1) 1개씩 차례대로 추출하는 방법입니다.
(문제를 잘못 봐서 만들었어요. 지우기가 아깝네요.)
2) 랜덤으로 추출하는 방법입니다.
1) 1개씩 차례대로 추출하는 코드입니다.
<body>
<p>3초만 기달려주세요</p>
<h1 id="result"></h1>
<h2 class="quote"></h2>
<script>
let number = -1;
fetch("./dummy01.json")
.then(name => name.json())
.then((result) => {
let Result = document.querySelector("#result");
let Quote = document.querySelector(".quote");
let What = document.querySelector("p");
setInterval(() => {
number++;
console.log(result.quotes.length);
Result.innerHTML = result.quotes[number].quote;
Quote.innerHTML = result.quotes[number].author;
What.innerHTML = number + "번";
if(number == (result.quotes.length-1)){
number = -1;
}
}, 3000);
});
</script>
</body>코드설명
1. fetch()로 json파일을 불러옵니다.
2. let Result, let Quote, let What은 명언, 사람 이름, 몇번인지 출력할 변수입니다.
3. setInterval은 주어진 시간만큼 반복적으로 실행합니다.
4. result.quotes[number].quote는 json 파일 안에 들어있는 각 배열의 번지에 접근해서 키값으로 데이터를 호출합니다.
5. result.quotes[number].author는 json 파일 안에 들어있는 각 배열의 번지에 접근해서 키값으로 데이터를 호출합니다.
6. number+"번"은 1씩 증가된 값들을 출력해주는 부분입니다.
7. if문으로 number의 값이 29와 똑같다면 다시 number의 값을 -1로 바꿔서 주어진 시간동안 반복을 시킵니다.~
(29와 비교하는 이유는 json파일 안에 든 배열이 30개가 있습니다. 배열은 0번지부터 시작해서 29입니다.~)
2) 랜덤값으로 출력하기
<body>
<p>2초만 기달려주세요</p>
<h1 id="result"></h1>
<h2 class="quote"></h2>
<script>
let number = -1;
fetch("./dummy01.json")
.then(name => name.json())
.then((result) => {
let Result = document.querySelector("#result");
let Quote = document.querySelector(".quote");
let What = document.querySelector("p");
setInterval(() => {
number = Math.floor(Math.random() * 30);
Result.innerHTML = result.quotes[number].quote;
Quote.innerHTML = result.quotes[number].author;
What.innerHTML = number + "번";
}, 2000);
});
</script>
</body>1. fetch()로 json파일을 불러옵니다.
2. let Result, let Quote, let What은 명언, 사람 이름, 몇번인지 출력할 변수입니다.
3. setInterval은 주어진 시간만큼 반복적으로 실행합니다.
4. Math.floor(Math.random() *30)은 랜덤값을 출력하고. 소수점을 제외 시킨다음 데이터를 let number에 저장시킵니다.
4. result.quotes[number].quote는 json 파일 안에 들어있는 각 배열의 번지에 접근해서 키값으로 데이터를 호출합니다.
5. result.quotes[number].author는 json 파일 안에 들어있는 각 배열의 번지에 접근해서 키값으로 데이터를 호출합니다.
6. number+"번"은 랜덤으로 뽑힌 데이터를 출력해주는 부분입니다.
