제이쿼리
부트스트랩 모달
form 태그
제이쿼리가 뭐하는 건지
부트스트랩이 제이쿼리 씀
회원가입
클라이언트가 할 때랑 서버가 할 때가 다름
쿼리 스트링 (쿼리 파라미터)
물음표 뒤에 있는 거
?key=value
?category=1
예전에는 form 태그
요즘은 이 데이터들을 JSON 데이터로 만들
책에 댓글 처리, 댓글 등록 하는 부분
예전에는 아이프레임 썼었음
페이지 안에 페이지를 담는 방법
mp3 플레이어를 간단하게 만들어 보겠음
달롱 사이트도 프레임이라는 걸 씀
데이터 전송 같은 거에 도움이 될 거임
서버에서 브라우저에서 역할이 별로 없는 거
웹 페이지를 어떻게
http://localhost:5555/w19/mp3/aaa.mp3
audio 태그
https://developer.mozilla.org/ko/docs/Web/HTML/Element/audio
iframe (inline frame)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>MP3</h1>
<style>
iframe {
width: 100vw;
height: 30vh;
}
</style>
<iframe src="https://bbs.ruliweb.com/"></iframe>
</body>
</html>
<body>
<h1>MP3</h1>
<style>
iframe {
width: 100vw;
height: 30vh;
}
</style>
<iframe src="http://localhost:5555/w19/mp3/aaa.mp3"></iframe>
</body>
</html>
a 태그 걸 거임
자바스크립트를 하나도 안 쓰고 노래가 바뀌게 할 수 있음
옛날에 웹페이지도 이렇게 작동함
웹앱처럼 동작하게끔 보이게 할 수 있다
<body>
<h1>MP3 Player</h1>
<ul>
<li><a href="mp3/aaa.mp3">AAA</a></li>
<li><a href="mp3/bbb.mp3">BBB</a></li>
<li><a href="mp3/ccc.mp3">CCC</a></li>
</ul>
<style>
iframe {
width: 100vw;
height: 30vh;
}
</style>
<iframe src="http://localhost:5555/w19/mp3/aaa.mp3"></iframe>
</body>
</html>
어제 메뉴처럼
스크롤 내리면 쭉 있는
노래를 들으면서 이 웹페이지를 벗어나고 싶지 않아
그 때 쓸 수 있는 게 target
a 태그에 target 속성을 넣어주면 됨
_blank : 새 창
다나와가 새 창에 뜸
자바스크립트로 처리하지 않아도 html으로 가능
form 태그도 target 속성 사용 가능
<body>
<h1>MP3 Player</h1>
<ul>
<li><a href="mp3/aaa.mp3" target="_blank">AAA</a></li>
<li><a href="mp3/bbb.mp3" target="_blank">BBB</a></li>
<li><a href="mp3/ccc.mp3" target="_blank">CCC</a></li>
</ul>
<style>
iframe {
width: 100vw;
height: 30vh;
}
</style>
<iframe src="http://localhost:5555/w19/mp3/aaa.mp3"></iframe>
</body>iframe 사용해서 웹페이지 안에 띄울 수 있음
name 지정
<iframe name="zeroFrame"></iframe>zeroFrame
대부분의 경우 width, height가 0
대부분의 경우 눈에 안 보이게 만들어 놓음
내가 봤던 상품 나오는 게 iframe 사용한 거
target에 name을 지정할 수 있음
target="zeroFrame"
이제 a 태그 클릭하면 iframe에서 나옴
<body>
<h1>MP3 Player</h1>
<ul>
<li><a href="mp3/aaa.mp3" target="zeroFrame">AAA</a></li>
<li><a href="mp3/bbb.mp3" target="zeroFrame">BBB</a></li>
<li><a href="mp3/ccc.mp3" target="zeroFrame">CCC</a></li>
</ul>
<style>
iframe {
width: 100vw;
height: 30vh;
}
</style>
<iframe name="zeroFrame"></iframe>
</body>
다른 원격지에 있는 링크를 걸 수도 있는 거
a 태그를 클릭하면 다른 사람 서버에서 가져다가 iframe에 보여주게 되는 거
추가적인 데이터를 보내야 됨
1번 노래 보내줘
2번 노래 보내줘 이런 식으로
그럼 링크가 복잡해짐
노래라고 생각하지 말고 내 로컬에 있는 파일이라고 생각하지 말고
a 태그를 클릭
사실 클릭을 하는 게 아니라 form 태그를 쓴다고 가정해보자
회원가입 해본다고 가정해본다
다 입력하고 버튼을 누르면 회원가입 성공했다 같은 결과가 iframe에 보여지는 거
회원가입 성공했다 그런 게 여기 나오는 거
<form action="mp3/bbb.mp3" target="zeroFrame">
<button type="submit">SUBMIT</button>
</form>form 태그 : 양식지, 신청서
form 태그에 action 속성을 준다. 어디에 제출하라고 하는 거. a 태그 대신에 form 태그로 바꾼 거라고 생각하면 됨
action에는 보통 회원가입이 들어있을 거임
여기에 target을 줄 수 있음
target을 zeroFrame으로 줄 거임
결과를 iframe에 뿌려주는 거임
서버 사이드로 바꾼다고 생각
지금까지는 웹앱에 포커스를 맞췄지만
데이터 핸들링하고 다 하는데
옛날에 전통적인 방식은 html이 주인공이고 js는 따라다니는 애
어떤 서버에서 kiosk.jsp
kiosk.jsp로 결과 데이터를 가져온다고 친다
호출하면 서버에서 html을 다 만들어서 가져오는 거. html 결과 데이터를
전통적인 방식
서버에서 kiosk.jsp를 보내준다
브라우저는 그걸 표현한다
메뉴 추가할 때마다 다시 지우고 새로 받아야 됨
그래서 옛날에는 iframe을 집어넣는 거
별도의 페이지를 만들어주는 거
지금 네이버도 그 흔적이 있음
zeroFrame 대부분 광고에서 많이 쓰임
예전에는 이렇게
동적인 걸 처리할 수 없으니까 페이지를 두 개 집어넣었던 거
페이지 안에 페이지를 집어넣는 걸 '프레임'이라고 한다
옛날에는
지도를 iframe
주문 목록도 iframe
특정한 서버를 호출
서버의 결과를 iframe에 보여주는 거
웹앱은 자바스크립트가 주인공
자바스크립트를 이용해서 원하는 내용을 바꿔치기 하거나 DOM 내용을 바꿔치기 하는 거
한 페이지 내에서 이루어짐
다음주부터
서버 사이드 프로그래밍
브라우저로 뭔가 호출
localhost:5555
우리가 코딩하는 건 해당 url에 맞는 html코드를 만들어서 보내줌
html코드 결과를 브라우저로 전송
결과 데이터를 만들어 줄 때 DB를 사용
DB 이용
서버에서 결과를 만들어서 뿌려주는 거
브라우저 호환성 문제
자바스크립트
IE
존 레식
예전에는 jQuery가 엄청나게 인기가 있었지만 지금은 프론트엔드 중심으로 많이 가서
지금은 딱히 사용할 이유가 없다
과거와 달리 크로스 브라우징 이슈도 적어졌고 Virtual DOM 사용으로 DOM을 직접 조작할 필요가 없어졌다
그럼에도 불구하고 jQuery 플러그인이 많이 제공돼서
예전에 비해서 중요도가 낮아진 건 사실이지만
얼마나 편한지 이게 뭔지
부트스트랩도 jQuery 씀
jQuery
웹앱의 시절이 아니라 그 이전 시절
그 이전 시절에 브라우저의 호환성을 해결하기 위해서 나옴
jQuery는 HTML의 클라이언트 사이드 조작을 단순화 하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리다.
라이브러리임. 기능들만 제공.
크로스 플랫폼 = 크로스 브라우저
브라우저를 뭘 쓰든 간에 자바스크립트를 편하게 쓸 수 있게 해주는 라이브러리
더 이상 jQuery를 사용하지 않는 이유 이런 게 2015년 이후에 많이 나옴
생각보다 소프트웨어가 수명이 길다
유지보수
생각보다 오래 전에 만들어진 서비스가 많음
virtual DOM
많은 플러그인 제공
jquery 이미지 갤러리
심플 사이드 바
부트스트랩도 제이쿼리 씀
DOM 조작을 좀 편하게
이펙트/애니메이션
이동
기본적으로 알아야 되는 건 함수
https://code.jquery.com/jquery-3.6.0.min.js
공백만 없어도 서버 성능 10% 늘어남
https://code.jquery.com/jquery-3.6.0.js
이 서버는 죽지 않으니까 안전하게 쓰려면 이
즉시 실행 함수가 실행되면서 window에 새로운 애가 만들어짐
window.$ === jQuery
console.log($) window.$ 라고 써도 되고 그냥 $ 라고 써도 됨
이게 jquery ↓
jQuery를 제대로 다루려면 함수와 프로토타입에 대해서 알아야 됨
jQuery 자체는 함수임
함수니까 실행을 할 수 있음 $()
함수를 실행하면 뭐가 나옴
jQuery의 기능들임
낯 익은 게 몇 개 보임
addClass
getAttribute, setAttribute → attr
ajax 관련된 기능들도 있음
비동기 통신하는 거
appendTo
이벤트는 on
태그가 없어도 이벤트를 걸 수 있음
우리는 여태까지 바깥쪽에 이벤트 걸고 target 찾는 난리부르스 안 쳐도 됨
jQuery 단점은 느림. 생각보다 무서움.
화면에서 이벤트 처리 많이 해야 되는 경우에는 많이들 배척함
규칙을 제대로 안 지켜서..?
console.log 위로 옮기고 다시 실행해보기
$ is now defined
jQuery script 태그의 내용을 가지고 와서 한 번 실행을 하면서 window에 $라고 붙는 건데 그걸 실행하기 전에 출력하려고 해서 에러 난 거
jQuery이 위치 중요함
jQuery를 사용하기 전에 jQuery script 태그를 갖다 놔야 됨
항상 위쪽에 두기
$ vs $()
$ : 함수 자체를 의미
$() : 제이쿼리를 실행한 결과를 의미
두 가지 방식
$.
$("h1").remove()
document.getElementById() 쓰다가 이제 잘 안 쓴다고
document.querySelector() 알려줬었는데
jQuery가 querySelector 씀
#이나 . 사용
$("h1") ← querySelector임
이게 먼저 나오고 querySelector 나옴
다른 점이 하나 있음
$() : 제이쿼리를 실행한 결과를 의미
제이쿼리를 실행한 결과는 뭐지?
제이쿼리라는 함수를 실행한 결과가 무엇인가
h1 태그 여러 개 선언하기
script 태그 선언하기
querySelector()는 하나만 가져옴
전통적인 개발을 해야 돼
리액트도 좋고
일단 서버 사이드를 먼저 하긴 해야 됨
DB에 500만건을 빨리 넣는 방법 설명해봐라
인덱스 쓸 줄 아는지
오라클 메모리 구조 설명해봐라
서버 사이드를 최소한 2~3년 해야 됨
입사해서 제일 많이 하는 게 jsp랑 jquery 작업일 거임
일단 1~2년 동안은 밥벌이를 위해서 jQuery 써야 됨
jQuery 기능 똑같이 만들 수 있으면 jQuery 안다고 말해도 됨
사용법을 아는 거랑 내용을 아는 거는 다름
내용을 아는 건 그걸 만들 수 있으면 아는 거임
h1 태그 3개에 class="red" 라는 속성 추가해주는 방법 비교해보기
여태까지 해 온 방법으로 하면
document.querySelectorAll()을 써서 h1 태그들을 찾았을 거임
All로 가져왔으니까 배열
배열이니까 루프를 돌렸을 거임
루프 돌려서 setAttribute로 class를 red로 속성을 추가해줬을 거임
jQuery로 하면 한 줄로 끝남
jQuery에 addClass()가 있음
jQuery selector 문법 자체가 하나를 가져오는지 배열을 가져오는지에 대한 구분이 없음
$("h1") ← 그냥 이렇게 찾으면 됨
<script>
$("h1").addClass("red")
</script>
구분이 없다는 얘기는 이벤트를 거는 것도 똑같다는 얘기
이벤트를 걸 때 클릭을 하면 뭔가 나오게 하고 싶어
자바스크립트로 짜면
document.querySelectorAll() 배열 가지고 와서 루프
각각에 대해서 addEventListener
클릭하면 뭐 뜨게끔 해주는 거
jQuery로 하면 그냥 뒤에 체이닝 하면 됨
※ 어떤 메소드가 리턴하는 값을 기반으로 해서 함수를 줄줄이 사용하는 것을 메소드 체이닝(method chaining)이라고 부른다.
$("h1").addClass("red").on("click")기본이 버블링이어서 false 안 줘도 됨
<script>
$("h1").on("click", (e) => {
})
</script><script>
$("h1").on("click", (e) => {
alert("AAAAA")
})
</script>h1 태그 3개 다 이벤트 걸림
셋 다 클릭하면 alert 뜸
제이쿼리는 구분이 없음. 무조건 다 가져옴.
동작 자체가 다름.
예전에는 querySelector, querySelectorAll 구분해서 사용했어야 했는데
제이쿼리는 구분이 필요 없음
해당하는 애들 다 처리해줌
물론 여기서 내가 원하는 것만 선택할 수도 있음. 그건 조금 이따가 하겠음.
h1 태그 한 개 남기고 다 지우기
a와 b는 같은 애일까?
<script>
const a = document.querySelector("h1")
const b = $("h1")
</script>똑같은 애는 아님. 충격적임.
innerHTML로 실험해보자.
a는 순수하게 DOM 처리한 거니까 innerHTML이 될 것이다
a.innerHTML = "BBB"
<script>
const a = document.querySelector("h1")
a.innerHTML = "BBB"
// const b = $("h1")
</script>내용이 BBB로 바뀌어 있다.
만약에 같다면 b.innerHTML = "BBB" 이것도 돼야 되는 거
<script>
// const a = document.querySelector("h1")
// a.innerHTML = "BBB"
const b = $("h1")
b.innerHTML = "BBB"
</script>내용 안 바뀜. 개발자 도구 보면 에러도 없음.
b 입력해보면 h1은 0번째에 있음
Prototype도 보임. 아까 봤던 jQuery 기능들임. 여기에 다 들어가 있음.
jQuery는 함수라고 했음
const b = $("h1")
여기서 $("h1")는 함수의 실행 결과임
$("h1") ← 결과가 뭔지 알아야 됨
순수한 DOM은 아닌 거 같음
순수한 DOM이었으면 innerHTML이 동작했어야 됐음
jQuery가 느려지는 이유 중에 하나가 이거임
jQuery를 실행하면 한 번 싸여서 나옴
순수한 애가 나오는 게 아니라 걔를 감싸고 있는 애가 나옴
decorator 라고 함
순수한 DOM이 아니라 실제 element를 감싸고 있는 애를 반환함
그래서 innerHTML이 안 먹었던 거
jQuery를 10번 날리게 되면 이런 애가 10개 나오는 거
함수를 계속 실행하는 것이기 때문에 굉장히 느려짐
이 문제를 해결하기 위한 방법이 있음
실제로 이거는 안 되고 진짜 jQuery
innerHTML을 쓰고 싶으면 b.get(0)을 쓰거나 b[0]라고 써야 됨
b.get(0).innerHTML = "BBB" 이렇게 쓰거나
b[0].innerHTML = "BBB" 이렇게 써야 됨
document.querySelector랑 jQuery selector랑 똑같은 거 아님.
왜 이렇게 감싸서 만들었을까? 편하게 할 수 있어서.
원래는 get, set 나눠서 쓰는데
jQuery는 get, set을 통합
b.html("BBB")
<script>
// const a = document.querySelector("h1")
// a.innerHTML = "BBB"
const b = $("h1")
// b.innerHTML = "BBB"
b.html("BBB")
</script>내용 BBB로 바뀜
innerHTML로 내용 얻어와서 써야 될 때도
b.html() 함수가 똑같음
함수에 파라미터가 없으면 get, 있으면 set
<script>
// const a = document.querySelector("h1")
// a.innerHTML = "BBB"
const b = $("h1")
// b.innerHTML = "BBB"
b.html("BBB")
console.log(b.html())
</script>
jQuery는 파라미터 개수를 이용해서
파라미터가 없으면 getter
파라미터가 있으면 setter
CSS
$("a").attr("href") // 파라미터가 하나면 getter파라미터가 하나면 getter
$("a").attr("href", "mp3/ccc.mp3") // 파라미터가 2개면 setter개발자 도구로 확인해보면 ccc.mp3로 바뀌어 있음
점.으로 이어서 계속 쓰는 거 (체이닝)
클래스를 부여하고 싶으면 점으로 이어서 붙임
$("a").attr("href", "mp3/ccc.mp3").addClass("red")좋은 점은 a 태그를 여러 개 만들어도 다 적용된다는 거
이런 점이 상당히 편리함
서서히 사라지거나 서서히 나타나는 거 해보자
show
hide
타임 지정도 가능
CSS로 했으면 show랑 hide 일일이 만들어 줬어야 했음
$("a").attr("href", "mp3/ccc.mp3").addClass("red").hide('slow')<style>
.red {
color: red;
}
</style>
<h1>AAA</h1>
<a href="">CCCCC</a>
<a href="">CCCCC</a>
<a href="">CCCCC</a>
<script>
// console.log($)
</script>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
const a = document.querySelector("h1")
// a.innerHTML = "BBB"
const b = $("h1")
// b.get(0).innerHTML = "BBB"
b.html("BBB")
console.log(b.html())
$("a").attr("href", "mp3/ccc.mp3").addClass("red").hide('slow')
</script>jQuery 정리
1. document.querySelector랑 jQuery selector랑 다른 애다
싸여 있다. 왜? 편하게 쓸 수 있는 기능들을 제공하기 위해서. (addClass, hide 등 제공)
사용하기 편하라고 한 번 감싸서 나오는 거
오리지날을 알고 싶다면 get(0)으로 끄집어 내야 한다
2. 1개든 여러 개든 신경쓰지 않고 한 번에 걸 수 있다.
jQuery 이벤트 처리
jQuery 사용법 검색
달러 표시 대신에 jQurey() 이렇게 써도 되긴 함
$(document).ready(function () {
})이거를 안 써도 되는데 이거는 왜 쓰는지에 대해서 설명
이거는 맨 위에 쓰기 ↓
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>옛날에는 head에 script 태그 넣었었음
브라우저는 싱글스레드여서 안 좋음
그 때 쓰는 게 $(document).ready()
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('h1').html("BBBB")
})
// console.log($('h1'))
</script>
<h1>AA</h1>이건 이벤트임
$(document).ready(function () {}) : 이 document DOM 처리가 다 끝나면 콜백 함수 실행해줘
콜백 함수를 실행해줘
DOM 처리가 다 끝나면
안 해도 되는데 안전하게 코딩하는 방법
addEventListener 처럼 동작
이벤트 여러 개 걸어도 됨
script 태그 하나당 $(document).ready() 하나 쓰는 건 좋은데
script 태그 안에 여러 번 쓰는 건 낭비~!
window.onload
브라우저 내의 모든 데이터의 처리가 다 끝난
이미지, css, 멀티미디어 등의 모든 내용을 로드한 뒤
그것까지 데이터가 다 끝나야지만 onload
$(document).ready() : 말 그대로 DOM 처리만 다 끝난 거
- 위치 때문에
- 좀 빨리 처리하려고
selector를 쓰는 방법
객체를 바로 줘도 됨 : $(document)
선택된 요소들 중 index에 해당하는
DOM 핸들링
이벤트 처리 하는 거
<button id="btn">CLICK</button>
<ul id="result"></ul>
</body>버튼에 클릭 이벤트를 걸고 li 생성되게
<script>
$(document).ready(function() {
$("#btn").on("click", (e) => {
})
})
</script>
<button id="btn">CLICK</button>
<ul id="result">
</ul>
</body>
제이쿼리를 개발자들이 왜 잘못쓰는지
append
문자열로 태그를 만들어서 집어넣을 수도 있고
element 찾은 걸 집어넣을 수도 있음 (이동이 되어버리는 거 같은데..?)
CLICK 버튼을 누르면 ul 태그에 li 태그를 append
<script>
$(document).ready(function() {
$("#btn").on("click", (e) => {
alert("click")
$('#result').append("<li>AAA</li>")
})
})
</script>
<button id="btn">CLICK</button>
<ul id="result">
</ul>
</body>
근데 이 코드는 굉장히 안 좋은 코드
클릭할 때마다 $('#result')를 얻기 위해서 jQuery를 계속 호출
그렇게 되면 바닐라JS로 짤 때보다 느림
화면에 100~200개 뿌릴 때 이런 식으로 짜면 굉장히 성능이 떨어짐
jQuery는 가능하면 매번 쓰지 마라
필요할 때 하나 만들어 놓고 계속 재사용하는 방법 쓰기
jQuery에서 계속 사용하는 애를 매번 jQuery로 찾으면 안 됨
변수로 빼놓고 실행해야 됨
<script>
$(document).ready(function() {
const result = $('#result') // 변수로 뺀다
$("#btn").on("click", (e) => {
alert("click")
result.append("<li>AAA</li>")
})
})
</script>내가 만든 시계는 싸구려 시계인가 명품 시계인가
$(document).ready() 안에 쓰면 지역변수로 선언되니까 좋음
<script>
$(document).ready(function() {
const result = $('#result')
let count = 0
$("#btn").on("click", (e) => {
alert("click")
result.append(`<li>AAA ${count++}</li>`)
})
})
</script>이벤트 위임
li는 동적으로 만들어지는 애들임
여태까지는 onclick을 직접 주거나 바깥쪽에 이벤트를 걸어주거나
jQuery는
<script>
$(document).ready(function() {
const result = $('#result')
let count = 0
$("#btn").on("click", (e) => {
alert("click")
result.append(`<li>AAA ${count++}</li>`)
})
$("#result").on("click", "li", (e) => {
console.log(this)
})
})
</script>
<button id="btn">CLICK</button>
<ul id="result">
</ul>화살표 함수에서 this는 document를 출력한다
this → e.target으로 변경하면 잘 나옴
<script>
$(document).ready(function() {
const result = $('#result')
let count = 0
$("#btn").on("click", (e) => {
alert("click")
result.append(`<li>AAA ${count++}</li>`)
})
$("#result").on("click", "li", (e) => {
console.log(e.target)
})
})
</script>
이벤트는 미리 존재하는 애한테 걸고
해당 li한테 거는 거
'jQuery 이벤트 위임' 검색
target : 이벤트가 발생한 애
익명 함수 e.target 가능 ↓
$("#result").on("click", "li", function (e) {
console.log(e.target)
})익명 함수는 this 사용 가능 ↓
$("#result").on("click", "li", function (e) {
console.log(this)
})화살표 함수는 this 하면 document 나옴 ↓
$("#result").on("click", "li", (e) => {
console.log(this)
})
화살표 함수는 this를 사용 못 한다
li 클릭하면 삭제되게 하기 remove()
$("#result").on("click", "li", function (e) {
$(e.target).remove()
})
이벤트는 바깥쪽에 걸었지만
이벤트의 대상이 되는 건 li
target.name 이렇게 찾던 거
css 지정 가능
누르면 걔만 얻어올 수 있음
개구리알처럼 감싸
e 라는 애가 순수한 이벤트였을까
그렇다면 다시 감쌀 필요 없었을텐데
jQuery 객체는 S.Event 라고 나옴
DOM 객체는 PointerEvent 라고 나옴
<button id="testBtn">Test</button>
<script>
document.querySelector("#testBtn").addEventListener("click", function (e) {
console.log(e)
}, false)
</script>PointerEvent 나옴
원본을 알고 싶으면 originalEvent
console.log(e.originalEvent) 라고 하면 DOM 객체로 출력됨
jQuery는 이벤트 처리도 한 번 개구리알
순수한 DOM 객체인지 innerHTML로 확인
$("#btn").on("click", (e) => {
console.log(e)
e.target.innerHTML = "ZZZZZZ"
// alert("click")
// result.append(`<li>AAA ${count++}</li>`)
})"ZZZZZZ"로 내용 바뀜
e.target은 순수 DOM 객체라는 거
//jquery는 이벤트 처리
// 1. 동적인 요소에도 이벤트를 걸수 있다.
// 2. e 는 순수한 이벤트 객체가 아니라 쌓여있다. -> originalEvent
// 3. e.target으로 꺼낸 객체는 DOM객체 (jquery객체 아님)jQuery는
1. 동적인 요소에도 이벤트를 걸 수 있다 (이벤트 위임)★★★
2. e는 순수한 이벤트 객체가 아니라 감싸져 있다.
순수한 이벤트를 알고 싶으면 e.originalEvent
DOM 처리할 때 쓰던 이벤트
3. e.target으로 꺼낸 객체는 DOM 객체 (jquery 객체 아님)
그래서 remove 라는 기능 없던 거
remove 라는 기능을 쓰고 싶으면 개구리알로 만들어야 됨
$(e.target).remove()
인덱스 번호를 몰라도 클릭한 애를 바로 삭제할 수 있다는 거
브라우저에 Element.remove() 라는 메소드가 있음.. jQuery에만 있는 함수가 아니었음..
hide는 jQuery에만 있는 함수니까 hide를 예시로 생각하기
jQuery 상위(부모) 요소 가져오기
closest
closest() : 상위 요소 1개 가져오기
parents() : 상위 요소 여러 개 가져오기
show
hide
hide로 줄어들게 한 다음에
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<ul>
<li><img src="img/c01.jpg"></li>
<li><img src="img/c02.jpg"></li>
<li><img src="img/c03.jpg"></li>
</ul>
<script>
$(document).ready(function (e) {
})
</script>
</body>span 태그로 X 버튼 만들어주기
<ul>
<li><img src="img/c01.jpg"><span>X</span></li>
<li><img src="img/c02.jpg"><span>X</span></li>
<li><img src="img/c03.jpg"><span>X</span></li>
</ul>li 태그가 동적으로 만들어지는 애라고 가정하고 해보자
ul에 이벤트 걸기
동적으로 가져온다고 생각한다고 하고
span에 X 있으니까
이번엔 li 말고 span에 걸 거
const targetEle = $(e.target).closest("li")$(e.target)의 상위 요소 중에서 가장 가까운 li 태그 찾기
hide(duration, 콜백함수)
콜백함수 ← hide가 다 되면 실행되는 함수
화면에서만 사라진 거지 DOM에서 remove가 된 건 아님
반대로 show를 누르면 쫙 펴지는 거
위에서부터 나오기 때문에 아래서부터 위로 사라지는 거
flex 사용하면 가운데로 사라지게도 할 수 있음
애니메이션 효과
4교시 시작
자세히 보니까 대각선 방향으로 줄어듦
TV 꺼지는 거 같이 줄일 수도 있음
약간의 CSS + 약간의 jQuery
보통은 0.6ms
scale
animate
hide가 화면에서만 사라진 거고 실제로 없어진 건 아님
가끔은 없애고 싶을 때도 있을 거임
없애고 싶다면 콜백함수를 이용해야 한다
콜백은 hide가 끝난 다음에 호출된다
$(e.target).closest("li")를 변수로 빼준다
const targetEle = $(e.target).closest("li")이것도 클로저임
targetEle 이라는 변수가 hide 함수의 콜백함수에는 선언된 적 없음
※ 클로저 : 이 함수 안에는 없는데 참조하는 메모리가 있는 거
<script>
$(document).ready(function (e) {
$("ul").on("click", "span", function (e) {
const targetEle = $(e.target).closest("li")
targetEle.hide(2000, function() {
targetEle.remove()
})
})
})
</script>hide 애니메이션이 끝나고 li 태그가 삭제됨
drag & drop을 html5에서 지원
과거에는 jQuery를 이용해서 만들어 냈음
https://api.jquery.com/animate/
상위 요소 찾기 closest
하위 요소 찾기 find
객체 선언할 때 DOM의 객체인지 jQuery 객체인지 모르니까
jQuery 객체는 앞에 달러 표시 붙임
화면에서 중앙에 있을 거냐 오른쪽에 있을 거냐
div로 앞면 뒷면이 있는 거
앞장이랑 뒷장이랑 위치를 겹쳐놓은 거
position : absolute
자바스크립트에서 어떤 애를 움직이는 방법은 크게 2가지가 있다.
클릭하면 class만 변함
이런 게 css를 잘 만든 거
카드를 한 바퀴 돌리는 효과
css 2가지
1. 자바스크립트를 이용해서 처리하는 방법
2. CSS3를 이용하는 방법
1초 동안 for루프를 돌리면서 해당 element의 좌표를 계속 변경시키는 거
레스토랑 메뉴같은 방식
css 변화에 시간을 줌. duration이라는 걸 줘서 그 시간 동안 css 변화가 일어나게
css 변화 = transform
그 시간 동안 서서히 변화됨
자바스크립트를 이용하는 방식은 CPU를 씀
자바스크립트 엔진
CSS3는 GPU
제이쿼리가 나온지 오래 됐잖아요
animate
클릭하면 이동하는 거
직선이동 정도 해볼 거임
https://api.jquery.com/animate/
.animate( properties [, duration ] [, easing ] [, complete ] )
duration, 마지막거는 생략 가능
조금 더 사용하기 편하라고 jquery ui를 제공
https://jqueryui.com/accordion/
애니메이션 이동하고 싶음
jquery animate move left to right 검색
문자열 만들어서 넣을 때는 필요 없음
html을 많이 만들어 놓고
장바구니로 날라갔으면 좋겠다는 거
날아가면서 크기가 좀 작아졌으면 좋겠음
jquery animate scale
<head>
<meta charset="UTF-8">
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
</head>
<body>
<style>
.cardImg {
width: 300px;
position: absolute;
}
</style>
<button id="btn">MOVE</button>
<div class="cardImg">
<img src="img/c01.jpg">
</div>
<script>
$(document).ready(function () {
$("#btn").on("click", function (e) {
const cardImg = $(".cardImg")
cardImg.animate({
left: "+=500",
opacity: "0.1"
}, 1000, function () {
cardImg.animate({
left: "-=500",
'opacity': "1"
}, 1000)
})
})
})
</script><div class="cardImg">
<img src="img/c01.jpg">
<button class="btn">MOVE</button>
</div>
<div class="cardImg">
<img src="img/c01.jpg">
<button class="btn">MOVE</button>
</div>
<div class="cardImg">
<img src="img/c01.jpg">
<button class="btn">MOVE</button>
</div>
<script>
$(document).ready(function () {
$(".btn").on("click", function (e) {
const cardImg = $(".cardImg")
cardImg.animate({
left: "+=500",
opacity: "0.1"
}, 1000, function () {
cardImg.animate({
left: "-=500",
opacity: "1"
}, 1000)
})
})
})
</script>position: relative
이게 끝나면 장바구니에 담기는 거
Media Query
부트스트랩 버전 Currently v5.1.3
https://getbootstrap.com/docs/5.1/getting-started/introduction/
Starter template 복붙
bex1.html
https://getbootstrap.com/docs/5.1/layout/containers/
margin 0, padding 0 줄 필요 없음
https://getbootstrap.com/docs/5.1/content/typography/
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>https://getbootstrap.com/docs/5.1/content/images/
Carousel 이미지 갤러리
https://getbootstrap.com/docs/5.1/components/carousel/
이미지 사이즈 통일시켜주는 게 중요함 ★★★
jquery img gallery
이미지 갤러리
다운 받아서 적용해보기
상품이미지
https://getbootstrap.com/docs/5.1/components/card/
와디즈
instuctables
card 많이 씀
키오스크 화면... 카드로 만들기
한글은 뭘 해도 구림
https://getbootstrap.com/docs/5.1/components/navbar/
상단 메뉴 네비게이션
https://getbootstrap.com/docs/5.1/components/list-group/
주문 수량 표기
row 해서 만들어 주면 됨
로또 했을 때 심플 사이드바에 넣어주기
adminilte bootstrap
https://startbootstrap.com/theme/sb-admin-2
css grid
반응형을 가장 빠르게 만들 수 있는
CSS 그리드 5분만에 배우기
https://ibrahimovic.tistory.com/23
과제
-
부트스트랩 카드
md-8 / md-4
-
제이쿼리 연습
대댓글
root div 만들기
ul로 만들어도 됨
클릭하면
space margin
클릭한 순서대로 숫자가 찍힌다
ul 태그로 가능
li 태그 안에 ul, li 태그 생성
div 태그로도 가능
div 클래스를 하나 줄 거임
삭제 remove
데이터 안 넣어도 좋음
제이쿼리 이벤트(on), append, remove 이용해서 구조 만들기
절대경로는 localhost:5555부터 시작
슬래시가 있으면 절대 경로
슬래시가 없으면 상대 경로
슬래시 대신에
.
..
현재 경로에 맞춰서 상대 경로
루트 경로에서 시작할 때는 절대 경로
