[Codding Apple, js] 자바스크립트 function 문법 사용법

자바스크립트 function 문법

function (일명 함수) 라는 문법이 있는데

이 문법 쓰는 이유부터 알아보자!

함수는 긴코드를 한 단어로 축약하고 싶을 때 쓰는 문법!

개발자의 말로 표현하자면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법

간단하게 말하면 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 암기

function 작명(){
  축약하고 싶은 코드
}

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

그럼 이제 작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행

 

Alert 여는 코드 function으로 축약해보기

버튼의 onclick 안에 길고 더러운 자바스크립트 코드가 있었는데

그걸 함수 문법을 이용하면 짧게 축약해서 쓸 수 도 있음.

<button onclick="open()">알림</button>

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

Alert 여는 코드를 function 안에 넣어봤습니다.

그럼 이제 open() 라고 쓸 때 마다 function 안에 있는 긴 코드가 실행

그래서 버튼 onclick 안에 예전처럼 길게 코드 안짜도 됩니다.

단어하나 적으면 끝임! 축약 성공!

---

*참고

함수 이름을 영어로 작명할 때

• 영어소문자로 시작합니다.
• open_alert()  안됨!  openAlert() 이렇게 붙여서 쓰는게 자바스크립트 관습입니다. (camelCase)

---

자주 겪는 에러들 1.JS 코드는 밑에 짜야함

자바스크립트는 html 조작하는 언어

근데 조작할 html이 위쪽에 있어야 조작이 잘 된다.

자바스크립트를 조작할 html 위에 작성하면 안돼!

왜냐면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄한줄 읽는데

미리 html을 읽어놔야 조작이 가능하기 때문

 

자주 겪는 에러들 2. 오타주의

셀렉터 오타주의!

에러메세지는 브라우저 개발자도구 Console 탭에 들어가면 나옵니다.

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

 

Cannot read properties of null... 라는 에러가 나오면

 셀렉터 이름이 잘못되었다는 뜻

 

 ~~ is not a function 은 함수명이 잘못되었다는 뜻

 

console 메세지 보고 "디버깅" 이란걸 해나가면돼!

*버그없애는걸 디버깅이라고함

 

에러메세지 그대로 구글 찾아보는것도 빠름ㅋㅋ

 

다시복습!!

function은 긴코드를 안쓰기위함도 있고,

다른곳에서 똑같은 코드 쓸 때 재활용하기 위해서