자바스크립트 function 문법
함수는 길고 복잡한 코드 한 단어로 축약하고 싶을 때 쓰는 문법이다.
특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법인데
그냥 긴 코드 짧은 단어로 축약하고 싶을 때 쓰는 문법이라고 외우자
function 작명(){
축약하고 싶은 긴 코드
}- function 키워드 쓰고 소괄호, 중괄호 붙인다.
- 그리고 소괄호 왼쪽에 작명하고
- 긴 코드를 중괄호 안에 담으면 코드 축약 끝
그럼 이제 작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행된다.
function 작명은 구체적인게 좋음
(참고)
함수 이름을 영어로 작명할 때
- 영어소문자로 시작한다.
- open_alert() 이런건 X openAlert() 이렇게 붙여서 쓰는게 자바스크립트 관습입니다. (일명 camelCase)
- 한글작명도 상관없긴하다.
자주 겪는 에러들
1. JS 코드는 밑에 짜야한다.
자바스크립트는 html 조작하는 언어.
조작할 html이 위쪽에 있어야 조작이 잘 되고, 자바스크립트를 조작할 html 위에 작성하면 안된다.
왜냐하면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄한줄 읽는데 미리 html을 읽어놔야 조작이 가능하기 때문!!
2. 오타
에러메세지는 브라우저 개발자도구 Console 탭에 들어가서 브라우저에서 우클릭 - 검사 - Console탭 누르면 나온다.
여기에 Cannot read properties of null 어쩌구 에러가 나오면 id 이름이 잘못되었다는 뜻
~~ is not a function 은 함수명이 잘못되었다는 뜻.
getElementById() 이것도 소괄호 붙는거 보니까 함수인데 여기에 오타가 있다는 말이다.
아무튼 오타났다고 알려주는 고마운 메세지니까 이거 보고 "디버깅"을 하면 된다.
(버그 없애는걸 디버깅)
or
실은 에러메세지 그대로 구글 찾아보는것도 빠르다.
function의 파라미터 문법
파라미터라고 하면 어려우니까 구멍이라고 이해하면 된다.
함수내에 구멍을 뚫어줄 수 있다.
구멍을 뚫는 이유는 함수를 업그레이드해서 사용할 수 있다.
구멍이 뚫려있으면 이제 함수를 쓸 때 그냥 쓰는게 아니라 소괄호 내에 뭔가 문자나 숫자등을 입력해서 사용가능하다.
function 알림창열기(구멍){
document.getElementById('alert').style.display = 구멍;
}구멍을 뚫는 법은
-
() 소괄호 내에 아무 글자나 적고
-
{} 중괄호 내에도 같은 글자 아무데나 적으면 된다.
function 알림창열기(구멍){
document.getElementById('alert').style.display = 구멍;
}
알림창열기('안녕');
알림창열기('바보');업그레이드 된 함수를 사용할 때는 소괄호 구멍자리에 뭔가 내가 원하는 문자를 입력해줄 수 있다.
문자를 입력하면 아까 그 {} 중괄호 내부의 '구멍'자리에 문자가 들어가게 된다.
그럼 알림창열기('안녕') 이렇게 실행하면
document.getElementById('alert').style.display = '안녕'; 이런 코드가 실행된다는 것이다.
- 좀 더 실용적인 사용예시
function 알림창열기(구멍){
document.getElementById('alert').style.display = 구멍;
}
알림창열기('none'); //이거 실행하면 알림창열릴듯
알림창열기('block'); //얘는 닫힐듯알림창열기('block') 이렇게 실행하면
document.getElementById('alert').style.display = 'block'; 이런 코드가 실행되면서
알림창이 열리고
알림창열기('none') 이렇게 실행하면
document.getElementById('alert').style.display = 'none'; 이런 코드가 실행되면서
알림창이 열린다.
이렇게 하면 함수 2개나 만들 필요 없겠다.
- 좀 더 실용적인 사용예시 2
function plus(){
2 + 1
}코드를 짜다가 2 + 1 같은 수식을 함수로 축약해서 사용하고 있는데 갑자기 2 + 2 도 필요하고 2 + 3 도 필요하다면??
function plus(){
2 + 1
}
function plus2(){
2 + 2
}
function plus3(){
2 + 3
}이렇게 생각할 수 있지만 이럴때 파라미터 문법으로
function plus(구멍){
2 + 구멍
}가변적인 부분을 구멍뚫어주면 이제 함수 쓸 때 마다
plus(1) 하면 2 + 1 해주고 plus(2) 하면 2 + 2 해주니까 함수 하나로 해결가능하다.
그래서 쓰는 문법이 파라미터문법이다.
파라미터 문법 특징
1. 파라미터는 자유롭게 작명가능하다.
function plus(a){
2 + a
}2. 파라미터는 2개 이상 사용가능하다.
function plus(a, b){
a + b
}
plus(2, 5);콤마로 구분하면 되고, 그럼 함수 사용할 때도 자료 2개 입력가능
getElementsByClassName 셀렉터
위에서는 어떤 html 요소를 찾고 변경할 때 id로 찾았었는데 class 같은걸로도 찾을 수 있다.
예시>
<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>얘를 셀렉터로 찾고 변경하고 싶으면 class명이 title1인걸 찾아라~ 라고 명령줄 수도 있다.
<p class="title1"> 테스트1 </p>
<p class="title1"> 테스트2 </p>
<script>
document.getElementsByClassName('title1')[0].innerHTML = '안녕';
</script>이러면 첫 <p> 태그 내용이 안녕으로 바뀐다.
getElementsByClassName('클래스명')[순서] 이렇게 쓰면 된다.
0] 이렇게 순서를 넣는 이유는 getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문이다.
그래서 그 중에 몇번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여줘야한다.
[0] 이렇게 쓰면 찾은 것 중 위에서 부터 1번째 요소
[1] 이렇게 쓰면 찾은 것 중 위에서 부터 2번째 요소
[2] 이렇게 쓰면 찾은 것 중 위에서 부터 3번째 요소
...
이렇게 쓰면 되고 대괄호 꼭 붙이기
getElementsByTagName -> 태그명으로 찾아줌
getElementsByName -> name 속성으로 찾아줌
등 여러가지 셀렉터가 있는데 class, id 로 찾는게 가장 흔해서 그것만 알아도 된다고 한다.
addEventListener 이벤트 리스너
버튼의 안에 자바스크립트를 길게 짰는데 복잡해보여서 보기싫으면 이벤트리스너 문법 사용할 수 있다.
그럼 html 안에 자바스크립트 안적고도 똑같이 개발할 수 있다.
document.getElementById('작명이름').addEventListener('click', function(){
//실행할 코드
});이렇게 작성하면 'id가 작명이름인 요소를 클릭하면 안의 코드를 실행해주세요~' 라는 뜻이다.
이것을 쓰면 버튼 같은 곳에 onclick 넣을 필요가 없다.
(ex) 알림창 열고 닫기
<div class="alert-box" id="alert">
<p id="title">알림창</p>
<button onclick="알림창열기('none');">닫기</button>
</div>
<button onclick="아이디알림창()">버튼1</button>
<button onclick="비번알림창()">버튼2</button>
<script>
function 아이디알림창() {
document.getElementById('title').innerHTML = '아이디를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
function 비번알림창() {
document.getElementById('title').innerHTML = '비밀번호를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
</script>onclick을 사용해 이렇게 처음에는 적었다면,
<div class="alert-box" id="alert">
<p id="title">알림창</p>
<button id="close">닫기</button>
</div>
<script>
function 아이디알림창() {
document.getElementById('title').innerHTML = '아이디를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
function 비번알림창() {
document.getElementById('title').innerHTML = '비밀번호를 입력하세요';
document.getElementById('alert').style.display = 'block';
}
document.getElementById('close').addEventListener('click', function () {
document.getElementById('alert').style.display = 'none';
});
</script>
addEventListener를 사용해서 이렇게 적어볼 수 있다.
addEventListener의 event 개념
유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부른다.
어떤 요소 클릭시엔 click 이벤트
마우스갖다대면 mouseover 이벤트
스크롤하면 scroll 이벤트
키입력하면 keydown 이벤트... 몇십가지가 있다.
그리고 이벤트가 일어나길 기다리는 친구가 이벤트 리스너이다.
이벤트 리스너는 이벤트가 일어나면 내부 코드를 실행해주는 고마운 기본 문법
그렇다면 이벤트 리스너 쓰면 다양한 이벤트도 체크가능하다.
(ex)
셀렉터로찾은요소.addEventListener('mouseover', function(){
실행할코드
});셀렉터로찾은요소에 마우스를 갖다대면 특정 코드를 실행해줌
셀렉터로찾은요소.addEventListener('scroll', function(){
실행할코드
});셀렉터로찾은요소가 스크롤되면 특정 코드를 실행해줌 (당연히 그 요소에 스크롤바가 있어야된다.)
셀렉터로찾은요소.addEventListener('keydown', function(){
실행할코드
});셀렉터로찾은요소에 키보드로 글자를 입력하면 특정 코드를 실행해줌 (그 요소가 글자를 입력할 수 있는 input 이런거 있어야 한다)
이벤트 종류는 수십가지가 있어서 이벤트 목록 필요할 때 찾아쓰기
https://developer.mozilla.org/en-US/docs/Web/Events
콜백함수 개념
셀렉터로찾은요소.addEventListener('scroll', function(){} );addEventListener() 함수에는 파라미터 자리에 2개의 자료를 집어 넣는데
저렇게 함수 파라미터자리에 들어가는 함수를 전문용어로 '콜백함수'라고 한다.
콜백함수는 그냥 뭔가 순차적으로 실행하고 싶을 때 많이 보이는 함수형태며
그냥 함수안에 함수 넣으라고 하면 "아 저건 콜백함수구나~" 라고 이해하면 된다.
지금 코드짤 때는 우리가 콜백함수를 직접 작성하고 그럴 일은 없고
콜백함수 쓰라고 하는 자리가 있으면 잘 쓰기만 하면 된다고 한다.
