함수를 사용하면
1. 유지보수가 쉬워진다
2. 코드의 길이가 짧아진다
3. 적절한 이름을 붙여주면 코드가 어떤 일을 하는지 한눈에 알 수 있다.
함수의 입력과 출력
입력 : 매개변수(Parameter) 인자(Argument)
출력 : 리턴(Return)
이벤트
웹 브라우저에서 일어나는 여러가지 사건
function showDetail() { // '상세 설명 보기'를 클릭했을 때 상세 설명을 보여주는 함수
document.querySelector('#desc').style.display = "block"; // 상세 설명 부분을 화면에 표시
document.querySelector('#open').style.display = "none"; // '상세 설명 보기' 단추를 화면에서 감춤
}
function hideDetail() {
document.querySelector('#desc').style.display = "none";
document.querySelector('#open').style.display = "block";
}
<button class="over" id="open" onclick="showDetail()">상세 설명 보기</button>
<div id="desc" class="detail">
<h4>민들레</h4>
<p>어디서나 매우 흔하게 보이는 잡초로 톱니 모양의 잎새와 눈에 확 띄는 노란 꽃이 인상적이다. </p>
<button id="close" onclick="hideDetail()">상세 설명 닫기</button>
</div>