1. 함수(Function)
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다.
이러한 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있다.
함수 선언
function 함수명(매개변수) {
함수본문
}
1. function이라는 선언자를 작성한 다음
2. 함수 이름을 작성하고
3. 소괄호를 열어서 매개변수를 작성한다. (매개변수 생략해도 되지만, 소괄호는 반드시 열고 닫아야 한다.)
4. 마지막으로 중괄호를 열어서 함수 본문을 작성하면 된다.
함수 호출
앞서 선언한 함수는 함수 이름 뒤에 소괄호를 붙여 호출할 수 있다.
함수명();
2. 매개변수(Parameter)와 인자(Argument)
매개변수(Parameter)
변수의 특별한 한 종류로서 함수 등에 input으로 제공되는 데이터
인자(Argument)
함수가 호출될 때 함수로 값을 전달해주는 값
3. 리턴(Return)
함수 내부에서 함수 외부로 값을 보내줄 때 return문을 꼭 써야 한다.
function 함수명(매개변수) {
return 함수본문
}
※ Return이 없을 때와 있을 때 차이
return이 없을 때: 함수 { } 영역에서 작성된 코드가 다 실행되면 함수가 종료되어 버림
return이 있을 때: return 키워드가 함수를 호출한 쪽으로 데이터를 전달함 (바깥에서 활용 가능)
return 없을 때
return을 사용했을 때
4. 함수의 활용
3.html 파일
nightDayHandler라는 함수를 따로 만들어서 <head> 부분에 따로 빼주고
"this"를 인자(argument)로 사용
<head>부분
onclick 이벤트가 발동하면 x=this가 되며 원래의 코드가 실행된다.
(night 버튼을 누르면 화면이 어두워지고 글씨가 파우더블루로 바뀌면서 버튼이 day로 바뀌는 원래 코드 실행)
