퀴즈 이펙트 만들기 복습 !

퀴즈 이펙트 복습

 

퀴즈 이펙트 02 부분

const quizWrap = document.querySelector(".quiz__wrap");
const quizTitle = quizWrap.querySelector(".quiz__title span");
const quizTime = quizWrap.querySelector(".quiz__title em");

이 코드는 JavaScript를 사용하여 HTML 문서의 클래스 이름이 "quiz__wrap"인 요소와 그 하위 요소들을 가져오는 것입니다.

1. querySelector 메서드는 해당 선택자에 해당하는 첫 번째 요소를 반환합니다.
2. 따라서 quizWrap 변수는 클래스 이름이 "quiz__wrap"인 요소를 나타냅니다.
3. 그리고 quizWrap 변수를 사용하여 해당 요소 내부의 요소를 선택하는데, querySelector 메서드를 다시 사용합니다.
4. quizTitle 변수는 quizWrap 요소 내부에서 클래스 이름이 "quiz__title"인 요소를 선택하고, 그 하위 요소 중에서 "span" 태그를 포함하는 첫 번째 요소를 나타냅니다.
5. 마지막으로 quizTime 변수는 quizWrap 요소 내부에서 클래스 이름이 "quiz__title"인 요소를 선택하고, 그 하위 요소 중에서 "em" 태그를 포함하는 첫 번째 요소를 나타냅니다.
6. 따라서, quizTitle 변수는 "quiz__title" 클래스 내부의 "span" 요소를 나타내고, quizTime 변수는 "quiz__title" 클래스 내부의 "em" 요소를 나타냅니다.

 

 

quizTitle.textContent = infoType;
quizTime.textContent = infoTime;

이 코드는 변수 quizTitle과 quizTime이 참조하는 요소의 텍스트 콘텐츠를 변경하는 코드입니다.

1. textContent 속성은 해당 요소의 텍스트 콘텐츠를 가져오거나 설정하는 속성입니다.
2. 따라서 quizTitle.textContent = infoType;은 quizTitle이 참조하는 요소의 텍스트 콘텐츠를 infoType 변수의 값으로 설정하는 것이며, quizTime.textContent = infoTime;은 quizTime이 참조하는 요소의 텍스트 콘텐츠를 infoTime 변수의 값으로 설정하는 것입니다.
3. 이를 통해, HTML 문서에서 특정 요소의 텍스트를 동적으로 변경할 수 있습니다.

 

 

quizAnswerConfirm.addEventListener("click", function(){
    if(infoAnswer == userAnswer){
        dogWrap.classList.add("like");
});

addEventListener 메서드는 이벤트가 발생했을 때 실행할 함수를 등록하는 메서드입니다.

1. 이 코드에서는 quizAnswerConfirm 요소에 click 이벤트에 대한 이벤트 핸들러 함수를 등록하고 있습니다.
2. click 이벤트는 해당 요소를 클릭했을 때 발생하는 이벤트이며, addEventListener 메서드의 두 번째 인자로 등록된 콜백 함수는 click 이벤트가 발생했을 때 실행됩니다.
3. 이벤트 핸들러 함수 내부에서는 if 문을 사용하여 infoAnswer 변수의 값과 userAnswer 변수의 값이 같은지를 비교하고 있습니다.
4. 만약 두 값이 같다면, "dogWrap" 요소의 클래스에 "like" 클래스를 추가하는 코드인 dogWrap.classList.add("like");가 실행됩니다.
5. 이렇게 이벤트 핸들러 함수를 등록하면 해당 요소에서 지정한 이벤트가 발생했을 때 등록된 함수가 실행되며, 이를 통해 동적인 기능을 구현할 수 있습니다.

 

 

객체를 불러오는 for in문

객체의 프로퍼티를 열거할 때 사용하는 반복문입니다.

배열에서도 사용 가능하지만 객체에 더 적합합니다.

{
    const obj = {
        a: 100,
        b: 200,
        c: "javascript"
    }
    for(let key in obj){
        console.log(key);
        console.log(obj[key]);
    }
}

결과

a
100
b
200
c
javascript