반응형

알고리즘 문제를 풀이해 보겠다.

1 ~ 입력받은 숫자까지 데이터를 배열에 담을 때, 홀짝별로 정렬되어 들어가는 배열을 만들 것이다.

조건이 배열을 한개만 사용해야 한다는 부분이 신기하여 작성하여 보았다.

1. 입력받은 숫자까지 배열에 담는다. ex) 6을 입력시 1, 2, 3, 4, 5, 6

2. 배열에 어떻게 넣든 상관은 없지만 나중에 호출시

홀수부터 시작이면 1, 3, 5, 2, 4, 6 으로 출력된다.

짝수부터 시작이면 2, 4, 6, 1, 3, 5 으로 출력시킨다.

3. 배열은 한 개만 선언하여 사용한다. 2개이상 사용금지!

 

재미있는 조건의 문제같아서 풀이해보았다. 더 신박한 풀이 방식이 있다면 피드백 부탁드립니다.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>홀짝</title>
    <script type="text/javascript" src="js-sipping.js"></script>
    <style media="screen">
      .inputData{
        width: 80px;
        height: 30px;
      }
      .button{
        width: 60px;
        height: 30px;
      }
    </style>
  </head>
  <body>
    <input type="number" id="inputData" class="inputData">
    <button type="button" class="button" name="button" onclick="sipping()">실행</button>
    <div id="outPut">

    </div>
  </body>
</html>

 

js-sipping.js

function sipping(){
  var num = document.getElementById("inputData").value;
  num = parseInt(num);
  if(num > 1){

    var arr = new Array();
    var half;
    var idx = 0;
    var orderBy = confirm("홀수 부터 정렬할까요?");

    if(orderBy){
      half = Math.ceil(num/2);
    }else{
      half = Math.floor(num/2);
    }

    for(i=1; i<num+1; i++){
      if(orderBy){

        if(i%2 == 0){
          arr[half] = i;
          half++;
        }else{
          arr[idx] = i;
          idx++;
        }
      }else{

        if(i%2 == 0){
          arr[idx] = i;
          idx++;
        }else{
          arr[half] = i;
          half++;
        }
      }
    }

  }else{

    alert("2이상부터 동작합니다.")
    return;
  }

  document.getElementById("outPut").innerHTML = arr;
}

 

작성 한 코드는 2이상부터 동작하도록 설정하였다.

짝부터 정렬한다고 가정하고

0번인덱스부터 차례대로 짝수값만 %연산자를 통해 집어넣고

배열길이의 절반위치부터 차례대로 홀수값만 입력하여 완성시키는 코드이다.

홀부터 정렬할경우엔 반대로 동작

입력값이 2, 4, 6 등의 짝수 값을 입력시엔 반값이 정확하므로 문제가 없지만

입력값이 3, 5, 7 등의 홀수 값을 입력하면 반값이 소숫점으로 나오므로 정렬순에 따라 올림 또는 버림이 필요했다.


 

ex) 7이 입력된 경우 부터 정렬하면 홀수의 시작 위치가 3이다.(길이의 반 값(3.5)을 내림을 해야함)

숫자 2 4 6 1 3 5 7
배열[인덱스] 0 1 2 3 4 5 6
숫자 2 4 6 1 3 5 7
배열[인덱스] 0 1 2 3 4 5 6

 

ex) 7이 입력된 경우 부터 정렬하면 짝수의 시작 위치가 4이다.(길이의 반 값(3.5)을 올림을 해야함)

숫자 1 3 5 7 2 4 6
배열[인덱스] 0 1 2 3 4 5 6

 

반응형
반응형

2차원 배열에 색상을 저장하고, 배열 데이터를 활용하여 태그로 파싱 후

태그를 클릭하면 해당 태그의 ID 값을 가져와서 body 태그의 배경색을 바꾸는 프로그램을 구성해보겠다.

색상 배열 데이터는 네이버 색상표를 검색시 나오는 데이터를 옮겼다.

팔레트 선택 예제

 

Pallet

 

See the Pen Pallet by myhappyman (@myhappyman) on CodePen.

반응형
반응형

배열에 예제문제 풀이를 준비하던 도중 문제가 발생하였다......

문제는 아래와 같다.

var numberArr = [["1", "2"],
                 ["3", "4"]];

