자바스크립트에는 함수 function 문법이 있는데, 이 문법을 왜 쓰는지 알아야 한다.
그래야 응용도 잘하고 혼자서 코드를 잘 작성 할 수 있다.
함수는 길고 복잡한 코드를 한 단어로 축약하고 싶을 때 쓰는 문법이다.
어려운말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법이다.
function 문법 사용법
function 자유롭게작명() {
축약하고 싶은 긴 코드
}위 코드를 작성하고 자유롭게작명() 이거 쓸 때 마다 그자리에 축약하고 싶은 긴 코드가 실행된다.
function 문법 응용 예제
2023.03.26 - [Front end/JavaScript] - 동적 UI 만드는 방법
여기서 작성한 예제이다. 참고하면 더 빠른 이해가 될 것이다!
<button onclick="openAlert()">열기</button>
<script>
function openAlert() {
document.querySelector('.alert-box').style.display = 'block';
}
</script>알림창 여는 코드를 function 안에 넣어봤다.
그럼 이제 openAlert()라고 쓸 때 마다 function 안에 있는 긴 코드가 실행된다.
그래서 onclick 안에 예전처럼 길게 코드를 작성하지 않고 단어 하나로 긴 코드를 축약할 수 있다. 매우 편리함
닫기 버튼에 있는 자바스크립트 코드도 함수로 축약해보았다.
함수 파라미터 문법을 사용하면 하나의 함수로 많은 기능을 나타낼 수 있을 것 같지만 아직 배우지않은 문법이므로 사용하지않는 않았다.
<body>
<div class="alert-box">
알림창임<button onclick="closeAlert()">닫기</button>
</div>
<button onclick="openAlert()">열기</button>
<script>
function openAlert() {
document.querySelector('.alert-box').style.display = 'block';
}
function closeAlert() {
document.querySelector('.alert-box').style.display = 'none';
}
</script>
</body>
'Front end > JavaScript' 카테고리의 다른 글
| 자바스크립트 이벤트리스너를 왜 쓰는가? (0) | 2023.03.26 |
|---|---|
| 자바스크립트 function의 파라미터 문법 왜 쓰는가? (0) | 2023.03.26 |
| 동적 UI 만드는 방법 (0) | 2023.03.26 |
| 자바스크립트를 왜 쓰는가? (0) | 2023.03.26 |
| 참조, 얕은복사, 깊은복사 (0) | 2023.03.05 |
