JQuery 적용 2
fetch = 서버에서 데이터를 받아오는 것
코드 가져오는 방법
바탕화면 - > index.html 파일 끌어서 오기
오늘 수업 진도
- 버튼을 클릭하여 PostBox 열고 닫는 방법
- PostBox에 입력한 내용에 따라 카드 생성하는 방법
(데이터베이스에 저장한 게 아니라 만들 때마다 뜨는 거라서 새로고침하면 사라짐
1. 버튼 클릭
제이쿼리 썼던 코드 복사
버튼 활성화
<script> function openclose(){ alert('안녕'); } </script> <button onclick="openclose()">추억 저장하기</button>무언가를 가리킬 때 id값이 필요하다
<div class="mypostingbox"id="postingbox"> 다음 <script> function openclose(){ $('#postingbox') } </script>로 지정하기
toggle 껐다 켰다$('#postingbox').toggle();display 값이 none으로 바뀌는 것 해주는 게 toggle이다.
2. PostBox에 데이터 넣고 카드 생성
- 헷갈릴 수 있음
순서
기록하기 버튼에 함수를 만들어서 다는 것
function makeCard() {
}
다음
<div class="mybtn">
<button onclick="makeCard()" type="button" class="btn btn-dark">기록하기</button>makecard 밑에
alert('연결 확인');
값을 어떻게 가지고 오는지
카드를 어떻게 붙이는지 알아야 한다.
값 가지고 오기
let image
input에 값이 들어온다.
id=floating값이 똑같을 때 하나씩 정해준다
image,title,content, date로 바꾼다function makeCard() { let image = $('#image') }
- 앨범 이미지 버튼 안에 글을 적어서 기록하기 버튼을 누른다.의 과정
input 태그를 특정한 것에 들어가있는 value값
value를 가지고 와서 alert에 넣어서 띄어준 것let image = $('#image').val(); alert(image);1개만 바꿀때
function makeCard() { let image = $('#image').val(); let title = $('#title').val(); let content = $('#content').val(); let date = $('#date').val();let temp_html =
<div class="col">코드 전체 복사하기div 뒤에 id="card" 넣기 <div id="card" class="row row-cols-1 row-cols-md-4 g-4">card에다 붙여줄 수 있다.
$('#card')하면 card 태그를 딱 찝었다는 것
append = 뒤에 붙이는 것
.append(temp_html) 새로운 카드 생성
그리고 img src에 있던 링크는 지우고
원래 이름이었던 (앨범 이미지 제목 내용 날짜)를
<img src="${image}"로 바꾸기
결과 사진
브라우저와 관계가 없는 곳에 저장되어야 한다.
서버라는 것을 써야 데이터들을 저장할 수가 있다.
Q
- 브라우저와 관계가 없는 곳에 저장해야한다는 개념을 잘 모르겠다.
내 컴퓨터에 사진이 있으면 되는 건가??- 그리고 id 값을 주는 기준이 어떻게 되는 가?
- onclick 은 id 값이 될 수 없는 건가?
- 그리고 코드 복사해서 내가 주의해야할 점이나
새로 알게 된것을 적고 싶은데 너무 범위가 넓거나
내용 정리가 안되서 이도저도 못하고 있다....- 이걸 그냥 따라가기만 하고 전혀 내가 하고 있는 것 같지가 않는다. ..
그냥 그대로 하니까 ...
심지어 이강의를 몇년 동안 수정도 안하고 계속 쓴다는 거니까....
똑같은 걸 만드는 사람이 엄청 많을테고
이걸 응용을 해보고 싶은데 사진을 어떻게 적용해야 하는지 그런것도 안 알려주는게 ...
그리고 코드를 하나하나 뜯어보지도 않고 필요한 것만 복사 해서 붙여넣기 하니까 왜 이걸 복사 붙여넣기 하는지
input label type onclick
이런 것들은 어떤 상황에 사용하는지
