function

<!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="document.getElementById('alert').style.display = 'none'">닫기</button>
    </div>
    <button onclick="document.getElementById('alert').style.display = 'block'">알림창을 보여줘!</button>
</body>

</html>

이렇게 라인안에 모든 내용을 작성하면 (js, css) 라인이 너무 길어지고 코드가 지저분해진다.

지저분한 코드 = 수정, 유지보수가 어렵다.

<script> 
    function 함수명(){
        //함수내용 작성
    }
</script>

✨실습. button에 있는 javaScript를 function으로 분리하기

🐫함수명 작명 방법(camelCase)

함수명을 작명할때는 camelCase로 직관적이게 작성한다.

😱오타 주의!

 function alertPopup(){
     document.getElementById('alret').style.display = 'block'
 }
 
 // alert > alret 오타

이렇게 오타가 나면 버튼을 클릭해도 동작을 안한다.

당황하지 말고 F12를 눌려서 개발자 도구를 켜보자😥

이렇게 오류 로그를 보고 원인을 찾고 수정하는것을 Debugging(디버깅) 이라고 한다.

해당 에러로그를 복붙해서 구글에 검색해보자.

https://sir.kr/qa/398083 : 여기서 답변을 확인해보자

앞으로 개발을 하면서 수많은 오류들을 만날텐데 로그만 봐도 알 수 있는 경우도 있고 모르겠으면 구글에 검색해보면 된다.

PreviousUI 만들기 Nextfunction 파라미터(parameter)

Last updated 1 year ago