상세 컨텐츠

본문 제목

JavaScript :: To Do List 만들기

JavaScript

by 비오스터딩 2020. 7. 22. 11:45

본문

위 화면과 같이 To Do List를 만들어보자.

(css는 이 포스트에서 다루지 않고 기능적인부분(javascript)만 정리.)

 

[ 기능 ]

빈 칸에 내용을 작성하고 '추가'를 누르면, 그 내용을 아래쪽 표에 추가.

체크 한 후 '선택삭제'를 누르면, 체크한 항목만 삭제.

'마지막 항목 삭제'를 누르면, 마지막 항목 삭제.

'전체 삭제'를 누르면, 리스트 전체 삭제.

 

 

 

html

colgroup을 사용하여, 각 column의 너비를 설정.

 

 

 

document
.getElementById('btnAdd')
.addEventListener('click',addList);
#btnAdd를 눌렀을 때,
addList함수를 실행함.


function addList( )

contents == .text-basic 선택



if(contents의 value값이 없을 때)
==빈칸에 아무런 내용이 없을때,
'내용을 입력하세요' 알림창 실행.
빈칸에 focus.

(입력값이 있을 경우)
to do lis(#listBody)에 있는 
체크박스와 텍스트를 동일한 유형으로 입력.
appendChild를 사용하여 마지막항목으로 삽입.






  .addEventListner('click', fnc);  
onclick = "fnc()" 과 똑같은 기능.
javascript에서 함수를 불러올 때 사용.


  .querySelector(선택할요소);  
요소 선택.

 

list == #listBody를 가져옴
listChild == #listBody의 하위요소들을 모두 가져옴.

function delSel( )
checkbox == .btn-chk(체크박스) 모두 가져옴.
for-each문
if(i번째 박스가 체크되어있음)
체크박스의 부모요소의 부모요소(tr)를 삭제

function delLast( )
list의 마지막 요소를 삭제.

function delAll( )
for문
listChild 제거

//listChild[0]을 제거한 후,
i--라는 조건이 없다면,
i=1로 실행시,
listChild[0]: 'javascript공부하기'
listChild[1]: '운동하기'가 되므로, 'javascript공부하기'는 삭제되지않음.

  .querySelectorAll(선택요소);  
선택한 요소 모두 선택.

 

 

 

반응형

관련글 더보기

댓글 영역