개발일지 - 2주차

졍이🥨·2022년 10월 18일
0

개발일지

목록 보기
4/38

//미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.

//Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";

jQuery로 간단하게 쓸 수 있다.
$('#element').hide();

//css의 선택자 -> class
jQuery의 선택자 -> id

hide, show

// 크롬 개발자도구 콘솔창에 쳐보기 // id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다. $('#아이디값').hide(); + // show()로 보이게 한다. $('#아이디값').show();

Ajax 기본 골격

$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "여기에URL을입력",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})

$ajax 코드 설명

- type: "GET" → GET 방식으로 요청한다. - url: 요청할 url - data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요) //리마인드 GET 요청은, 'url뒤에 아래와 같이 붙여서' 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2

POST 요청은, 'data : {} 에 넣어서' 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

//- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

<aside>
👉 결과가 어떻게 response에 들어가나요? → 받아 들여야한다!

</aside>

success: function(response){
// 서버에서 준 결과를 response라는 변수에 담음

console.log(response)
}
  • 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);

  • 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

  • 로딩 후 호출하기
    $(document).ready(function(){
    alert('다 로딩됐다!')
    });


느낀점 : 받아들여야하고 이해해야하는 부분들이 아직은 어렵다고 느낀다. 반복적으로 되내이면서 생각해도 시간이 오래걸리다보니 10~15분이면 된다는 숙제가 30분이 걸린다. 웹개발종합반 강의를 적어도 2번은 들어야 한다는 말이 이해가 됐다. 전체 한 번씩 듣고 다시 들어보며 복습하는 게 필요하다.

profile
Front-End :)

0개의 댓글