재귀함수, 생성자 함수를 이용한 객체 생성, new Array(), onkeydown vs onkeypress, setInterval()활용

재귀함수 recursion function

함수 정의 안에서 자신을 호출하는 함수, 함수 자체를 반복문처럼 여러 번 호출하면서 다양한 응용 프로그램을 효율적으로 구성할 수 있다.

var sum=0;
var num=1;
function sumRecursion(){
  sum+=num;
  console.log('sum=' +sum);
  if(num==10) return
}
num++;
sumRecursion(); // 재귀 호출
}
sumRecursion(); // 함수 호출

재귀 함수를 이용한 함수의 장점은 프로그램의 이해도 증가, 변수 사용의 감소 등이 있다.

생성자 함수를 이용한 객체 생성 방식

객체 변수를 이용한 객체의 생성은 하나의 객체를 생성하고자 할 때 사용,
객체의 틀을 만들어 놓고, 그 틀을 바탕으로 여러 개의 객체를 생성하고자 할 때는 생성자constructor 함수를 이용하는 객체 생성 방식을 사용한다.

function Book(publisher, name, price){
  this.publisher=publisher;
  this.name=name;
  this.price=price;
  this.showPrice=function(num){
   var totalPrice=this.price*num;
    return totalPrice;
  };
}

// 생성자 함수를 이용한 객체의 생성은 new 키워드 사용
var book1= new Book('다락원', '오늘부터 자바스크립트', 23000);
var book2= new Book('다락원', '스크래치야 반가워', 13800);
console.log('3권의 가격:'+book1.showPrice(3)+'원');
console.log('3권의 가격:'+book2.showPrice(3)+'원');

new Array() 객체 생성 방식

// 국어:80, 영어:75, 수학:90, 과학:85
var score=new Array(80,75,90,85);
console.log('점수의 총 개수: '+score.length); // 4
var sum=0,average;
for(var i=0; i<score.length; i++) sum+=score[i];
acerage=sum/score.length;
console.log('점수의 평균: '+average); // 82.5

onkeydown vs onkeypress

<style>
	input{padding:5px; border:2px solid #aaa;}
</style>

<input type="text" onkeydown="downInput(event)" placeholder="keydown event">
<hr>
<input type="text" onkeypress="pressInput(event)" placeholder="keypress event">

<script>
  function downInput(event){
 	console.log('[keydown]' +event.keyCode);
  }
  function pressInput(event){
  	console.log('[keypress]' +event.which);
  }
</script>

keydown은 대문자 값으로만 나타낸다. keypress는 특수키를 인식할 수 없다.

setInterval()의 활용

1. id를 circle로 하는 지름 100px의 원형을 만든다. CSS의 position 속성을 absolute로 설정하고, left 속성을 이용하여 원을 움직이게 한다.

<style>
  #circle{
  position: absolute;
  top: 100px;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: navy;
  border-radius: 50%:
  cursor: pointer;
  }
</style>

<div id="circle"></div>

2. circle을 클릭하면 250밀리초마다 setInterval()의 실행 구문을 호출하도록 하고 다시 클릭하면 setInterval() 호출을 무효화 한다.

<div id="circle"></div>

<script>
  var myInterval;
  var flag=false;
  
  document.querySelector('#circle').onclick=function(){
  if(flag= !flag){
  	myInterval=setInterval(function(){
    
   }, 250);
  }else{
  	clearInterval(muInterval);
  }
  }
</script>

3. circle을 처음 클릭하면 원의 배경색이 오렌지색으로 바뀌고, 10px씩 오른쪽으로 이동한다. 원을 다시 클릭하면 처음의 위치와 색깔로 초기화된다.

<div id="circle"></div>

<script>
  var myInterval;
  var flag=false;
  
  document.querySelector('#circle').onclick=function(){
  var that=this;
  that.style.left=0;
  if(flag= !flag){
  	myInterval=setInterval(function(){
    console.log(that.style.left);
  	that.style.backgroundColor='orange';
    that.style.left= parseInt(that.style.left)+10+'px';
   }, 250);
  }else{
  	clearInterval(muInterval);
    that.style.backgroundColor='navy';
  }
  }
</script>