2.0-JQuery시작
JQuery- 편리한 미리 작성해둔 자바스크립트코드을 담은 라이브러리
=>다른 개발자가 짜둔 코드 가져와서 쓰는 것->쓰기전엔 import해오기
=>javascript로는 길고 복잡하게 써야하는 것들을
jQuery로 직관적이게 쓸수 있다는 장점을 가지고 있음
+부트스트랩 시작템플릿으로 시작하면 import 필요없음
+css처럼 jQuery도 '가리켜야' 작동이됨(id)
2.1 - 자주 쓰는 jQuery들
1)input box값 가져오기
=>('#id').val(); id에 있는 input value를 가져와라 =>('#id').val('나타내고싶은말');
id에 있는 input value에 나타내라
ex>
('#link-url').val(); "hello"('#link-url').val('bye');
S.fn.init [input#link-url.form-control]
2)보이게 안보이게
('#id').hide();('#id').show();
3)display 값
검색>('#id').css('css에서 알고싶은 것'); 바꾸기>('#id').css('바꾸고 싶은 것','바꾸려는 값')
ex>
('#postingBox').css('display') "block"-현재 블럭처리('#postingBox').hide()
S.fn.init [div#postingBox.postingbox]
$('#postingBox').css('display')
"none"-현재 안보임(hide했기 때문)
4)태그 내 text 바꾸기(inputbox외의 것들)
('#id').text(''); ex>('#btn-postingBox').text('lala')
5)백틱 사용하기
백틱을 사용해서
let temp_html에 원하는 것(버튼,카드,,,)를 넣은다음
$('#id').append(temp_html);
다른 변수(let)을 집어 넣고 싶으면 ${} 로
2.2
Ajax-자바스크립트로 페이지 전환없이 서버에서 값을 받아오는 방법
JSON-dict+list의 조합의 형식
~>같은 이름, 같은 주소의 창구더라도
타입(post, get)에 따라 데이터, 기능이 다르다
클라이언트->서버
get-read data(데이터 조회,브라우저에 enter치기)
post-create, update, delete(회원정보 수정,회원가입..)
기본 ajax 골격
$.ajax({
type: "GET",
url:"http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", //api 주소
data: {},//post에서 사용
success: function(response//변수이름(거진 response 사용함)){
console.log(response['RealtimeCityAir']['row'][0])
}
})
새로운 내용이 막 쏟아져서 어려웠는데 2주차 강의를 듣는 내내 계속 연습할 수 있게
커리큘럼이 짜여있어서 그래도 어느정도 익숙해진 느낌이다.
사실 뭘 새로 배우든 자바보다는 훨 쉬운 느낌이다...
그리고 코드만 짜는게 아니라 내가 짠 코드로 결과물을 만들어볼 수 있는 게
제일 맘에 들고 만들어 내는게 재미있다.
얼른 아무의 도움없이 나혼자 웹페이지 하나를 뚝딱 만들어 보고 싶다.
그러려면 더 열심히 반복해서 들어야겠지..ㅠ
2주차 강의 완료!
