웹 개발 기초 2주차

7199 단어 JavaScriptjqueryAPIajaxAPI

2주차 수업은 jQuery와 Ajax에 익숙해지는 시간을 가졌다. Ajax 등 듣기는 많이 들었지만 한번도 사용해보지 않았던 것들을 활용해보는 시간을 가졌다.

👉jQuery란?

-html의 요소들을 조작하는 편리한 javascript를 미리 작성해둔 라이브러리이다.
So import를 해줘야한다.

-Javascript를 이용하면 document.getElementById("element").style.display = "none";
이렇게 길게 작성해야할 코드가, jQuery를 사용하는 경우 $('#element').hide(); 처럼 직관적이고 짧아질 수 있다.

jQuery 시용하기 위해서는
"<"script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script">"
코드를 import해줘야한다.

1.jQuery 사용방법
css에서 선택자로 class를 사용했듯이, jQuery에서 id 값을 통해 특정 태그 값을 가리키게 된다.

2.자주 사용되는 jQuery
1) input 박스 값 가져오기
input박스의 id 값을 가리키고, val()로 값을 가져옴 (ex. $('#post-url').val();)

2) div 숨기기 , 보이기
숨기기: div 그룹의 id 값을 가리키고, hide();(=css의 display 값을 none으로 바꾸는 작업)(ex.('#post-box').hide(); ) 보이기: 그룹의 id 값을 가리키고, show();(=css의 display 값을 block으로 바꾸는 작업)(ex.('#post-box').hide();
)

3) css의 값 가져오기
ex.display값 가져오기 : $('#post-box').css('display');
4) 태그 내 텍스트 입력하기
1)input box의 경우 : $('#post-url').val('텍스트 입력');
2)태그의 텍스트 바꾸기 : $('#btn-posting-box').text('포스팅 박스 닫기');

5) 태그 내 html 입력하기

<div id="cards-box" class="card-columns">

</div>
1)div 태그 안에 버튼 넣어보기 
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
2)div 태그 안에 카드 넣어보기
// 주의: backtick(`)으로 감싸야 함.backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있게 됨.

let img_url = 'https://www.~~~.jpg';
let link_url = 'https://naver.com/';
let title = '여기는 기사 제목';
let desc = '기사의 요약 내용...';
let comment = '여기는 코멘트';

let temp_html = `


                  <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);

3.서버-클라이언트 통신 이해하기

1)서버->클라이언트 : "JSON"이해하기
json은 딕셔너리와 유사하게 key와 value로 이루어져있음

2)클라이언트->서버: "GET요청"이해하기
API에는 타입이 존재함
그래서 클라이언트가 요청할 때에도 Get 요청과 Post요청으로 나뉜다.

🔹Get 방식: 데이터 조회(Read)를 요청할 때 사용 ex.영화 목록 조회
(cf. Post 방식: 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때 사용 ex.회원가입, 회원탈퇴, 비밀번호 수정 나중 포스팅에서 다시 살펴봄)

🔹Get방식 데이터 전달 방법
주소 'https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967'에서
? : 여기부터 전달 할 데이터가 작성 됨
& : 전달할 데이터가 더 있음을 뜻함 ex.google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

4.Ajax
Ajax또한 jQuery를 임포트한 페이지에서 동작 가능함

1)기본 골격
✔ $.ajax({
type: "GET", // Get방식으로 요청
url: "여기에URL을입력",
data: {}, // 요청시 함께 줄 데이터 (Get요청시 비워둠)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 어떻게 활용할지 작성
}
})

cf. data : get 요청은 url의 ? 뒤에 붙여서 데이터를 가져감
post 요청은 Ajax 코드의 data:{}에 넣어서 데이터를 가져감

success : 성공시, response값에 서버의 결과 값을 담아 함수 실행 
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음

console.log(response)
}

<회고>
jquery , ajax 개념에 대해서 처음으로 학습하였는데 내가 웹상에서 물건을 사거나, 회원정보 수정을 하는 등 다양하게 활용된 데이터가 어떤식으로 관리되는지 알 수 있는 시간이었다. 앞으로 다양한 데이터를 응용하며 흐름을 잘 익혀야겠다.

CK week2 day5
Position- static,relative,absolute,fixed

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage