2-2 ~ 2-5주차
jQuery란?
-
HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔, 라이브러리
jQuery 사용하기
-
jQuery CDN 참고해서 head 태그 사이에 임포트(미리 작성된 javascript 코드를 가져와야함)
-
CSS의 선택자 class, jQuery에서는 id로 버튼, 인풋박스, div를 가리킴
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');input box의 값을 가져오기
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();div 보이기/숨기기
let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);태그 내에 html 입력하기
.mypost {
display: none;
}post-box를 시작부터 감춰두기 (css의 display:none 속성!)
function open_box(){
$('#post-box').show()
}
function close_box(){
$('#post-box').hide()
}박스 열기, 닫기
function q3() {
let txt = $('#input-q3').val()
if (txt == ''){
alert('이름을 입력하세요');
return;
}
let temp_html= `<li>${txt}</li>`
$('#names-q3').append(temp_html)
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
$('#names-q3').empty()
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}return 해줘야 아래까지 안내려가고 함수끝남
2-2 ~ 2-5주차 서버와 클라이언트 통신 이해하기
- 서버->클라이언트: "JSON"을 이해하기
크롬익스텐션 Jsonview : 예쁘게 JSON을 볼 수 있음
JavaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷입니다. 웹 어플리케이션에서 데이터를 전송할 때 일반적으로 사용합니다(서버에서 클라이언트로 데이터를 전송하여 표현하려거나 반대의 경우).
-MDN
- 클라이언트->서버: GET요청 이해하기
API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
- GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회- POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정
https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967code 로 주자는 것은 프론트와 백이 미리 정해둔 약속
GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)2-7주차
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능
Ajax 기본 골격
$.ajax({
type: "GET",// GET 방식으로 요청한다.
url: "여기에URL을입력",//요청할 url
data: {},// 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)
success: function(response){// 서버에서 준 결과를 response라는 변수에 담음
console.log(response)// 서버에서 준 결과를 이용해서 나머지 코드를 작성
}
})리마인드
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value¶m2=value2
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },
$('#names-q1').empty()ajax 앞에 이거 붙여주고 시작하면, 버튼 누를때마다 이어 붙이는게 아니라 업데이트 되는 것처럼 보임
let temp_html = ''
if (gu_mise > 70) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html);미세먼지에 따라 CSS 적용가능
- 이미지 바꾸기 : `$("#아이디값").attr("src", 이미지URL);`
- 텍스트 바꾸기 : `$("#아이디값").text("바꾸고 싶은 텍스트");`이미지와 텍스트 바꾸는 ajax
$(document).ready(function(){
alert('다 로딩됐다!')
});현재 기온 만드는 부분
버튼으로 클릭하는 것이 아니라 로딩이 완료되면 그 즉시 ajax콜을 해서 가져오는것 아직 안배움
임시로 로딩이 완료되면 alert 뜨게 해서 만듦.
alert부분에 ajax붙여서 사용
