2-3_JQuery 다뤄보기

Ⅰ. 이번 회차 학습 목표 (goal)

---

1. 하고자 하는 것

• jQuery ==자주 쓰는 것== 학습
  • input 박스의 값을 가져와보기
  • div 보이기 / 숨기기
  • 태그 내 html 입력하기

Ⅱ. input 박스의 값을 가져와보기

---

1. 뭘 한거야?

• input box 에 있는 URL 값 가져오기 또는 입력하기

2. 어떻게 접근할거야?

• URL 값 을 가져오려면 -> URL 을 '지칭' 할 수 있어야 함.
  • '지칭' = 이름표, 짱구의 바지에서 짱구!
  • =='CSS== 에서 지칭' 은 =='Class'== 로 했음
  • ==jQuery== 에서는 =='id'== 로 지칭 함 ⭐⭐⭐⭐⭐

• 영화 URL 값을 가져오기 위해 ID 를 url 로 설정
• 근데 궁금한건, 왜 input 태그에 하지? 실제로 url 은 label 태그에 기입하는데❓❓❓❓❓
  • 이건 뒤에서도 cards-box 상위 div 에 했던 것 같음
  • 감싸안고 있는거에 id 붙이는 건가?

• script 태그 내의 내용을 이제 console 창에 쓰겠음 #jquery_값넣기

$('url').val('울랄라.co.kr') // url 이라는 id에 '울랄라.co.kr' 를 입력하고 싶으면, 이렇게 작성 -> enter 를 치면 탁 들어가게 됨 

• 해석하기

$('url') : id 가 url 인 곳에 jQuery 를 먹일거야. 뭘 먹일거야?

.val('입력을 하고 싶다') : 걔 한테 value 를 넣을거야. 어떤 value? '입력을 하고 싶다.'

그러면, 어떤 output? : ==해당 id== 에 '입력을 하고 싶다.' 가 들어가게 된다.

1) 예제

a. 이 홍길동 을 가져오고 싶으면?

• 이렇게 작성

b. 정리하면 ⭐⭐⭐⭐⭐ #jquery_값넣기_예시코드 #jquery_값가져오기_예시코드

• $('#url').val('홍길동입력') 입력하면 -> 원하는 값을 넣을 수 있음
• $('#url').val() -> 해당 부분에서 값을 추출 할 수 있음.
• 실제 창에서 입력을 해도 -> 값이 즉각 반영되어서 -> $('#url').val() 로 값을 가져올 수 있음.

Ⅲ. 박스를 감췄다가, 나타나게 하기

---

1. 감추고 싶은 '박스' 에 ==이름표== 붙이기

여기에서는 감추고 싶은게 post 박스 임. 그래서 그곳에 id 를 붙임.

2. jQuery 작성

$('#post-box').hide()

• 읽어보기
  
  $ : jQuery 를 먹일거야. ❓❓❓ 맞나? 어디에?
  
  '#post-box' : 라는 id 에 먹일거야. 거기에 대해서 '뭘 할건데?' (함수 느낌)
  
  hide() : 안 보이게 할거야.

• 다시 보이게 하려면?

  $('#post-box').show()

3. 결과물

• 띠용~ 그러면 box 가 이렇게 사라짐
  

• show() 하면 다시 보여짐

Ⅳ. 카드들이 다다닥 붙어 나오게 하기

---

1. '이름표' 붙이기

1) 어디에 붙여야 되는지 파악하는 과정 ⭐⭐⭐⭐⭐ #id붙일때상위parent에붙이는경우

1. class = col 을 추가하면 -> 카드가 더 생김 -> so, class = col 을 추가하고 싶음.
2. 그러면, 그게 어떤 div 태그 안에 들어가 있어? 포함하고 있는 놈이 뭐야? 여기 위에 있네
3. 상위 div 이고, card 들을 포괄하니까 > cards-box 라고 하자
   

• 궁금한 점
  • 여기에서 좀 더 개념적인 설명이 있으면 -> 나 혼자 이름표 붙일 때, 좀 더 잘 붙일 수 있을 것 같음 ⭐⭐⭐⭐⭐⭐⭐

2. 'html' 로 활용할 문자열을 변수에 저장함

let temp_html = `<button> 나는 버튼이다 </button>`

