2022.10.18 작성
짝/홀수 onclick 함수
<script>
let count = 0
function hey() {
count += 1
if (count % 2 == 0) {
alert('짝수입니다!')
} else {
alert('홀수입니다!')
}
}
</script>
JQuery input 박스의 값을 가져오기
$('#url').val();
JQuery 버튼 넣기
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);
JQuery 포스팅박스 열고 닫기
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}
JQuery 퀴즈1. 빈칸 체크 함수 만들기
<script>
function q1() {
let value = $('#input-q1').val()
if (value == '') {
alert('입력하세요!')
} else {
alert (value)
}
}
</script>
JQuery 퀴즈2. 이메일 판별 함수 만들기
<script>
function q2() {
let value = $('#input-q2').val()
if (value.includes('@')){
alert(value.split('@')[1].split('.')[0])
} else {
alert('이메일이 아닙니다')
}
}
</script>
JQuery 퀴즈3. HTML 붙이기/지우기
<script>
function q3() {
let txt = $('#input-q3').val()
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}
function q3_remove() {
$('#names-q3').empty()
}
</script>
Ajax 기본 골격
<SCRIPT>
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
</SCRIPT>
모든 구의 미세먼지 값 구하기
<script>
$.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']
console.log(gu_name, gu_mise)
}
}
})
</script>
실시간 따릉이 현황 보여주기
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
console.log(response['getStationList']['row'])
let rows = response['getStationList']['row']
for (i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5) {
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>
날씨API를 이용해서 실시간 날씨 표시하기
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
let value = response['temp']
$('#temp').text(value)
}
})
});
</script>