Javascript jQuery / Day-4

티스토리 뷰

[HTML][CSS]

Javascript jQuery / Day-4

9.01 2024. 2. 22. 11:32

jQuery + fetch 로 웹페이지 제어 마스터하기!

CSS - Bootstrap 남들이 만든 코드 모음,

Javascript - JQuery도 남들이 만든 코드 모음, 라이브러리!

$("#id") 지정한 ID 속성을 가지는 하나의 요소를 선택

$("element") 지정된 태그명을 가지는 모든 요소를 선택

'fetch'는 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미.

Fetch는 짧은 코드로 데이터를 가져올 수 있음.

추억 앨범, 제이쿼리 적용1

postbox 열고 닫기
'추억 저장하기' 버튼을 누르면 '포스트 박스'가 나타나고 다시 '추억 저장하기' 버튼을 누르면 '포스트 박스'가 사라지도록 만들어 보자!

#타이틀 아래에 코드 붙여넣기 (스파르타플릭스에서 복사해와서)

#<head> 안에 <style>아래에 script 태그 만들기

</script>

이제 뭘 할까? /추억 저장하기 버튼에 **를 연결해서 버튼을 눌렀을 때 alert이 뜨게 만들기/

function openclose (){

alert('안녕')

}

</script>

<body>에 추억 저장하기 버튼을 눌렀을 때 openclose하게 해라 (openclose=안녕이라는 alert을 뜨게 함)

이제 뭘 할까? /추억 저장하기 버튼을 눌렀을 때 포스트 박스를 나타나게 - 없어지게/

#포스트 박스에 id 값 주기 왜? 지정해야 하니까

#script 에서 지정, 지정하기 : $('#id')

function openclose (){

$('#postingbox')

}

#제이쿼리 토글 함수 이용 (껐다 켜기 가능)

function openclose (){

$('#postingbox').toggle();

}

</script>

추억 앨범, 제이쿼리 적용2

데이터 넣고 카드 생성하기
PostBox 에 내용을 입력한 후 기록하기 버튼을 누르면 아래에 포토 카드가 생기게 하자!

#제일 먼저 할 것 : 기록하기 버튼에 함수 만들어 뭔가로 이어지게

- makeCard 라는 함수 만들기

function makeCard(){

}

- makeCard 함수는 <head>안에 기록하기 버튼에 이어져야 함

기록하기 버튼을 눌렀을 때 makeCard하게 해라

#값을 입력하면 카드가 생성되게 만들어야 함

1. 값을 어떻게 가져오는지

2. 카드를 어떻게 붙이는지

를 알아야 함

일단 1.값을 가져오는 것부터 시작

#입력 박스에 값을 가져와야 하기 때문에 input 박스의 id 값부터 변경

<input type="email" class="form-control" id="floatingInput"

placeholder=앨범 이미지" />

<input type="email" class="form-control" id="floatingInput"

placeholder=앨범 제목" />

<input type="email" class="form-control" id="floatingInput"

placeholder=앨범 내용" />

<input type="email" class="form-control" id="floatingInput"

placeholder=앨범 날짜" />

모두 같은 id 값을 사용 중 => 모두 변경

<input type="email" class="form-control" id="image"

placeholder=앨범 이미지" />

<input type="email" class="form-control" id="title"

placeholder=앨범 제목" />

<input type="email" class="form-control" id="content"

placeholder=앨범 내용" />

<input type="email" class="form-control" id="date"

placeholder=앨범 날짜" />

#값 가져오기

