[JavaScript] function 기초

자바스크립트에는 function이 있다...

1. function(함수) 문법 왜 쓰는가?

- 간단 : 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법

- 어렵: 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법

 

- 재사용 : 자주 쓰는 기능 function으로 작성해놓으면 필요할 때 function만 가져다 쓰면 됨

<!-- 함수 안 쓰고 HTML에서 다 처리하기 -->
<button onclick="document.getElementById('alert').style.display = 'block';">button</button>

<!-- 함수 쓰기 -->
<button onclick="openAlert()">button</button>

<script>
  function openAlert(){
    document.getElementById('alert').style.display = 'block';
  }
</script>

See the Pen 0928알림창 by lee (@moonthree) on CodePen.

---

2. function(함수) 이름 작성법

- camelCase로 작성이 자바스크립트 관습..!

- open_alert() 이런거 말고 openAlert() !!

---

3. 주의사항

3-1. JS 코드는 html 밑에 짜는 게 좋음

• 자바스크립트는 html 조작하는 언어
• 조작할 html이 자바스크립트 코드 위쪽에 있어야 조작이 잘 됨
• 왜냐면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄씩 읽는데
• 미리 html을 읽고 자바스크립트를 읽어야 html 조작이 가능함
• 하지만 100% 그런 것은 아님 주의

---

3-2.  오타주의

• geyElementById() -> 대문자가 3개임
• 오타 나기 쉽고, 오타나면 에러 발생함
• 에러나면 브라우저의 console 탭에서 확인할 수 있음 - 밑에 사진 처럼
• 무슨 에러인지 보고 '디버깅' 하거나 구글 찾아보면 됨