---

1)UI만드는 방법

1. 일단 만들고 숨긴다.
2. 특정 이벤트감지 했을 때, 드러나도록 한다.

---

2)display: none; 안보이게 만들기

display: none;

---

3)이벤트감지했을 때, 안보이는 것을 다시 보이게 하기

• 결론 : display: none;으로 안보이게 설정했을 경우에는, display: block;이나 display: inline;을 추가해라

//원리

//css
.show-alert-box {
  display: block;
}

const onClick = function () {
        document.querySelector(".alert-box").classList.add("show-alert-box");
};

document.querySelector("button").addEventListener("click", onClick);

//div처럼 원래 block일경우
display: block;

• 버튼 클릭 이벤트 감지하도록 만듦
• 이벤트 콜백함수
  • .alert-box인 tag에 .show-alert-box class를 추가함
  • .show-alert-box는 css display:를 none -> block으로 바꿨음
• 결론 버튼클릭하면, 경고창 박스가 보이게 된다.

//span처럼 원래 inline일경우
display: inline;

---

4)onclick속성으로 버튼 클릭할 때, 자바스크립트 코드 실행하기

<button onclick="js코드">버튼</button>

• 버튼을 클릭하면, onclick속성안에 입력된 js코드가 실행된다.

---

5)Cannot set properties of null (setting 'innerHTML') index.html:33 오류메시지 해석

document.querySelector(".asd").innerHTML = "aaa";

• innerHTML의 옆이 null이다.
• class가 asd인 tag가 null이다 -> 없는 값이다.

index.html:33

• index.html의 33번째 줄에 오류가 있다는 뜻이다.

---

6)function 함수쓰는 이유

긴 js코드를 축약시키려고 사용한다.

//첫번째
document.querySelector(".alert-box").classList.add("show-alert-box");
//두번째
const onClick = function () {
 document.querySelector(".alert-box").classList.add("show-alert-box");
};

• 첫번째 코드를 함수로 만들면, onClick() 짧은 코드만 쓰더라도 긴 첫번째 코드를 사용할 수 있다.

여러개의 비슷한 함수를 하나의 함수로 축약할 수 있다.

//경고창 여는 함수
function showAlertBox() {
  document.querySelector(".alert-box").style.display = "block";
}
//
//경고창 닫는 함수
function closeAlertBox() {
  document.querySelector(".alert-box").style.display = "none";
}
//
//경고창 열거나 닫을 수 있는 함수
function alertBox(x) {
  document.querySelector(".alert-box").style.display = x;
}

• 경고창 열거나 닫는 2개의 함수를 1개의 함수로 축약해서 사용가능하다
  1. alert('block');
  2. x에 'block' 대입
  3. document.querySelector(".alert-box").style.display = "block"; 실행