๋ฐ์ํ
[์์ ๋ชฉํ]
- Javascript ๋ฌธ๋ฒ์ ์ต์ํด์ง๋ค.
- jQuery๋ก ๊ฐ๋จํ HTML์ ์กฐ์ํ ์ ์๋ค.
- Ajax๋ก ์๋ฒ API(์ฝ์)์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ , ๊ฒฐ๊ณผ๋ฅผ ๋ฐ์์จ๋ค.
- ํด๋ฆญํ์ ๋ ํจ์๊ฐ ์คํ๋๋๋ก ์ค์ ํ๋ ๋ฐฉ๋ฒ
<a onclick="hey()" id="btn-postingbox" class="btn btn-primary btn-lg" href="#" role="button">ํฌ์คํ
๋ฐ์ค ์ด๊ธฐ</a>
- https://www.w3schools.com/jquery/jquery_get_started.asp
- ์์ ๊ตฌ๊ธ์คํฌ๋ฆฝํธ๋ฅผ ์จ์ฃผ์ด์ผ ์ ์ด์ฟผ๋ฆฌ ์ฌ์ฉ๊ฐ๋ฅ. ์ํฌํธํ๋ ๊ฒ.
Jquery ๊ธฐ์ด
- ์ฝ์์์ ์ ์ด์ฟผ๋ฆฌ๋ก ์นํ์ด์ง ์ ์ดํ๊ธฐ
- val()
- hide(), show()
- css('width')
- css('display')
- ํ ์คํธ ๋ฐ๊พธ๊ธฐ
- temp์ divํต์งธ๋ก ์ ์ฅ
- append๋ก ์ด์ด๋ถ์ผ ์ ์๋ค.
- ์ด๊ณ ๋ซ๋ ํจ์ ์ ์ฉํ๊ธฐ
- style์ ๊ธฐ๋ณธ๊ฐ display: none; ์ ์ฉํ๋ฉด ์ฒ์๋ถํฐ ์๋ณด์ด๊ฒ ํ๋ค.
function openclose(){
let status=$('#post-box').css('display');
if(status=='block'){
$('#post-box').hide();
$('#btn-postingbox').text('ํฌ์คํ
๋ฐ์ค ์ด๊ธฐ');
}
else{
$('#post-box').show();
$('#btn-postingbox').text('ํฌ์คํ
๋ฐ์ค ๋ซ๊ธฐ');
}
}
์ ์ด์ฟผ๋ฆฌ ์ฐ์ตํ๊ธฐ
- ์ฐ์ต 1. ์ ๋ ฅ๊ฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ์๋ฆผ์ฐฝ ๋์ฐ๊ธฐ
function q1() {
// 1. input-q1์ ์
๋ ฅ๊ฐ์ ๊ฐ์ ธ์จ๋ค. $('# .... ').val() ์ด๋ ๊ฒ!
// 2. ๋ง์ฝ ์
๋ ฅ๊ฐ์ด ๋น์นธ์ด๋ฉด if(์
๋ ฅ๊ฐ=='')
// 3. alert('์
๋ ฅํ์ธ์!') ๋์ฐ๊ธฐ
// 4. alert(์
๋ ฅ๊ฐ) ๋์ฐ๊ธฐ
let input1=$('#input-q1').val();
if(input1==''){
alert('Enter text!');
}
else{
alert(input1);
}
}
- ์ฐ์ต 2. ์ ๋ ฅ๋ ๊ฐ์ ํน์ ๋ฌธ์์ด ๊ธฐ์ค์ผ๋ก ๋๋ ์ ๊ฐ์ ธ์ค๊ธฐ
function q2() {
// 1. input-q2 ๊ฐ์ ๊ฐ์ ธ์จ๋ค.
// 2. ๋ง์ฝ ๊ฐ์ ธ์จ ๊ฐ์ @๊ฐ ์์ผ๋ฉด (includes ์ด์ฉํ๊ธฐ - ๊ตฌ๊ธ๋ง!)
// 3. info.spartacoding@gmail.com -> gmail ๋ง ์ถ์ถํด์ ( .split('@') ์ ์ด์ฉํ์!)
// 4. alert(๋๋ฉ์ธ ๊ฐ);์ผ๋ก ๋์ฐ๊ธฐ
// 5. ๋ง์ฝ ์ด๋ฉ์ผ์ด ์๋๋ฉด '์ด๋ฉ์ผ์ด ์๋๋๋ค.' ๋ผ๋ ์ผ๋ฟ ๋์ฐ๊ธฐ
let input2=$('#input-q2').val();
if(input2.includes('@')){
let domain=input2.split('@')[1].split('.')[0];
alert(domain);
}
else{
alert('This is not email form');
}
}
- ์ฐ์ต3. ์ ๋ ฅ๋ฐ์ ๊ฐ์ ๋ฆฌ์คํธ ํํ๋ก ๋ํ๋ด๊ธฐ, ๋ชจ๋ ์ง์ฐ๊ธฐ
function q3() {
// 1. input-q3 ๊ฐ์ ๊ฐ์ ธ์จ๋ค. let txt = ... q1, q2์์ ํ๋ ๊ฑธ ์ฐธ๊ณ !
// 2. ๊ฐ์ ธ์จ ๊ฐ์ ์ด์ฉํด names-q3์ ๋ถ์ผ ํ๊ทธ๋ฅผ ๋ง๋ ๋ค. (let temp_html = `<li>${txt}</li>`) ์๋ ๊ฒ!
// 3. ๋ง๋ค์ด๋ temp_html์ names-q3์ ๋ถ์ธ๋ค.(jQuery์ $('...').append(temp_html)์ ์ด์ฉํ๋ฉด ๊ตฟ!)
let input3=$('#input-q3').val();
let temp_html = `<li>${input3}</li>`
$('#names-q3').append(temp_html);
}
function q3_remove() {
// 1. names-q3์ ๋ด๋ถ ํ๊ทธ๋ฅผ ๋ชจ๋ ๋น์ด๋ค.(jQuery์ $('....').empty()๋ฅผ ์ด์ฉํ๋ฉด ๊ตฟ!)
$('#names-q3').empty();
}
- ๋ธ๋ผ์ฐ์ ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค๋ ๋ฐฉ์
- get: ์กฐํํ ๋
- post: ์์ , ์ญ์ , ์ ๋ฐ์ดํธ๋ฅผ ํ ๋
ajax ์ฌ์ฉํ๊ธฐ
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
}
- ์ํ๋ API url์ ๊ฐ์ ธ์์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
- ์์ 1. ์์ธ์ ๋ฏธ์ธ๋จผ์ง API๋ฅผ ajax๋ฐฉ์์ผ๋ก ๊ฐ์ ธ์ค๊ธฐ
<script>
function q1() {
// ์ฌ๊ธฐ์ ์ฝ๋๋ฅผ ์
๋ ฅํ์ธ์
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
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>
- ์์ 2. ์์ธ์ ๋ฐ๋ฆ์ด ํํฉ API ํ์ฉํ๊ธฐ
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["rentBikeStatus"]["row"];
for (let i = 0; i < rows.length; i++) {
let station = rows[i]['stationName'];
let rackCnt = rows[i]['rackTotCnt'];
let bikeCnt = rows[i]['parkingBikeTotCnt'];
let temp_html = `<tr>
<td>${station}</td>
<td>${rackCnt}</td>
<td>${bikeCnt}</td>
</tr>`;
$('#names-q1').append(temp_html);
}
}
})
}
</script>
- ์์ 3. ๋๋ค๊ณ ์์ด์ฌ์ง API ํ์ฉํ๊ธฐ
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let url=response[0]['url'];
console.log(url);
$('#img-cat').attr("src",url);
}
})
}
</script>
- ์์ : ํ์จAPI ํ์ฉํ๊ธฐ, ํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋๋ง๋ค ๊ฐ์ ธ์ค๊ธฐ
<script>
$(document).ready(function(){
q1();
});
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate",
data: {},
success: function (response) {
let rate=response['rate'];
let temp_html=`<span>๋ฌ๋ฌ-์ ํ์จ: ${rate}</span>`;
$('.rate').append(temp_html);
}
})
}
</script>
์ด๋ฒ ์ฃผ์ฐจ์ ๋์ฑ ์ค์ฉ์ ์ด๋ค. ํํํ.
์ ์ด์ฟผ๋ฆฌ๋ผ๋ ๊ฒ๊ณผ ajax๋ฅผ ์ฒ์ ์จ๋ดค๋ค.
๋ฌธ๋ฒ์ ์ข ๋ํด;;ํ์ง๋ง ์ด๋ป๊ฒ ์ฐ๋์ง ์ ์ตํ๋ค.
์ฌํ๊น์ง html ํ์ผ๋ง ๊ฐ์ง๊ณ ๋ชจ๋ ์์ ์ ์งํํด์จ๊ฒ ์ ๊ธฐํ ์ ๋!!
๊ทผ๋ฐ ๋ ๋ฐ๋๋ผjs๋ฅผ ์๋ ์ ์ฅ์ด์ด์ ๊ทธ๋ฐ์ง
๋ ๋ณต์กํ๊ณ ์์ ์์ต๊ณ ๋๋ฌด ๋์ก....ํ๋ค ใ
์ค๋ฌด์์ ์ ์์ด๋ค๋ ์ด์ผ๊ธฐ๋ฅผ ๋ค์ ์ ์ด ์๋๋ฐ, ๊ทธ์น๋ง ๋ฐฐ์์ ๋์๊ฑด ์๊ฒ ์ง? ๋ผ๋ ์๊ฐ์ ์ด์ฌํ ํจ!
API๊ฐ์ ธ์์ ์ฐ๋ ๊ฑด ์ด์ ๋ช ๋ฒ ํด๋ด์ ์ฅ์ฅ ๋ถ๋ด์์ด ํ ์ ์๊ฒ ๋์๋ค.
๋ฐ์ํ