Sam: 새 문서: {{Javascript}} == 개요 == html 안에 댓글과 관련한 태그들을 실시간으로 쌓아주면 댓글 추가를 구현할 수 있다. {| class="wikitable" !과정 !설명 !코...

2021-06-12T10:03:02Z

새 문서: {{Javascript}} == 개요 == html 안에 댓글과 관련한 태그들을 실시간으로 쌓아주면 댓글 추가를 구현할 수 있다. {| class="wikitable" !과정 !설명 !코...

새 문서

{{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>
|}

Javascript:댓글달기 - 편집 역사

Sam: 새 문서: {{Javascript}} == 개요 == html 안에 댓글과 관련한 태그들을 실시간으로 쌓아주면 댓글 추가를 구현할 수 있다. {| class="wikitable" !과정 !설명 !코...