728x90
재사용할 수 있는 함수
입력을 바꿔 여러 번 사용할 수 있는 성질을 함수의 '재사용성'이라고 함
매개변수
- 함수를 실행하는 데 필요한 값을 함수 밖에서 제공하는 것
- 함수 안에서만 사용
return
- 결괏값을 함수 밖에서 사용하려면 함수를 실행한 위치로 돌려줘야함. 이러한 동작을 값을 반환한다(return)고 함
- 함수의 결괏값을 반환할 때 return을 사용해서 넘겨줄 값을 지정해주면 됨
<script>
// 매개 변수를 사용한 함수 선언하기
function addNum(num1, num2){
var sum = num1 + num2;
return sum;
}
</script>
인수(argument)
- 함수 선언이 끝났다면 실행할 함수를 호출해야함. 매개변수가 있는 함수를 호출할 때 실제 값 부분을 인수라고 함
<script>
// 매개변수를 사용한 함수 선언하고 호출하기
function addNum1(num1, num2){
var sum = num1 + num2;
return sum;
}
var result = addNum1(10, 3);
document.write("두 수를 더한 값은 " + result);
</script>
<script>
// 위의 코드를 더 간단하게 작성
function addNum2(num1, num2){
return num1 + num2;
}
document.write("두 수를 더한 값은 " + addNum2(10,20));
</script>
매개변수 기본값 지정
- ES6부터 함수에서 매개변수를 선언할 때 기본값을 지정하는 기능도 생김
<script>
// 매개변수의 기본값 지정
function multiple(a, b=5, c=10){
return a * b * c;
}
console.log(multiple(5,10,20)); // a = 5, b = 10, c = 20
console.log(multiple(10,20)); // a = 10, b = 20, c = 10(기본값)
console.log(multiple(50)); // a = 50, b = 5(기본값), c = 10(기본값)
</script>
함수표현식
익명함수
- 이름이 없는 함수, 익명 함수를 선언할 때는 이름을 붙이지 않음
- 익명 함수 실행은 익명 함수는 함수 자체가 식이므로 함수를 변수에 할당할 수 있으며, 또한 다른 함수의 매개변수로 사용할 수 있음
<script>
// 익명 함수 선언하기
function(a, b){
return a + b;
}
</script> <script>
// 익명함수 실행
var sum = function(a, b){
return a + b;
}
document.write("익명 함수 실행 결과 : " + sum(10,20));
</script>
즉시 실행 함수
- 한 번만 실행하는 함수, 함수를 정의하면서 동시에 실행하는 함수를 즉시 실행함수
- 함수를 실행하는 순간에 자바스크립트 해석기에서 함수를 해석
- 즉시 실행 함수의 기본형식은 함수를 식 형태로 선언하므로 마지막에 세미콜론(;)을 붙임
(function(){
명령;
}());
또는
(function(매개변수){
명령;
}(인수))
<script>
// 즉시 실행 함수
(function(){
var name = prompt("이름을 입력해주세요.");
document.write("안녕하세요. <b>" + name + "</b> 님");
}());
</script>
- 매개변수를 사용하는 함수라면 선언 부분 끝에 함수 실행을 위한 인수를 넣어줌
<script>
// 매개변수가 있는 즉시 실행 함수
(function(a,b){
sum = a + b;
}(100,200));
document.write("함수 실행 결과 " + sum);
</script>
화살표 함수
- => 표기법을 사용해 함수 선언을 좀 더 간단하게 작성할 수 있음
(매개변수) => {함수내용} - 매개변수가 없을 경우
매개변수를 넣는 괄호 안을 비워둠
중괄호 안에 함수 내용이 한 줄이라면 중괄호를 생략. 이때 return문은 생략된 것으로 간주 - 매개변수가 1개인 경우
매개변수의 괄호 생략 가능 - 매개변수가 2개 이상인 경우
(매개변수) => {...} 처럼 사용
<script>
// 매개변수가 없는 함수
var hi = function(){
return "Hello World";
}
</script>
<script>
// 매개변수가 없는 화살표 함수
var hi = () => {return "Hello World"};
</script>
<script>
// 매개변수가 없는 화살표 함수(중괄호 생략)
var hi = () => "Hello World";
</script> <script>
// 매개변수가 1개인 함수
var hi = function(user){
document.write(user + "님 안녕하세요?");
}
</script>
<script>
// 매개변수가 1개인 화살표 함수
var hi = user => {document.write(user + "님 안녕하세요?")};
</script> <script>
// 매개변수가 2개인 함수
var sum = function(a, b){
return a + b;
}
</script>
<script>
// 매개변수가 2개인 화살표 함수
var sum = (a,b) => a + b;
</script>
이벤트와 이벤트 처리기
이벤트
- 웹 브라우저나 사용자가 행하는 어떤 동작
- 웹 문서 영역 안에서 이루어지는 동작만을 이야기함
- 마우스나 기보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생
- 마우스 이벤트 : 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생
click, dbclick, mousedown, mousemove,... - 키보드 이벤트 : 키보드에서 특정 키를 조작할 때 발생
keydown, keypress, keyup,... - 문서 로딩 이벤트 : 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여주는 것과 관련된 이벤트
abort, error, load, resize,... - 폼 이벤트 : 폼 요소에 내용을 입력하면서 발생하는 이벤트
blur, change, focus,... - https://developer.mozilla.org/ko/docs/Web 필요한 경우 찾아서 확인
이벤트 처리기(이벤트 핸들러)
- 이벤트가 발생하면 처리하는 함수
- 이벤트 처리하는 기본적인 방법
이벤트가 발생한 HTML 태그에 이벤트처리기를 직접 연결 - 이벤트 처리기의 기본 형식
HTML 태그 안에서 'on' 다음 '이벤트명'을 붙여 속성 이름 만들기
→ 실행할 이벤트 처리기의 함수명을 작성
<\태그 on이벤트명 = "함수명"> - 이벤트가 발생한 후 여러 가지 명령을 실행해야 한다면, 그 명령을 묶어 하나의 자바스크립트 함수로 만드는 것이 좋음. 이벤트가 발생할 때 함수 이름과 인수를 지정하여 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 처리기</title>
</head>
<style>
a:link, a:visited {
color:black;
text-decoration: none;
}
ul {
list-style: none;
width:500px;
margin:10px auto;
padding:0;
}
li {
display:inline-block;
width:120px;
border:1px solid #ccc;
padding:10px 15px;
font-size:16px;
text-align:center;
}
#result {
width:500px;
height:300px;
margin:30px auto;
border:2px solid #ccc;
border-radius:15px;
}
p {
width:80%;
padding:10px;
line-height: 2em;
}
</style>
<body>
<ul>
<li><a href="#" onclick="alert('Yellow 버튼을 클릭했습니다.')">Yellow</a></li>
<li><a href="#" onclick="alert('Green 버튼을 클릭했습니다.')">Green</a></li>
<li><a href="#" onclick="alert('Purple 버튼을 클릭했습니다.')">Purple</a></li>
</ul>
<div id="result"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이벤트 처리기</title>
</head>
<style>
a:link, a:visited {
color:black;
text-decoration: none;
}
ul {
list-style: none;
width:500px;
margin:10px auto;
padding:0;
}
li {
display:inline-block;
width:120px;
border:1px solid #ccc;
padding:10px 15px;
font-size:16px;
text-align:center;
}
#result {
width:500px;
height:300px;
margin:30px auto;
border:2px solid #ccc;
border-radius:15px;
}
p {
width:80%;
padding:10px;
line-height: 2em;
}
</style>
<body>
<ul>
<li><a href="#" onclick="changeBg('yellow')">Yellow</a></li>
<li><a href="#" onclick="changeBg('green')">Green</a></li>
<li><a href="#" onclick="changeBg('purple')">Purple</a></li>
</ul>
<div id="result"></div>
<script>
function changeBg(color){
var result = document.querySelector("#result");
result.style.backgroundColor = color;
}
</script>
</body>
</html>
DOM을 이용한 이벤트 처리기
- DOM을 이용하여 이벤트 처리기를 지정하면 태그와 자바스크립트 소스를 분리해서 유지보수에 도움이 됨
- 웹 요소를 클릭했을 때 실행할 함수를 연결하려면
웹 요소.onclick = 함수;
여기서 주의할 점은 함수의 이름만 사용하고 괄호는 붙이지 않아야함 - 웹 요소를 가져올 수 있는 방법 중 하나는 querySelector()를 사용
괄호 안에는 클래스 이름, id, 다양한 선택자를 넣을 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM을 이용한 이벤트 처리기</title>
</head>
<style>
a:link, a:visited {
color:black;
text-decoration: none;
}
ul {
list-style: none;
width:500px;
margin:10px auto;
padding:0;
}
li {
display:inline-block;
width:120px;
border:1px solid #ccc;
padding:10px 15px;
font-size:16px;
text-align:center;
}
#result {
width:500px;
height:300px;
margin:30px auto;
border:2px solid #ccc;
border-radius:15px;
}
p {
width:80%;
padding:10px;
line-height: 2em;
}
</style>
<body>
<button id="change">글자색 바꾸기</button>
<p>Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris adipisicing est sint aliquip nulla pariatur velit irure elit qui id. Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur adipisicing laborum quis.</p>
<script>
// 방법 1: 웹 요소를 변수로 지정 & 미리 만든 함수 사용
var changeBttn = document.querySelector("#change");
changeBttn.onclick = changeColor;
function changeColor() {
document.querySelector("p").style.color = "#f00";
}
// 방법 2: 웹 요소를 따로 변수로 만들지 않고 사용
// document.querySelector("#change").onclick = changeColor;
// function changeColor() {
// document.querySelector("p").style.color = "#f00";
// }
// 방법 3: 직접 함수를 선언
// document.querySelector("#change").onclick = function() {
// document.querySelector("p").style.color = "#f00";
// };
</script>
</body>
</html>
728x90