To-do 리스트를 빌드해볼거다.
greetings했던것과 비슷하다.
todo.js 생성 후 html에 추가해보자.
그리고 toDoList를 입력 할 Form을 만들고,
그 아래에는 입력한 내용을 리스트 형태로 출력하기 위해 ul태그를 생성할거다.
만약에 toDos가 null이면 아무것도 하지 않을거다.
왜냐하면 greeting form과 다르게 이 form은 항상 입력창을 활성화 할것이므로(showing)
여기도 submit 했을 때 문제점을 해결하기 위해
이벤트를 가져올 때 event.preventDefault를 넣어줄거다.
엔터를 누르면 입력칸에 입력 내용이 그대로 남아있는데,
다음 내용을 입력할수있게 엔터를 누르면 공백이 되도록 만들어 줄거다.
이제 ul태그안에 li 를 만들어보자.
PaintToDo에 ul을 만들꺼다.
삭제버튼을 누르면 리스트를 지워주기 위해서 리스트, 텍스트, 버튼을 묶어서 관리할거다.
empty li를 만든 다음에 버튼, span을 만들어주고,
span과 삭제버튼을 li에 넣는다.
마지막으로 ul태그인 toDoList에 li를 집어주면된다. ( toDoList.appendChild(li) )
부모인 li안에 appendChild를 통해서 span 과 delBtn을 넣은것
저앞에 li 는 아무것나 써도됌 정의 하고싶은거 아무거나
createElement 요건 요소 만들기
appendchild 이게 무엇이냐면 ?
---------------------
자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다.
- .createElement()
- .createTextNode()
- .appendChild()
.createElement()는 요소를 만듭니다. 예를 들어
.createElement( 'h1' )
은 다음과 같은 코드를 생성합니다.
<h1></h1>
.createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어
.createTextNode( 'My Text' )
는 My Text라는 문자열을 만듭니다.
.appendChild()는 선택한 요소 안에 자식 요소를 추가합니다.
다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다
.<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<script> var jbBtn = document.createElement( 'button' );
var jbBtnText = document.createTextNode( 'Click' );
jbBtn.appendChild( jbBtnText );
document.body.appendChild( jbBtn );
</script>
</body>
</html>
각 줄의 의미는 다음과 같습니다.var jbBtn = document.createElement( 'button' );
button 요소를 만들고 jbBtn에 저장합니다.
var jbBtnText = document.createTextNode( 'Click' );
Click이라는 텍스트를 만들고 jbBtnText에 저장합니다.
jbBtn.appendChild( jbBtnText );
jbBtn에 jbBtnText를 넣습니다.
document.body.appendChild( jbBtn );
jbBtn을 body의 자식 요소로 넣습니다.
----------------------------------------------------------
해야할 일을 생성할 때마다 toDos 라는 array에 추가되도록 할거야
그러기 위해서 일단 toDoObj 라는 걸 만들어야 돼
key 에 text
valye 에 text 오게할꺼
(text라는 key에 text 가 value로 올것이다 )
id 에도 줄거야 새로운 id를
a [ 1, 3, 5, 6, 8,]
이러면 array 길이는 5 아무것도없으면 0
그래서 첫번째줄 코드는 id 이름을 0이아닌 1부터 매기기 위해 저렇게 하는 거임
그다음에 이렇게 정의한 것을 push를 통해 toDoObj 에 넣어줌
그다음에 그 toDoObj를 저장함
li에게도 id를 할당하고싶음
왜?? 나중에 버튼을 클릭했을 때 어떤 li를 지워야 하는지 알 수 있어야해서
이 함수는 toDos를 로컬스토리지에 저장하는 역할을 함
로컬 스토리지에는 자바스크립트의 date를 저장할 수가
없어
오직 string 만 저장 할 수 있어
그래서 우린 object가 string이되도록 만들어야해
그걸위해서 우린
JSON.stringify 을 쓸꺼야
---배지
컴퓨터 분야에서는 문자의 나열(string)이라는 뜻에서 문자열을 'string'이라 부릅니다. string 타입을 통해 일반적인 텍스트 데이터를 다룰 수 있습니다.
ES2015에서 도입된 템플릿 리터럴(template literal)은 문자열 리터럴의 일종으로, 추가적인 기능을 지원합니다. 템플릿 리터럴을 사용하려면 backtick(`)으로 문자열을 둘러싸면 됩니다.
'Javascript' 카테고리의 다른 글
| 자바스크립트 #3-8 이미지 백그라운드 (0) | 2021.01.04 |
|---|---|
| 자바스크립트 심화 (0) | 2021.01.04 |
| #3-3 Saving the User Name 2 (0) | 2020.12.30 |
