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줄이나 짜는게 마음에 안듭니다.

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

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

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

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

PreviousfunctionNextParameter2

Last updated