function shiftTable(){
  var copyArr = numberArr;  //문제가 되는 부분

  for(i=0; i<numberArr.length; i++){

    for(j=0; j<numberArr[i].length; j++){
        if(i==0 && j==0){
          copyArr[i][j+1] = numberArr[i][j];
        }else if(i==0 && j==1){
          copyArr[i+1][j] = numberArr[i][j];
        }else if(i==1 && j==0){
          copyArr[i-1][j] = numberArr[i][j];
        }else if(i==1 && j==1){
          copyArr[i][j-1] = numberArr[i][j];
        }
    }
  }
}

 

 

함수 shiftTable 내부에 첫줄

var copyArr = numberArr;

형태로 배열을 복사하게 되면 어떻게 될까?

배열 데이터를 출력해보면 정상적으로 복사가 된 것 같지만 사실 이것은 주소값이 복사 된 것이다.

먼저 선언한 numberArr라는 배열의 주소값을 copyArr이라는 변수가 참조하기 시작한다.

그럼 어찌되었든 간에 값을 똑같이 복사 했을텐데 뭐가 문제냐라고 의문이 생길 수 있겠지만

반복문 구간에서 문제점을 볼 수 있다.

 

1 2
3 4

 

간단하게 4칸짜리 테이블의 데이터가 빙글 빙글 돌아가는걸 표현하기 위해 인덱스가 증가함에 따라

하드코딩으로 해당 위치값을 옮기는 걸 표현한 소스인데

최초 반복문 동작하면 i=0; j=0; 값의 상태에서 처음 if 조건을 만족하고

copyArr[i][j+1] = numberArr[i][j]; 문장이 실행이 된다. (numberArr[i][j] 의 값은 현재 "1")

여기서 서로 같은 주소값을 바라보고 있다보니

copyArr 값이 [["1", "1"], ["3", "4"]] 으로 바뀌고 동일한 주소값을 바라보는 numberArr도 동일하게 값이 바뀌어 버린다.

그럼 자바스크립트에서 배열을 복사 할 때, 우린 무엇을 사용해야 할까?

검색을 해보니 slice() 메소드를 활용하면 된다고 나와있어서 사용해보았지만 결과는 동일하게 서로의 값을 참조하고

독립적인 배열로 동작하지 않는다.

(확인 결과 1차원배열은 독립적으로 동작하지만 2차원배열은 독립적으로 동작하지 않는 점을 확인했다.)

독립적인 배열의 값만 복사하기

방법) JSON.parse(JSON.stringify(배열)) 활용하기

var numberArr = [["1", "2"],
                 ["3", "4"]];

var copyArr = JSON.parse(JSON.stringify(numberArr));
copyArr[0][1] = numberArr[0][0];
console.log(copyArr) // ["1", "1"], ["3", "4"];
console.log(numberArr) // ["1", "2"], ["3", "4"];

 

JSON 데이터를 파싱할 때 사용하는 메소드인데 배열을 복사 할 때도 사용할 수 있다.

이 방식을 이용하여 독립적인 값을 가지는 배열을 복사 할 수 있다.

반응형
반응형

7개의 정수 데이터를 받아와 합산 값을 구해야 하는 프로그램이 있다고 할 때 우린 어떻게 해야할까?

변수 7개를 선언하고 각 변수에 값을 저장한 후 다 더해주면 될 것이다.

var num1 = 14;
var num2 = 33;
var num3 = 17;
var num4 = 12;
var num5 = 19;
var num6 = 24;
var num7 = 31;
alert(num1 + num2 + num3 + num4 + num5 + num6 + num7);

 

간단할 수 있지만 7개의 변수를 이름이 겹치지 않게 다 선언하고 또 호출하여 더하는 번거로움이 있다.

지금은 7개지만 100개를 받거나 1000개를 받아야 한다면????

이럴 때 배열을 사용하면 좋을 것이다.

자바스크립트의 배열 형태로 변경해보자.

var res = 0;
var arr = [14, 33, 7, 12, 19, 24, 31];
for(i=0; i<arr.length; i++){
  res += arr[i];
}
alert(res);

arr이라는 변수에 배열 데이터를 담아 저장하고

for을 활용하여 배열의 첫번째 데이터인 0번 인덱스부터 마지막 인덱스 6번까지 더해주면 똑같은 결과를 얻는다.

관련 데이터를 한 배열에 담아 값을 추가하거나 삭제 시킬 수 잇고 훨씬 깔끔하게 데이터를 처리 할 수 있다.

 


