HTML을 제어하는 방법과
페이지 전체를 리로드 하지않고 데이터를 요청하는 방법을 배운다.
변수를 함수 안에서 사용하면 함수가 끝나면서 변수도 자동으로 사라지기 때문에
변수는 함수 바깥에 써준다.
<script>
let count = 1;
function hey() {
if (count % 2 == 0){
alert('짝수입니다')
} else {
alert('홀수입니다')
}
count += 1;
}
</script>JQuery
미리 작성(남이 짜놓은)된 Javascript 코드!
따라서 임포트를 한 후 써야한다.
지칭은 $(#'~~~') 으로 해준다.
input 박스의 값 가져오기
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();보이기/숨기기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();동적인 html 박스 만들기
// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
여기서 백틱으로 감싼 temp_html은 문자열인 상태다.
이 HTML처럼 생긴 문자열을 HTML로 변환시켜준다.
$('#cards-box').append(temp_html);이렇게 하면 실시간으로 화면에 더해지게 된다
서버-클라이언트 통신
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
-
GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회 -
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)Ajax
Ajax란? https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
Uncaught TypeError: $.ajax is not a function
→ ajax라는 게 없다는 뜻
Ajax 퀴즈
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['stationName']
let rack = rows[i]['rackTotCnt']
let bikecnt = rows[i]['parkingBikeTotCnt']
let temp_html = ``
if (bikecnt < 5) {
temp_html = `<tr class="red">
<td>${name}</td>
<td>${rack}</td>
<td>${bikecnt}</td>
</tr>`
} else {
temp_html =`<tr>
<td>${name}</td>
<td>${rack}</td>
<td>${bikecnt}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>console.log() 로 코드를 계속 확인해주는 습관 들이기
2주차 숙제
난 .append로 붙였는데 튜터님은 .text로 붙이셨다
솔직히 .text가 생각이 안나서 .append로 붙여봤는데 되길래 이대로 완성했다.
항상 생각만하고 안되겠지 하면서 답을 찾기 바빴는데
이번 숙제를 하면서 생각만 하기보다 일단 배운대로 쓰고 확인해보자 했는데
그렇게 하다보니 원하는 결과 페이지가 만들어졌다. (물론 코드를 튜터님과 똑같이 짜진 못했지만)
일단 코드를 쓰면서 부딪혀봐야겠다고 느끼게 됐다.
