20.08.12 ~ 13 [HTML]

이틀 동안 유사 트위터, '트위틀러'라는 프로그램을 직접 구현해보는 것을 했다.
자바스크립트로 HTML을 추가하거나 삭제 등을 구현해보니 생각해보다 햇갈리고 코드도 더럽지만.. 눈에 바로 결과물이 나오니 개발자가 된 기분이다.

전에 썼던 글을 이용해 만들었기에 이번 블로그는 복습 개념의 TIL

1. li 혹은 div 태그를 생성하는 방법

   → document.createElement('태그이름')

2. 태그에 class, id를 지정하는 방법

   → document.classList.add('클래스이름')

   → element.id = "id";

3. 엘리먼트에 값을 채워넣는 방법

   → ele.textContent = '내용';

4. li 엘리먼트의 자식으로 div 엘리먼트를 붙이는 방법

   → liElement.appendChild('divElement')

• 트위틀러의 새로운 메시지는 처음부터 보여져야 하기에 정보들을 담은 배열에 unshift로 새로운 메시지를 추가했다.

• <button> 태그를 눌렀을 때 버튼의 문자를 변경하는 방법

  buttonId(Class).textContent = '...';

Event Object

• onchange : 해당 태그에 값이 변경이 된다면 사용자가 지정한 함수를 호출한다.
• onmouseover : 마우스 포인터가 해당 태그 안으로 들어올 때 발생하는 이벤트
• onmouseout : onmouseover과 반대, 마우스 포인터가 태그 밖으로 나갈 때 발생하는 이벤트
• onkeyup : 키보드 입력 시 사용자가 지정한 함수를 호출한다.