본문 바로가기

javascript

3day - 퍼즐만들기 퍼즐 만들기를 하기 위해선 저번에 했던 블록쌓기에서 응용을 해야 된다. if & for 그리고 shuffle, parseInt 등을 사용해서 만들어보자. 이걸 만들려고 한다. 마지막칸을 비우고 비워있는 칸 상하 좌우 칸을 눌렀을때 빈곳으로 이동하게 해서 퍼즐을 완성한다. 저 상태로 완성이되면 셔플이벤트로 퍼즐의 위치를 섞어주면 완성이다. 전체 box-wrap을 만들고 그 안에 들어갈 box를 css를 넣어준다. 여기서 background-image를 한장의 사진을 넣어주는데 사진크기를 box-wrap크기와 똑같이 맞춰줘야 빈틈 없이 들어간다. 이것은 js로 box마다 사진의 위치를 backgroundPosition로 잡아준다. append를 추가할때 col="'+i+'" row="'+j+'" 를 넣어줘서.. 더보기
2day - 블럭쌓기 이번에는 for 반복문을 써서 블럭을 쌓아보도록 하려고 한다. 우선 for 반복문이 뭔지에 대해 알아보자. 조건보단 횟수에 비중을 둘 때 사용하는 반복문이다. for (초기식; 조건식; 종결식) { 문장 } 이런 형태이다. 본론으로 돌아가서 for문으로 만들어 보도록 한다. 저 형태로 준비를 하고 블럭을 쌓아 보도록 한다. for (var i=0; i 더보기
append & remove 에이전시에 취직한 형한테 연락이왔다.+ btn 을 눌렀을떄 추가되었다가 - btn을 누르면 사라지게 만들어야됬다.말로 쓰려니 잘 표현이 안된다. 대충 이런 형태이다.+버튼을 누르면 담당자 이름과 밑에 입력칸이 하나씩 늘어나고-버튼을 누르면 하나씩 사라진다.처음에는 attr로 정보값을 불러와서 구성할까 했지만 잘 되지않았다.그래서 append로 +버튼을 눌렀을때 통째로 추가하는 방법을 생각해 보았다. 위 사진이 그 결과이다.처음에는 .last()를 안 넣었더니 늘어날때마다 증식하듯 배로 증가했다..last()를 넣어주니 마지막꺼에 적용됨으로 하나씩 추가와 하나씩 삭제가 된다.원래는 append만 알고있었지만 이걸 해보면서 remove를 알게되었고 .last()가 중요하다는걸 알았다. 링크:http://ne.. 더보기
1day - 계산기 계산기 1. 계산기 레이아웃 2. 클릭 이벤트 3. 변수 저장 4. 오퍼레이터 조건문 5. 변수 연산 특수문자 코드표 : http://dev.w3.org/html5/html-author/charref How to print a number with commas as thousands separators in JavaScript123function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");} 테이블로 레이아웃을 잡는다. td 태그에 class를 2개를 준다. btn, 각버튼의속성 예) class="btn num" 그 다음은 css를 넣어준다. 스타일 적용후 확인 그 다음 가장 중요한 js를 구성하면 된다... 더보기