[포스코X코딩온] 방명록 만들기 실습

 

 

 

코드

 

우선 기본 틀을 잡기 위해 body부터 작성하였다.

 

input 2개가 들어가고 해당 태그들에 입력 값을 이용해서 테이블에 내용을 채워야 하기 때문에 id값들을 부여했다.

 

<button>버튼을 클릭시 push() 함수가 작동해서 테이블 안에 값들이 들어가게 만들기 위해 onclick을 이용해서 push() 함수와 연결했다.

 

<table>에 <tr>,<th>로 틀을 잡아 놓았다.

 

<input> 태그들을 선택하기 위해 document.getElementId를 이용해서 각 input id를 지정해 변수를 만들었다.

 

table에 tr과 td를 만들어서 주기 위해서 table을 querySelector('table')로 선택했다.

이렇게 하는 방식과 document.getElementId('table')로 지정하는 방식도 사용 가능 하다.

 

한개의 tr과 4개의 td를 createElement를 사용해서 만들었다.

 

이 후 tr을 table에 추가 하였다. 이때 사용하는 메서드는 append(), 혹은 appendChild() 를 사용 가능하다.

여기서는 append()를 사용하여 table자식으로 추가하였다. ex) table.append(tr) or table.appendChild(tr)

 

td태그는 tr의 자식 태그이기 때문에 tr자식으로 추가해야 한다.

tr.append(td) or tr.appendChild(td)

 

 

 

테이블에 값을 전달하기 위해서는 태그에 값이 있어야 한다. 따라서 태그에 문자를 추가해야한다.

innerText를 이용해서 값을 전달한다.

 

Td1에는 입력 값이 증가할 수록 1씩 증가하도록 만들어야 한다. cnt는 전역 변수로 만들어 Td1에 할당하고 cnt++를 주어 버튼이 눌렸을 경우 1씩 증가하도록 만들었다.

 

Td2,Td3는 value값만 필요하기 때문에 Name.value, Script.Value로 준다.

위에 미리 선언한 것이 있기 때문에 Nameval, Scriptval로도 값을 줄 수 있다.

 

Td4는 버튼을 눌렀을 때 해당 시간을 표시하기 위해 Date();를 사용하였다. new Date(); 를 선언하여 미리 값들을 만들어서 위 사진처럼 사용 가능하고, 혹은 값들을 미리 선언하지 말고 주석처럼 그 자리에서 바로 사용 가능하다.

 

month는 1이 작게 나오기 때문에 +1을 해줘야 한다.

 

 

 

입력값 초기화를 설정해주면, 입력 시 입력값이 남아있는 문제를 해결 할 수 있다.

 

value값 을 ' '을 주면 해결 가능하다.

 

다른 방법으로는 입력태그 <input>들을 선택해서 for문을 돌려 input.lenght 크기 ( input이 2개라 값은 2 이다) 만큼 input.value에 공백 ' '을 넣는 방법이 있다.