충분히 쌓여가는
3. function 사용법 본문
function 문법
- 함수는 길고 더러운 코드를 한 단어로 축약하고 싶을 때 사용하는 문법
- 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법
function 함수이름() {
코드
}
Alert 코드 function으로 축약
기존코드
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">알림창
<button onclick="document.getElementById('alert').style.display = 'none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display = 'block';">열기</button>
</body>
</html>
function 사용
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">알림창
<button onclick="alertColse()">알림창 닫기</button>
</div>
<button onclick="alertOpen()">알림창 열기</button>
<script>
function alertColse() {
document.getElementById('alert').style.display = 'none';
}
function alertOpen() {
document.getElementById('alert').style.display = 'block';
}
</script>
</body>
</html>자주 겪는 에러
- JavaScript 코드는 html 코드 밑에 생성
- JavaScript는 html을 조작하는 언어
- 컴퓨터가 html 파일을 읽을 때 위에서 부터 읽기 때문에 html을 미리 읽어야 JavaScript 조작 가능
- 오타 주의
- 예를 들어
getElementById를 getelementById나 getElementByid와 같이 대문자를 소문자로 입력하는 오타 주의 - 에러 발생 했을 시
개발자 도구에서Console탭에서 확인하기
- 예를 들어
'JavaScript > Level1' 카테고리의 다른 글
| 6. 서브메뉴 만들어보기와 classList 다루기 (1) | 2024.11.12 |
|---|---|
| 5. 이벤트리스너 (1) | 2024.11.07 |
| 4. function의 parameter 문법 (0) | 2024.11.06 |
| 2. UI 만드는 법칙, 동적 UI 만들기(Alert 박스) (0) | 2024.11.04 |
| 1. 자바스크립트 근본 (4) | 2024.11.04 |
'JavaScript/Level1' Related Articles
more
