웹프로그래밍 - jQuer, Ajax 기초 2주차 정리

스파르타코딩클럽 웹프로그래밍 공부 2주차 개발일지 기록

jQuery 기초

<!DOCTYPE html>

<head>

<title>자바스크립트 jQuerty 기초 연습</title>

<style>

div {

margin : 20px;

}

</style>

function test1() {

$('#input1').val('1번값테스트'); // id=input1 인곳의 값을 ''안의 내용으로 넣는다

}

function test2() {

alert($('#input1').val()); // id=input1 인곳의 값을 가져온다

}

function test3() {

$('#input1').hide(); // 숨기기

}

function test4() {

$('#input1').show(); // 보이게하기

}

function test5() {

$('#div1').append(temp_html); // id에 지정된 곳 바로 다음에 HTML상태로 추가하기

}

let name = '추가' // 내용을 변수로 지정가능 불러올땐 => ${변수명}

let temp_html = `

<div>

</div>

` // ``시작 끝 2번 붙여야함 (작은따옴표가 아닌 물결표아래의 `임)

function test5_2() {

$('#div1').empty() // 내부 태그를 모두 비운다

}

function test6() {

if ($('#input2').val() == "") {

alert('입력하세요');

}

else {

alert($('#input2').val());

}

function test7() {

if ($('#input3').val().includes('@')) { // 변수나 값뒤에 .includes('문자열')을 붙이면 포함여부확인 초함시 True값 반환

alert($('#input3').val().split('@')[1] + '메일을 사용중입니다') // .split('문자열')로 문자 앞뒤를 나눠 배열변수로 넣음

}

else {

alert('메일형식으로 쓰시오');

}

</script>

</head>

<body>

<div>

<button onclick="test2()">2.값불러오기</button>

</div>

<div>

<button onclick="test4()">4.보이게하기</button>

</div>

<div>

<button onclick="test5()">5.HTML추가하기</button>

<button onclick="test5_2()">5_2.HTML지우기</button>

</div>

<div>

<button onclick="test6()">6.입력한지체크</button>

</div>

<div>

<button onclick="test7()">7.메일형식체크</button>

</div>

</body>

</html>

기존 부트스크랩의 자바스크립트에 J쿼리 적용하기

<!doctype html>

<head>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"

crossorigin="anonymous"></script>

<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

<style>

* {

font-family: 'Gowun Dodum', sans-serif;

}

.mytitle {

width: 100%;

height: 250px;

background-color: red;

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");

background-size: cover;

background-position: center;

color: white;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

}

.mytitle > button {

width: 200px;

height: 50px;

background-color: transparent;

color: white;

border-radius: 50px;

border: 1px solid white;

margin-top: 10px;

}

.mytitle > button:hover {

border: 2px solid white;

}

.mycomment {

color: grey;

}

.wrap {

max-width: 1200px;

width: 95%;

margin: 20px auto 0;

}

.mypost {

max-width: 500px;

width: 95%;

margin: 20px auto 0px auto;

box-shadow: 0px 0px 3px 0px gray;

padding: 20px;

display: none; /*표시 안되게하기 (처음 페이지열릴때부터)*/

}

.mybutton {

display: flex;

flex-direction: row;

justify-content: center;

align-items: center;

margin: 20px 0px 0px 0px;

}

.mybutton > button {

margin-right: 10px;

}

</style>

function open_box() {

$('#post-box').show() // (j쿼리) 보이게하기

}

function close_box() {

$('#post-box').hide() // (j쿼리) 숨기기

}

</script>

</head>

<body>

</div>

<label for="floatingInput">영화URL</label>

</div>

</select>

</div>

</div>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<h5 class="card-title">여기에 제목이 들어갑니다</h5>

<p class="card-text">여기에 내용이 들어가지요</p>

<p class="mycomment">여기에 코멘트 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<h5 class="card-title">여기에 제목이 들어갑니다</h5>

<p class="card-text">여기에 내용이 들어가지요</p>

<p class="mycomment">여기에 코멘트 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<h5 class="card-title">여기에 제목이 들어갑니다</h5>

<p class="card-text">여기에 내용이 들어가지요</p>

<p class="mycomment">여기에 코멘트 들어갑니다.</p>

</div>

<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"

class="card-img-top" alt="...">

<h5 class="card-title">여기에 제목이 들어갑니다</h5>

<p class="card-text">여기에 내용이 들어가지요</p>

<p class="mycomment">여기에 코멘트 들어갑니다.</p>

</div>

</body>

</html>

Ajax 기초 정리

<!DOCTYPE html>

<head>

<title>Ajax기초연습</title>

function test1() {

$('#ul1').empty(); //업데이트형식이니 기존것은 지우고 다시 채워넣기

$.ajax({ // ajax 기본문법

type: "GET", // GET방식으로 요청

// 값(API 등) 불러올때 GET은 조회, POST는 생성/변경/삭제 용도

url: "http://spartacodingclub.shop/sparta_api/seoulair", // 서울시 미세먼지 API

data: {}, // 요청하면서 동시에 보낼 데이터 (GET 요청시엔 비워둠)

success: function (response) { // 서버에서 받은 결과를 response라는 변수에 넣고 아래내용으로 바로실행 (함수명은 안적음)

let mise_list = response["RealtimeCityAir"]["row"]; // API값 > RealtimeCityAir열항목 > row열항목의 값만

// ★ 위의 경우 배열값이 아니기 떼문에 이렇게 처리!

for (let i = 0; i < mise_list.length; i++) {

let mise = mise_list[i];

// ★ 아래의 항목의 경우 배열값이기 떼문에 for문으로 위같이 처리필요! (아래에 [i]넣어서 위 없애고 바로 집어넣어도됨)

let gu_name = mise["MSRSTE_NM"]; // 위의 row열항목내에 많은 배열값이 있는데 이중 MSRSTE_NM 열항목이 ~구이름임

let gu_mise = mise["IDEX_MVL"]; // > row열항목 > IDEX_MVL열항목 (미세먼지값임)

// ★ 배열값을 웹상에 표현하는 방법 : .append(temp_html) 와 리스트태그(<ul><li>) 또는 표태그 이용

let temp_html = '' // 미리 변수를 만들어둠 (안해도됨??)

if (gu_mise > 40) { //값에 따라서 다른 HTML적용

temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` //j쿼리로 변수 불러올땐 => ${변수명}

// ★ 아무것도 없을때만 let을 붙이고 if문안에선 let을 안붙여도됨

} else {

temp_html = `<li>${gu_name} : ${gu_mise}</li>`

}

$('#ul1').append(temp_html) //j쿼리로 위치(id)지정 할땐 => $(#id)

}

})

}

function test2() {

$('#tbody1').empty();

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/seoulbike", //따릉이 API

data: {},

success: function (response) {

let rows = response["getStationList"]["row"]; //API주소 인터넷에 쳐서 json뷰어로 항목명 확인가능

for (let i = 0; i < rows.length; i++) {

let name = rows[i]["stationName"]; //이번엔 바로 [i]넣어서 처리

let rack = rows[i]["rackTotCnt"];

let bike = rows[i]["parkingBikeTotCnt"];

let temp_html = ''

if (bike > 6) {

temp_html = `

<tr>

</tr>

} else {

temp_html = `

</tr>

}

$('#tbody1').append(temp_html)

}

})

}

function test3() {

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/rtan", //새로고침할때마다 르탄이 바뀌는 API

data: {},

success: function (response) {

let img_url = response['url']

let text_msg = response['msg']

$("#img-rtan").attr("src", img_url); //이미지를 바꾸는 방법

$("#text-rtan").text(text_msg); //텍스트를 바꾸는 방법

}

})

}

$(document).ready(function (){ //페이지 열면 자동 실행하는 Ajax 문법

$.ajax({

type: "GET",

url: "http://spartacodingclub.shop/sparta_api/weather/seoul", //서울기온 API

data: {},

success: function (response) {

$("#seoul_temp").text(response['temp']); //간단한 단순값은 바로 지정

}

})

});

</script>

<style>

.bad {

color: red;

}

table {

border: 1px solid;

border-collapse: collapse; /*테이블 테두리 병합 (즉 1줄로 테두리화)*/

margin: 10px 0 20px 0;

}

td {

border: 1px solid;

padding: 3px;

}

</style>

</head>

<body>

<div>

<button onclick="test1()">현재 서울미세먼지값 업데이트</button>

</ul>

</div>

<div>

<button onclick="test2()">현재 따릉이현황 보기</button>

<table>

<tr>

</tr>

</thead>

</tbody>

</table>

</div>

<div>

<div>

<h3 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h3>

</div>

<div>

</div>

</body>

</html>

저작자표시 비영리 변경금지

'개발일지' 카테고리의 다른 글

웹프로그래밍 - 파이썬 API다루기, 크롤링, DB처리 3주차 정리 (0)	2022.12.19
파이썬 데이터분석 3주차 정리 (OpenDart의 API다루기) (0)	2022.12.18
웹프로그래밍 - HTML/CSS/자바스크립트 기초 1주차 정리 (0)	2022.12.15
파이썬 데이터분석 2주차 정리 (0)	2022.12.14
파이썬 기초 1주차 정리 (0)	2022.12.13

메타버스에서 살아남기

웹프로그래밍 - jQuer, Ajax 기초 2주차 정리

스파르타코딩클럽 웹프로그래밍 공부 2주차 개발일지 기록

jQuery 기초

기존 부트스크랩의 자바스크립트에 J쿼리 적용하기

Ajax 기초 정리

'개발일지' 카테고리의 다른 글

티스토리툴바

웹프로그래밍 - jQuer, Ajax 기초 2주차 정리

스파르타코딩클럽 웹프로그래밍 공부 2주차 개발일지 기록

jQuery 기초

기존 부트스크랩의 자바스크립트에 J쿼리 적용하기

Ajax 기초 정리

'개발일지' 카테고리의 다른 글

관련글

티스토리툴바