웹 개발일지(2주차)

1주차 javascript 복습

<script>
        let count = 1;

        function hey() {
            // alert('안녕.!'); //경고창

            if (count % 2 == 0) {
                alert('짝수입니다')
            } else {
                alert('홀수입니다.')
            }
            count += 1;
        }
    </script>

==> count변수 선언, hey함수 생성후, 2로 나누 수가 0이면 짝수, 아니면 홀수가 나오게 if문 작성, count가 1씩 증가하게 함.
(변수를 함수밖에 선언한 이유: 함수안에 선언하면 함수실행 후 변수가 사라짐.)

JQuery

: html이 동적으로 움직이게하는 javascript를 미리 작성해둔 것.(라이브러리)
*JQuery는 미리 작성된 자바스크립트 코드임으로 쓰기전에 항상 import를 해야된다.!

• JQuery CDN -> 임포트 참고

구글 CDN (head 사이에 삽입)
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• JQuery사용: id값을 통해 명령해야 조작이 가능함.
  (ex. <input type="url" class="form-control" id="article-url">)

• input박스 값 값가져오기
  

1.$('#article-url').val();
2.$('#article-url').val('이순신');

• div 보이기 및 숨기기
  ->숨기기
  
  ->다시보이기
  

1.div태그에 id값 주기: <div class="posting" **id="post-box**">
2.$('#post-box').hide()  //숨기기
3.$('#post-box').show()  //다시보이기

• display 속성 값 가져오기
  

  1.post-box의 display의 속성값 
  2.post-box의 넓이값
  3.post-box 넓이 변경

• 태그 내 텍스트 입력하기
  

*버튼에 아이디 넣어주기: btn-posting
$('#btn-posting').text('클릭클릭')

• 태그 내 html넣기

1. 버튼 넣기

버튼 id: cards-box
$('#cards-box').append(temp_html)

2.카드 넣기

let temp_html = ` <div class="card">
            <img class="card-img-top" src="https://i.pinimg.com/originals/c1/d0/8c/c1d08cfc19c2b2b14a32befeb3f42798.jpg"
                 alt="Card image cap">
            <div class="card-body">
                <a href="https://www.naver.com/"><h5 class="card-title">여기 기사 제목이 들어가죠</h5></a>
                <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
            </div>
        </div>`
        -------------
        $('#cards-box').append(temp_html)

JQuery 적용 - 나홀로메모장

1.button 태그 'onclick=openclose()' 함수 생성
2.script안에 함수 정의(?) 하기

 function openclose() {
            let status = $('#post-box').css('display'); //박스 속성확인
            console.log(status)

        }

• 포스팅박스 열고닫기

        function openclose() {
            let status = $('#post-box').css('display'); //박스 속성확인
           if(status == 'block'){
               $('#post-box').hide();
                $('#btn-posting').text('포스팅박스 열기');
           }else{
               $('#post-box').show();
                $('#btn-posting').text('포스팅박스 닫기');
           }

        }

--> 포스팅박스가 block속성이면 포스팅 숨기고, none이면 열어라.


AJax

• Ajax는 JQuery를 임포트한 페이지에서만 동작 가능

• Ajax 기본골격

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872
  /json/RealtimeCityAir/1/99", <!--서울시 미세먼지 데이터-->
  data: {},
  success: function(response){
    console.log(response)
  }
})

==>서울시 미세먼지 값이 response에 저장되어 콘솔에 찍힘.

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", <!--API주소-->
  data: {}, <!--post에서 사용-->
  success: function(response){ <!--reponse에 값이 저장됨-->
    console.log(response['RealtimeCityAir']['row'][0]) 
  }
})

==> reponsed에 RealtimeCityAir에 row 0번째 결과 출력

• 반복문으로 가져오기

$.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'] //구의 미세먼지 값
        console.log(gu_name,gu_mise)  
    }    
  }
})

• if문 적용

$.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']
    if(gu_mise <70){ //if문 추가(미세먼지 값이 70밑인 값만 나오게)
        console.log(gu_name,gu_mise)  
        }
    }    
  }
})