Do-it! JS 실습 복습 #unit2

Unit 2. 웹 문서와 자바 스크립트

---

5-1. 토글사용하여 상세 설명 열기/닫기

 

const viewBtn=document.querySelector("#view");
const detail=document.querySelector("#detail");

viewBtn.addEventListener("click",()=>{
    detail.classList.toggle("hidden");
})

 

toggle 사용하기

 

✅ point

이름.classList.toggle("클래스 명")

 

 

5-2. 최대공약수 구하기

 

const num1=document.querySelector("#number1");
const num2=document.querySelector("#number2");
const btn=document.querySelector("#calc");
const result=document.querySelector("#result");

let gcdNum=1;

btn.addEventListener("click",()=>{
    n1=parseInt(num1.value);
    n2=parseInt(num2.value);

    isNum(n1,n2);
});
//최대공약수 
function GCD(a,b){
    let min=(a>=b)?b:a;
    for(let i=0;i<=min;i++){
        if(a%i==0 && b%i==0){
            gcdNum=i;
        }
    }
    result.innerText=`${gcdNum}`;
}

function isNum(a,b){
    if(!isNaN(a) && !isNaN(b)){
        GCD(a,b);
    }else{
        result.innerText=`숫자입력`;
    }
}

 

최대공약수 구하기

 

✅ point

입력창.value

---

6-1.마우스 오버하면 이미지 바꾸기

 

const imgBox=document.querySelector("#container > img");

imgBox.addEventListener("mouseover",()=>{
    imgBox.src="./images/pic-1.jpg";
})
imgBox.addEventListener("mouseout",()=>{
    imgBox.src="./images/pic-2.jpg"
})

 

✅ point

mouseover

mouserout

변수.src

 

 

6-2. nav 토글

const btn=document.querySelector("#bttn");
const nav=document.querySelector("#nav");

btn.addEventListener("click",()=>{
    btn.classList.toggle("active");
    nav.classList.toggle("active");
})

 

 

✅ point

toggle

 

---

7-1. 명단 작성하기 

 

const userName=document.querySelector("#username");
const userMajor=document.querySelector("#major");
const btn=document.querySelector("button");
const tbody=document.querySelector("#attendant > tbody");

btn.addEventListener("click",(e)=>{
    e.preventDefault();
    
    let newTr=document.createElement("tr");
    let newTd1=document.createElement("td");
    newTd1.innerText=`${userName.value}`;
    let newTd2=document.createElement("td");
    newTd2.innerText=`${userMajor.value}`;
    
    newTr.appendChild(newTd1);
    newTr.appendChild(newTd2);
    tbody.appendChild(newTr);

    userName.value="";
    userMajor.value="";
})

 

✅ point

document.createElement("요소");

부모.appendChild(자식);

 

 

🤔 7-2.알림표시 생성, 3초 후 삭제

 

const notiBox=document.querySelector("#noti-box");
const btn=document.querySelector("#bttn");

btn.addEventListener("click",()=>{
    const noti=document.createElement("div");
    noti.classList.add("noti");
    noti.innerText="알림 내용이 표시됩니다.";
    notiBox.appendChild(noti);

    setTimeout(()=>{
        noti.remove();
    },3000);
});

 

알림 후 삭제

 

✅ point

document.createElement("요소")

부모.appendChild(자식);

setTimeout(()=>{

},시간)

remove() : 요소를 삭제

 

-css

#noti-box {
  position:fixed;
  top:20px;
  right:20px; 
}

우측 하단에 고정,fixed

 

👇참고 사이트

position