1. 중복코드 제거해주고 코드를 재사용할수 있게 해준다
2. 구조를 나눌수 있다.
- 기능별로 함수를 만들어서 구분해줄수 있다.
예를 들어서 슬라이드를 만든다면
기능1 - 오토플레이 시작, 기능2 - 오토플레이 멈추기, 기능3- 이전 이미지 보이기, 기능 4- 다음 이미지 보이기
이런식으로나눌수 있다
이걸 만약에 하나의 함수에 구현하면 나중에 문제 있는 코드를 찾거나 재사용하기가 힘들어진다.
함수와 반복문의 차이
함수 : 특정 기능을 하는 일종의 로직을 다시 재사용하는 기능으로 필요할때 언제든지 함수를 호출해서 사용할수 있다.
반복문 : 특정 구문을 반복해서 사용할때 사용하는 기능으로 한번 사용하면 다시 재사용할수 없고 다시 사욜하려면 복사해서 사용해야 한다.
함수만드는 방법
1. 중복코드 제거및 코드 재사용하기
단계1 : 중복코드 또는 재사용코드를 찾아서 함수로 포장하기
먼저 코드중에서 중복되거나 재사용될만한 코드가 있는지 찾아서 포장해준다
단계2: 중복코드중에서 변경되는부분과 변경안되는 부분을 나눠서 파악한다
단계3 : 변경되는 부분들은 매개변수로 만들어준다
변경되지 않는 부분은 몸통이고 변경되는 부분은 지역변수와 매개변수로 만들어진다. 이 중에서 함수 실행 시에 외부에서 값을 변경해야 하는 경우는 매개변수로 만들어 주면 된다.
예제) 홀수 인지 짝수인지 구분하는 예제를 함수로 만들어보자
<script>
// 풀이 전 코드
var n1 = 5;
document.write(n1 + "은 ");
if (n1 % 2)
document.write("홀수입니다.<br>");
else
document.write("짝수입니다.<br>");
var n2 = 10;
document.write(n2 + "은 ");
if (n2 % 2)
document.write("홀수입니다.<br>");
else
document.write("짝수입니다.<br>");
var n3 = 13;
document.write(n3 + "은 ");
if (n3 % 2)
document.write("홀수입니다.<br>");
else
document.write("짝수입니다.<br>");
</script>ⓐ 위에 코드의 중복되는 부분을 하나로 포장하기
<script>
function checkEvenOdd() {
var n1 = 10;
document.write(n1 + "은 ");
if (n1 % 2)
document.write("홀수입니다.<br>");
else
document.write("짝수입니다.<br>");
}
checkEvenOdd();
</script>ⓑ 변경되는 부분과 안되는 부분 파악하기
ⓒ 변경되는 부분 매개변수로 만들기
<script>
function checkEvenOdd(value) {
document.write(value + "은 ");
if (value % 2)
document.write("홀수입니다.<br>");
else
document.write("짝수입니다.<br>");
}
checkEvenOdd(5);
checkEvenOdd(10);
checkEvenOdd(13);
</script>
2. 코드 그룹화
함수는 오직 한가지 일만해야 한다는 원칙만 따르면 간단하다
단계1 : 여러가지 기능을 하는 함수 찾기
단계2 : 함수나누기
기능 개수만큼 함수를 신규로 만들고 각각의 기능을 함수에 담아서 포장해준다.
예제) 함수나누기
ⓐ 여러가지 기능을 하는 함수 찾아보기
<style>
body {
font-size: 9pt;
}
#panel {
width: 600px;
height: 500px;
border: 1px solid #999;
position: relative;
}
#fish {
position: absolute;
left: 50px;
top: 120px;
}
#nav {
text-align: center;
width: 600px;
}
</style>
<script>
// 풀이 전 코드
$(document).ready(function() {
// 물고기 노드 구하기.
var $fish = $("#fish");
// 버튼에 이벤트 걸기.
$("#btnStart").click(function() {
// 물고기 움직이기.
// 물고기 위치 값 구하기
var x = parseInt($("#txtX").val());
var y = parseInt($("#txtY").val());
if ((x >= 0 && x <= 500) && y >= 0 && y <= 300) {
$fish.css({
left : x,
top : y
});
} else {
alert("입력된 값이 너무 큽니다. 다시 입력해주세요.");
}
});
})
</script>
</head>
<body>
<div>
<div id="panel">
<img src="fish.png" id="fish">
</div>
<div id="nav">
<label>x값 입력 : </label>
<input id="txtX"> </input>
<br>
<label>y값 입력 : </label>
<input id="txtY"> </input>
<br>
<button id="btnStart">
물고기 움직이기
</button>
</div>
</div>
</body>① 물고기 생성및 초기화
② 이벤트 처리
③ 물고기 움직임
ⓑ 함수나누기
<script>
// 전역변수 선언
var $fish = null;
$(document).ready(function() {
init();
initEvent();
});
// 전역변수 초기화
function init() {
$fish = $("#fish");
}
// 이벤트 초기화 하기
function initEvent() {
$("#btnStart").click(function() {
// 물고기 위치 값 구하기
var x = parseInt($("#txtX").val());
var y = parseInt($("#txtY").val());
// 물고기 움직이는 함수 호출
moveFish(x, y);
});
}
// 물고기 움직이기
function moveFish(x, y) {
if ((x >= 0 && x <= 500) && y >= 0 && y <= 300) {
$fish.css({
left : x,
top : y
});
} else {
alert("입력된 값이 너무 큽니다. 다시 입력해주세요.");
}
}
</script>
1_물고기 노드를 저장할 변수를 전역변수로 만들어준다
2_init()함수를 신규로 만든 후 기존 코드 내용에서 물고기 노드를 찾는 코드를 옮겨준다
3_moveFish() 함수를 신규로 만든 후 기존 코드 내용에서 물고기 위치 설정하는 코드를 옮겨준다.
4_initEvent()함수를 신규로 만든 후 기존 코드 내용에서 버튼에 이벤트 등록하는 코드와 물고기 위치 값을 구하는 코드를 만들어 준다.
5_물고기를 움직이기 위해 moveFish()함수를 호출
6_마지막으로 시작부분에 init(),initEvent()함수를 호출
'javaScript > J Query & 스크립트' 카테고리의 다른 글
| 업다운 상하 롤링 스크립트 vticker롤링 (0) | 2019.04.21 |
|---|---|
| parent / appendTo 해당 엘리먼트를 특정위치의 부모노드에 넣기 (0) | 2019.04.19 |
| 함수이름 만들 때 주의사항 (0) | 2019.04.05 |
| retrun 리턴값 있는 함수 생성 (0) | 2019.04.03 |
| 매개변수가 있는 함수 만들기 (0) | 2019.04.02 |
댓글