[코딩애플] 실용 자바스크립트 3강 : function 언제 쓰는지 아셈? + 간단한 버그 찾는 법

2023. 1. 22. 01:59언어(Language)/Javascript

오늘 배울 것 : function

+대체 언제 function이 등장해야 하는지

 

function을 쓰면 긴 코드를 깔끔하게 한 단어로 축약가능

 

과제)

[codingApple.html]

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="codingApple.css">
</head>
<body>
    <div class="alert-box" id="alert">
        <p>Alert 박스</p>
        <button onclick="closeAlert()">닫기</button>
    </div>
    <button onclick="openAlert()">버튼</button>
    <script>
        function openAlert() {
            document.getElementById('alert').style.display='block';
        }
        function closeAlert() {
            document.getElementById('alert').style.display='none';
        }
    </script>
</body>
</html>

[codingAplple css]

.alert-box {
    background: #aba8f4;
    color: #4646b4;
    padding: 20px;
    border-radius: 5px;
    display: none;
}