JS (1)

document.get???('???').?? = ??;

1. get??? : 원하는 선택자 ( className, name, id )
2. ('???') : 바꿀 선택자
3. .?? : 무엇을
4. ??; : 어떻게

기본적인 UI 만드는 법칙

1. HTML CSS 로 미리 UI 디자인을 해놓고 필요하면 평소엔 숨김.
2. 버튼을 누르거나할 경우 UI를 보여달라고 자바스크립트 코드를 짬.

예제(알림창)

<div class="alert-box" id="alert">알림창임</div>
    <button onclick="알림창열기()">버튼</button>
    <button onclick="document.getElementById('alert').style.display = 'none'">닫기</button>

    <script>
        function 알림창열기(){
            document.getElementById('alert').style.display = 'block';
        }
        document.get
    </script>

JS함수 작명법

1. 작명은 구체적으로
2. 소문자로 시작
3. camelCase
   예시) alertBox, openAlert

초보들이 많이 하는 실수

1.조작할 html의 하단에 코드를 짜야합니다.

<script>
        function 알림창열기(){
            document.getElementById('alert').style.display = 'block';
        }
        document.get
</script>
    
<div class="alert-box" id="alert">알림창임</div>
    <button onclick="알림창열기()">버튼</button>
    <button onclick="document.getElementById('alert').style.display = 'none'">닫기</button>

    

이런 경우 동작이 안될수 있습니다.

2.셀럭터 오타
브라우저 개발자도구에서 확인 가능합니다.
Cannot read properties of null은 대부분 오타입니다.
~~ is not a function은 함수명이 잘못되었다는 뜻입니다.

에러메시지 그대로 구글링 해보자.