2022. 12. 24. 17:52ㆍ자격증(다다익선)/웹개발(HTML,Javascript)
https://chanytv.tistory.com/140
[웹개발] 개발 전 프로그램 설치 및 HTML,CSS 기초
[웹개발] 개발 전 프로그램 설치 필수로 설치해야할 프로그램이 몇 가지 있다. 과목 진행 중에 사용하는 프로그램이다 보니 나 또한 이 프로그램을 쓰지만 무료로 제공되는 프로그램도 많다고
chanytv.tistory.com
https://chanytv.tistory.com/141
[웹개발] 부트스트랩 & 폰트 / Javascript 기초
https://chanytv.tistory.com/140 [웹개발] 개발 전 프로그램 설치 및 HTML,CSS 기초 [웹개발] 개발 전 프로그램 설치 필수로 설치해야할 프로그램이 몇 가지 있다. 과목 진행 중에 사용하는 프로그램이다 보
chanytv.tistory.com
[웹개발] jQuery & Ajax
jQuery란 Javascript를 더 쉽게 제어하기 위한 라이브러리다. 아마 개발자들끼리 서로 입맛이 달라 호환성문제도 발생하고 매 번 글자색 하나 바꾸는 것도 코드가 복잡하니 이런 문제를 해결하기 위해 만든 것 같다.
똑같이 실행되지만 jQuery는 더 간단하다. 아래를 참고해 보자.
document.getElementById("element").style.display = "none";
$('#element').hide();jQuery를 쓰려면 역시나 환경 구성을 먼저다.
<head>에 넣어주면 된다.
// jQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>CSS는 'class'로 선택자를 사용하고 jQuery는 보통 'id'를 사용한다고 한다.
이제 많이 쓰는 jQuery 몇 가지를 연습해보려 한다.
// input 박스의 값을 가져오기
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');// div 보이기 / 숨기기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();// 태그 내 html 입력하기
// 동적으로 html을 넣는 방법
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card h-100">
<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>
</div>
</div>
// 버튼을 추가하는 방법
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);
// 카드를 추가하는 방법
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';
let temp_html = `<div class="col">
<div class="card h-100">
<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">${title}</h5>
<p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 한줄 평을 씁니다</p>
</div>
</div>
</div>`;
$('#cards-box').append(temp_html);확실히 자바스크립트로 이런 기능을 구현하려 했다면 상당히 어려웠을 것 같다.
Ajax
Ajax은 jQuery를 import 한 페이지에서만 동작을 한다고 한다. 뜻을 풀어보자면 'Asynchronous JavaScript And XML' 비동기 자바스크립트와 XML이란 뜻이다. 이게 뭔 말인지 일단 예습을 통해 해 봐야 감일 올 듯한다.
기본 골격은 아래와 같다.
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})어디서 쓰든 이렇게 쓰니 사실상 이 골격은 외우는 게 아닌 듯하다.
서울의 모든 구의 미세먼지 수치를 얻는 방법이다.
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulair",
data: {},
success: function (response) {
let mise_list = response["RealtimeCityAir"]["row"];
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(gu_name, gu_mise);
}
}
});수치를 얻는 방법을 알았으니 이제 jQery랑 잘 짬뽕해서 노출만 시켜주면 끝난다.
그 결과는 아래와 같다.
<!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;
}
</style>
<script>
function q1() {
// 여기에 코드를 입력하세요
$('#names-q1').empty();
$.ajax({
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'];
let 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>
'자격증(다다익선) > 웹개발(HTML,Javascript)' 카테고리의 다른 글
| [웹개발] 서버세팅 및 도메인 연결 (0) | 2023.01.14 |
|---|---|
| [웹개발] Flask / API (0) | 2023.01.05 |
| [웹개발] 파이썬 & mongoDB (0) | 2022.12.28 |
| [웹개발] 부트스트랩 & 폰트 / Javascript 기초 (0) | 2022.12.17 |
| [웹개발] 개발 전 프로그램 설치 및 HTML,CSS 기초 (0) | 2022.12.16 |