2.2 함수의 기능

함수 대표 기능

-중복 코드 제거 및 코드 재사용성

-코드의 그룹화

 

-중복 코드 제거 및 코드 재사용성

1. 중복코드 또는 재사용 코드 찾아 함수로 포장하기

2. 중복코드에서 변경되지 않는 부분과 변경되는 부분 파악하기

3. 변경되는 부분을 매개변수로 만들기

 

////////////////////////////////////////////////////////////////////////////////

var n1 = 10;

document.write(n1+"은 ");

if(n1%2)

  document.write("홀수입니다. <br>");

else

  document.write("짝수입니다. <br>");

 

var n2 = 15;

document.write(n2+"은 ");

if(n2%2)

  document.write("홀수입니다. <br>");

else

  document.write("짝수입니다. <br>");

 

var n3 = 19;

document.write(n3+"은 ");

if(n3%2)

  document.write("홀수입니다. <br>");

else

  document.write("짝수입니다. <br>");

///////////////////////////////1번 적용///////////////////////////////////

function checkEvenOdd(){

  var n1=10;

  document.write(n1+"은 ");

if(n1%2)

  document.write("홀수입니다.<br>");

else

  document.write("짝수입니다.<br>");

}

checkEvenOdd();

////////////////////////////////2번 적용//////////////////////////////////

function checkEvenOdd(){

  var n1=10;

  document.write(n1+"은 ");

if(n1%2)

  document.write("홀수입니다.<br>");

else

  document.write("짝수입니다.<br>");

}

checkEvenOdd();

//////////////////////////////3번 적용///////////////////////////////////

function checkEvenOdd(value){

  document.write(value+"은 ");

if(value%2)

  document.write("홀수입니다.<br>");

else

  document.write("짝수입니다.<br>");

}

checkEvenOdd();

/////////////////////////////////////////////////////////////////////////

-코드 그룹화

1. 여러 가지 기능을 하는 함수 찾기

2. 함수 나누기

 

///////////////////////////////////////////////////////////////////////

$(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("입력된 값이 너무 큽니다. 다시 입력해주세요");

   }

 });

})

////////////////////////////////1번////////////////////////////////////////

$(document).ready(function(){

//1. 물고기 노드 구하기.

var $fish = $("#fish");

 

//2. 버튼에 이벤트 걸기

$(#btnStart").click(function(){

//3. 물고기 움직이기

  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("입력된 값이 너무 큽니다. 다시 입력해주세요");

   }

 });

})

//3가지 기능을 가지고 있음

//변수(물고기) 생성 및 초기화

//이벤트 처리

//물고기 움직이기

///////////////////////////2번/////////////////////////////////////

//전역변수 선언

var $fish = null;

$(document).ready(function(){

  init();

  initEvent();

});

 

//전역변수는 이곳에서 초기화

function init(){

 //1. 물고기 노드 구하기

  var $fish = $("#fish");

}

 

//이벤트 초기화 하기

function initEvent(){

  //2. 버튼에 이벤트 걸기

$(#btnStart").click(function(){

//3. 물고기 움직이기

  var x = parseInt("#txtX").val();

  var y = parseInt("#txtY").val();

moveFish(x,y);

});

}

 

//3. 물고기 움직이기

function moveFish(x,y){

if((x>=0 && x<=500) && y>=0 && y<=300){

$fish.css({

  left.x,

  top.y

  });

} else {

    alert("입력된 값이 너무 큽니다. 다시 입력해주세요");

   }

}