반응형

replace() 메소드

코딩을 하다보면 문자열에서 특정 부분만 변경을 하고 싶은 경우가 발생 할 것이다.

var str = "hello world";

라는 str 변수가 있을 때, replace()메소드를 활용하여 "world" 라는 문구를 찾아 원하는 문자열로 변경을 해보겠다.

replace 메소드

var str = "hello world";
str = str.replace("world", "stranger");
console.log(str);

replace메소드 사용

 

이와 같이 replace() 메소드를 활용하면 원하는 형태로 문자열을 변경할 수 있다.

문자열.replace("대상 문자열", "변경할 문자");

정수형이나 다른 데이터 타입에는 사용이 불가능하며 문자열 타입에만 사용이 가능하다.

 


 

replaceAll() 메소드처럼 사용하기(모두 변경하기)

replcae()를 사용하면 이와 같이 변경이 가능하지만, 제일 처음 검색된 단어 한개만 변경을 하는 단점이 존재한다.

하지만 해당하는 모든 문자열을 변경하고 싶은 경우도 있을 것이다.

자바에서는 replaceAll()이라는 메소드가 존재하여 사용하면 전부 다 원하는 형태로 변경이 가능하지만

자바스크립트에서는 replaceAll() 메소드가 지원되지 않으므로 정규식을 활용하여 비슷하게 사용할 수 있다.

문자열.replace(/대상/gi,"변경할 문자열");

 

똑같은 replace 메소드를 사용하지만 / /gi 사이에 변경하고자 하는 문자열을 입력한다.

또 차이점이 있다면 대상부분의 파라미터에 ""으로 묶지 않는다는 것이다.

위 형태에서 gi는 이러한 의미이다.

g : 발생할 pattern을 모두 검색

i : 대문자, 소문자를 구분하지 않고 모두 검색

replaceAll 메소드 기능과 동일하게 사용 예시

var str = "hello world hello world hello world hello world hello world";
var a = str.replace(/world/gi, "stranger");
console.log("str >" + str);
console.log("a   >" + a);

replace메소드를 통한 replaceAll 기능 사용하기

str 변수의 모든 world 단어가 stranger로 변경 된 것을 확인 할 수 있다.

 

+) 특이케이스 "/" 모두 변경하기

