거누의 개발노트

[항해99 사전준비] 웹개발 종합반 2주차 본문

항해/사전준비

[항해99 사전준비] 웹개발 종합반 2주차

Gogozzi 2022. 4. 27. 13:53
반응형

1. JQuery

JQuery는 간단히 Javascript를 미리 작성해둔 것이라고 생각하면된다. (라이브러리!)

document.getElementById("element").style.display = "none";

위 와같은 자바스크립트 코드를 간단하게 사용 할 수 있게 도와준다.

$('#element').hide();

 

JQuery를 사용하려면 <head></head> 안에 임포트를 시켜주어야 한다.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

라이브러리는 모두 외워서 사용 할 필요없고 필요한 부분을 찾아서 사용하면된다.

https://api.jquery.com/

 

jQuery API Documentation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t

api.jquery.com

정식 홈페이지나 구글링을 통해서 필요한 코드를 찾아서 사용한다.

간단한 기능 연습 ( box가 사라지게 했다가 보이게 하는 기능 )

function open_box(){
    $('#post-box').show()
}
function close_box(){
    $('#post-box').hide()
}

 

1. AJAX

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

[기본 골격]

$.ajax({
  type: "GET", // GET/POST 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair", //자원의 위치
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

 

백틱(`) 과 작은따옴표 (') 전에 배웠을 때는 작은 따옴표와 쌍 따옴표로 HTML 코드와 Javascript 코드를 혼합해서 사용 했는데 지금은 백틱(`)을 새로 배워서 쉽게 작성할 수 있다는 것을 배웠다.

temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`

* 백틱을 이용한 코드 예제

반응형

'항해 > 사전준비' 카테고리의 다른 글

[항해99 사전준비] 웹개발 종합반 5주차  (0) 2022.05.10
[항해99 사전준비] 웹개발 종합반 4주차  (0) 2022.04.29
[항해99 사전준비] 웹개발 종합반 3주차  (0) 2022.04.28
[항해99 사전준비] 웹개발 종합반 1주차  (0) 2022.04.21
항해99 지원부터 합격까지  (0) 2022.04.21
'항해/사전준비' Related Articles more
Comments