# function 파라미터(parameter)

지난시간에 작성했던 js002.html 내용을 복사해서 js003.html 파일을 만들어보자.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button onclick="alertClose()">닫기</button>
    </div>
    <button onclick="alertPopup()">알림창을 보여줘!</button>
</body>

<script>
    function alertPopup(){
        document.getElementById('alert').style.display = 'block'
    }

    function alertClose(){
        document.getElementById('alert').style.display = 'none'
    }

</script>
</html>
```

&#x20;이번 시간에는 파라미터(parameter) 라는 것을 사용해서 코드 중복을 줄이고 더 간결하게 작성해보자.

이렇게 alertPopup과 alertClose에 내용이 달랑 마지막 'block' , 'none' 만 다른데 이렇게 코드를 6줄이나 짜는게 마음에 안듭니다.&#x20;

그래서 이 두 함수를 하나로 합쳐 볼 겁니다.&#x20;

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button onclick="alertControl('none')">닫기</button>
    </div>
    <button onclick="alertControl('block')">알림창을 보여줘!</button>
</body>

<script>

    function alertControl(파라미터){
        document.getElementById('alert').style.display = 파라미터;
    }
   
</script>
</html>
```

이렇게 간단하게 Javascript 코드를 절반으로 줄였습니다.

이런 파라미터는 여러 개를 사용 할 수도 있습니다.&#x20;

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="alert" class="alert-box" >
        알림창
        <button onclick="alertControl2('alert','none')">닫기</button>
    </div>
    <div id="alert2" class="alert-box" style="background-color: crimson">
        알림창
        <button onclick="alertControl2('alert2','none')">닫기</button>
    </div>
    <button onclick="alertControl('block')">알림창을 보여줘!</button>
</body>

<script>

    function alertControl(파라미터){
        document.getElementById('alert').style.display = 파라미터;
        document.getElementById('alert2').style.display = 파라미터;
    }

    function alertControl2(파라미터1, 파라미터2){
        document.getElementById(파라미터1).style.display = 파라미터2;
    }

</script>
</html>
```

✨ 과제. js004.html 파일을버만들어서  alert창 하나와버튼을 두개 만들고 버튼별로 alert 창의 색상이 바뀌게 만들어보자.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<div id="alert" class="alert-box" >
    알림창
    <button onclick="alertControl('none')">닫기</button>
</div>

    <button onclick="">버튼 1 </button>
    <button onclick="">버튼 2</button>
</body>

<script>
</script>
</html>
```


---

# 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://leeans-dev-book.gitbook.io/docs/lecture/javascript/function-parameter.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.
