3강 / 자바스크립트 function 문법 사용법
자바스크립트 function 문법
function (함수) 라는 문법이 있는데
이 문법 쓰는 이유부터 알고 지나가보자!
- 함수는 길고 더러운 코드 한 단어로 축약하고 싶을 때 쓰는 문법이다.
- 개발자말로 표현하면 특정 기능을 다음에도 쓰기 위해 모듈화해놓는 문법이다.
function 자유롭게작명(){
축약하고 싶은 긴 코드
}-
function 키워드 쓰고 소괄호, 중괄호 붙이면 된다.
-
그리고 소괄호 왼쪽에 작명하고
-
긴 코드를 중괄호 안에 담으면 코드 축약 끝이다!
그럼 이제 자유롭게작명() 이거 쓸 때 마다 그 자리에 긴 코드가 실행된다.
함수명을 지을 때 참고해야할 것들이 있다.
- 함수 이름만 보고 어떤 동작을 하는지 바로 알 수 있도록 작성해야 한다.
- 함수 이름은 대체로 명사. 함수이름은 가능한 간결하고 명확하게 작성해야한다.
함수명 규칙
위 내용과 사이트를 참고하여 함수명을 잘 지을 줄 알아야 한다!
Alert 여는 코드 function으로 축약해보기
함수를 어떻게 만드는지 알았으니 한번 실제 적용하여 함수를 사용해보자
알림창을 여는 버튼에 onClick이 있었는데 이 안의 긴 코드를 함수로 축약하여 바꾸어보자!
<button
onclick="document.getElementById('alert-box').style.display = 'block'">
버튼
</button>⬇️
<button onclick="showNotification()">알림창 여는 버튼</button>
<script>
function showNotification(){
document.getElementById('alert').style.display = 'block';
}
</script>위 코드 실행방식은 이렇다
1. 알림창을 여는 버튼을 클릭
2. onClick이 실행되면서 showNotification()함수를 호출한다.
3. showNotification()함수가 실행되면서 그 안에 있는 코드들이 실행된다.
반드시 함수를 호출할 때 함수명 뒤에 괄호()를 넣어야 함수가 호출된다! 괄호를 넣지 않으면 함수가 호출이 되지 않는다!
결과를 살펴보면 전과 똑같이 버튼을 클릭하면 알림창이 뜨는 것을 볼 수 있다!
함수명을 지을 때는 camelCase를 사용해야한다. (나중에 변수도 배울텐데 변수에도 camelCase를 사용해야한다.
camelCase는 간단하다
open_alert() ❌
openAlert() ⭕️
자주 겪는 에러들
1. JS 코드는 밑에 짜야합니다
자바스크립트는 html 조작하는 언어라고 했다.
근데 조작할 html이 위쪽에 있어야 조작이 잘 된다고 한다!
자바스크립트를 조작할 html 위에 작성하면 안된다!!
왜냐면 컴퓨터가 html 파일을 읽을 때 위에서 부터 한줄한줄 읽는데 미리 html을 읽어놔야 조작이 가능하기 때문이다!
2. 오타주의
셀렉터가 많이 오타가 날 수 있다.
getElementById() 인데 i를 소문자로 쓴다든지 그런 경우도 많고
아니면 getELementById('alert1111') 처럼 잘못된 id를 찾고 있거나 그럴 수도 있다!
다행히 이상하게 코드짜면 에러가 나는데
에러메세지는 브라우저 개발자도구 Console 탭에 들어가면 나온다!
브라우저에서 우클릭 - 검사 - Console탭 눌러보자
▲ 여기에 Cannot read properties of null ~ 라는 에러가 나오면
alert111 이런 식으로 id 이름이 잘못되었다는 뜻이다!
▲ ~~ is not a function은 함수명이 잘못되었다는 뜻이다!
getElementById() 이것도 소괄호 붙는거 보니까 함수인데
여기에 오타났다는 뜻이다.
아무튼 오타났다고 알려주는 고마운 메세지니까 이거 보고 "디버깅" 이란걸 해나가면 된다!
버그없애는걸 디버깅이라고 한다!
실은 에러메세지 그대로 구글 찾아보는것이 제일 빠르다,,
숙제
Alert 박스 닫는 코드도 function 이용해서 짧게 한 단어로 축약해보십시오
위에서 한대로 똑같이 따라하면 되기 때문에 쉽게 할 수 있었다!
<button onclick="closeNotification()">❌</button>
<script>
function closeNotification(){
document.getElementById("alert-box").style.display = "none";
}
</script>
4강 / function의 파라미터 문법
function에 사용가능한 파라미터 문법
파라미터란?
함수에 입력으로 전달되는 값입니다. 함수는 이러한 파라미터를 사용하여 작업을 수행하고 결과를 반환한다.
위 정의로 어렵게 느껴질 수 있기 때문에 예시를 들면서 이해해보자!
알림창 열기 코드에서 파라미터를 사용해 이해해보자
<button onclick="showNotification('block')">알림창 여는 버튼</button>
<script>
function showNotification(파라미터){
document.getElementById('alert').style.display = 파라미터;
}
</script>이런식으로 코드를 짜게 된다면 코드는 이렇게 실행된다
1. 알림창을 여는 버튼을 클릭
2. onClick이 실행되면서 showNotification('block')함수를 호출한다.
3. showNotification()함수가 실행되고 'block'은 파라미터로 들어가게 된다.
<button onclick="showNotification('block')">알림창 여는 버튼</button>
<script>
function showNotification('block'){
document.getElementById('alert').style.display = 파라미터;
}
</script>4. 파라미터에 들어온 'block'이 코드 안으로 들어오게 된다.
<button onclick="showNotification('block')">알림창 여는 버튼</button>
<script>
function showNotification('block'){
document.getElementById('alert').style.display = 'block';
}
</script>이런식으로 더 업그레이드해서 함수를 사용할 수 있다.
확실히 더 어려워졌지만 이해만 충분히 된다면 함수를 여러개 만들 필요없이 파라미터를 이용해서 다양한 기능을 실행할 수 있다.
파라미터 문법 이해를 위한 예시 2
이해를 더 쉽게하기 위해 예시를 가져와봤다.
function plus(){
2 + 1
}코드를 짜다가 2 + 1 같은 어렵고 복잡한 수식을 함수로 축약해서 사용하고 있다.
근데 갑자기 2 + 2 도 필요하고 2+ 3 도 필요한 것 이다.
그럼 어떻게 해야할까?
파라미터를 사용안한 예시
function plus(){ 2 + 1 } function plus2(){ 2 + 2 } function plus3(){ 2 + 3 }이렇게 하면 될듯하다.
하지만 비슷한 함수들은 굳이 많이 만들 필요없다.
파라미터 문법이 있기 때문이다.
파라미터를 사용한 예시
function plus(number){ 2 + number } plus(1) plus(2) plus(3)함수 하나로 해결 가능하다!
파라미터 문법 특징
파라미터는 자유롭게 작명가능
구글링을 해봤지만 파라미터는 따로 작명 규칙이 없는 것 같다.
내 생각엔 어떤 값이 파라미터에 들어오는지 자세하게 작명하면 될 것 같다
아래 예시처럼 계산하는 숫자이라면function plus(calcNumber){ 2 + calcNumber } plus(1) plus(2) plus(3)
참고
실은 수학시간의 함수 vs 자바스크립트의 함수는 둘 다 같은 역할을 한다.
중학교 수학시간을 떠올려보자. 이런걸 배웠을 것이다.
f(x) = x + 1 일때
f(3)은 뭘까요? -> 4임
f(5)는 뭘까요? -> 6임x를 파라미터로 바꾸면 자바스크립트랑 똑같다.
실은 함수는 수학에서 "뭔가 input(파라미터) 넣으면 규칙에 따라 output을 출력해주는 마법의 모자" 만들 때 사용한다.
외국에선 중학교 수학시간에 함수를 마법의 모자, 블랙박스 이렇게 비유해서 표현하곤 한다.
자바스크립트 함수도 "구멍에 뭐 집어넣으면 규칙에 따라 각각 다른 기능 실행해주는 마법의 모자" 일 뿐이다!
중요!
파라미터에는 여러 이름이 있는데 파라미터와 알규먼트 등등 여러이름들을 살펴보면서 기억해 놓자!!
parameter 와 argument 의 차이 (인수, 인자)
숙제
버튼 2개를 만들어놓고
버튼1과 버튼2를 누르면 각각 다른 이름의 alert 박스가 나오도록 코드를 짜봅시다.
- 로그인을 누르면 '아이디를 입력하세요' 라는 alert 박스가 등장해야합니다.
- 비밀번호를 누르면 '비밀번호를 입력하세요' 라는 alert 박스가 등장해야합니다.
로그인
<button id="alert-id-btn" onclick="handleIdBox('아이디를 입력하세요')"> 로그인 </button> <script> function handleIdBox(text) { document.getElementById("alert-box").style.display = "block"; document.getElementById("alert-box").innerText = text; } </script>
비밀번호
<button id="alert-password-btn" onclick="handlePassWordBox('비밀번호를 입력하세요')"> 비밀번호 </button> <script> function handlePassWordBox(text) { document.getElementById("alert-box").style.display = "block"; document.getElementById("alert-box").innerText = text; } </script>
전체코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="./test.css" />
<title>Coding Apple JavaScript</title>
</head>
<body>
<div id="alert-box">
알림창임
<button id="alert-close-btn" onclick="closeNotification()">❌</button>
</div>
<button onclick="showNotification()">알림창 여는 버튼</button>
<button id="alert-id-btn" onclick="handleIdBox('아이디를 입력하세요')">
로그인
</button>
<button
id="alert-password-btn"
onclick="handlePassWordBox('비밀번호를 입력하세요')">
비밀번호
</button>
<script>
function showNotification() {
document.getElementById("alert-box").style.display = "block";
}
function closeNotification() {
document.getElementById("alert-box").style.display = "none";
}
function handleIdBox(text) {
document.getElementById("alert-box").style.display = "block";
document.getElementById("alert-box").innerText = text;
}
function handlePassWordBox(text) {
document.getElementById("alert-box").style.display = "block";
document.getElementById("alert-box").innerText = text;
}
</script>
</body>
</html>index.css
#alert-box {
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
}
