JavaScript (52) 썸네일형 리스트형 #JavaScript MVC 모델 연습 - spinbox #JavaScript로 알아보는 MVC 모델 웹 프로그래밍에서 가장 중요한 개념 중 하나인 MVC 모델에 대해서 알아보도록 하자.최근 들어서 서버 사이드 렌더링 말고도,클라이언트 사이드 렌더링과 관련된 프레임워크들이 많이 등장하고 있다. (Angular, Ember, 등)JavaScript로 MVC는 어떻게 설계하는가?간단한 예제인 SpinBox sample을 통해서 MVC 구조에 대해 간단하게 알아보자.>> MVC 모델이란? >> 1단계. JavaScript의 작동을 확인할 기본적인 html 구조를 잡자.1234567891011121314151617181920212223242526 spinbox MVC Spinbox + - Colored by Color Scriptercs html에서 주의할 점 중 하.. [Todolist_Basic] Final Step. 스타일링 Final Step. 스타일링 최종 코드가 담인 github 주소이다.>>To do List Project with only JavaScript by Jbee >>처음에 목표로 했던 기능들을 모두 추가하였다.이제 디자인적 요소를 추가할 차례다. 일단 최종적인 코드를 먼저 보여주겠다. index.html code> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950 To Do List a{ color:#000; } a:hover{ color:#000; text-decoration: none; } To do List Write and Press Enter! Done Colored by Color .. [Todolist_Basic] Step 9. Donelist에서 다시 Todolist로 보내기 Step 9. Donelist에서 다시 Todolist로 보내기 이번 Step 에서도 사용자 경험에 집중해서 좀 더 발전시켜보겠다. 만약에 사용자가 실수로 Donelist 로 item 을 보냈다면? 다시 취소해야할 수 있는게 아닌가? Donelist에 있는 list를 더블클릭하면 다시 Todolist로 올 수 있게 하자. 자바스크립트만 조금 손보면 될 듯하다. 우리가 더블클릭할 li 태그의 parentId 값을 읽어오자. 그렇다면 자신이 현재 속해있는 list가 어떤 list인지 알 수 있게 된다. if 문으로 분기해서 todolist에 속해있다면, donelist로 보내고 donelist에 속해있다면, todolist로 보내는 것이다. main.js code> 12345678910111213var do.. [Todolist_Basic] Step 8. 수정 버튼 사라지고 나타나게 하기 Step 8. 수정 버튼 사라지고 나타나게 하기 아 그런데 이대로 두기가 좀 그렇다. 왜냐면 수정은 어쩌다 한 번 하게 되는데 아이콘이 계속 보이고 있으니 거슬린다. 그래서 마우스를 올리면 아이콘이 나타나게 해야겠다. 일단 CSS로 가서 default visible 값을 조정하자. 일단 안보여야 하니까,hidden 으로 조정해준다. 12345.fa-pencil{ float:right; padding: 5px; visibility : hidden;}cs 마우스를 올리면… 이라는 이벤트는 mouseover 이다.listem 아이템에는 이미 ondblclick 이라는 이벤트가 바인딩되어 있다. 그렇기 때문에 addEventListener( ) 를 사용하여 이벤트를 추가해줘야 한다. 1listItem.addEv.. [Todolist_Basic] Step 7. 수정 버튼 생성하기 Step 7. 수정 버튼 생성하기 글씨 부분을 클릭해야 수정을 할 수 있는 기능은 정말 야박한 기능이다.전혀 직관적이지 않기 때문이다.그렇기 때문에 우리는 아이콘을 추가하여그 아이콘을 클릭해서 수정할 수 있도록 하자. font-awesome 이용하기>> font-awesome 에 대한 포스팅 보러가기 >> 수정하기 위한 아이콘은 왠지 연필 모양의 아이콘이 좋을 것 같아서,font-awesome 홈페이지에서 연필 모양 아이콘을 찾아왔다.아이콘을 생성하기 위해서는 i 태그를 생성해야한다. 그리고 font-awesome을 적용하기 위해서는 icon 태그에 클래스 명을 지정해야한다. .className 속성을 활용하여 해결하자. 원래는 글씨를 클릭했어야 수정이 가능했던 이벤트를 아이콘을 클릭하면 가능하도록 바꿔.. [Todolist_Basic] Step 6. Donelist 생성하기 Step 6. Donelist 생성하기 삭제하는 것은 잘못 만들었을 때 삭제하는 것으로 기능을 바꾸고, 더블클릭을 하면 Done으로 되서 Donelist로 옮기는 기능으로 수정하는게 좀 더 직관적일 것 같다. 체크박스도 디자인상 보기가 안좋다. 그래서 체크박스를 생성하지 말고, 했다는 것을 Donelist로 옮겨서 style을 적용하자.삭제 기능은 나중에 다른 아이콘을 통해 구현하자. column을 쉽게 나누기 위해 부트스트랩 그리드를 적용했다. >> 부트스트랩 그리드 관련 포스팅 >> index.html code>123456789101112131415161718192021222324 To do List Write what to do and Press Enter! Done Colored by Color .. [Todolist_Basic] Step 5. listItem 수정하고 삭제하기 Step 5. listItem 수정하고 삭제하기 Step 들어가기 전에, totalItems 변수를 수정하자. 총 개수를 나타내기는 하지만 하나의 li 태그를 가리키는데 사용되었다. 한 문서에서 unique 한 번호를 부여할 때 사용하는 것을 id 라고 한다. 그리고 흔히들 id를 시간을 기반으로 한 난수 생성을 통해서 한다. 그래서 이번 기회에 난수 생성을 통해 id를 부여해보겠다. 12var date = new Date( );var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();cs이렇게 id 값을 부여한다. 앞에 “” 로 공백을 준 이유는 String 으로 인식하게하여 더 큰 수를 만.. [Todolist_Basic] Step 4. 완료된 항목을 표시하기 Step 4. 완료된 항목을 표시하기 Step 들어가기전에,, 자바스크립트에서 CSS 속성을 제어하는 방법은 .style 메소드와 함께,CSS에서 text-decoration 이라고 되어있는 속성은, textDecoration 으로 - 뒤에 있는 알파벳을 대문자로 바꿔줘서 제어한다. itemText.style.textDecoration = ‘ ‘; 이런 방식으로 말이다. 이것을 응용해보면 input 태그의 type 속성도 제어할 수 있다. input 태그를 잡아서 var에 저장한 다음에, .type = “”을 통해서 설정할 수 있는 것이다. 우리는 check box를 통해서 완료된 항목을 표시할 것이다. 그런 다음 checked된 item들에 대해서 decoration을 줘서 좀 더 보기 쉽게 할 것이다.. 이전 1 2 3 4 5 6 7 다음
