jQuery란?
-
HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리
사용이유? : javascript로도 모든 기능을 구현할 수는 있지만... 코드가 복잡하고 브라우저 간 호환성 문제도 고려해야해서 jQuery라는 라이브러리가 등장함. -
jQuery와 Javascript 코드 비교하기
//자바스크립트
document.getElementById("element").style.display = "none";
//jQuery
$('#element').hide();jQuery 다뤄보기
jQuery 사용하는 방법은 아주 간단하다.
jQuery CDN에 들어가서 찾아보면
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>이부분을
<head></head>요 헤드태그 안에 넣으면 jQuery 임포트가 끝나게 된다.
간단하게 이번주차에는 element의 값을 가져오거나 특정 element를 숨기거나 보여주기, css의 값 가져오기, 태그 내 텍스트 입력하기, 태그 내 html입력하기를 해보았다
- input 박스의 값을 가져와보기
//html
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();- div 보이기 / 숨기기
//html
<div class="posting-box" id="post-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();- css의 값 가져와보기(display 속성값 가져오기)
//개발자도구에서
$('#post-box').hide();
$('#post-box').css('display');
$('#post-box').show();
$('#post-box').css('display');- 태그 내 텍스트 입력하기 (input box경우)
$('#post-url').val('여기에 텍스트를 입력하면!');- 태그 내 html입력하기
div내에 동적으로 html을 넣고 싶을때
<div id="cards-box" class="card-columns">
<div class="card">
<img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
<div class="card-body">
<a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
<p class="card-text">여기에 기사 내용이 들어가겠죠</p>
<p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
</div>
</div>
</div>let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);이후에 jQuery를 이용하여 연습을 했는데 진짜.... 할줄만 안다면 javascript만으로 기능을 구현하는것보다 훨씬 쉽고 간편했다. ㅠㅠ 미리 jQuery에 대해서 공부를 하였다면 대학교시절의 과제가 정말 쉬웠을것 같았는데... ㅠㅠ
서버-클라이언트 통신 이해하기
- 서버→클라이언트: "JSON"을 이해하기
json이란? Key:Value로 이루어져 있고 자료형 Dictionary와 아주 유사한다.
위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고,
그 안에 row라는 키 값에는 리스트형 value가 들어가있다.
- 클라이언트→서버: GET 요청 이해하기
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
Ajax 시작하기
- ajax 기본 골격
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}```
코드를 입력하세요})
미세먼지 openAPI로 테스트해보기http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
```javascript
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})- type : GET/POST 방식으로 요청한다.
- url : 요청할 url
- data: 요청하면서 함깨 줄 데이터 (GET 방식일때는 비워둔다)
GET방식일때는 url뒤에 아래와 같이 붙여서 데이터를 가져간다.
http://naver.com?param=value¶m2=value2 - success: 성공하면 response 값에 서버의 결과 값을 담아서 함수를 실행한다.
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response)
}이로써 2주차도 무사히 끝나게 되었다! 남은 기간도 파이팅~
