[15일 메이킹 프로젝트] 프로젝트 도입 전 복습 - JavaScript / jQuery / Ajax

JavaScript / jQuery / Ajax

1. Javascript란?

브라우저를 위해 만들어진 객체지향 스크립트 언어. 웹의 동작을 구현할 수 있다.

html의 내용, 속성, 스타일을 변경시킬 수 있다.

 

2. JavaScript 기초 문법

https://friedegg556.tistory.com/1

 

3. jQuery란?

- CSS 선택자를 이용해 페이지 내부 요소에 간편하게 접근.

- 자바스크립트의 코드 간편화. 

- 손쉬운 Ajax의 사용.

//jQuery의 시작 : document가 로드되었을 때 발생
$(document).ready(function() {
 //...
 });

4. jQuery 기본 문법

$(selector).action()
//$ : define jQuery
//(selector) : html element
//.action 동작

//예제
$("p").hide(); //hide all <p> elements
$('#open').hide(); //hide element id = open

5. .val() method 사용 

입력된 값을 가져오거나, 값을 설정할 수 있음.

var test = $('input#pw_1').val();
// id가 pw_1인 input 요소의 값을 변수 test에 저장

$('input#pw_1').val('i am the best');
//id가 pw_1인 input 요소의 값을 i am the best로 정함

6. Ajax란?

Asynchronous JavaScript and XML의 약자.

빠른 동적 웹페이지 구현을 위한 개발기법의 일종.

웹페이지 전체를 리로딩 하지 않고, 일부분만 갱신 가능.

 

웹 브라우저 내 이벤트 발생 -> 자바스크립트 호출 -> 리퀘스트 요청-> Ajax 요청 처리 -> 응답 생성 -> 데이터 반환 

-> html or css 데이터 받고 -> 일부 로딩

 

7. $.ajax() 메소드.

//원형
$.ajax(URL주소[,옵션])

- URL 주소 : 클라이언트가 HTTP 요청을 보낼 서버의 주소.

- 옵션 : HTTP 요청을 구성하는 키와 값의 쌍으로 구성되는 헤더의 집합.

(HTTP 요청이란? 한 컴퓨터가 무언가를 전달하기 위해 다른 컴퓨터로 보내는 정보 패킷. (패킷:네트워크를 통해 전송되는 기본 정보 단위) 

 

8. GET요청 / POST 요청

- GET : 클라이언트에서 서버로 부터 정보를 조회하기 위한 메소드. URL 주소 끝에 파라미터로 포함되어 전송되며, 이 부분을 쿼리스트링 이라고 부른다. url 끝에 ? 변수명 = value ...

- POST : 클라이언트에서 서버로 리소스 생성, 업데이트를 위한 데이터를 보낼 때 사용하는 메소드. 데이터를 body에 넣어서 보낸다.

// HTML CODE
<div class="container">
</div>

//GET 요청
function test() {
 $.ajax({
    type: "GET", // 데이터 전송 방법(GET or POST)
    url: "/test", // 요청 URL
    data: {}, //요청과 함께 서버로 데이터를 전송할 string or map
    success : function (response) { //요청이 성공했을 때 호출할 콜백 함수
    let temp = "Hello, world!"  
    let attach = `<div class = "greeting>
                     <span>${temp}</span>
                     </div>`  


    $(.container).append(attach) 
   })
   }
   //요청이 성공한다면, .container div에 .greeting span temp("Hello, world!") 를 html로 붙여라.