자바스크립트에서 배열 선언 방법

방법 1)

var fruits =  new Array();
fruits[0] = "포도";
fruits[1] = "멜론";
fruits[2] = "망고";
fruits[3] = "사과";
//fruits > [포도, 멜론, 망고, 사과]

방법 2)

var fruits = ["포도", "멜론", "망고", "사과"];
//fruits > [포도, 멜론, 망고, 사과]

방법 3)

var fruits = new Array("포도", "멜론", "망고", "사과");
//fruits > [포도, 멜론, 망고, 사과]

 


배열 호출

선언을 하였으니 하나씩 호출하는 방법도 알아보자.

배열명의 해당 위치 인덱스를 찍으면 해당 데이터를 호출 할 수 있다.

var fruits = ["포도", "멜론", "망고", "사과"];

fruits[0] // "포도"

fruits[1] // "멜론"

fruits[2] // "망고"

fruits[3] // "사과"

이와 같은 특성을 활용하여 for문을 통해 0번째 인덱스부터 배열의 길이까지 찍으면 하나씩 데이터를 얻을 수 있다.

var fruits = ["포도", "멜론", "망고", "사과"];
var str = "";
for(i=0; i<fruits.length; i++){
   console.log(fruits[i]);
   str += fruits[i];
}
console.log(str); // 포도멜론망고사과

 


 

배열 제어

기존 배열에서 데이터 추가 하기 - push(데이터)

var fruits = ["포도", "멜론", "망고", "사과"];
fruits.push("체리");
console.log(fruits); //["포도", "멜론", "망고", "사과", "체리"]

추가 후 마지막에 체리 데이터가 추가 된 걸 볼 수 있다.

기존 배열에서 데이터 삭제 하기 - pop()

var fruits = ["포도", "멜론", "망고", "사과"];
fruits.pop();
console.log(fruits); //["포도", "멜론", "망고"]

 

삭제 후 마지막에 사과 데이터가 삭제 된 걸 볼 수 있다.

그럼 특정 위치에 추가하거나 삭제 하는 방법도 알아보자.

특정 인덱스 값 삭제하기 - splice

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
var removeItem = fruits.splice(idx, 1);
console.log("removeItem > "+removeItem); //망고
console.log(fruits); //["포도", "멜론", "사과"]

 

망고 텍스트를 indexOf를 통하여 인덱스 값을 얻은 후,

splice(시작 위치, 삭제 개수) 를 통하여 데이터를 삭제 할 수 있다.

삭제 개수를 늘리면 연달아 삭제도 가능하다.

한번에 2개 데이터 삭제하기

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
var removeItem = fruits.splice(idx, 2);
console.log("removeItem > "+removeItem); //망고,사과
console.log(fruits); //["포도", "멜론"]

 

특정 위치에 데이터 추가하기

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
fruits.splice(idx, 0, "파인애플");
console.log(fruits); //["포도", "멜론", "파인애플", "망고", "사과"

망고가 기존에 3번째 즉 fruits[2] 위치였고 해당 위치에 파인애플이 들어온 걸 볼 수 있다.

자바스크립트에서는 배열을 splice(시작 위치, 삭제 개수, 추가할 데이터)를 활용하여 자유롭게 제어 할 수 있다.

반응형
반응형

인터넷을 하다보면 여러 광고 사이트 또는 화장품, 쇼핑몰 등에서 흔하게 이미지가 하나하나 넘어가면서

상품이나 기술등을 나열한 모습들을 볼 수 있다.

- 좌, 우버튼에 따른 이동

- 하단부 버튼에 따른 매칭 이미지 변경

- 일정시간마다 다음 이미지로 변경

3가지 기능이 동작하는 슬라이드쇼를 만들어 보자.

적용모습

슬라이드쇼

 

 

See the Pen slideShow by myhappyman (@myhappyman) on CodePen.

반응형
반응형

반복문이란?

반복적인 작업이 발생할 경우 사용 할 수 있는 문법이다.

예를들어 div태그를 천개를 생성해야 할 경우 하나하나 생성하여 천개를 만드는 것 보다는

반복문을 통하여 프로그래밍적으로 처리하는 것이 더 효율적이고 시간적으로도 생산적 일 것이다.

좀 더 단적인 예를 들어

업무 지시로 천개의 div 태그를 생성할 일이 있어서 만들었는데

