function 파라미터(parameter)

지난시간에 작성했던 js002.html 내용을 복사해서 js003.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>

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

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

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

<!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 코드를 절반으로 줄였습니다.

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

<!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 창의 색상이 바뀌게 만들어보자.

<!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>

PreviousfunctionNextParameter2

Last updated