JQuery

2023.01.13

​

2-1 2주차 오늘 배울 것

• 짝수 홀수 버튼 만들기

let count = 0
function hey(){
    count += 1
    if (count % 2 == 0){
        alert('짝수입니다!')
    }
    else {
        alert('홀수입니다!')
    }
}

<button onclick="hey()">영화 기록하기</button>

 

2-2 JQuery 시작하기

• jQuery CDN

https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

 

2-3 JQuery 다뤄보기

• 값 지정하기 .url()

<!--id를 지정-->
<input type="email" class="form-control" id="url" placeholder="name@example.com">

 

• 값 가져오기 .val()

 

• 숨기기 .hide()

<!--id 지정-->
<div class="mypost" id="post-box"...>

 

• 보이기 .show()

 

• 추가하기 .append()

let temp_html = ``

' (x) -> ` (백틱 ' ~ ' 자판에 있음)

 

• 카드 추가하기

<!--카드 박스의 div에 id 지정-->
<div id='cards-box' class="row row-cols-1 row-cols-md-4 g-4">

 

2-4 JQuery 적용하기(포스팅 박스)

• 영화 기록하기 버튼 클릭 시 박스가 열리고 닫기 누를 시 박스 닫힘

<script>
    function  open_box() {
        $('#post-box').show()
    }
    function  close_box() {
        $('#post-box').hide()
    }
</script>

<button onclick="open_box()">영화 기록하기</button>
<button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>

 

• 박스 숨기기 (첫 화면에서)

display: none;

 

2-5 Quiz_JQuery 연습하기

 

• 특정 문자열을 포함하는지 확인하는 메서드 .includes()

if (txt.includes('@') == true)

https://www.codingfactory.net/10899

JavaScript / Object / String.includes() / 특정 문자열을 포함하는지 확인하는 메서드

​

 

2-6 서버-클라이언트 통신 이해하기

• 서울시 OpenAPI

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

​

• JsonView

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd?hl=ko

JSONView