[2주차 개발일지] 스파르타코딩클럽 웹개발반

[Javascript 복습]

짝/홀수에 따라 다른 얼럿 띄우는 onclick 함수 함께 만들어 보기

let count = 1;
function hey() {
    if (count % 2 ==0){
        alert('짝수입니다!')
    }else{
        alert('홀수입니다!')
    }
    count = count +1; //count=count +1 은 count += 1 과 같다
}

*여기서 주의!
let count 를 function hey() 안에다가 쓰면 함수가 다시 시작될 때 축적이 되지 않고 또 계속 새롭게 1로 카운트되므로 function 바깥에 let count=1을 선언해두어야 한다.

 

[JQuery]

*자바스크립트로 궁극적으로 하고 싶은 것은 움직이는 것.

JQuery: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
= 미리 작성된 Javascript코드! 고로 import를 앞에 하지 않으면 쓸 수 없다

 

[서버-클라이언트 통신 이해하기]

Ajax: 자바스크립트로 페이지 전환없이 서버에서 값을 받아올 수 있는 방법

Json; 리스트와 딕셔너리의 조합

GET: 데이터 조회-엔터치는 것, POST: 데이터 생성, 변경 삭제

 

[AJAX 사용하기]

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

- 기본 골격

  : 복붙해서 항상 쓰기

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

 

[SCR 바꾸기]

attr("scr", 바꿀 url)

$("#img-cat").attr("src", image);

<script>
  function q1() {
    // 여기에 코드를 입력하세요
        $.ajax({
            type: "GET",
            url: "https://api.thecatapi.com/v1/images/search",
            data: {},
            success: function (response) {
              let image = response[0]['url'];
              $("#img-cat").attr("src", image);
            }
  }
</script>

 

[로딩하자마자 Ajax 콜하기]

(ex1) alert가 로딩되자마자 뜸

$(document).ready(function () {
  alert('다 로딩됐다!')
});

(ex2) 로딩되자마자 고양이 사진 띄우기

<script>

  $(document).ready(function () {
    q1();
  });

  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>

*코드 중 이것이 중요하다

$(document).ready(function () {
    q1();
  });