작업관리자 열기(코드 구조 확인): Ctrl+Shift+I
qnalist 코드를 작업관리자 console에서 열어보면 구조가 나옴.
Key와 Value로 이루어져 있고
q라는 key에 질문(q)가 있고
a라는 key에 배열 3개(array(3))이 있고
-> a는 answer와 와 type이라는 value로 이루어져있다.
type이 4개가 있어서 사용자가 누르는 값에 따라 cow, tiger, dragon, chick의 결과를 띄워줌
****object형식의 자료는 .으로 자료를 찾을 수 있음.
innerHTML 정의
:Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다.
innerHTML 사용하는 방법
이미 우리는 다량의 데이터가 포함된 data.js라는 파일이 있으므로 html에서 타이핑 하지 않고
1.)공간을 만들어 주고 2) 자바스크립트의 innerHTML 함수 활용해서
데이터를 넣을 것임.
<section id="qna">
<div class="qbox">
</div>1) 공간 만들어 주기: html에서 qbox라는 div 클래스를 만들기.
function goNext(qIdx){
// html파일에서 qna 안 qbox가져와라
var q= document.querySelector('.qbox');
q.innerHTML = qnaList[qIdx].q;
// 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을
// 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서
}
// 장면 넘어가는 animation
function begin(){
main.style.WebkitAnimation = "fadeOut 1s";
main.style.Animation = "fadeOut 1s";
setTimeout(() => {
qna.style.WebkitAnimation = "fadeIn 1s";
qna.style.Animation = "fadeIn 1s";
setTimeout(() => {
main.style.display = "none";
qna.style.display = "block"
}, 450);
// 위에서 세운 고넥스트 함수 호출
let qIdx = 0;
goNext(qIdx);
}, 450);
}2) innerHtml 활용하기
[코드 해석]
첫 번째 문단에서 goNext()함수를 이용해서
q라는 변수를 만들고 html에서 .qbox라는 것을 소환하겠다
라는 변수의 innerhtml은 data.js라는 파일의 qnalist에서 qIdx변수를 집어넣어 꺼내오겠다.
//라는 변수의 innerhtml은 data.js라는 파일의 qnalist에서 [0].q 0번째 순서부터 꺼내오겠다.
[코드 해석]
두 번째 문단에서 밑에서 네 번째 줄 goNext()함수를 호출하기 위해let qIdx를 처음 시작0이라고 하자그리고 gonext 안에 qIdx를 넣을 것이다.
createElement 정의
HTML 문서에서, Document.createElement() 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. tagName을 인식할 수 없으면 HTMLUnknownElement를 대신 반환합니다.
createElement 사용하는 방법 (ex. 버튼 만들어서 넣기)
function addAnswer(answerText){
var a = document.querySelector('.answerBox');
var answer = document.createElement('button');
a.appendChild(answer);
answer.innerHTML = answerText;★세 번째줄 의미: answer라는 변수는 button이라는 html 요소를 만들어(creatElement) 반환한다
[코드해석]
그 addAnswer함수를 쓰겠다 addAnser()
여기서 a는 answerbox에서 뽑아올거고
또한 answer 변수는 button을 만들거다 ( createElement )
이때, a는 answer 변수를 포함하고 있으므로 a인 answerbox div 안에 answer가 담긴 button이 포함된다.
answer 변수는 html에 포함될거고 이를 answertext라고 하자.
그리고 그것을 addAnswer(answertext)로 출력하자. - 가장 첫 번째 줄
[코드 해석]
answer라는 버튼이 a에게 소속될 수 있도록 a.appendchild(answer);
즉, a (=answerbox)라는 div 안에 button 이라는 요소 만들어서 answer 출력하겠다
// 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용
for(let i in qnaList[qIdx].a){
// answerlist를 하나씩 입력하지 않고 파라미터로
addAnswer(qnaList[qIdx].a[i].answer);
}
}답변 버튼마다 코드를 하나씩 입력하기 귀찮으므로
qnalist[qIdx]의 answer들을 하나씩 늘려서 아웃풋내기 위해 for을 쓰겠다
addanswer qnalist[qIdx]의 answer들을 i(숫자)차례대로 내겠다.