function makeCard(){

let image = $('#image')

image라는 변수 지정 후 지정한 인풋박스(id 가 image인 인풋박스) 안에 들어있는 것(=밸류값) 가져오기

function makeCard(){

let image = $('#image').val();

}

#image 가져왔으니 title, content, date도 똑같이 가져오기

function makeCard(){

let image = $('#image').val();

let title = $('#title').val();

let content = $('#content').val();

let date = $('#date').val();

}

이제 뭐하지? 카드를 만들어서 붙여야 함

#카드 만들기 : 카드 한 장을 let temp_html = `` 에 넣기

let temp_html = `

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

그럼 만든 카드는 어디에 붙이는가?

여기에 붙임 (원래 카드 자리)

#id 지정하기 (card)

#<script>에 카드 붙이기

$('#card').append(temp_html);

#input에 입력한 값을 카드에 반영하여 붙이게 하려면

let image = $('#image').val();

let title = $('#title').val();

let content = $('#content').val();

let date = $('#date').val();

let temp_html = `

<img

src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"

class="card-img-top"

alt="..."

</div>

</div>

이 부분에서 img src="..." 여기를 지우고

앞서 선언된

let image = $('#image').val();

let title = $('#title').val();

let content = $('#content').val();

let date = $('#date').val();

에서 image 값을 가져오게 해야 함

<img

src="${image}"

나머지도 똑같이 수정

let temp_html = `

<img

src="${image}"

class="card-img-top"

alt="..."

<h5 class="card-title">${title}</h5>

<p class="card-text">${content}</p>

</div>

</div>

됐나 확인해 보기

#코드스니펫의 제주도 이미지 복붙

#인풋박스에 내용 입력

스파르타플릭스, 제이쿼리 적용1

postbox 열고 닫기
'영화 기록하기' 버튼을 누르면 '포스트 박스'가 나타나고 다시 '영화 기록하기' 버튼을 누르면 '포스트 박스'가 사라지도록 만들어 보자!

일단 뭘 해야 하는가?
영화 기록하기 버튼을 눌렀을 때 함수하게 만들어라

onclick = "openclose()"

함수 이름 : openclose

그 다음, 포스팅 박스를 스크립트에서 지정할 수 있도록 id값을 줘야 한다.

id="postingbox"

id값 줬으면, 스크립트에서 함수를 지정한다.

function openclose () {

}

</script>

함수 아래에 openclose가 되면 어떤 걸 할 건지 적어줘야 한다.
어떤 것 : 포스팅박스가 꺼졌다, 켜졌다 하게

$('#') => 함수 호출

$('#postingbox').toggle();

function openclose () {

$('#postingbox').toggle();

}

</script>

스파르타플릭스, 제이쿼리 적용2

데이터 넣고 카드 생성하기
PostBox 에 내용을 입력한 후 기록하기 버튼을 누르면 아래에 영화 카드가 생기게 하자!

일단 뭘 해야 하는가?
기록하기 버튼을 눌렀을 때, 함수하게 만들어라

onclick ="makeCard()"

함수이름 : makeCard

함수 만들기
'기록하기 버튼을 눌렀을 때, 함수하게 만들어라'의 함수 정의

function makeCard () {

}

할 일 :
1. 데이터 가져오기
2. 카드 만들어 붙이기
에서 일단 데이터를 가져와야 함 -> id값 지정

1. 데이터 가져오기
스크립트에서 데이터를 가져오려면 인풋박스의 id값을 따로 지정해줘야 한다.

기존의 id 값은 id="floatingInput" 로 통일되어 있다. (별점 부분은 나중에 수정할 게 더 있음!)

id="floatingInput" placeholder="영화 이미지 주소" (기존)

id="image" placeholder="영화 이미지 주소"

id="title" placeholder="영화 제목"

id="comment" placeholder="추천 이유"

수정했으면 스크립트에서 데이터값 불러오기
let 함수 = $('') 사용하여 지정하고 .val (); 이용하여 인풋박스의 입력값(밸류) 가져오기

let image = $('#image').val();

나머지 title, comment, star 도 진행

function makeCard () {

let image = $('#image').val();

let title = $('#title').val();

let comment = $('#comment').val();

let star = $('#star').val();

}

별점의 데이터값 수정
별점선택 부분 밸류값을 숫자가 아닌 별으로 바꾸기
왜?
지금은 숫자로 별점이 나오고 있으므로, 별이 나오게 바꾸는 것!

</select>

(기존)

</select>

(수정 후)

2. 카드 만들어서 붙이기
일단 카드부터 만들자 let temp_html = ``;

``사이에 카드 html 복붙, ${변수}

카드 html

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

alt="..."

</div>

즉,

let image = $('#image').val();

let title = $('#title').val();

let comment = $('#comment').val();

let star = $('#star').val();

let temp_html = `<div class="col">

<img

src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top"

alt="..."

</div>

</div>`;

}

여기서 이미지, 영화 제목, 별점, 코멘트를 위에 지정한 image, title, comment, star 로 바꾸기

let temp_html = `<div class="col">

<img

src="${image}"

class="card-img-top"

alt="..."

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

카드 붙이기
어디에 붙이지?

지정한 temp_html을 아래 카드 부분에 붙여야 한다.

id="card" 를 넣어 html을 붙일 부분의 id값을 지정해 주고,

스크립트에 가서 지정 후 ($('#변수').append(변수)처리해 줘야 한다.

$('#card').append(temp_html);

스크립트 전체,

function openclose () {

$('#postingbox').toggle();

}

function makeCard () {

let image = $('#image').val();

let title = $('#title').val();

let comment = $('#comment').val();

let star = $('#star').val();

let temp_html = `<div class="col">

<img

src="${image}"

class="card-img-top"

alt="..."

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

$('#card').append(temp_html);

}

</script>

이미지 코드스니펫에서 다운 받아 복붙 -> 인풋박스에 데이터 입력 -> 기록하기 버튼

그런데, 새로고침하면 없어짐 왜? 저장이 되지 않아서 !

저작자표시 비영리 변경금지

'[HTML][CSS]' 카테고리의 다른 글

Javascript jQuery + fetch / Day-4 (1)	2024.02.27
Javascript 문법 / Day-3 (0)	2024.02.22
Visual Studio Code / Day-2 (1)	2024.02.21
Visual Studio Code / Day-1 (0)	2024.02.21
[HTML 기본 태그] (0)	2023.09.14

공지사항

최근에 올라온 글

E민

티스토리 뷰

Javascript jQuery / Day-4

'[HTML][CSS]' 카테고리의 다른 글

티스토리툴바