JavaScript (Function)
이번 포스팅에서는 function에 대해서 짧고 굵게 알아보겠습니다.
앞서 Alert에서 사용했던 코드를 활용해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">Alert 박스
<button onclick="document.getElementById('alert').style.display='none';">닫기</button>
</div>
<button onclick="document.getElementById('alert').style.display='block';">버튼</button>
<script>
</script>
</body>
</html>onclick 안에 작성된 코드를 보면 너무 길어 보입니다.
이렇게 긴 코드를 줄이기 위해 사용하는 기능이 function 입니다.
function : 긴 코드를 깔끔하게 한 단어로 축약해서 사용하게 해주는 기능입니다.
function 문법
function 아무렇게나작명(){
긴 코드~~~
긴 코드~~~
}'아무렇게나작명()'만 사용하여서 긴 코드를 불러와서 실행시킬 수 있습니다
그러면 Alert의 열기 버튼을 function을 사용하여 구현해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">Alert 박스 <button onclick="document.getElementById('alert').style.display='none';">닫기</button>
</div>
<button onclick="alertOpen()">버튼</button>
<script>
function alertOpen(){
document.getElementById('alert').style.display='block';
}
</script>
</body>
</html>길었던 코드 document.getElementById('alert').style.display='block'; 를 alertOpen()로 줄여서 구현했습니다. 코드가 매우 간단해지고 보기에도 좋습니다.
JavaScript를 작성할 때 흔히 볼 수 있는 오류!
1. <script></script>를 HTML 보다 위에 작성한 오류
컴퓨터의 명령은 위에서부터 아래로 내려가면서 실행이 됩니다.
즉, 자바스크립트 명령이 위에 있다면 컴퓨터는 해당 자바스크립트가 지칭하는 요소를 찾지 못하여 에러가 납니다. -> 자바스크립트 명령어를 사용할 때는 HTML 밑에 작성하자!!
2. innerHTML of null
innerHTML의 왼쪽 값이 널 값임을 의미합니다.
이러한 에러가 날 경우 getElementById()의 selector를 확인해보거나 (오타 or 잘못된 selector)
<script></script>의 위치를 확인해보시면 됩니다.
3. OOO is not a function
오타, 띄어쓰기 등의 오류
손은 눈보다 빠르다! 나도 모르게 오타를 낼 수 있기 때문에 항상 오타를 확인해야 합니다.
자바스크립트에서 변수명은 띄어쓰기 대신 언더바(_)를 사용합니다.
위와 같은 오류가 생길 경우 오타나 띄어쓰기를 다시 봐주면 해결할 수 있습니다.
※ 연습문제
닫기 버튼의 기능을 function으로 바꾸어서 작성해보자!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">Alert 박스 <button onclick="document.getElementById('alert').style.display='none';">닫기</button>
</div>
<button onclick="alertOpen()">버튼</button>
<script>
function alertOpen(){
document.getElementById('alert').style.display='block';
}
</script>
</body>
</html>풀이 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">Alert 박스
<button onclick="alertClose()">닫기</button>
</div>
<button onclick="alertOpen()">버튼</button>
<script>
function alertOpen(){
document.getElementById('alert').style.display='block';
}
function alertClose(){
document.getElementById('alert').style.display='none';
}
</script>
</body>
</html>
Next > JavaScript (Parameter)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript (EventListener) (0) | 2021.08.06 |
|---|---|
| JavaScript (Parameter) (0) | 2021.08.05 |
| JavaScript (Alert) (0) | 2021.08.02 |
| JavaScript (Selector) (0) | 2021.08.01 |
| Ajax Tutorial (0) | 2021.07.13 |
