Javascript:댓글달기 편집하기

{{Javascript}}

== 개요 ==
html 안에 댓글과 관련한 태그들을 실시간으로 쌓아주면 댓글 추가를 구현할 수 있다.
{| class="wikitable"
!과정
!설명
!코드
|-
|추가할 태그 쓰기
|html 파일을 새로 쓴다.
|<syntaxhighlight lang="html">
<!--댓글에 해당하는 태그를 쓴다.-->

<div class="profile_img"><img src=""></div>
    <div class="comment_field">
        내용
    </div>
    <!--필요에 따라 삭제, 수정버튼을 구현한다.-->
    <div class="delete_button" data-name="delete">삭제</div>
</syntaxhighlight>
|-
|댓글 추가 구현
|
|<syntaxhighlight lang="javascript">
//자바스크립트 함수 안에 ajax호출 명령을 쓴다.

    $.ajax({
        type:'POST',
        url:'위에서 작성한 html 주소.',
        data:'',
        dataType:'html',
        success:(data)=>{
            document.querySelector('.comment_container').insertAdjacentHTML('beforeend',data)
            //comment_container클래스를 가진 태그 안쪽 가장 아랫쪽에 넣는다는 의미.
        },
        error:()=>{}
    });
    const comment = document.querySelector('#아이디 등 선택자')
    comment.value = '';  // 인풋에 내용이 남아있는데, 이걸 지워준다.
</syntaxhighlight>
|-
|댓글 삭제 구현
|
|<syntaxhighlight lang="javascript">
function delegation(e){
    let target = e.target;  // 이벤트객체 e를 이용한 것. 어떤 것을 클릭했는지 알려준다.
    console.log(target);
    while(!target.getArribute('속성')){
        target = target.parentNode;  //찾는 속성이 없는 경우, 부모에서 속성을 찾는다.
        if(target.nodeName === 'BODY'){target = null; return;}  // 바디까지 올라가도 없으면 없음. 종료시켜준다.
    }
    if(target.matches('[data-neme="delete"]')){
        if(confirm('지운다 이거~?')===True){  // 확인을 누르면 True를 반환한다.
            $.ajax({
                type:'POST'
                url:'json',
                data:'',
                dataType:'json',
                success:(response)=>{
                    if(response.status){  // json에서 status를 지정해둔다.
                        let comt = document.querySelector('#아이디선택자.');
                        comt.remove  // 해당 요인을 실시간으로 지운다.
                    }
                    
                }
                error:()=>{}
            })
        }
    }else if(target.matches('[속성명2="값2"]')){
        해당 버튼에 대한 명령
        target.classList.toggle('on');  // 실시간으로 좋아요 버튼을 활성화하는 등에 쓰인다.
}

window.addEventListener('click', delegation);
</syntaxhighlight>
|}