스파르타 왕초보 2주차

spahy12·2021년 7월 29일

스파르타 왕초보

목록 보기

2/5

[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]

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=value2

POST 요청은 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 내로 위의 코드처럼 작성하니 환율이 바로 적용되었다.
해설 영상을 보니 밖에 작성해도 된다는데 왜 안되었던걸까,,,
이것만 제외하고는 이번 숙제는 괜찮았다!!

spahy12

스파르타 왕초보 2주차