03. Function

function

---

함수는 길고 더러운 코드를 한 단어로 축약할 때 쓰는 문법입니다.

→ 특정한 기능을 다음에도 쓰기 위해 모듈화 해놓는 문법

function 자유롭게작명() {
  축약하고 싶은 긴 코드
}

1. function 키워드 쓰고 소괄호, 중괄호 붙입니다.
2. 소괄호 왼쪽에 작명하고
3. 긴 코드를 중괄호 안에 담으면 코드 축약 끝

자유롭게작명() 이걸 쓸 때 마다 그 자리에 긴 코드가 실행됩니다.

Alert 여는 코드 function 으로 축약하기

---

<button onclick="document.getElementById('alert').style.display = 'block';">알림창 여는 버튼</button>

위 코드를 아래처럼 아래와 같이 작성할 수 있습니다.

<button onclick="알림창열기()">알림창 여는 버튼</button>

<script>
  ㅜ 견

알림창 여는 버튼을 클릭하면 function 안에 있는 코드가 실행됩니다.

💡 함수 이름을 작명할 때, - 영어 소문자로 시작합니다. - 카멜케이스로 작성하는게 관습입니다. open_alert() x openAlert() o - 한글 작명도 상관x 자

자주 겪는 에러들

---

1. JS 코드는 밑에 짜야한다.

브라우저가 html 파일을 읽을 때 위에서 한 줄씩 순차적으로 읽는데 조작할 html 보다 JS 코드가 위쪽에 있다면 조작할 html을 읽어오지 않았기 때문에 오류가 발생합니다.

1. 오타

getElementById() 인데 i를 소문자로 쓰는 경우도 있고,

잘못된 id를 가진 요소를 찾는 등 의 문제가 있을 수 있습니다.

다행히 이상하게 코드를 짜면 개발자도구 Console 탭에서 확인이 가능합니다.

브라우저에서 우클릭 - 검사 - Console 탭

또는 F12 - Console 탭