사전 강의 2주 차에서는 먼저 jQerry를 중점적으로 배워 보았다.
jQery란?
Javascript 코드만 가지고 버튼의 색깔이나 div태그를 하나 감추고 싶다면?
어렵게 작성해야할 코드를 jQerry로는 쉽게 작성할 수 있다?
jQery는 HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리이다!
javascript코드로
document.getElementById("element"). style.display = "none";
이 코드를 jQery 코드로
$('#element'). hide();
이렇게 짧게 바꿀 수 있다.
jQery는 미리 작성된 javascript코드를 가져와서 사용하는 것이기 때문에 쓰기 전에 임포트라는 것을 해주어야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
이 코드를 html에서 <head> 태그 안에 넣어 주면 된다!
jQery는 $('#id'). val(); 이런 식으로 선택자, 아이디나, 클래스 등을 지정하고 그 뒤에 실행할 명령어, 함수 등을. val() 붙여 주면 된다.
함수로써는. val() , append(), hide(), text(), remove(), includes(), empty(), split() 등을 배울 수 있었다.
const inputVal = $('#input-q2').val();
if(inputVal.includes('@')){
alert(inputVal.split('@')[1]);
}else {
alert('이메일이 아닙니다!');
}
입력값을 list형태로 붙이기
const inputVal = $('#input-q3').val();
$('#names-q3').append(`<li>${inputVal}</li>`);보이는 list들을 지우기
$('#names-q3').empty();다음으로는 서버-클라이언트 통신에 대해 배웠는데
서버와 클라이언트 간의 통신을 할 때에는 JSON이라는 방식을 통해 통신할 수 있는데
클라이언트가 요청을 할 때에도 타입이라는 것이 존재한다.
GET방식과 POST 방식이 있는데
GET방식은 데이터를 조회(Read)를 요청할 때 (예 : 영화 목록 조회
POST방식은 데이터를 생성 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 (예 : 회원가입, 회원 탈퇴, 비밀번호 수정
이번 주차에서는 GET방식에 대해서 알게 되었는데
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요. "?" 기준으로 앞부분이 서버 주소, 뒷부분이 영화 번호가 된다.
* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
*영화 정보: code=161967
google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)
GET 방식으로 데이터를 전달하는 방법은
?: 여기서부터 전달할 데이터가 작성된다는 의미이고
& : 전달할 데이터가 더 있다는 뜻이 된다.
다음으로 AJAX를 이용하여 직접 날씨 API에 연결하고 데이터를 가져오는 방법으로 이전에 했던
내 방명록 페이지에서 현재 기온의 데이터를 가져와서 보여주는 숙제를 해보았다.
function set_temp() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
data: {},
success: function (response) {
$('#temp').text(response['temp'])
}
})
}
'항해 사전강의 주차' 카테고리의 다른 글
| 항해 99 사전강의 5주차 마지막 (0) | 2022.09.30 |
|---|---|
| 항해99 사전강의 4주차 (0) | 2022.09.28 |
| 항해99 사전강의 3주차 (0) | 2022.09.27 |
| 항해99 사전 강의 1주차 (0) | 2022.09.23 |