JAVASCRIPT#36 - 자바스크립트 append 1인 채팅창 만들기.

OMG. PONY TAIL RARITY ♥♥♥♥ SO CUTE AND DIVINE :3

JAVASCRIPT#36 - DOM 객체제어 1부 HTML 내용추가하기

1. append() 메소드

-선택된 요소뒤에 html 내용 추가하기, 선택된 요소안에 html 내용 추가하기.

 

2. bind() 메소드

- 이벤트 발생시 해당 함수작동시키기

- bind("이벤트", function)

3. appendTo() 메소드

- 선택된 요소를 해당 위치안에 넣기

- 자바스크립트 append와 appendTo의 차이?

$("여기붙여").append("내용");

$("내용").appendTo("여기붙여");

4. prepend() 메소드

- 앞에붙여

- prependTo()는 위의 appendTo와 같이 위치를 매개변수로 전달받아야하는 메소드로 셀렉터는 내용을 서술해야함.

5. text() vs htlml()

- text()는 html요소를 제외한 컨텐츠값 (내용)만 반환하고 html은 태그까지 모두 반환하는 성격을 지녔다.

- 위의 두 함수에 매개변수에 text, html("내용")을 전달하게되면 DOM객체 내용을 다른걸로 완전히 대체,

바꿀수도 있다.

6. wrap()

- 새 태그로 감싸기

- 얘는 매개변수를 태그쌍으로 받아서 셀렉터로 선택된 태그전체를 다른태그로 감싸는 메소드.

- wrapInner() 은 선택된 태그 전체가 아니라 그 안에있는 내용을 감싸는 메소드.

- wrapAll()은 선택된 모든 태그를 한대모아 해당 태그로 감싸는 메소드.

append 메소드를 이용한 간단한 1인 채팅 시스템 기본구조 만들기 예제

(그냥 갑자기 만들고 싶어서 만든거라 주제에서 좀 벗어남;;)

뜬금없이 유용한 코드 많이배움

1. css에 overflow: auto; 추가해서 div에 스크롤 만들기

2. 채팅창 처럼 div 스크롤 아래로 계속 갱신하기

$("#chat_board").scrollTop($("#chat_board")[0].scrollHeight);

3. 엔터키 누르면 발동되게 만들기

$("#chatc").keypress(function(e)
{
    var key = e.which;
    if(key == 13)
    {
        $("#enter").trigger("click");
    }
});

chatc라는 인풋창 활성화? 포커스 상태에서 13번키 엔터를 누르면 trigger 메소드를 통해 enter라는 아아디를 각진

버튼을 클릭한 효과를 내게함.

4. 입력후에 입력칸 input value 초기화하는 방법

$("#chatc").val("");

ㅋㅋㅋㅋ그냥 빈문자열로 바꿔줌. 

이런식으로 만들어서 서버랑 통신하는거 배우면 채팅창도 만들수있을듯. 오옹 ㅋ_ㅋ

채팅창 기본구조.zip