오늘 한일

- 자바스크립트를 이용하여 15퍼즐 구현

• 15퍼즐 화면

  

• 15퍼즐의 테이블에 이미지를 붙이는 코드

  var tbody = document.getElementById("puzzle-body");
  
  var pieces = [];
  for(i = 1; i < 16; i++){
      pieces[i - 1] = new Image(80,80);
      pieces[i - 1].src = "./images/num" + i + ".gif";
      pieces[i - 1].id = i - 1;
  }
  
  ~생략~   
  
  var createBoard = function(){
    for(j = 0; j < 16; j++){
        if( j % 4 == 0){
            row = tbody.insertRow(j/4);
        }
        var cell = row.insertCell(j%4);
        cell.appendChild(pieces[j]);
        tbody.onclick = function(event){
            var flag = check(event.target.id);
            if(flag){
                swap(event.target.id);
            }
        }
    }
  }
  

오늘 느낀점

• 일단 처음 목표 했던 Javascript를 활용한 기초적인 DOM조작은 할 수 있데 된거 같다. Javascript를 잘 쓸줄 알면 좋겠지만 현재 상태에서는 필요한게 있으면 잘은 아니여도 만들줄 알고 추가적으로 학습 할 수 있는 수준이 된거 같다. 그래서 위의 코드를 봐도 알지만 로직상으로는 딱히 좋은 코드는 아니다. 그래도 목표했던 DOM 조작은 가능하게 되었다.

• Javascript는 옛날에 생활코딩의 웹 애플리케이션 만들기강의와 7월달에 웹브라우저 자바스크립트강의 때 이고잉님을 따라 몇몇 코드를 콘솔창에서 따라 쳐본게 끝이였다.(그 상태서 화이트 과정때 아주 잠깐 만져봤다)그런 의미서 HTML은 DOCTYPE부터 아무것도 안보고 내가 직접 치고, Javascript도 어플리케이션의 로직을 생각해서 직접 쳐본게 몇일 전이였다.(심지어 작성한 코드를 어떻게 실행시켜야 할지도 몰라서 월요일엔 호눅스 수업에서 피보나치 수열을 구현하고 어떻게 실행시켜야 하는지 물어봤다…) 그런 의미에서 최근 3일간 계산기, 행맨, 15퍼즐을 만들면서 장족의 발전을 이룬거 같다.

• 이제 Javascript를 공부할려고 마음먹었던 첫 목표인 AJAX처리를 구현 해봐야겠다. 일단은 볼링 게임의 페이지를 만들고 무난하게만 완료된다면 체스도 도전 해봐야겠다. 이것까지만 큰 문제없이 완료된다면 간단한 프론트단 작업에 대해 가지고 있던 두려움이 확실히 사라질거 같다. 만약에 내일 잘 안된다면 목요일 하루 정도 더 해볼지도 모르겠다.

내일 할일

• AJAX 공부