# 조건문 ( if , else, and, or)

## if

**if 조건은 항상 참이어야함** 

```javascript
if(10 === 5){ // 5보다 10이 큰지 체크함 
// 만약 10 > 5 -> hi 출력
 console.log("hi")
 }else if(10 === "10"){
 console.log("ho")
 }
 else{
 console.log("no") // no 출력
}

if(20 > 5 && "boo" ==== "boo"){
 // && 두가지의 조건이 다 충족되야함
 // || or이라서 하나만 충족되도됨
 console.log("yes") // yes 출력
}else{
 console.log("no") 
}

const age = prompt(" 몇살이야? ");

if(age >= 18 && age <= 21 ){ // 18살 21사이 일때 
 console.log(" you can drink you shold not");
 }else if(age > 21){ //21살보다 많을때 
   colsole.log(" go ahead ")
 }else{// 두조건이 다 아닐때 
 console.log(" too young ");
 }



```

### if else

```javascript
const title = dociment.querySelector("#title");

const BASE_COLOR = "#999";
const OTHER_COLOR = "#7F8CD";

 function handleClick(){
    const cureenColor = title.style.color;
    if(cureenColor === BASE_COLOR){
      title.style.color =  OTHER_COLOR; //false
    }else{
     title.style.color = BASE_COLOR ; // 클릭하면 #999로 바뀜
    }
 } 
 
 function inlit(){
  title.style.color = BASE_COLOR; 
  title.addEventListener("click" handleClick); // "mouseenter" -> 마우스를 대면 색상이 바뀜
  // 많은 DOM 이벤트가 있다 NDN참조하기
 }
 
 inlit();
```

```javascript
const title = dociment.querySelector("#title");
const CLICKED_CLASS = "clicked";

function hadle(){
    const currentCalss = title.className;
    if(currentCalss !== CLICKED_CLASS) {//currentCalss 와 CLICKED_CLASS 같지 않을때
 title.className = CLICKED_CLASS; // clicked class가 붙어서 해당 css가 실행이 됨
}else{
 title.className = "";
}
};
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeboa.gitbook.io/study/undefined/if-else-and-or.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.