스파르타 코딩클럽 2주차 개발일지

JQuery: 미리 작성된 Javascript 코드로서, import하여 간단하게 쓸 수 있음

div에 id를 먹임 (class / id 순서 상관 없음) ex. <div class="form" id="post-box">

$('#id값').val(); 값 가져오기

$('#id값').val('장영실'); input값 입력하기

$('#id값').hide() 숨기기

$('#id값').show() 나타내기

$('#id값').text('텍스트') 텍스트 바꾸기

$('#id값').append(temp_html) 이어 붙이기

back tick(`) (숫자 1 옆에): html처럼 생긴 문자열을 html로 변환시킬 수 있다

ex) let temp_html = `<button>버튼</button>`

 

let txt = $('#input-q2').val();
console.log(txt) 

id의 값(value)를 제대로 지정했는지 확인할 수 있음 (위 함수를 입력하고 검사 → 제대로 지정됐을 시 콘솔 창에 가 보면 id의 값이 나옴

function openclose() {
let status = $('#post-box').css('display'); 'post-box'가 보이는 상태(block)인지 아닌지(none)
if (status == 'block') {
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
} else { $('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기') }
}
'post-box'가 보이는 상태라면 숨기면서 '포스팅박스 열기'로 텍스트를 바꾸고, 숨겨져 있는 상태라면 '포스팅박스 닫기'로 텍스트를 바꾸면서 보이기

let txt = $('#input-q1').val();
if (txt == '') {
alert('입력하세요!')
} else {
alert (txt)

입력창에 입력값이 없으면 '입력하세요!' 알림창이 뜨고, 입력값이 있으면 입력값을 알림창에 표시하기

 

let txt = $('#input-q2').val();
console.log(txt.includes('@'))

if (txt.includes('@')) {
let domain = txt.split('@')[1].split('.')[0]
alert(domain)
} else {
alert ('이메일이 아닙니다')

입력값이 @를 포함했을 경우 이메일 도메인만 가져오기

 

Ajax

*jQuery 임포트한 상태에서만 가능

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    //console.log(response) response가 제대로 작동하는 지 console에 찍어보는 것
  }
})

<button onclick="q1()">업데이트</button> 업데이트 버튼: onclick 동작하도록 되어 있음

$('#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)
}

농도가 60 이상일 때 빨간색으로 표시:

let temp_html = '' 비워둠 (2가지 케이스)
if (gu_mise > 60) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` <style>에서 bad에 컬러를 먹여주면 됨
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}

실시간 환율 적용하기

<script>
$(document).ready(function(){ 로딩될 때마다 값 적용
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/rate", 환율 API
data: {},
success: function(response){
let change_rt = response['rate'] change_rt라는 동작 수행하면 환율 API의 rate값을 보여줌
$("#price_rate").append(`${change_rt}원`) price_rate 뒤에 붙이기(append)
}
})
})
</script>

<p id="price_rate" class="exchange_rate">달러-원 환율: </p> *id를 먹여야 함. class는 CSS용