알고보니 2천개가 필요했다면 간단하게 반복문 수정을 통해 변경이 가능 할 것이다.

그럼 반복문 사용법을 알아보자.

 

for 문법

for(초기값; 종료조건; 증감식){
   // 반복문 동작...
}

 

ex) 2단 구구단

<!DOCTYPE html>
<html>
<head>
  <title>2단</title>
</head>
<body>

<script>
  for(i=1; i<10; i++){
    console.log(i+" * 2 = "+i*2);
  }
</script>

</body>
</html>

2단 출력

 

2단을 찍어봤으니 9단까지도 찍어보면 좋을 것 같다.

ex) 구구단 gugudan.html

<!DOCTYPE html>
<html>
<head>
  <script src="gugudan.js" type="text/javascript" charset="utf-8"></script>
  <style>
    .gugudan{
      width: 100%;
      position: absolute;
    }
    .gugudan div{
      width: 10%;
      float: left;
      margin: 15px;
      border: 1px solid black;
    }
    .gugudan div div{
      width: 100px;
      position: relative;
      text-align: center;
      border: none;
    }
  </style>
</head>
<body >
  <div id="gugudan" class="gugudan">

  </div>

</body>
</html>

 

gugudan.js

window.onload = function () {
  var htmlStr = "";
  var dan = 2;
  var value;

  for(dan; dan<10; dan++){

    htmlStr += "<div id='dan-"+dan+"'><div> " + dan + "단 </div>";
    for(j=1; j<10; j++){
      value = dan * j;
      htmlStr += "<div>" + dan + " * " + j + " = " + value + "</div>";
    }
    htmlStr += "</div>";
  }

  var gugudan = document.getElementById("gugudan");
  gugudan.innerHTML = htmlStr;
};

 


 

for문으로 반복문이 구현이 되었다면 while문으로도 구현이 가능하다.

while 문법

초기값;
while(종료조건){
    //반복문 동작...
    증감식;
}

 

for문에서는 "( )" 내에서 초기, 종료, 증감값을 정의하여 사용하지만, while문은 종료조건밖에 없기때문에

별도의 변수를 선언하여 초기값을 정하고 종료조건과 증감식을 처리해야 동일하게 동작 시킬 수 있다.

ex) 2단 구구단

<!DOCTYPE html>
<html>
<head>
  <title>구구단</title>
</head>
<body>

<script>
  var i = 1;
  while(i<10){
    console.log(i+" * 2 = "+i*2);
    i++;
  }
</script>

</body>
</html>

 

for문에서 동작시킨 결과와 동일하게 동작하는 것을 볼 수 있다.

 

ex) 구구단 gugudan.html

