-
[WEB] JQuery, AjaxWeb 2022. 3. 3. 21:15
스파르타 코딩클럽 웹개발 종합반 2주차
HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔것, 라이브러리
javascript만으로 할수없는 버튼의 색깔을 바꾸거나, div 박스를 감추는 등을 할 수있음(누군가가 짜둔 CSS 코드를 이용하는 부트스트랩처럼!)
참고) jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드이므로 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해야한다! (그렇게 때문에, 쓰기 전에 "임포트"를 해야함!)
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
위 사이트로 들어가서
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head>
해당 코드를 추가시켜주어야한다!
javascript와 jQuery 코드비교
javascript
document.getElementById("element").style.display = "none";
jQuery
$('#element').hide();
JQuery 사용법
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!
css에서는 선택자로 class를 쓴것처럼 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 된다.
JQuery 다뤄보기
1) input 박스의 값을 가져오기 (url에 있는 값을 가져오거나, 입력하기)
value값 입력하기
$('#url').val('입력을 하고 싶다')
$('#url') : id url에다가 JQuery를 먹일건데
.val : 걔의 value를 넣고싶다.
value값 가져오기
$('#url').val()
2) div 박스 보이기 / 숨기기
div 박스 숨기기
$('#post-box').hide()
div 박스 보이기
$('#post-box').show()
3) 태그 내 html 입력하기
let temp_html = `<button>나는 버튼이다</button>` $('#cards-box').append(temp_html)
cards-box에다가 temp_html를 hteml화 하겠다!
(참고 - 해당 기호는 백틱(`). 작은따옴표(')아님)
위 사진처럼 버튼이 붙는다!!
키보드 (↑)버튼을 누르고 엔터를 누르면 계속 버튼이 붙게되는데, 이 방식을 이용해서
<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>
이 카드 코드를 붙여주면
카드가 붙는것을 확인할수있다!
하지만, 제목을 영화마다 다르게 바꾸어주어야 하기 때문에 제목을 우리가 만든 변수로 꽂아줄 수 있어야한다.
let mytitle = '타이타닉'
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>`
제목이 들어가야하는 위치에 ${mytitle}로 변경해주고
$('#cards-box').append(temp_html)
확인해주면
타이타닉이 붙은것을 확인할수있다!
영화 기록하기, 닫기에 함수를 붙여서 동작이 작동되게 해보기
영화 기록하기 클릭하면 show, 닫기 버튼 클릭하면 hide 이용하기
<script> function open_box() { $('#post-box').show() } function close_box(){ $('#post-box').hide() } </script>
처음에는 박스가 나오지않게 하기위해
mypost에 미리 적어놓은 css에
display:none; /*처음부터 나오지않음*/
추가해주면
처음에는 나오지않고, 영화 기록하기를 누르면 박스가 나오게 되며, 닫기를 누르면 다시 사라지게 된다!
막간을 이용한 jQuery와 javascript조합 연습하기!
function q1() { // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게! let txt = $('#input-q1').val() // 2. 만약 입력값이 빈칸이면 if(입력값=='') if(txt ==''){ // 3. alert('입력하세요!') 띄우기 alert("입력하세요!") } else { // 4. alert(입력값) 띄우기 alert(txt) } }
<div class="question-box"> <h2>1. 빈칸 체크 함수 만들기</h2> <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5> <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5> <input id="input-q1" type="text"/> <button onclick="q1()">클릭</button> </div>
incluedes 이용한 구글링 방법에 대해 배울수있었는데,
이런식으로 검색을 통해 해당 코드를 찾아가는 방법을 알 수 있었다.
https://codingbroker.tistory.com/35
[javascript] 문자열이 특정단어를 포함하는지 확인하기 / 배열이 특정요소를 포함하는지 확인하기
자바스크립트 문자열이 특정 단어를 포함하는지 확인하거나 배열이 특정 요소를 포함하는지 확인하기 위해서 includes 메소드를 사용할 수 있습니다. 문자열이 특정 단어를 포함하는지 확인 string
codingbroker.tistory.com
위 티스토리를 참고했다 :)
function q2() { // 1. input-q2 값을 가져온다. let txt = $('#input-q2').val() // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!) if(txt.includes('@')== true) { // 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!) // 4. alert(도메인 값);으로 띄우기 alert(txt.split('@')[1].split('.')[0]) } // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기 else { alert("이메일이 아닙니다.") } }
<div class="question-box"> <h2>2. 이메일 판별 함수 만들기</h2> <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5> <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5> <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5> <input id="input-q2" type="text"/> <button onclick="q2()">클릭</button> </div>
function q3() { // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고! let txt = $('#input-q3').val() // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게! let temp_html = `<li>${txt}</li>` // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!) $('#names-q3').append(temp_html) } function q3_remove() { // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!) $('#names-q3').empty() }
<div class="question-box"> <h2>3. HTML 붙이기/지우기 연습</h2> <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5> <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5> <input id="input-q3" type="text" placeholder="여기에 이름을 입력"/> <button onclick="q3()">이름 붙이기</button> <button onclick="q3_remove()">다지우기</button> <ul id="names-q3"> <li>세종대왕</li> <li>임꺽정</li> </ul> </div>
서버-클라이언트 통신 이해하기
서버에 요청한다 (클라이언트→서버 : GET 요청)
API는 은행창구와 같은것
같은 예금 창구에서도 개인 고객이냐 기업고객이냐에 따라
가져와야 하는것 / 처리해주는 것이 다른것처럼,
클라이언트가 요청할 때에도, "타입"이라는 것이 존재한다.
GET
통상적으로 "데이터조회(read)"를 요청할때
ex) 영화 목록 조회
POST
통상적으로 데이터 "생성, 변경, 삭제" 요청할때
ex) 회원가입, 탈퇴, 비밀번호 수정
https://movie.naver.com/movie/bi/mi/basic.naver?code=161967
?가 바로 쪼개지는 시점
movie.naver.com이라는 인터넷 세상 어딘가에 있는 컴퓨터에 /movie/bi/mi/basic.naver라는 창구에
코드번호 196167을 들고갔다.
서버주소 : https://movie.naver.com/movie/bi/mi/basic.naver
영화정보 : code=161967
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있는 뜻
ex) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
google.com의 search창구에 다음 정보를 전달한다!
q=아이폰(검색어)
sourceid=chrome(브라우저 정보)
ie=UTF-8(인코딩 정보)
code라는 이름으로 영화번호를 주자는것은 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속같은것!
Ajax 시작하기
(Ajax는 jQuery를 임포트한 페이지에서만 동작 가능)
지역별 미세먼지 값 확인하기
$.ajax({ //GET방식으로 url을 요청해서 response에 찍겠다. type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function (response) { let rows = response['RealtimeCityAir']['row'] for(let i =0; i<rows.length; i++) { let gu_name = rows[i]['MSRSTE_NM'] //구이름 let gu_mise = rows[i]['IDEX_MVL'] //미세먼지값 //row가져오기 console.log(gu_name, gu_mise) } } })
Ajax 연습하기-1 (지역별 미세먼지 농도)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>jQuery 연습하고 가기!</title> <!-- jQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } .bad { color : red; } </style> <script> function q1() { //업데이트를 누를때마다 지우고 붙이게 하기 위해 삭제기능 추가 $('#names-q1').empty() $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulair", data: {}, success: function (response) { //rows 배열선언 let rows = response['RealtimeCityAir']['row'] //i는 lows의 길이만큼 돈다 for (let i = 0; i < rows.length; i++) { let gu_name = rows[i]['MSRSTE_NM'] //구이름 let gu_mise = rows[i]['IDEX_MVL'] //미세먼지값 //console 창에 출력 //console.log(gu_name, gu_mise) //console창 말고 html화면에 출력 let temp_html = `` //미세먼지 농도가 70 이상이면 빨간색 글씨로 출력 if(gu_mise > 70) { temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` } else { temp_html = `<li>${gu_name} : ${gu_mise}</li>` } $('#names-q1').append(temp_html) } } }) } </script> </head> <body> <h1>jQuery+Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2> <p>모든 구의 미세먼지를 표기해주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <ul id="names-q1"> </ul> </div> </body> </html>
Ajax 연습하기-2 (따릉이)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQuery 연습하고 가기!</title> <!-- JQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } table { border: 1px solid; border-collapse: collapse; } td, th { padding: 10px; border: 1px solid; } .urgent { color : red; } </style> <script> function q1() { $('#names-q1').empty() $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/seoulbike", data: {}, success: function (response) { let rows = response['getStationList']['row'] for (let i = 0; i < rows.length; i++) { let name = rows[i]['stationName'] let rack = rows[i]['rackTotCnt'] let bike = rows[i]['parkingBikeTotCnt'] //console로 출력(잘 나오는지 확인해보는 용도) //console.log(name, rack, bike) let temp_html = `` if(bike < 10) { temp_html = `<tr class="urgent"> <td>${name}</td> <td>${rack}</td> <td>${bike}</td> </tr>` } else { temp_html = `<tr> <td>${name}</td> <td>${rack}</td> <td>${bike}</td> </tr>` } $('#names-q1').append(temp_html) } } }) } </script> </head> <body> <h1>jQuery + Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기</h2> <p>모든 위치의 따릉이 현황을 보여주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">업데이트</button> <table> <thead> <tr> <td>거치대 위치</td> <td>거치대 수</td> <td>현재 거치된 따릉이 수</td> </tr> </thead> <tbody id="names-q1"> </tbody> </table> </div> </body> </html>
Ajax 연습하기-2 (이미지, 문자열 변경)
<!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>JQuery 연습하고 가기!</title> <!-- JQuery를 import 합니다 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style type="text/css"> div.question-box { margin: 10px 0 20px 0; } div.question-box > div { margin-top: 30px; } </style> <script> function q1() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/rtan", data: {}, success: function (response) { let url = response['url'] let msg = response['msg'] //console에 출력해서 확인인 //console.log(msg, url) //attr의 src값을 url로 변경 $('#img-rtan').attr('src', url) //문자열 변경 $('#text-rtan').text(msg) } }) } </script> </head> <body> <h1>JQuery+Ajax의 조합을 연습하자!</h1> <hr/> <div class="question-box"> <h2>3. 르탄이 API를 이용하기!</h2> <p>아래를 르탄이 사진으로 바꿔주세요</p> <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p> <button onclick="q1()">르탄이 나와</button> <div> <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/> <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1> </div> </div> </body> </html>
과제
날씨 API를 이용해 날씨 표시하기
추가적으로 코드 수정한 부분
<script> //로딩 후 호출하기 $(document).ready(function () { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/weather/seoul", data: {}, success: function (response) { //내가 작성한 코드(html 추가-<span>태그를 빈칸으로 두고 온도추가) //let temp = response['temp'] //let temp_html = `<span id="temp">${temp}</span>` //$('#temp').append(temp_html) //해설코드(문자열 변경-<span>태그에 숫자를 넣어두고 온도변경) $('#temp').text(response['temp']) } }) }); </script>
<div class="mytitle"> <h1>이석훈 팬명록</h1> <p>현재기온 : <span id="temp">00.0</span>도</p> </div>
결과화면 2주차 배웠던 부분 최종 정리
- JQuery 사용법, 적용하기
- 서버-클라이언트 통신 이해학
- Ajax 연습하기
- 기존과제에 배웠던 부분 추가하기
'Web' 카테고리의 다른 글
[WEB] 인터렉티브 UI 기획 & 디자인 (0) 2022.07.09 [WEB] Flask 실행하기 (AWS 서버 이용) (0) 2022.03.11 [WEB] Flask시작하기 (Get, Post 정리) (0) 2022.03.07 [WEB] 웹 스크래핑, mongoDB (0) 2022.03.07 [WEB] HTML, CSS 기초 (0) 2022.02.27