스파르타 왕초보 2주차
[javascript 복습]
짝/홀수에 따라 다른 경고창을 띄우기
- 짝/홀수 판단 방법
let even = 4;
console.log(even % 2); //2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); //2로 나눈 나머지가 1
<script>
let num = 0;
function hey() {
num =+ 1;
if (num % 2 == 0) {
alert('짝수');
} else {
alert('홀수');
}
}
</script>
- function 안에 변수가 있으면 함수가 끝난 후 사라져서 적용이 안되기 때문에 변수는 밖에 기본으로 깔고가야 카운트!
- count += 1;은 count = count + 1;과 같음
[JQuery]
let even = 4;
console.log(even % 2); //2로 나눈 나머지가 0
let odd = 5;
console.log(odd % 2); //2로 나눈 나머지가 1<script>
let num = 0;
function hey() {
num =+ 1;
if (num % 2 == 0) {
alert('짝수');
} else {
alert('홀수');
}
}
</script>JQuery는 HTML의 요소들을 조작하는 미리 작성된 Javascript 코드
- 전문 코드를 가져와 사용하는 것이기 때문에 쓰기 전에 '임포트' 필수
- 임포트란 미리 작성된 Javascript 코드를 가져오는 것
- id 값을 통해 특정 코드를 가리킴
텍스트head 내에 아래 코드를 넣어주면 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>✔ input 박스 값 가져오기
<input id = "post-url">이면
$('#post-url').val();
//$('#~~~')이 id값을 가리키고, val( )로 값을 가져온다.
$('#post-url').val(~~);
//기존 명령어가 ~~로 변경✔ div 보이기/숨기기
<div id="post-box">이면
$('#post-box').hide();
// 안보이게 하기(css의 display값이 none으로)
$('#post-box').show();
//보이게 하기(css의 display값이 block으로)✔ css값 가져와보기 (display 값을 가져올때)
$('#post-box').hide(); $('#post-box').css('display'); $('#post-box').show(); $('#post-box').css('display');
$('#post-box').css('width'); //500px
$('#post-box').css('width','700px'); //500px에서 700px로 변경✔ 태그 내 텍스트 입력
//input 박스일 경우
$(#'id값').val('텍스트 입력')
//input 외의 버튼의 경우
$('#id값').text('텍스트 입력')
ex)
<button id="btn-posint-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>이면
$('#btn-posint-box').text('포스팅 박스 닫기');를 할 경우 text가 '닫기'로 변경✔ 태그 내 html 입력
div 내에 동적으로 html을 넣고 싶을 때 (ex. 포스팅되면 카드 추가)
- `(백틱) 사용
<div class="card-columns" id="cards-box"> //id 추가 let temp_html = `<button> 추가 버튼 </button>`; //html처럼 생긴 문자역 $('#cards-box').append(temp_html); //html로 변경 //카드 전체 박스 아래에 버튼이 추가되어 있다. let temp_html = `<div> 추가할 카드 코드 넣기 </div>`; $('#cards-box').append(temp_html); //카드가 추가되어 있다.
//console창에서 작동
기본: <a href="주소" class="card-title">기사 제목</a>
변경 :
let title = '다른 제목~~' //출력
let temp_html = <div>코드~~~
<a href="주소" class="card-title">$(title)</a>
~~~코드</div> //출력
$('#cards-box').append(temp_html) //제목 변경된 카드 추가✔ 포스팅박스 열기/닫기
<script>
function openclose() {
if ($('#post-box').css('display') == 'block') { // id 값 post-box의 display 값이 block 이면
$('#post-box').hide(); // post-box를 가리고
} else {
$('#post-box').show(); // 아니면 post-box를 펴라
}
}
</script>
<button onclick="openclose()" class="btn btn-primary btn-lg">포스팅박스 열기</button>
//버튼에 onclick 속성 추가
<div class="form-post" id="post-box">
//포스팅박스에 id값 주기function openclose() {
let status = $('#post-box').css('display');
if (status == 'block'){
$('#post-box').hide();
} else{
$('#post-box').show();
}
}텍스트 변환
<a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
//버튼에 id값 주기
function openclose() {
let status = $('#post-box').css('display');
if(status == 'block'){
$('#post-box').hide();
$('#btn-posting-box').text('포스팅박스 열기');
}else{
$('#post-box').show();
$('#btn-posting-box').text('포스팅박스 닫기');
}
}▶ Quiz_JQuery
1번) 빈칸 체크 함수 만들기
1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기
1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기
function q1() {
let value = $('#input-q1').val();
if (value == '') {
alert('입력하세요!');
} else {
alert(value);
}
}2번) 이메일 판별 함수 만들기
2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기
2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기
2-3. 이메일 도메인만 얼럿 띄우기
function q2() {
let email = $('#input-q2').val();
if (email.includes('@')) {
let domain = email.split('@')[1].split('.')[0];
alert(domain);
} else {
alert('이메일이 아닙니다.');
}
}3번) HTML 붙이기/지우기 연습
3-1. 이름을 입력하면 아래 나오게 하기
3-2. 다지우기 버튼을 만들기
function q3() {
let txt = $('#input-q3').val();
let temp_html = `<li>${txt}</li>`
$('#names-q3').append(temp_html)
}[서버-클라이언트 통신 이해]
ajax는 페이지 전환없이 서버에서 값을 가져오는 방법
서버→클라이언트
서버에서 클라이언트한테 여기로 요쳥해라고 열어놓은 창구가 API
JSON은 Key:Value로 이루어져 있으며 자료형 딕셔너리와 아주 유사하다.
실시간 서울시 미세먼지Open API
RealtimeCityAir: {
list_total_count: 25,
RESULT: {
CODE: "INFO-000",
MESSAGE: "정상 처리되었습니다"
},
row: [
{
MSRDT: "202108032000",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 19,
PM25: 11,
O3: 0.022,
NO2: 0.024,
CO: 0.3,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25"
},RealtimeCityAir라는 키 값에 딕셔너리형 Value가 들어가 있고 그 안에 row라는 키 값에는 리스트형 value가 들어있다.
클라이언트→서버
-
GET => 데이터 조회(Read)를 요청할 때
ex) 영화 목록 조회 -
POST => 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
ex) 회원가입, 회원탈퇴, 비밀번호 수정
GET 요청은 url에서 데이터를 가져감
http://naver.com?param=value¶m2=value2POST 요청은 data : {}에 넣어서 데이터를 가져감
data: { param: 'value', param2: 'value2' },
✔ GET
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 "?"을 기준으로 크데 두부분으로 쪼개집니다.
- 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
- 영화 정보: code=161967
? : 여기서부터 전달한 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 의미
code라는 이름으로 영화번호를 주자고 하는건 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속
[Ajax]
Ajax는 JQuery를 임포트한 페이지에서만 동작 가능
기본골격
$.ajax({
type: "GET",
url: "url 입력",
data: {},
success: function(response){
console.log(response)
}
})모든 구의 미세먼지 값 찍어보기
$.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 < mise_list.length; i++) { //반복문 : i가 0부터 mise_list의 length까지 i가 하나씩 늘어난다.
let gu_name = rows["MSRSTE_NM"];
let gu_mise = rows["IDEX_MVL"];
console.log(gu_name,gu_mise);
}
})미세먼지 70이하 값만 찍어보기
$.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 < mise_list.length; i++) {
let gu_name = rows["MSRSTE_NM"];
let gu_mise = rows["IDEX_MVL"];
if (gu_mise < 70) { //if문
console.log(gu_name,gu_mise);
}
})Ajax 연습
-서울시 실시간 미세먼지 API를 이용해 모든 구 미세먼지 값 표기하기
-업데이트 버튼을 누를때마다 지워졌다가 새로 씌어지게 만들기
-미세먼지 수치가 70이하인 곳은 빨갛게 보이게 하기
<style>
.bad {
color: red;
}
</style>
<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 = ``
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>▶ Quiz_Ajax
1번) 서울시 OpenAPI(실시간 따릉이 현황)을 이용하기
서울시 실시간 따릉이 현황 API
따릉이 대수가 5대 미만인 곳은 빨갛게 보여주기
<style>
.urgent{
color: red;
}
</style>
<script>
function q1() {
$('#names-q1').empty() //값이 중복되서 계속 안 나오도록 하는 것
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let 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>2번) 랜덤 고양이 사진 API를 이용하기
랜덤 고양이 사진 API
<script>
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let imgurl = response[0]['url']
$('#img-cat').attr('src',imgurl)
}
})
}
</script>$('#id값').attr('src',imgurl) => JQuery img 태그 이미지 주소 변경
[Q.숙제]
1주차 숙제에 새로고침했을 때 환율이 바로 반영되게 넣기.
<div class="item">
<h1>츄르 참치맛 4개입 <span class="price">가격:1,700원/개</span></h1>
<p>입맛이 까다로운 고양이들을 사로잡는 마약간식! 개별스틱 포장으로 외출시에도 가방에 쏙 넣어갈 수 있어요!</p>
<p class="all_rate"> 달러-원 환율: <span id="allspa_rate">1219.15</span> </p>
</div>처음에 환율 코드를 div 밖에 작성했을때 환율이 적용이 안되었는데 완성 코드와 같이 div 내로 위의 코드처럼 작성하니 환율이 바로 적용되었다.
해설 영상을 보니 밖에 작성해도 된다는데 왜 안되었던걸까,,,
이것만 제외하고는 이번 숙제는 괜찮았다!!
Author And Source
이 문제에 관하여(스파르타 왕초보 2주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@spahy12/스파르타-왕초보-2주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
