웹 개발 2주차 개발일지 (12/27~1/2)

2주차

Javascript

전역변수

함수 바깥에다 쓰면 함수와 상관없이 어디서든 스크립트 안에서 써먹을 수 있음

함수 안에서 선언했다면 그 박스는 함수가 끝나면서 같이 끝난다.

 

JQuery

자바스크립트로 하고 싶은 거 - HTML 조작해서 움직이게 하기

제이쿼리는 자바스크립트보다 직관적으로 쓸 수 있음 (짧음)

제이쿼리 = 미리 작성된 자바스크립트 코드 (남이짜준 ex- CSS = 부트스트랩)

고로, 쓰기 전에 Import를 해야함

 

구글 CDN 복사-헤드 안에 넣기(타이틀 밑) 근데 부트스트랩에 이미 임포트 되어있음. (부트스트랩 템플릿으로 시작안하면 따로 임포트 해야 함)

$('#btn-posting-box’).text(‘랄라’)

Val 인풋 박스에만 씀

temp_html 쓸 때는

option + ₩

 

alert이나 console.log를 많이 쓰는 게 굉장히 좋음

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('포스팅박스 닫기');

  }

}

 

display: none; 첨부터 안나옴

 

1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!

2. 만약 입력값이 빈칸이면 if(입력값=='')

3. alert('입력하세요!') 띄우기

4. alert(입력값) 띄우기

 

 

클라이언트가 서버에 요청할 때 

GET - 통상적으로 데이터 조회(Read) 요청할 때 ex) 영화 목록 조회

POST - 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 ex) 회원가입, 회원 탈퇴, 비밀번호 수정

 

Ajax 

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

$.ajax({

  type: "GET",

  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",

  data: {},

  success: function(response){

    console.log(response['RealtimeCityAir']['row'][0])

  }

})

꼭 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 < rows.length; i++) {

            console.log(rows[i])

        }

    }

})

 

<script>

    function q1() {

(나중1)$(‘#names-q1').empty()

$.ajax({

    type: "GET",

    url: "http://spartacodingclub.shop/sparta_api/seoulbike",

    data: {},

    success: function (response) {

       💛 console.log(response)

    let rows = response['getStationList']['row']

💛 console.log(rows)

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

      let name = rows[i]['stationName']

      let rack = rows[i]['rackTotCnt']

      let bike = rows[i]['parkingBikeTotCnt']

💛 console.log(name, rack, bike)

(뭘 만들지 밑에 내려서 본다 (모르면 이어 붙는지 확인)

 

    (나중2)let temp_html = ``

 

    (나중3)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>`

}

 

let temp_html = `<tr class=“urgent”>

                        <td>${name}</td>

                        <td>${rack}</td>

                        <td>${bike}</td>

                </tr>` (위로 올라감=지워짐)

$('#names-q1').append(temp_html)

 

<script>

  function q1() {

      $.ajax({

          type: "GET",

          url: "https://api.thecatapi.com/v1/images/search",

          data: {},

          success: function (response) {

              💛console.log(response[0]['url'])

  let imgurl = response[0]['url']

$('#img-cat').attr('src',imgurl)

 

          }

      })

  }

 

 

로딩이 되자마자 실시간 환율 나오게 하기 (Ajax call)

$(document).ready(function(){

    alert('다 로딩됐다!')

});