• 해석하기
  let temp_html : temp_html 이라는 변수에 뭔가를 저장할거야.
  백틱 : 들어가는게 1) 문자열 이긴한데, 완벽하게 문자열은 아니고 2) html 문법을 하고 있다고 알려준다. (맞나❓❓❓❓❓❓❓❓❓❓❓)
  <button> 나는 버튼이다 </button> : 들어가는게 html 문법으로 button 이 들어간다.

⭐ 여기에다가, jQuery 를 쓰면 -> 저 애매한 문자열이 HTML 이 된다.

🤷‍♂️ 그럼, 어떤 jQuery 를 써야 해?

3. jQuery 입력해서 진짜 html 로 만들기

👇 이렇게 하면 돼. #jquery_append_추가로붙이기_예시코드

let temp_html = `<button> 나는 버튼이다 </button>`

$('#cards-box').append(temp_html)

• 읽어보면

1 line : 1) html 문법을 쓴 2) 불완전한 문자열을 변수에 선언함

2 line : id #cards-box 라는 곳에 jQuery 를 먹일거야 > 뭘 먹일건데? > append 라는 걸 > append 는 불완전한 html 를 넣었을 때, 완전한 html 기능을 하게 해주는거야 > 그러면, 어떤 html 기능을 넣을건데? button 기능을 넣을거야

👏 그러면 결국, ==button 기능이 id #cards-box 에 추가되는구나!==

4. 결과물

5. 만약, 버튼 대신에 card 를 만드는 html 이 들어간다면?

1) card 를 만드는 html 가져오기

<div class="col">
    <div class="card">
        <!-- 포스터 이미지 넣어주기 ⭐⭐⭐  -->
        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">여기에 제목이 들어갑니다! </h5>
            <p class="card-text">여기에는 내용이 들어가지요. 퓨슝. 율덕이가 컨디션이 안 좋지만 해냄거임 💁‍♀️ </p>

            <!-- 별표 영역 -->
            <p> ⭐⭐⭐ </p>

            <!-- 코멘트 영역 -->
            <p class="mycomment"> 여기에 코멘트가 들어갑니다. </p>

        </div>
    </div>
</div>

2) let temp_html 변수에 넣어주기

let temp_html = `<div class="col">
    <div class="card">
        <!-- 포스터 이미지 넣어주기 ⭐⭐⭐  -->
        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">여기에 제목이 들어갑니다! </h5>
            <p class="card-text">여기에는 내용이 들어가지요. 퓨슝. 율덕이가 컨디션이 안 좋지만 해냄거임 💁‍♀️ </p>

            <!-- 별표 영역 -->
            <p> ⭐⭐⭐ </p>

            <!-- 코멘트 영역 -->
            <p class="mycomment"> 여기에 코멘트가 들어갑니다. </p>

        </div>
    </div>
</div>`

3) 해당 id 에 jQuery 먹이기

$('#cards-box').append(temp_html)

4) 결과물

Ⅴ. 제목에 만든 변수를 꽂아서 쓰기

---

1. 만들고 싶은 제목 선언

let mytitle = '타이타닉'

2. temp 변수 선언할 때 > 제목에 ${mytitle} 넣기

#jquery_변수활용꽂아주기_예시코드

let temp_html = `<div class="col">
    <div class="card">
        <!-- 포스터 이미지 넣어주기 ⭐⭐⭐  -->
        <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
            class="card-img-top" alt="...">
        <div class="card-body">

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

            <p class="card-text">여기에는 내용이 들어가지요. 퓨슝. 율덕이가 컨디션이 안 좋지만 해냄거임 💁‍♀️ </p>

            <!-- 별표 영역 -->
            <p> ⭐⭐⭐ </p>

            <!-- 코멘트 영역 -->
            <p class="mycomment"> 여기에 코멘트가 들어갑니다. </p>

        </div>
    </div>
</div>`

3. 결과물~

💭 What i learned

---

• '자주 쓰는 것' 부터 학습 하는게 중요하다 ⭐⭐⭐

• jQuery 는 'id' 로 찝어준다.

• 'id' 를 찝을 때 '상위 div' 같이 '상위 개념' 을 건드리는 것 같다.

• '찝어준 것' 에 대해서 hide(), append() 같은 걸 먹인다.

• html 문법을 문자열 시켜서 변수에 넣고 -> append() 를 쓰면 -> html 이 추가되는 구나. 아직 낯설지만 신기하다.

• jQuery 의 output 을 생각할 때는 =='해당 id에 결과물이 들어간다.'== 라고 생각해야 함.