댓글이 아래로 쌓이고, 댓글 하나하나 삭제 가능하게
사용한 메서드 .prepend()
여러개의 댓글을 작성할 수 있게 작성 댓글을 누적시키는 법 : .prepend() - 선택요소에 앞에 계속 추가해줌
삭제 버튼도 만들어야되고, 삭제버튼의 class명을 removeCom으로 지정함
.removeCom 을 클릭시 해당 댓글을 지우기 -> .removeCom의 부모요소인 p태그를 지우기 위해 parent() 키워드를 사용
---->prepend에 누적 해줬던 걸 보면 p태그가 button을 감싸고 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<button id='like'>좋아요</button><span>0</span>
<br>
<input type="text"><button class='writeCom'>댓글작성</button>
<br>
<div id="com">
<!-- 댓글이 들어가는 공간 -->
</div>
<script>
//문서가 준비되면 document
//1. id가 like인 좋아요 버튼을 눌렀을때 숫자가 증가, 텍스트를 변경
$(document).on('click', '#like', function(){
let like = Number($('span').text())
$('span').text(like+1)
$('#like').text('좋아요 취소')
//id속성 삭제
$(this).removeAttr('id')
//id속성 다시부여
$(this).attr('id','dislike')
})
// 로직실행된 후 내용: 좋아요 -> 좋아요 취소, id는 like에서 dislike
//문서를 새로고침해서 동적인 메소드를 써야됨---어떤속성값이 변화했을 때를 대비해서 새로고침해서 속성가져옴
//2.id가 dislike인 '좋아요취소'버튼을 눌렀을때 숫자는 다시 0으로 텍스트도 다시 '좋아요', id=like로
$(document).on('click', '#dislike', function(){
$('span').text('0')
$(this).text('좋아요')
$(this).removeAttr('id')
$(this).attr('id','like')
})
// 3. Class가 writeCom인 버튼을 클릭했을 때, input 안에 있는 값을 가지고 온다!
// 그 내용 + 삭제 버튼 (Class name 부여) 을 div 안에 넣어준다
// val값 초기화
$('.writeCom').click(function(){
let com = $('input[type=text]').val()
//case 2. 여러개의 댓글을 작성할 수있는 법 ->누적시키는 법 : .prepend() - 선택요소에 앞에 계속 추가해줌
$('#com').prepend('<p>' + com +'<button class="removeCom">삭제</button></p>')
//input 태그 안의 값을 공백처리
$('input[type=text]').val('')
})
//동적인 기능(on) - 있다가 없다가 함
//세게의 파라미터 1번째 행위 ex)click, 2.지정자 (h1태그, p태그,...) 3.행위 (기능,function)
// 4. 삭제 버튼 클릭 시, 태그 삭제
$(document).on('click','.removeCom',function(){
//case 2. 여러개의 댓글 중 내가 원하는 댓글만삭제
$(this).parent().remove()
})
</script>
</body>
</html>- flash게임 --> 말움직이기 실습
Javascript, img, css 스타일 외부방식 적용했음 (경로 각 지정되어있음)
-
말을움직이는 동적인 기능을 하는 event.js 외부파일 만들기
-
.btn.left, .btn.right 버튼을 누를 시 말(#horse)가 각 왼/오로 50px씩 움직임
<- css 외부파일에서 img(#horse)의 위치가 right: 0px 오른쪽에서 0px
-이벤트 적용할때 css('right', 'nnpx') 이렇게 해주기
-개발자도구에서 horse를 클릭해서 right부분에 px값 줘보고 적당한 위치까지만 움직이게 조절해야됨 - 이미지를 벗어날 수 있기때문!
-1200px, 0px까지 조절하면 됨! -
방향키로도 제어가능하게 구현
-키 입력이벤트 keydown()이벤트(키보드 키가 내려가는 경우 실행) 활용
-키가 눌렸을때 key Code를 저장함 => 확인하기 위해 콘솔창에 찍어보기 ! event.keycode
방향키 오른쪽 - 39 ,왼-37, 스페이스바 32
왼, 오는 왼,오 버튼을 클릭했을 때와 마찬가지로 css적용해줌 -
스페이스바를 누를 시 말이 위로 올라갔다 내려옴(animate())
아래에서 400,200 px 로 서서히 올라갔다 내려오게 bottom : 'px' , 1000(1초)
.stop() : 선택요소에서 실행중 모든 효과 중단
.animate : 요소를 순서대로 움직이게 함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="css/moveImgStyle.css" />
</head>
<body>
<div id="bg">
<img id="horse" src="img/horse.png" />
<button class="btn left">LEFT</button
><button class="btn right">RIGHT</button>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="js/event.js"></script> //동적 기능 외부에서 가져옴
</body>
</html>
event.js 외부파일
//1. left 버튼을 눌렀을 때 왼쪽으로 50px씩 이동
let move = 0; //전역변수 만들어줌
$('.btn.left').on('click', function () {
if (move < 1200) {
move += 50;
$('#horse').css('right', move + 'px')
}
})
//2. right 버튼을 눌렀을 때 오른쪽으로 50px씩 이동
$('.btn.right').on('click', function () {
if (move > 0) {
move -= 50;
$('#horse').css('right', move + 'px')
}
})
$('body').on('keydown', function(event){
console.log(event.keyCode) //콘솔창에서 방향키 왼/오 숫자값 확인해보기
if(event.keyCode == 37){
//방향키 왼쪽 버튼을누른다면
if (move < 1200) {
move += 50;
$('#horse').css('right', move + 'px')
}
} else if(event.keyCode == 39){
//방향키 오른쪽버튼을 누른다면
if (move > 0) {
move -= 50;
$('#horse').css('right', move + 'px')
}
} else if( event.keyCode == 32){
$('#horse')
.stop(true)
.animate({bottom : '400px'},500) // 서서히 움직이게 0.5초간
.animate({bottom : '200px'},500)
}
})
//단, img밖으로 말이 넘어가지 않도록 주의
Ajax
- 통신 방법 중하나로, 필요한 데이터만을 웹서버에 요청해 받은 후 클라이언트에서 데이터에 대한 처리를 진행하는 비동기적인 웹 어플리케이션 제작하기위한 웹 개발기법
동기통신 (새롭게 페이지가 갱신됨 - 새로고침 됨) vs 비동기통신
- 동기통신 : request가 있으면 해당 response이 전달될때까지 다른 request를 요청할 수 없는 통신, 다른페이지가 리턴됨
- 비동기통신 : request를 보내더라도 response를 언제받아도 상관없이 다른 request를 요청할 수 있는 통신, 페이지 새로고침이 되지 않고 필요한 부분만 초기화되는것
비동기통신- > 데이터를 주고받자! API 다룰 때 자주 쓰기 때문에 외우기!
ex)
나 (클라이언트) ㅡ 네이버 (서버)
-> Url : https://www.naver.com,
-> Type : get / post (보내는 방식),
-> Data : 내가 보낼 데이터 ,
-> Success : function(){}, (페이지 접근시 성공 or 실패)
-> Error : function(){}
- 데이터 형식 : 데이터 주고받을 때 특정 형식으로 맞춰줘야 됨
ex) CSV-comma로 구분, JSON, XML
1) CSV (컴마로 구분) : 용량이 작지만 가독성 떨어짐, 간단한 테이블 작성하거나 읽는 속도가 중요할 때 사용
2) XML (다목적 마크업 언어-태그로 구분) : 직관적이지만 용량이 크고 데이터양이 많으면 추출속도 떨어짐, 직접 데이터 수정이 잦을 때, 단순 작업시 사용
3) JSON (key:value로 이루어짐) : 용량 적고 가독성 좋지만 양이 많아지면 추출속도 떨어짐, JS 객체나 Ajax(비동기통신) 표준
$.ajax({
키 : 값
})
