2주차에선 jQuery와 Ajax에 대해 배웠다.
jQuery: HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
그렇게 때문에, 쓰기 전에 "Import"를 해야함.
Ajax도 jQuery를 import한 페이지에서만 동작 가능함.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
자주쓰는 jQuery들,
$('#post-url').val();
$('#post-box').hide();
$('#post-box').show();
$('#post-box').css('display'); //display 속성 값 가져오기
$('#post-url').val('여기에 텍스트를 입력하면!'); //input box에 텍스트 입력
$('#btn-posting-box').text('포스팅 박스 닫기'); //Button의 텍스트 바꾸기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html); //Button 넣기
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html); //카드 넣기
크롬 익스텐션 JSONView를 설치하면 OpenAPI를 좀 더 예쁘게 볼 수 있다.
여기서 다운로드: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko
API는 은행 창구와 같은 것! 이번에 GET 방식에 대해 배웠다.
Ajax 기본 골격
$.ajax({
type: "GET", //GET 방식으로 요청한다.
url: "여기에URL을입력",
data: {}, //요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ //서버에서 준 결과를 response라는 변수에 담음
console.log(response) //서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})
jQuery 이미지태그 src 바꿀 수 있음.
$("#img-something").attr("src", imgurl);
페이지 로딩 완료 후 바로 작동하게 하려면,
$(document).ready(function(){
alert('다 로딩됐다!')
});
2주차 내용도 꽤나 재밌었다. 웹사이트 제작 시 매우 유용하게 쓸 수 있는 코드인 것 같다.
3주차 내용도 기대가 된다. :)
'Computer Programming > Javascript' 카테고리의 다른 글
| (웹개발 종합반)스파르타 1주차 강의 정리 (0) | 2021.08.22 |
|---|