jQuery가 나오게 된 배경
크로스 브라우저 환경에서 동일하게 동작하는 게 목적
어떻게 하면 IE에서도 동작하고 다른 브라우저에서도
Ajax 처리
구글지도 등장 → Ajax → 브라우저 화면에 깜박임이 없는데 서버랑 통신 → 웹앱
웨일 브라우저
fetch
jQuery로 JSON 데이터 이용하기
서버 사이드
똑같은 웹페이지라고 하지만 동작하는 방식이 완전 다름
브라우저에서는 아무것도 못한다고 가정하고 코딩하는 거
자바스크립트는 없다고 생각하고 코딩
다 만들어서 보내주는 거
trends.google.com
on("click", 함수)
on("click", 선택자, 함수)
이벤트 위임
나중에 생성되는 애한테도 이벤트를 미리 걸어둘 수 있다
파라미터 event : 순수 X, 싸여있다
첫 번째 과제: 키오스크
div로 대댓글 만들기
jquery cdn 검색
<body>
<style>
.node {
width: 200px;
height: 50px;
background-color: cadetblue;
margin-left: 30px;
margin-top: 30px;
}
</style>
<div class="container">
<div class="node">
<b>ROOT</b>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
</script>
</body>div 동적으로 만들어짐
앞으로 만들어질 애들한테도 이벤트가 걸려야 됨
$(document).ready()는 그냥 계속 써주기
<script>
$(document).ready(function () {
$(".container").on("click", ".node", function (e) {
})
})
</script><script>
$(document).ready(function () {
$(".container").on("click", ".node", function (e) {
console.log(e.target)
})
})
</script>
순수한 DOM 객체임
append 쓰려면 감싸줘야 됨
싸준 다음에 append 사용
시 구 동 선택하는 거 어떻게 설계해야 되는가
자바스크립트에서 변수의 scope
모던 자바스크립트 Deep Dive (956페이지)
자바스크립트에서 변수의 범위는 함수를 기준으로 한다
brace를 기준으로
변수를 유지해야 되는 거면 무조건 바깥쪽으로 뺀다
const targetNode = $(e.target)targetNode ← 이제 제이쿼리 객체가 되어버림
<div class="container">
<div class="node">
<b>ROOT</b>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
let count = 0
$(".container").on("click", ".node", function (e) {
// console.log(e.target)
const targetNode = $(e.target)
targetNode.append(`<div class="node"><b>ROOT</b></div>`)
})
})
</script>
이벤트 전파 때문에 그런 거
targetNode가 1개여야 됨
console.log("-----------------------------------------")
확인해보면 2번 찍히고 3번 찍힘
e.stopPropagation()
b 태그를 div 태그로 변경
<style>
.node {
width: 200px;
/*height: 20px;*/
background-color: cadetblue;
margin-left: 50px;
text-decoration: underline;
}
</style>
<div class="container">
<div class="node">
<div>ROOT</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
let count = 0
$(".container").on("click", ".node", function (e) {
console.log("-----------------------------------------")
e.stopPropagation()
// console.log(e.target)
const targetNode = $(e.target)
console.log(targetNode)
targetNode.append(`<div class="node"><div>${count++}</div></div>`)
})
})
</script>2교시 시작
버튼을 만든다
버튼을 클릭하면 댓글이 삭제되게 한다
div 안에 button 추가
<button>X</button>
targetNode.append(`<div class="node"><div>${count++}<button>X</button></div></div>`)node 밑에 있는 button에 이벤트를 건다
아직 버튼이 없어도 한꺼번에 걸 수 있다
$(".container").on("click", ".node button", function (e) {
})이벤트를 걸 때 항상 stopPropagation 걸어놓고 시작한다.
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
console.log(e.target) // <button>X</button>
})버튼을 클릭하면 button을 감싸고 있는 div를 삭제하도록 한다.
node 라는 애를 찾아서 지워야 됨
상위 요소 찾는 거 closest()
Element.closest()
https://developer.mozilla.org/ko/docs/Web/API/Element/closest
클래스가 node인 애 closest(".node")
e.target은 순수한 DOM
closest는 원래 브라우저에 있던 메소드
제이쿼리 객체로 안 만들어줘도 사용 가능!
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
console.log(e.target.closest(".node")) // <div class="node">
})
remove 라는 기능이 원래 브라우저에 있긴 한데
제이쿼리 객체로 편하게 쓰려고 달러로 싸준다.
e.target.closest(".node").remove()
$(e.target.closest(".node")).remove()
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
$(e.target.closest(".node")).remove()
})7번 댓글을 삭제하고 싶으면 7번 댓글 아래에 있는 8번 9번 댓글을 먼저 삭제하라고 메시지를 띄운다
예를 들어 1번 댓글만 삭제하면 그 밑에 있는 모든 댓글 다 사라짐
그걸 막아줘야 됨
밑에 댓글이 있으면 댓글이 있어서 삭제할 수 없다고 막아줘야 됨
const target = $(e.target.closest(".node"))
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
const target = $(e.target.closest(".node"))
target.remove()
})target에서부터
target이 뭘 가지고 있는지 확인해봐야 됨
하위에 뭐가 있는지 확인해봐야 됨
상위 요소 찾을 때는 closest()
하위 요소 찾을 때는 find()
하위 요소에 node 라는 애가 있는지 찾아본다
console.log(target.find(".node"))
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
const target = $(e.target.closest(".node"))
console.log(target.find(".node"))
target.remove()
})
보니까 length가 있음
대댓글이 없을 때는 length가 0으로 나옴
find() 쓰면 length에 하위에 몇 개 있는지 나옴
const children = target.find(".node")
children.length 0보다 크면 하위에 뭐가 있다는 거
0보다 크면 삭제 불가라고 경고창 하나 띄워준다
그리고 나서 밑에 코드가 실행되면 안되므로 return
하위 요소가 있으면 삭제 불가 라고 뜸
삭제 불가보다 더 좋은 방법이 있음
밑에 뭐가 달려 있으면 걔는 버튼 자체가 없는 게 나음
나중에 대댓글이 추가되면 버튼을 다시 생성해줘야 되는 게 좀 골치 아픔
바닐라JS로 만들어 보면 실력 많이 늘 거임
$(".container").on("click", ".node button", function (e) {
e.stopPropagation()
const target = $(e.target.closest(".node"))
const children = target.find(".node")
if (children.length > 0) {
alert("삭제 불가")
return
}
// console.log(target.find(".node"))
target.remove()
})시 구 동 선택하는 거
이 구조로 하면 똑같음
비동기 처리를 한 번 해 볼 필요가 있어서 해보겠음
시 구 동 선택
한식
일식
양식치킨 전용 앱
치킨집 가격 비교
치킨집 크롤링해서 이벤트 하는 거 알아내고
치킨 다나와
jquery getjson 검색
https://api.jquery.com/jquery.getjson/
비동기 기억하기
비동기 하면 무조건 콜백 생각하면 됨
2가지만 기억
1. url 주기
2. 콜백
fetch api 썼던 것보다 더 간단하게 할 수 있음
자동완성이랑 비슷한 기능이라고 보면 됨
한식 선택했을 때 한식 음식 목록들이 나오는 거
json 데이터 만들기
한식 데이터, 일식 데이터, 양식 데이터 만들기
json 파일로 만들어서 구글 드라이브에 올려주기
이 데이터를 json 데이터로 떨굴 거
sno는 식별키
<script>
const arr = [
{sno: 's1', sname: '', menu: ''},
]
const str = JSON.stringify(arr)
console.log(str)
</script>jQuery script 태그 복붙해주기
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function (e) {
$.getJSON('http://localhost:5555/w22/1team.json', function (arr) {
console.log(arr)
})
})
</script>
http://localhost:5555/w22/1team.json
화면 만들어 주고
이제 콜백 만들어주고
이 데이터 가져다가 뿌려주고
한식 중식 일식 선택했을 때 이거 뿌려주면 됨
내일 과제 3가지 정도 줄 거임
html select 검색
https://developer.mozilla.org/ko/docs/Web/HTML/Element/select
<select name="category">
<option value="">한식</option>
<option selected>일식</option>
<option>패스트푸드</option>
</select>체크박스는 checked
select는 selected
변경이 일어나면 시작해야 됨
change 라는 이벤트
jquery select change 검색
<select name="category">
<option value="1">한식</option>
<option value="2">일식</option>
<option value="3">패스트푸드</option>
</select>$("select[name='category']")
이름이 category인 select
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
console.log(e.target)
})
})
</script>
기본이 한식으로 되어 있어서 한식에서 한식 클릭하면 인식을 못 함
<select name="category">
<option value="0">---</option>
<option value="1">한식</option>
<option value="2">일식</option>
<option value="3">패스트푸드</option>
</select>우리가 원하는 건 select 안에 있는 option 태그
선택된 값 읽기
option:selected 라는 게 있긴 함
나중에 옵션이라는 게 동적으로 만들어지죠?
나중에 stores 라는 select 태그가 하나 더 들어갈 거임
걔한테는 이벤트 못 걸 거 아님?
그래서 저거 안 쓴 거
option:selected
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
console.log($("select[name='category'] option:selected"))
})
})
</script>값을 얻어오는 건 val()
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
console.log($("select[name='category'] option:selected").val())
})
})
</script>
CSS 문법인데도 빨간밑줄 그어짐
option:selected 이거는 제이쿼리에서만 쓸 수 있는 기능
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
console.log($("select[name='category'] option:selected").val())
})
})
</script>1, 2, 3 대신에 서버 아이피 가져와야 됨
value 값에 서버 아이피 넣어주기
<select name="category">
<option>---</option>
<option value="http://localhost:5555/w22/1team.json">한식</option>
<option value="http://localhost:5555/w22/2team.json">일식</option>
<option value="http://localhost:5555/w22/3team.json">패스트푸드</option>
</select>
<select name="stores">
</select>
서버 아이피에서 json 데이터를 가져와야 됨
가져온 값을 stores에 밀어 넣어준다
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
})
})
</script>url이 없으면 그냥 넘어가게 한다
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
})
})
</script>$.getJSON
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function () {
})
})
})
</script>전에는 parse 라는 걸 따로 해줬어야 했는데 getJSON은 다 해줌
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
})
})
})
</script>
stores에 채워줘야 함
구조 분해 할당. 자바에는 이런 문법이 없음.
const {sno, sname} = arr[i]
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
}
})
})
})
</script>console.log(sno, sname)
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
}
})
})
})
</script>
let str = ''
str += `<option>${sname}</option>`<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
let str = ''
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option>${sname}</option>`
} // end for
})
})
})
</script>mapping
str을 stores에 추가해주면 끝남
제이쿼리 사용해서 추가해도 됨
$("select[name='stores']")
여기에 append 사용해도 되고
기존의 innerHTML 대신에 html() 사용하면 됨
html()에 파라미터 없으면 get, 있으면 set
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
let str = ''
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option>${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
})
</script>
잘 나옴
쇼핑몰에 응용할 수 있음
카테고리 대분류 중분류 소분류
우편번호에도 이용
내일 과제 중에 회원가입 할 때 우편번호
카카오에서 제공함
'카카오 회원가입 우편번호'
엑스트라 과제
여기에 지도를 붙이는 것도 괜찮을 거 같음
가게에 있는 메뉴 정보를 안 보여주고 있음
경복궁을 선택하면 경복궁에 있는 메뉴를 보여주고 싶음
가게 정보를 보여주는 ul 태그 하나 만들기
<select name="stores">
</select>
<ul class="details">
</ul>경복궁에서 경복궁 클릭하면 안 먹음
똑같이 처음에 비어있게 해주자
꼼수이긴 하지만~
let str = '<option>------</option>'
$.getJSON(url, function (arr) {
console.log(arr)
let str = '<option>------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option>${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})바닐라JS로 만들어보는게 실력향상에 도움이 많이 될 거
e.target.value
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
let str = '<option>------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option>${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
console.log(e.target.value)
})
})
</script>
value 값을 지정해줘야 될 거 같음
sno로 지정
str += `<option value="${sno}">${sname}</option>`let str = '<option value="0">------</option>'
<script>
$(document).ready(function (e) {
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
let str = '<option>------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option value="${sno}">${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
console.log(e.target.value)
})
})
</script><option value="0">---</option>
선택한 가게의 번호를 알아냄
가게에서 파는 메뉴를 알아낼 수 있음
문제가 하나 생김
가게 데이터는 여기에서 사용되고 끝남
여기서는 접근을 못 함
유지하고 싶으면 바깥쪽으로 빼라
가게 데이터들을 보관하고 있는 변수가 필요
그래야지만 선택한 가게에 대한 정보를 sno로 접근할 수 있음
let storesArr = []
storesArr = arr
<script>
$(document).ready(function (e) {
let storesArr = []
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
storesArr = arr
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option value="${sno}">${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
console.log(e.target.value)
})
})
</script>filter로 값이 같으면 추려내면 됨
안 그러면 또 for루프 돌려서
요즘에 자바 코드도 이런 식으로 많이 씀
strim..?
const sno = e.target.value
<script>
$(document).ready(function (e) {
let storesArr = []
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
storesArr = arr
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option value="${sno}">${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
// console.log(e.target.value)
const sno = e.target.value
})
})
</script>자바 ↓
<script>
$(document).ready(function (e) {
let storesArr = []
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
storesArr = arr
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option value="${sno}">${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
// console.log(e.target.value)
const sno = e.target.value
const filterResult = storesArr.filter(store => store.sno === sno)
console.log(filterResult)
})
})
</script>
뒤에 [0] 붙여주기
const filterResult = storesArr.filter(store => store.sno === sno)[0]
ul에 출력하면 끝남
콤마로 나뉘어져 있으니까 li 태그를 여러 개 만들면 되겠음
const menus = filterResult.menu.split(",") ← 배열이 반환됨
<script>
$(document).ready(function (e) {
let storesArr = []
$("select[name='category']").on("change", function (e) {
const url = $("select[name='category'] option:selected").val()
if (!url) {
return
}
$.getJSON(url, function (arr) {
console.log(arr)
storesArr = arr
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
console.log(sno, sname)
str += `<option value="${sno}">${sname}</option>`
} // end for
$("select[name='stores']").html(str)
})
})
$("select[name='stores']").on("change", function (e) {
// console.log(e.target.value)
const sno = e.target.value
const filterResult = storesArr.filter(store => store.sno === sno)[0]
console.log(filterResult)
const menus = filterResult.menu.split(",")
console.log(menus)
})
})
</script>
tabs (jQuery UI)
4교시 시작
https://jqueryui.com/tabs/#ajax
ex3.html 파일 생성
head 태그 끝나기 바로 전에 추가하기
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>$("#tabs").tabs() ← 이거 입력해야 tab 스타일 적용됨
디자인은 jQuery보다는 부트스트랩이 나음
<body>
<div id="tabs">
<ul>
<li>T1</li>
<li>T2</li>
<li>T3</li>
</ul>
</div>
<script>
$(document).ready(function () {
$("#tabs").tabs()
})
</script>
</body>
li 태그에 a 태그 넣어주기
<body>
<div id="tabs">
<ul>
<li><a href="">T1</a></li>
<li><a href="">T2</a></li>
<li><a href="">T3</a></li>
</ul>
</div>
<script>
$(document).ready(function () {
$("#tabs").tabs()
})
</script>
</body>탭 생김
요즘에는 jQuery UI 보다는 부트스트랩이나 Material UI 더 많이 사용
탭을 클릭한다는 건 a 태그를 클릭한다는 얘기
탭을 클릭하면 => a 태그를 클릭하면
각각의 li 태그를 클릭했을 때 내용물을 만들어야 됨
각각의 뭐를 만들어 줘야 돼
<div id="tabs-1">
<li><a href="#tabs-1">
div id 만들어서 a 태그에 넣으면 되는 거 같음
ul 밑에 div 하나를 만든다.
id를 준다.
<div id="result">
<li><a href="#result">
#이라는 게 id를 의미하는 링크다
<div id="tabs">
<ul>
<li><a href="#result">T1</a></li>
<li><a href="#result">T2</a></li>
<li><a href="#result">T3</a></li>
</ul>
<div id="result">
<h1>RESULT DIV</h1>
</div>
</div>
<script>
$(document).ready(function () {
$("#tabs").tabs()
})
</script>사실은 div 안에 보이는 내용물만 z-index만 바꿔준 거
사실은 겹쳐져 있는 거
위에 있는 애는 display: none을 주는 거. 그럼 안 보임.
그럼 마지막에는 내가 선택한 애만 display가 block으로 되어 있고 나머지는 다 none인 거
그럼 화면에서 보이는 건 얘 하나만 보이는 거
화면은 하나만 있으면 됨
안에 내용물은 동적으로 만들 거니까
내용물만 바꿔치기 해서 보여주면 돼서 div 3개가 필요 없음
<div id="tabs">
<ul>
<li><a href="#result">한식</a></li>
<li><a href="#result">일식</a></li>
<li><a href="#result">패스트푸드</a></li>
</ul>
<div id="result">
<h1>RESULT DIV</h1>
</div>
</div>얘를 클릭했을 때 이벤트 처리를 해서 이 안에 내용물만 바꾸면 되는 거
이번에는 되게 편함. 먼저 정의가 되어 있음. 미리 나와 있음. 고정되어 있는 DOM.
고정적인 DOM. 동적인 DOM이 아님.
고정되어 있으니까 tabs 밑에 ul 밑에 li 태그 밑에 a 태그한테 이벤트를 걸면 됨
tabs 밑에 ul 밑에 li 밑에 a 태그라고 걸어도 되지만
tabs 밑에 a 태그라고만 걸어도 됨
$("#tabs a")
a 태그는 기본동작이 있음
막아주고 싶으면 e.preventDefault()
그냥 잘 모르겠으면 e.stopPropagation() 같이 쓰기
<script>
$(document).ready(function () {
$("#tabs").tabs()
$("#tabs a").on("click", function (e) {
e.preventDefault()
e.stopPropagation()
console.log(e.target) // a 태그 나옴
})
})
</script>a 태그에 뭔가 많이 붙어 있음
a 태그를 얻어옴
a 태그 안에 주소가 있어야 됨
1팀의 주소, 2팀의 주소, 3팀의 주소
커스텀 데이터 속성
data-
<ul>
<li><a href="#result" data-url="http://localhost:5555/w22/1team.json">한식</a></li>
<li><a href="#result" data-url="http://localhost:5555/w22/2team.json">일식</a></li>
<li><a href="#result" data-url="http://localhost:5555/w22/3team.json">패스트푸드</a></li>
</ul>
getJSON으로 데이터 가져오면 됨
data-url에 있는 값을 가져와야 됨
attr 이라는 애로 끄집어 낼 수 있음
전에는 getAttribute로 끄집어 냈었음
<script>
$(document).ready(function () {
$("#tabs").tabs()
$("#tabs a").on("click", function (e) {
e.preventDefault()
e.stopPropagation()
console.log(e.target)
// e.target.getAttribute("data-url")
console.log($(e.target).data("url"))
})
})
</script>
e.target.getAttribute("data-url") 이게 더 좋음
쓸데없이 jquery 호출하지 않으니까 더 좋음
const url = $(e.target).data("url")
$.getJSON
<script>
$(document).ready(function () {
$("#tabs").tabs()
$("#tabs a").on("click", function (e) {
e.preventDefault()
e.stopPropagation()
console.log(e.target)
// e.target.getAttribute("data-url")
// console.log($(e.target).data("url"))
const url = $(e.target).data("url")
$.getJSON(url, function (arr) {
console.log(arr)
}) // getJSON
}) // click
})
</script>
키오스크에 탭 할 거임
키오스크 이미지가 중요함
5교시 시작
모달 사용하는 방법
https://getbootstrap.com/docs/5.1/getting-started/introduction/#starter-template
div를 만들어서 위에 띄우는 걸 modal이라고 한다
메뉴의 이미지를 모달로 띄운다
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
console.log($)
</script>https://getbootstrap.com/docs/5.1/components/modal/#modal-components
div가 가려져 있음
자바스크립트로 직접
data-target="#exampleModal"
js big video 검색
디자인 이쁘게 할 자신 없으면
1. 한국어 쓰지 말고 영어 써라
모바일에서는 부담이 됨
디자인 허접할 때 최후의 수단으로
음료 선택하면 그것도 모달창
계산 다 끝났을 때도 모달창 띄워줘야 됨
과제 빨리 끝나면 카카오 페이 적용해보기
OAuth
디자인이 이쁜 게 훨씬 나음
다양한 기술 써보는 게 좋음
DOM으로 처리할 수 있는 방법이 나옴
<script>
$(document).ready(function () {
const myModal = new bootstrap.Modal(document.getElementById('#exampleModal'))
$("#btn").on("click", function (e) {
myModal.show()
})
})
// console.log($)
</script>modal-body에 있는 html 코드를 바꿔주는 거
지금 같은 경우는 제이쿼리 안 써도 될 거 같음
$(".modal-body").html("")
가벼운 건 innerHTML
다른 애를 클릭하면 다른 그림이 나와야 됨
<script>
$(document).ready(function () {
const myModal = new bootstrap.Modal(document.getElementById('#exampleModal'))
$("#btn").on("click", function (e) {
$(".modal-body").html("<img src='img/c01.jpg'>")
myModal.show()
})
$("#m2").on("click", function (e) {
$(".modal-body").html("<img src='img/c02.jpg'>")
myModal.show()
})
})
</script>사진 가운데 정렬 같은 거 해주기
제이쿼리 특징
이벤트 한 번에 거는 거 가능
카드에 이벤트 한꺼번에 걸림
cart에 넣어주면 끝남
전체 레이아웃
웹앱이 어떻게 동작할 건가
단계별로 진행
사이드바 거기에다 상품이미지 가져와서 넣는 게 제일 쉬울 거 같음
mock-up tool
발사믹
이거 이용해도 됨
카카오 오븐
https://ovenapp.io/
가게 업종 팀별로 하나씩 정하기
요구사항 분석하고 구현해야 되는데
반대로 구현을 먼저 하고 거기에 맞춰서 요구사항을
화면을 이렇게 만들겠다 라고 제출하는 형식으로
로고
메뉴는 탭 메뉴
탭 메뉴를 선택하면 메뉴들이 나옴
안에 디자인은 맞춰주기
사진이 들어가고 메뉴 이름, 가격이 들어간다
사진을 클릭하면 모달창이 크게 떠야 됨
'담기' '취소'
'담기'를 선택하면 옆에 주문 목록에 상품과 수량이 들어가야 된다
맨 마지막에 총합계
부트스트랩으로 만들기
조별로 할 생각
과제1 : 부트스트랩 이쁘게 쓰기
1. 데이터 전부 다 집어넣기
모든 데이터는 html 페이지 안에 넣는 거
직접 선언하는 거
직접 선언해서 처리
1버전
2. 메뉴데이터는 json파일로 분리해서 비동기 처리를 한다
오늘 오전에 한 거
과제2 : 지도
버튼으로 하든 탭으로 하든 상관없음
한식 일식 패스트푸드
클릭하면 지도상에 표시해야 됨
클릭하면 지도상에 음식점 표시
과제3 :
공공데이터포털
위생법
위반
뭐든 좋으니까
json으로 되어 있는 데이터면 됨 JSON
지도에 표시
공공데이터 신청
신청결과 캡처
내일이면 허락이 떨어짐
화면까지 만들면 제출
1122과제 폴더
깃헙주소 올려도 됨
내일 점심 전까지
객체 지향
역할과 책임
두 가지 스타일이 있음
Service로 뺀 것도 객체 지향 방식
책임 / 역할
객체 지향 패러다임 : 어떤 존재가 필요한지 먼저 생각
함수형 패러다임은 : 어떤 함수가 필요한지 먼저 생각
프로그램
데이터 / 로직
객체라고 부르는 것도 두 가지로 구분
데이터 : 객체 리터럴
로직 :
데이터 때문에 클래스를 만드는지
로직 때문에 클래스를 만드는지
데이터를 만드는 클래스의 특징 : 파라미터가 될 수도 있고, 리턴 타입이 될 수도 있고, 배열이나 자료구조가 될 수 있다.
로직 : 함수의 묶음
함수들 간에 공유가 생김. 바깥쪽으로 빼줌.
돼지저금통 생각하면 됨.
자바스크립트는 클래스가 없음.
함수를 묶을 순 있는데
함수 안에 함수를 선언하면 됨
함수 간의 공유하는 데이터는 클로저를 쓰면 됨
객체 지향은 존재가 중요
절차 지향은 라면 끓이기
객체 지향은 라면을 끓이기 위해서 연극을 하는 거. 배우도 필요하고 소품도 필요. 걔네들을 먼저 만든 다음에 걔네끼리 대사를 주고 받는 거.
객체에 책임과 역할이 있음
자기가 해야 되는 역할을 정확히 구분
화면은 화면대로 하고
데이터를 처리하는 애는 데이터 따로 분리
자바스크립트는 클래스라는 개념이 없었기 때문에
함수를 실행하면 객체 리터럴을 반환하는 형태
store.js 파일 생성
const storeService = (function () {
return {}
})()const storeService = (function () {
function loadJson(url) {
}
function getStore(sno) {
}
return {loadJson, getStore}
})()ex3_1.html 파일 생성
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="store.js"></script>
</body><body>
<select name="category">
<option value="0">---</option>
<option value="http://localhost:5555/w22/1team.json">한식</option>
<option value="http://localhost:5555/w22/2team.json">일식</option>
<option value="http://localhost:5555/w22/3team.json">패스트푸드</option>
</select>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="store.js"></script>
<script>
storeService.loadJson("http://localhost:5555/w22/1team.json")
</script>
</body>비동기는 무조건 콜백. 끝나면 이 함수를 실행해줘.
<script>
storeService.loadJson("http://localhost:5555/w22/1team.json", function (arr) {
console.log(arr)
})
</script>function loadJson 파라미터에 callback 추가
const storeService = (function () {
function loadJson(url, callback) {
}
function getStore(sno) {
}
return {loadJson, getStore}
})()const storeService = (function () {
function loadJson(url, callback) {
$.getJSON(url, function (data) {
callback(data)
})
}
function getStore(sno) {
}
return {loadJson, getStore}
})()한식 선택하면
객체는 자기만의 데이터를 보관할 수 있음
url이 3개가 있잖아요
const storeService = (function () {
const urlArr = ["http://localhost:5555/w22/1team.json", "http://localhost:5555/w22/2team.json", "http://localhost:5555/w22/3team.json"]
function loadJson(url, callback) {
$.getJSON(url, function (data) {
callback(data)
})
}
function getStore(sno) {
}
return {loadJson, getStore}
})()const storeService = (function () {
const urlArr = ["http://localhost:5555/w22/1team.json", "http://localhost:5555/w22/2team.json", "http://localhost:5555/w22/3team.json"]
function loadJson(index, callback) {
$.getJSON(urlArr[index], function (data) {
callback(data)
})
}
function getStore(sno) {
}
return {loadJson, getStore}
})()<script src="store.js"></script>
<script>
storeService.loadJson(0, function (arr) {
console.log(arr)
})
</script><select name="category">
<option value="-1">---</option>
<option value="0">한식</option>
<option value="1">일식</option>
<option value="2">패스트푸드</option>
</select><script>
$(document).ready(function () {
function makeStores(arr) {
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
str += `<option value="${sno}">${sname}</option>`
}
$("select[name='stores']").html(str)
}
$("select[name='category']").on("change", function (e) {
const idx = e.target.value
console.log(idx)
if (idx < 0) {
return
}
storeService.loadJson(idx, makeStores)
})
})
</script>음식점이 change 됐을 때 가져오는 거
금액이라는 데이터
const storeService = (function () {
const urlArr = ["http://localhost:5555/w22/1team.json", "http://localhost:5555/w22/2team.json", "http://localhost:5555/w22/3team.json"]
let storeArr = []
function loadJson(index, callback) {
$.getJSON(urlArr[index], function (data) {
storeArr = data
callback(data)
})
}
function getStore(sno) {
return storeArr.filter(s => s.sno === sno)[0]
}
return {loadJson, getStore}
})()<script>
$(document).ready(function () {
function makeStores(arr) {
let str = '<option value="0">------</option>'
for (let i = 0; i < arr.length; i++) {
const {sno, sname} = arr[i]
str += `<option value="${sno}">${sname}</option>`
}
$("select[name='stores']").html(str)
}
$("select[name='category']").on("change", function (e) {
const idx = e.target.value
console.log(idx)
if (idx < 0) {
return
}
storeService.loadJson(idx, makeStores)
})
$("select[name='stores']").on("change", function (e) {
const value = e.target.value
const store = storeService.getStore(value)
console.log(store)
})
})
</script>보관해야 되는 애들만 위쪽으로 빼준다
회원정보는 데이터
변수부터 코딩
제일 먼저 변수부터 선언
돼지저금통을 기능부터 코딩해놓고 보니까 최종금액을 계속 보관해야 되네?
그럼 위로 빼면 됨
Dragon
기능부터 만든다
불뿜기
먹기
상태가 필요
상태는 위쪽으로 뺀다
배가 고프다
상태를 무는 함수를 메소드라고 한다.
모듈 패턴 👏
html에는 화면이랑 이벤트 처리하는 것만 있음
