728x90
1. JQuery 시작하기
-
- jQuery 란?
- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
- 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장하게 되었답니다.
- <aside> 👉 Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
- jQuery와 Javascript - 코드 비교해보기</aside>
jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)document.getElementById("element").style.display = "none"; - $('#element').hide();
- Javascript로 길고 복잡하게 써야 하는 것을
- <aside> 👉 jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)
- jQuery 사용하기
- 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부릅니다.</aside>
- [코드스니펫] jQuery CDN
- <https://www.w3schools.com/jquery/jquery_get_started.asp>
- <aside> 👉 jQuery CDN 부분을 참고해서 임포트하기: (링크)
- <head> 와 </head> 사이에 아래를 넣으면 끝!</aside>
- <aside> 👉 수업 자료를 잘 따라온 분이라면, 코드에 이미 다음과 같이 임포트 되어있을거예요. 다시한번 잘 살펴보세요!
- jQuery를 사용하는 방법css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다.</aside>
- 백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!
- <aside> 👉 css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘!
2.Ajax 시작하기
- Ajax 기본 골격
더보기
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
- $ajax 코드 설명
- type: "GET" → GET 방식으로 요청한다.
- url: 요청할 url
- data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },
- </aside>
- <aside> 👉 리마인드 GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2
- success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.</aside>
- <aside> 👉 결과가 어떻게 response에 들어가나요? → 받아 들이셔야 합니다..! (대부분의 개발자들도 내부 원리는 코드를 안 뜯어봐서 몰라요.^^;;)
728x90
'🫅스파르타 코딩클럽 > Web develop' 카테고리의 다른 글
| 2022-11-16 웹개발 4주차 (0) | 2022.11.16 |
|---|---|
| 2022-11-07 웹개발 3주차 (0) | 2022.11.07 |
| 2022-10-25 웹개발 1주차 (0) | 2022.10.25 |