var str = "/////";
var a = str.replace(/\//gi,"#");
console.log(a);

//gi 사이에 /만 입력하면 주석형태로 처리되어 정상동작이 되지 않으므로 "/" 앞에 \를 붙여서 처리한다.

반응형
반응형

배열에 객체를 담아 출력 후 최상단 테이블의 헤더를 클릭하면 해당하는 값으로 오름차순, 내림차순 정렬이 되는

간단한 엑셀형태의 데이터 출력을 해보자.

 

데이터 출력

 

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>성적표</title>
  </head>
  <style media="screen">
    * {
      margin: 0;
      padding: 0;
    }
    body{
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .report tr{
      background: #F4FFF0;
    }
    .report td{
      border: none;
      height: 50px;
      font-size: 16pt;
      text-align: center;
    }
    .report td.name{
      width: 170px;
    }
    .report td.class{
      width: 80px;
    }
    .report td.jum{
      width: 130px;
    }
    .titleTable td{
      cursor: pointer;
    }
    .titleTable tr td{
      font-size: 18pt;
      font-weight: bold;
      background: #00B700;
      color: #fff;
    }
    .total td, .avg td{
      color: #fff;
      background: #1DDB16;
    }
  </style>
  <script type="text/javascript" src="js-grade.js"></script>
  <script type="text/javascript" src="jquery.min.js"></script>
  <body>
    <table id="grade" class="titleTable report">
      <tr>
        <td id="name" class="name title">이름</td>
        <td id="class" class="class title">반</td>
        <td id="kor" class="jum title">국어</td>
        <td id="math" class="jum title">수학</td>
        <td id="eng" class="jum title">영어</td>
        <td id="sci" class="jum title">과학</td>
      </tr>
    </table>
    <table id="data" class="report data">

    </table>
    <table id="result" class="report result">

    </table>
  </body>
</html>

 

js-grade.js

 

var orderBy = "asc";
window.onload = function(){
  init();
}

function init(){
  var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
  ];

  tagParsing(students, true);

  //click Evt
  $(".title").click(function(){
    var titleName = this.id;
    if(titleName == "name"){
      objSort(students, "name");
      tagParsing(students, false);
    }else if(titleName == "class"){
      objSort(students, "class");
      tagParsing(students, false);
    }else if(titleName == "kor"){
      objSort(students, "kor");
      tagParsing(students, false);
    }else if(titleName == "math"){
      objSort(students, "math");
      tagParsing(students, false);
    }else if(titleName == "eng"){
      objSort(students, "eng");
      tagParsing(students, false);
    }else if(titleName == "sci"){
      objSort(students, "sci");
      tagParsing(students, false);
    }
  })
}

function objSort(obj, sort){
  if(orderBy == "asc"){ //오름차순 정렬
    orderBy = "desc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return 1;
      else if (a[sort] < b[sort]) return -1;
    });
  }else{ //내림차순 정렬
    orderBy = "asc";
    obj.sort(function(a, b){
      if (a[sort] > b[sort]) return -1;
      else if (a[sort] < b[sort]) return 1;
    });
  }
}
function tagParsing(obj, init){
  var kTotal = 0;
  var mTotal = 0;
  var eTotal = 0;
  var sTotal = 0;
  var len = obj.length;
  var tag = '';
  for(i=0; i<obj.length; i++){
    tag += "<tr><td class='name'>"+obj[i].name+"</td>"
    +"<td class='class'>"+obj[i].class+"</td>"
    +"<td class='jum'>"+obj[i].kor+"</td>"
    +"<td class='jum'>"+obj[i].math+"</td>"
    +"<td class='jum'>"+obj[i].eng+"</td>"
    +"<td class='jum'>"+obj[i].sci+"</td></tr>";

    kTotal += obj[i].kor;
    mTotal += obj[i].math;
    eTotal += obj[i].eng;
    sTotal += obj[i].sci;
  }
  document.getElementById("data").innerHTML = tag;

  if(init){
    tag = '';
    //총점
    tag += "<tr class='total'><td class='name'>"+"총 점"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+kTotal+"</td>"
          +"<td class='jum'>"+mTotal+"</td>"
          +"<td class='jum'>"+eTotal+"</td>"
          +"<td class='jum'>"+sTotal+"</td></tr>";
    //평균
    tag += "<tr class='avg'><td class='name'>"+"평 균"+"</td>"
          +"<td class='class'>"+"-"+"</td>"
          +"<td class='jum'>"+(kTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(mTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(eTotal/len).toFixed(2)+"</td>"
          +"<td class='jum'>"+(sTotal/len).toFixed(2)+"</td></tr>";

    document.getElementById("result").innerHTML = tag;
  }
}

 

최초 출력시엔 아무런 정렬없이 배열을 출력하고 이름을 클릭하면 이름별 정렬이 된다.

이름별 정렬 - 오름차순

 

 

다시 한번 클릭하면 내림차순 정렬

이름별 정렬 - 내림차순

 

 

sort() 메소드에 대하여 간단하게 정리한 링크

https://myhappyman.tistory.com/23

 

 

java jdbc등을 활용하여 디비에서 데이터를 가져와 출력 할 경우 sort() 메소드를 사용하지 않겠지만,(db에서 이미 orderBy를 처리하여 가져옴)

Redis 또는 Socket 통신등으로 JSON형태나 다른형태의 데이터를 받게 되면 정렬이 보장되지 않게 수신되는 경우가 많다.

이런 경우를 대비하여 javascript sort() 메소드를 활용하여 간단하게 작성하였다.

반응형
반응형

sort() 메소드는 배열을 원하는대로 정렬 후 정렬된 배열을 반환 한다.

sort() 메소드 사용예시

var alpha = ['d', 'e', 'c', 'a', 'f', 'b'];
alpha.sort();
console.log(alpha);

정렬 후 변경된 배열

 

배열.sort([compareFunction])

정렬하고자 하는 배열.sort()를 통하여 정렬이 가능하다.

데이터는 따로 복제되는것이 아닌 원 배열을 정렬하는 것이므로 주의하자.

compareFunction : 정렬 순서를 정의하는 함수이다.

compareFunction이 정의되지 않으면 요소를 문자열로 변환하고 유니코드 포인터 순서로 문자열을 정리한다.

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬한다. 즉 a가 먼저 온다.

compareFunction(a, b)이 0을 반환하면 a와 b를 서로 변경하지 않는다.

compareFunction(a, b)이 0보다 큰 경우 b를 a보다 낮은 인덱스로 정렬한다.

 


 

숫자(Number)를 비교할 때는 빼기를 통해 정렬이 가능하다.

var num = [5,4,3,2,1];
num.sort(function(a, b){
	return a-b;
})
console.log(num);

빼기 연산을 통한 정렬

 

 

배열에 담긴 객체는 키값을 지정하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// price 기준으로 정렬
products.sort(function (a, b) {
  if (a.price > b.price) {
    return 1;
  }else if (a.price < b.price) {
    return -1;
  }
});
console.log(products);

price 기준 정렬

 

 

배열 인덱스 형태로도 접근하여 정렬이 가능하다.

var products = [
  { name: 'pineapple', price: 6000 },
  { name: 'banana', price: 1800 },
  { name: 'apple', price: 3700 },
  { name: 'cherry', price: 4050 },  
  { name: 'mango', price: 4900 }
];

// name 기준으로 정렬
products.sort(function (a, b) {
  if (a["name"] > b["name"]) {
    return 1;
  }else if (a["name"] < b["name"]) {
    return -1;
  }
});
console.log(products);

name 기준 정렬

 

 

2가지 조건으로 정렬하기 (else if 문을 추가하면 된다.)

var students = [
    {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
    {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
    {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
    {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
    {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
    {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
    {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
    {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
    {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
    {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
    {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];

// 반별 정렬 후 이름별 정렬
students.sort((a, b) => {
  if (a.class > b.class) return 1;
  else if (a.class < b.class) return -1;
  else if (a.name > b.name) return 1;
  else if (a.name < b.name) return -1;
});
console.log(students);

반별 정렬 후 이름별 정렬

 

반응형
반응형

for in 반복문은 객체에 사용하여 객체 내부의 데이터와 키값들을 출력할 수 있다.

문법)

for(var 키값 in 객체){

}

 

사용 예제 - 배열 출력하기

var arr = [1,2,3,4,5];
for(i in arr){
  console.log("key &gt;"+i+"    arr["+i+"] &gt;"+arr[i]);
}

 

for in 배열 출력


 

사용 예제 - 객체 출력

var product = {
  name : "건조 망고",
  kind : "당절임",
  ingredient : "망고, 설탕, 메타중아황산나트륨, 치자황색소",
  origin : "필리핀"
}
for(i in product){
  console.log("key >"+i+"    product["+i+"] >"+product[i]);
}

for in 객체 출력

 


 

사용 예제 - 배열 객체 데이터 출력하기

var students = [
  {name : "이민우",  class : 2, kor : 79, math : 66, eng : 100, sci : 82},
  {name : "박영철",  class : 2, kor : 94, math : 87, eng : 80, sci : 91},
  {name : "박소미",  class : 3, kor : 66, math : 95, eng : 78, sci : 87},
  {name : "김철수", class : 3, kor : 100, math : 78, eng : 92, sci : 80},
  {name : "송소희",  class : 1, kor : 80, math : 50, eng : 92, sci : 95},
  {name : "이창민",  class : 3, kor : 85, math : 49, eng : 95, sci : 78},
  {name : "김민수", class : 1, kor : 55, math : 98, eng : 86, sci : 77},
  {name : "노홍철", class : 1, kor : 95, math : 88, eng : 48, sci : 95},
  {name : "최유린",  class : 3, kor : 87, math : 77, eng : 91, sci : 89},
  {name : "최희",  class : 2, kor : 69, math : 86, eng : 66, sci : 100},
  {name : "박유진",  class : 2, kor : 70, math : 100, eng : 88, sci : 100}
];
for(i in students){
  for(j in students[i]){
      console.log("key >"+j+"    students["+i+"]["+j+"] >"+students[i][j]);
  }
}

배열 객체 데이터 출력

반응형
반응형

javascript(jquery)를 활용하여 재생, 일시정지, 멈춤 기능이 있는 스탑워치를 만들어 보겠다.

시간은 시 분 초만 표시한다.

스톱워치

1. 재생버튼은 시작한다.

2. 일시정지 버튼은 잠시 멈추는 기능으로 재생버튼을 다시 누르면 기존 시간을 이어서 진행한다.

3. 멈춤 버튼은 스톱워치를 초기화하고 정지시킨다.

 

아래는 실제 동작 스톱워치이다.

 

00:00:00

 

 

 

 

index.html

<!DOCTYPE html>
<html>
<head>
<style>
	*{
		margin: 0px;
		padding: 0px;
	}
  	body{
		height: 100vh;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
 	}
 	.box{
		width: 200px;
		height: 200px;
	}
	.timerBox{
		width: 200px;
		outline: 2px solid black;
	}
	.timerBox .time{
		font-size: 30pt;
		color: #4C4C4C;
		text-align: center;
		font-family: sans-serif;
	}
	.btnBox{
		margin: 20px auto;
		text-align: center;
	}
	.btnBox .fa{
		margin: 0px 5px;
		font-size: 30pt;
		color: #FAED7D;
		cursor: pointer;
	}
</style>
<meta charset="UTF-8">
<title>StopWatch</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="stopwatch.js"></script>
</head>
<body>
	<div id='box' class="box">
		<div id='timerBox' class="timerBox">
			<div id="time" class="time">00:00:00</div>
		</div>
		<div class="btnBox">
			<i id="startbtn" class="fa fa-play" aria-hidden="true"></i>
			<i id="pausebtn" class="fa fa-pause" aria-hidden="true"></i>
			<i id="stopbtn" class="fa fa-stop" aria-hidden="true"></i>
		</div>
	</div>
</body>
</html>

버튼 이미지는 bootstrap cdn 이미지를 활용 하였다.

stopwatch.js

var time = 0;
var starFlag = true;
$(document).ready(function(){
  buttonEvt();
});

function init(){
  document.getElementById("time").innerHTML = "00:00:00";
}

function buttonEvt(){
  var hour = 0;
  var min = 0;
  var sec = 0;
  var timer;

  // start btn
  $("#startbtn").click(function(){

    if(starFlag){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      starFlag = false;

      if(time == 0){
        init();
      }

      timer = setInterval(function(){
        time++;

        min = Math.floor(time/60);
        hour = Math.floor(min/60);
        sec = time%60;
        min = min%60;

        var th = hour;
        var tm = min;
        var ts = sec;
        if(th<10){
        th = "0" + hour;
        }
        if(tm < 10){
        tm = "0" + min;
        }
        if(ts < 10){
        ts = "0" + sec;
        }

        document.getElementById("time").innerHTML = th + ":" + tm + ":" + ts;
      }, 1000);
    }
  });

  // pause btn
  $("#pausebtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
    }
  });

  // stop btn
  $("#stopbtn").click(function(){
    if(time != 0){
      $(".fa").css("color","#FAED7D")
      this.style.color = "#4C4C4C";
      clearInterval(timer);
      starFlag = true;
      time = 0;
      init();
    }
  });
}
반응형
반응형

보통 일정시간마다 특정 값을 출력하는 문구를 만들 때, setInterval() clearInterval() 메소드를 활용하여 구성하였던것 같다.

기존에 구성하던 로직)

var i = 1;
var timer = setInterval(function(){

  if(i>5){
    clearInterval(timer)
  }else{
    document.write(i+"<br/>");
    i++;
  }

}, 1000)

생성 결과

 

 

그러다 문득, 반복문인 for문 안에서 처리 할 수 없는지 궁금해졌다.

setInterval도 버리고 setTimeout으로 구성하여 봤다.

 

첫번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000);
}

결과

 

 

1초마다 찍히는게 아닌 동시에 6이 찍혔다.

for문의 동작은 이미 끝났고 1초뒤에 동작하는 setTimeout 메소드가 5개가 동시에 동작한 것이다.

그래서 시간을 각각 별개로 쪼개어 보았다.

1초후... 2초후... 3초후...

 

두번째 도전)

for(i=1; i<6; i++){
  setTimeout(function(){
    document.write(i+"<br/>");
  }, 1000*i);
}

결과

 

 

이번에도 아쉽게 결과는 6만 5개가 찍혔지만, 1초 마다 6이 찍히는걸 볼 수 있었다.

for문의 동작이 끝나기전 값을 따로 처리 해줘야 할 것 같다.

이부분을 처리하기 위해선 자바스크립트의 클로저 개념이 필요하다.

 

세번째 도전)

for(i=1; i<6; i++){
  (function(x){
    setTimeout(function(){
      document.write(x+"<br/>");
    }, 1000*x);
  })(i);
}

결과

 

 

클로저란 간단하게 말하면 내부함수가 외부함수에 접근할 수 있는 것을 말한다.

기존에 동작시키던 방식은 setTimeout 함수가 i를 참조할때 for문에서 이미 5번 돌고 마지막에 ++된 값에 의해 6으로 처리되어 찍히고 있었던 것이다.

즉시발동함수로 setTimeout 메소드를 감싸고 찍고 싶었던 i의 값을 매개변수에 처리한다.

i의 값은 이제 즉시발동함수의 매개변수로 지역변수가 되기 때문에 별도의 값으로 처리 되고, setTimeout의 메소드내 함수는 외부 함수의 지역변수 'x'값을 가져와 document.write()로 값을 찍고 시간도 각각 별개의 시간으로 연산될 것이다.

 


 

그래도 이해가 잘 안된다면 콘솔 창에 찍은 결과값을 다시보자.

for(i=1; i<6; i++){
  (function(x){
    
    console.log("즉시발동함수 > i="+i+"     x="+x)
    setTimeout(function(){
      console.log("setTimeout  > i="+i+"     x="+x)
    }, 1000*x);
  })(i);
}

콘솔창 결과 값

 

 

빨간 네모안에 있는 콘솔창 값은 즉시발동함수에서 한번에 찍힌 결과이다.

처음 i는 1 매개변수로 처리된 x도 1이고 하나씩 차례대로 증가되는걸 볼 수 있고, 그 이후 setTimeout에서 처리된 값을 보면 i는 이미 for문으로 동작이 완료된 i의 값을 찍고 있기 때문에 계속 보이던 6의 값이 찍히고 있고 x는 클로저로 인하여 1부터 5까지 처리되고 있는 걸 볼 수 있다.

반응형
반응형

함수는 왜 사용할까?

1. 재사용성

구구단 프로그램을 구성해야 한다고 하자.

이런 경우 필요한 단수가 나올때마다 반복문의 변수값을 바꿔줘가면서 for문이 점점 늘어날 것이다.

하지만 매개변수 값에 따라 구구단을 출력하는 기능을 가진 함수를 정의하였다면, 우린 원하는 구구단의 값만 넣어주고

함수만 호출하면 언제든이 원하는 구구단을 소스도 지저분하지 않게 구성할 수 있을것이다.

이렇게 같은 소스를 사용하지 않게 되면, 용량도 자연스레 줄어들 것이다.

2. 가독성

함수의 기능을 정의하고 함수의 명을 잘 지어놨다면 해당 함수명만으로도 이 함수가 어떤 기능을 할지 어떻게 동작할지 유추할 수 있고,

또한 해당 기능이 필요할땐 선언한 함수를 호출함으로써 불필요한 소스는 줄어들고 체계적이며 가독성이 소스를 구성할 수 있다.

3. 모듈화

라이브러리 파일을 만들거나 대규모의 프로젝트를 구성하게 될 때 필요한 기능을 정의하고 기능을 팀별로 구성하여, 서로에게 영향을 미치지 않도록 구조별로 구성하여 작성이 가능해지고 유지보수나 버그가 발생시 해당 함수를 수정함으로써 보다 편리해진다.

 


 

자바스크립트의 함수 선언

- 선언 함수

//선언 함수
function 함수명(매개변수, 매개변수 ...){
  //기능 정의
  return 반환 할 데이터;
}

가장 일반적으로 보던 형태 일 것이다.

- 익명 함수

// 익명 함수
var 함수명 = function(매개변수, 매개변수 ...){
  //기능 정의
  return 반환 할 데이터;
}

 

- 기명 함수

// 기명 함수
var 함수명1 = function 함수명2(매개변수, 매개변수 ...){
  return 반환 할 데이터;
}

호출 시에는 함수명2로 호출이 아닌 함수명1로 호출 한다.

MDN 측의 글을 보면 함수내에서 자신을 참조하는데 사용하거나 디버거 모드에서 함수 식별하는데 사용 할수 있다고 합니다.

var factorial = function fac(n) { 
  return n<2 ? 1 : n*fac(n-1) 
};

console.log(factorial(3));

factorial 문제를 통한 사용 예시(재귀함수를 통해 구현 하였다.)

 

- 화살표 함수

// 화살표 함수
var 함수명 = (매개변수, 매개변수 ...)=>{
  //기능 정의
  return 반환 할 데이터;
}

 

- 즉시 실행 함수

// 즉시 실행 함수
(function 함수명(매개변수, 매개변수 ...){
  //기능 정의
})()

 

함수는 여러개의 매개변수는 받을 수 있지만 return값인 반환 값은 한개만 가능하다.

반응형
반응형

달팽이 배열은 배열에 데이터를 달팽이 껍질형태로 차례대로 채워나가는 것을 말한다.

 

달팽이 배열

 

채우는 동작 원리)

- 4 x 4 배열 생성

1. 생성 방식은 첫 행인 0행부터 마지막 열인 3열까지 차례대로 숫자를 찍는다.

(작업이 끝나면 첫행을 1행으로 증가시킨다.)

  0열 1열 2열 3열
0행 1 2 3 4
1행        
2행        
3행        

 

2. 증가된 첫행인 1행부터 마지막 행 3행까지 마지막 열인 3열에 숫자를 넣는다.

(마지막 열인 3열을 하나 감소시킨다.)

  0열 1열 2열 3열
0행 1 2 3 4
1행       5
2행       6
3행       7

 

 

3. 마지막 열이 2열으로 바뀌었고(마지막 열이 2번에서 동작 후 감소됨) 부터 첫 열까지 차례대로 마지막 행 3행에 찍는다. (마지막 행인 3행을 감소시킨다.)

  0열 1열 2열 3열
0행 1 2 3 4
1행       5
2행       6
3행 10 9 8 7

 

4. 마지막 행인 2행부터 첫 행인 1행까지 숫자를 채운다.3번에서 마지막행이 3행에서 감소하여 2행이 됨, 1번에서 첫행이 증가하여 첫행은 1행이 됨 (첫열을 증가시킨다. 1열 증가시킨다.)

  0열 1열 2열 3열
0행 1 2 3 4
1행 12     5
2행 11     6
3행 10 9 8 7

 

5. 1번에서 했던 동작을 다시 반복한다.

  0열 1열 2열 3열
0행 1 2 3 4
1행 12 13 14 5
2행 11     6
3행 10 9 8 7

 

6. 2번에서 했던 동작을 반복한다.

  0열 1열 2열 3열
0행 1 2 3 4
1행 12 13 14 5
2행 11   15 6
3행 10 9 8 7

 

7. 3번에서 했던 동작을 반복한다.

  0열 1열 2열 3열
0행 1 2 3 4
1행 12 13 14 5
2행 11 16 15 6
3행 10 9 8 7

 

8. 4번에서 했던 동작을 반복한다.

for문 종료조건으로 인해 만족되지 않아 실행되지 않는다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Snail Array</title>
    <style media="screen">
      body{
        background: #fff;
      }
      td{
        width: 50px;
        height: 50px;
        background: #fff;
        color: #fff;
        text-align: center;
      }
    </style>
    <script type="text/javascript" src="js-snail.js"></script>
  </head>
  <body>
    <table id="snail">

    </table>
  </body>
</html>

 

js-snail.js

window.onload=function(){
  (function(){
    var rows = prompt("행의 개수를 입력하세요");
    var cols = prompt("열의 개수를 입력하세요");

    var drawArr = createSnailArray(rows, cols);
    drawAnimate(drawArr);
  })();

}

/* 달팽이 배열을 만드는 함수
 * @param rows : 생성할 2차원 배열의 행 개수
 * @param cols : 생성할 2차원 배열의 열 개수
 */
function createSnailArray(rows, cols){
  // 애니메이션 효과용 1차원 배열 선언 및 초기화
  var drawArr = new Array();

  // 달팽이 형태로 데이터를 삽입할 2차원 배열 선언 및 초기화
  var arr = new Array();
  for(i=0; i<rows; i++){
    arr[i] = new Array();
  }

  var num = 1; //삽입할 데이터  1, 2, 3, 4, 5 ...

  var row_min = 0;       //행 최소값
  var col_min = 0;       //열 최소값
  var row_max = rows-1;  //행 최대값
  var col_max = cols-1;  //열 최대값

  var cycle = 0;         //그리면서 for문을 돌릴 바퀴 수
  if(rows >= cols){
    cycle = cols/2;
  }else{
    cycle = rows/2;
  }

  for(i=0; i<cycle; i++){

    //상단 출력
    for(j=col_min; j<=col_max; j++){
      arr[row_min][j] = num++;
      drawArr.push("td"+row_min+j);
    }
    row_min++;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;


    //우측 출력
    for(j=row_min; j<=row_max; j++){
      arr[j][col_max] = num++;
      drawArr.push("td"+j+col_max);
    }
    col_max--;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

    //하단 출력
    for(j=col_max; j>=col_min; j--){
      arr[row_max][j] = num++;
      drawArr.push("td"+row_max+j);
    }
    row_max--;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

    //좌측 출력
    for(j=row_max; j>=row_min; j--){
      arr[j][col_min] = num++;
      drawArr.push("td"+j+col_min);
    }
    col_min++;
    if(cols*rows +1 == num)  //사이즈가 안맞는 경우 강제 종료
      break;

  }
  var snail = document.getElementById("snail");
  appendTag(snail, arr);

  return drawArr; //애니메이션을 차례대로 그릴 ID값이 담긴 1차원 배열 반환
}

/* HTML 태그 target을 지정하여 생성하는 함수
 * @param target : 생성, 접근할 요소 dom형태로 전달
 * @param data   : 생성할 데이터 배열 전달
 */
function appendTag(target, data){
  var tag = "";

  for(i=0; i<data.length; i++){
    tag += "<tr>"
    for(j=0; j<data[i].length; j++){
      tag += "<td id='td"+i+j+"'>"+data[i][j]+"</td>"
    }
    tag += "</tr>"
  }

  target.innerHTML = tag;
}

/* 0.3초마다 배열에서 ID값을 하나씩 접근하여 색상 처리
 * @param arr : 아이디값이 담긴 배열
 */
function drawAnimate(arr){

  for(i=0; i<arr.length; i++){    
    (function(x){
      setTimeout(()=>{
        document.getElementById(arr[x]).style.background = "#FAAC58";
      }, 300*x)
    })(i);
  }
}

 

prompt 창으로 열과 행의 입력을 받은 후, 빙글 빙글 돌아가면서 달팽이 형태로 배열을 채우고 출력하는 소스이다.

열과 행이 1개차이까진 문제가 없지만 2개이상 차이가 나면 계속해서 도는 문제가 있어

이너 for문안에서 종료조건을 마지막 데이터값으로 체크하여 break 처리를 하였다.

더 좋은 로직이 있다면 코멘트 부탁드립니다.

생성할 행 입력

 

생성할 열 입력

 

7 X 5 배열 생성 결과

반응형