<html>
<head>
  <script src="gugudan.js" type="text/javascript" charset="utf-8"></script>
  <style>
    .gugudan{
      width: 100%;
      position: absolute;
    }
    .gugudan div{
      width: 10%;
      float: left;
      margin: 15px;
      border: 1px solid black;
    }
    .gugudan div div{
      width: 100%;
      position: relative;
      text-align: center;
      border: none;
      margin: 0 auto;
      margin-top: 15px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body >
  <div id="gugudan" class="gugudan">

  </div>

</body>
</html>

 

gugudan.js

window.onload = function () {
  var htmlStr = "";
  var dan = 2;
  var value;
  while(dan < 10){

    htmlStr += "<div id='dan-"+dan+"'><div> " + dan + "단 </div>";

    var j=1;
    while(j < 10){
      value = dan * j;
      htmlStr += "<div>" + dan + " * " + j + " = " + value + "</div>";
      j++;
    }
    htmlStr += "</div>";
    dan++;
  }

  var gugudan = document.getElementById("gugudan");
  gugudan.innerHTML = htmlStr;
};

 

구구단 출력

 


간단하게 for, while문에 대하여 알아보았다.

do ~ while문도 존재하는데 while문과의 차이점은 무었일까?

do while 문법

초기값;
do{
    //반복문 동작...
    증감식;
}while(종료조건)

 

설명보다도 소스 결과로 바로 확인을 해보자.

<!DOCTYPE html>
<html>
<head>
  <title>do while</title>
</head>
<body>
<script>
  var i = 1;
  while(i<1){

    console.log("while문입니다.")
    i++;
  }

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

  i = 1;
  do{
    console.log("do while문입니다.")
    i++;
  }while(i<1)


</script>
</body>
</html>

 

결과값

 

while문의 log값은 찍히지 않고 do while문의 log값은 한번 찍힌걸 볼 수 있다.

반복문은 처음 종료조건을 만족하는지 확인하고 동작을 한다.

위 소스의 while문 변수 i는 1이고 종료조건은 1보다 작을때까지 동작하므로바로 종료하지만

do while문은 종료조건을 먼저 보는게 아니라 do문구를 먼저 동작하고 종료조건을 확인 하기 때문에

로그값이 찍힌걸 볼 수 있다.

이러한 특징을 활용하여 반복문이지만 조건에 따라 무조건 한번은 동작해야되는 로직이 필요할 경우 do while문을 활용하면 좋다.

반응형
반응형

프로토타입을 활용하여 자바스크립트 내부함수인 Date 함수의 값을 원하는 방식으로 커스텀 하는 방법을 작성해보겠습니다.

 

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>  
<body>
  <div></div>
<script type="text/javascript" charset="utf-8">
  Date.prototype.myCalendar = function() {
      if (this.getMonth() == 0)       {this.myMonth = "1월"}
      else if (this.getMonth() == 1)  {this.myMonth = "2월"}
      else if (this.getMonth() == 2)  {this.myMonth = "3월"}
      else if (this.getMonth() == 3)  {this.myMonth = "4월"}
      else if (this.getMonth() == 4)  {this.myMonth = "5월"}
      else if (this.getMonth() == 5)  {this.myMonth = "6월"}
      else if (this.getMonth() == 6)  {this.myMonth = "7월"}
      else if (this.getMonth() == 7)  {this.myMonth = "8월"}
      else if (this.getMonth() == 8)  {this.myMonth = "9월"}
      else if (this.getMonth() == 9)  {this.myMonth = "10월"}
      else if (this.getMonth() == 10) {this.myMonth = "11월"}
      else if (this.getMonth() == 11) {this.myMonth = "12월"}
      else {this.myMonth = "Error"};
  };

  var d = new Date();
  d.myCalendar();
  var month_Name = d.myMonth;
  alert(month_Name);
</script>
</body>
</html>

 

alert의 경고문구는 해당 월로 표현되는것을 볼 수 있을겁니다.

다음은 년 월 일을 출력해보겠습니다.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>  
<body>
  <div id="today"></div>

<script type="text/javascript" charset="utf-8">
  Date.prototype.myCalendar = function() {
   switch(this.getMonth()){
	case 0: this.myMonth = "1월"; break;
	case 1: this.myMonth = "2월"; break;
	case 2: this.myMonth = "3월"; break;
	case 3: this.myMonth = "4월"; break;
	case 4: this.myMonth = "5월"; break;
	case 5: this.myMonth = "6월"; break;
	case 6: this.myMonth = "7월"; break;
	case 7: this.myMonth = "8월"; break;
	case 8: this.myMonth = "9월"; break;
	case 9: this.myMonth = "10월"; break;
	case 10: this.myMonth = "11월"; break;
	case 11: this.myMonth = "12월"; break;
   }
      
   switch(this.getDay()){
	case 0: this.myWeek = "일"; break;
	case 1: this.myWeek = "월"; break;
	case 2: this.myWeek = "화"; break;
	case 3: this.myWeek = "수"; break;
	case 4: this.myWeek = "목"; break;
	case 5: this.myWeek = "금"; break;
	case 6: this.myWeek = "토"; break;
   }
  };

  var d = new Date();
  d.myCalendar();
  var year = d.getFullYear() + "년";
  var month = d.myMonth;
  var week = d.myWeek;
  var day = d.getDate() + "일";

  document.getElementById("today").innerHTML = "오늘의 날짜는 : " 
  + year + month + day + "(" + week + ")";
</script>
</body>
</html>

 

이렇게 Date함수를 활용하여 현재 날짜를 출력 할 수 있으며,

prototype부분에서 영문으로 변경하여 구현 가능하며 원하는 방식으로 사용 할 수 있다.

반응형
반응형

2차원 배열을 이용하여 시계방향으로 이동하는 프로그램입니다.

HTML, CSS, JAVASCRIPT(jQuery)를 이용하여 구성하였습니다.

1) 초기화 상태

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

2) 한번 동작 후

5

1

2

3

9

10

6

4

13

11

7

8

14

15

16

12


 

See the Pen 2DArraySnail by myhappyman (@myhappyman) on CodePen.

반응형