자바스크립트
alert을 이용하여 클릭 횟수에 따른 홀수 짝수 알림 나오게 하기
let count = 1;
function hey() {
if (count % 2 == 0) {
alert('짝수입니다!')
} else {
alert('홀수입니다!');
}
count += 1;
}let count = 1;이 hey 함수 안에 있으면 함수가 끝날 때 마다 count도 끝나서 홀수만 나온다. 함수 밖에 있으면 count 숫자를 기억하고 있는다.
jQuery 시작하기
HTML의 조작을 자바스크립트로 미리 작성해둔 라이브러리.
자바스크립트의 코드가 복잡하고 브라우저 호환성으로 jQuery 라이브러리 탄생.
부트스트랩을 import사용 중 이라면 jQuery를 이미 쓰고있기 때문에 jQuery를 다시 import하지 않아도 된다.
- id:"article-url"의 입력값을 가지고 올 때
$('#article-url').val(); - id:"article-url"에 값을 입력할 때
$('#article-url').val('가나다');
- id:"post-box"인 곳을 숨김
$('#post-box').hide() - id:"post-box"인 곳을 보이기
$('#post-box').show()
- id:"post-box" width값 바꾸기
$('#post-box').css('width', '700px') - id:"post-box" display 값 가져오기
$('#post-box').css('display')
- id:"btn-posting-box"의 글자 바꾸기
$('#btn-posting-box').text('랄라')
- html 입력하기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);id:cards-box인 곳에 html 입력
- HTML 삭제하기
$('#cards-box').empty(temp_html);
- 페이지 열때 바로 호출(알람)
$(document).ready(function(){
alert('다 로딩됐다!')
});Ajax 시작하기
Ajax는 jQuery import된 페이지에서 동작 가능.
자바스크립트로 페이지 전환 없이 서버에서 값을 받아올 수 있는 방법
Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
서버 -> 클라이언트 전달 자료 형태 포맷: JSON
JSON은 {Key:Value} 형태의 딕셔너리 형태로 이루어져 있음.
클라이언트 -> 서버 요청 자료 타입 : GET / POST
GET - 일반적으로 데이터 조회 요철할 때(영화 목록 조회)
POST - 일반적으로 데이터 생성, 변경, 삭제 요청할 때(회원가입, 회원탈퇴, 비밀번호 수정)
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
? 기준으로
서버주소 : https://movie.naver.com/movie/bi/mi/basic.nhn
영화정보 : code=161967
code 이름으로 영화정보를 주는 것은 프론트엔드 개발자와 백엔드 개발자가 미리 정한 약속이다.
- get 방식으로 데이터 전달하는 방법
https://www.bing.com/search?q=velog&form=ANNTH1&refig=7764c0bce93c4b72b834d016fd9b412c&sp=-1&pq=velog&sc=8-5&qs=n&sk=&cvid=7764c0bce93c4b72b834d016fd9b412c
? 여기서부터 전달할 데이터가 작성
& 추가 데이터 전달
www.bing.com/search 서버주소
q=velog 검색어
& 나머지는 추가 전달 정보
$.ajax 기본 코드
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "", // open api 주소 작성
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})2주차 끝
환율 api를 이용한 간단한 상품페이지
https://lipton-web.github.io/Pre-Course-2/
코드가 길어지면서 대부분의 오류는 html 탭 안닫음, 오타, 들여쓰기와 중괄호{} 짝이 안맞는 경우였다.
api를 이용할 때 리스트가 없으면 for는 사용할 필요가 없다. api가 연속되지 않는 경우 리스트의 0번째인지 리스트가 없는것인지 확인이 필요했음.
$.ajax 입력 후 console.log(response)로 개발자도구에서 api를 어떤 형태로 불러오는지 확인해보는게 필요함.
jQuery를 이용하는 bootstrap과 $.ajax 사용이 편리하였다.
