[Week 2] javascript JQuery Ajax

9681 단어 JavaScriptwebWILhtmlJavaScript
  1. javascript 복습
  2. JQuery
  3. JSON
  4. 클라이언트-서버: GET / POST
  5. AJax

javascript 복습

<title> 
	<script> Javascript [변수 / 기본연산 / 리스트 / 딕셔너리 / 함수] </script>	
</title>
<body>
Javascript를 적용할 코드
</body>
예시 : 짝/홀수에 따라 다른 얼럿 띄우는 onclick 함수
<head>
    <script>
        let count = 1;
        function hey() {
            if (count % 2 == 0) {
                alert('짝짝짝👏');
            } else {
                alert('홀홀홀🎅');
            }
            count += 1;
        }
    </script>
</head>
<body>
	<button onclick="hey()" class="first">Click</button>
</body>

JQuery

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리

임포트 : 미리 작성된 Javascript 코드를 가져오는 것

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

JQuery - id 값을 통해 특정 버튼/인풋박스/div 등을 가리킴

JQuery 적용 : 나홀로메모장 포스트박스 열기/닫기 기능

JSON 서버-클라이언트

크롬 익스텐션 JSONVIEW 설치

Key:Value

JSON?
avaScript Object Notation (JSON)은 Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준 포맷

클라이언트 --> 서버에 요청하여 데이터 조회, 생성, 변경, 삭제

  • GET : 데이터 조회(Read)
  • POST : 데이터 생성(Create), 변경(Update), 삭제(Delete)

GET 방식으로 데이터를 전달하는 방법

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달

? : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

키워드의미
q=아이폰검색어
sourceid=chrome브라우저 정보
ie=UTF-8인코딩 정보

AJax

AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다.

주요 특징
  • 페이지 새로고침 없이 서버에 요청
  • 서버로부터 데이터를 받고 작업을 수행

    출처: MDN Web Docs

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

Ajax 코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

복습) 미세먼지 데이터 어디에 있는지 찾기

$.ajax({
  type: "GET",
  url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
  data: {},
  success: function(response){
		let mise_list = response["RealtimeCityAir"]["row"]; // 꺼내는 부분!
		console.log(mise_list);
  }
})

후기)

Javascript, JQuery, Ajax. 강의를 보면서 헷갈렸는데 정리하면서 구분해본다.

항목의미
Javascript프로그래밍 언어
JQueryJavascript Library
AJax빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법

개발자들의 블로그란 알면 알수록 쓰면 쓸수록 재밌다.
[WIL] 강의 내용을 정리하면서 요건 좀 표를 만들었으면 좋겠는데? 이건 태그를 적용해볼까? 하면서 넣어보니 다이어리를 꾸미는 듯한 기분이 들었다.

강의를 보면서 해도 조금 헤매고 잘 안되는 부분이 많았다. 복습하면서 내 것으로 만들기 위해 노력할 것!
그리고 항상 오타에 주의할 것..
똑같이 했는데 왜 안되지? 했을 때 70%는 오타가 그 이유인 경우가 많다. 오타주의 오타주의

밖엔 눈이 오고 있다.
포스팅 하나하면서도 다시 복습하는 겸 작성하느라 생각 외로 오래 걸렸다. 다시 강의들으러 고고!

자바 스크립트에서 파일 업로드 유효성 검사
사내 LT 발표 내용 요약 "JAMstack은~CMS 진화의 역사~"

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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