웹개발 종합반 리부트 - 2주 차

Jony·2023년 3월 13일
개발일지웹웹개발
0

[웹개발종합반 리부트!]

목록 보기
3/7
post-thumbnail

JQuery

-> HTML의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 것.
HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리이다.
jQuery는 클라이언트 측 HTML 스크립팅을 간소화하기 위해 고안된 크로스 플랫폼 자바스크립트 라이브러리이다.
jQuery는 빠르고, 작고, 기능이 풍부한 자바스크립트 라이브러리다.
jQuery는 여러 브라우저에서 동작하는 사용하기 쉬운 API를 통해 HTML 문서 탐색과 조작, 이벤트 처리, 애니메이션, Ajax 등을 훨씬 더 간단하게 만들어줍니다.

JQuery는 Javascript와 다른 소프트웨어가 아니라 미리 작성된 Javascript코드이다. 미리 짜둔 코드를 가져와 사용하는 것이다.(쓰기 전, "임포트"를 해야한다!)

ex)

Javascript

document.getElementById("element").style.display = "none"

->
JQuery

$('#element').hide()

Jquery 사용하기
미리 작성된 javascript 코드를 가져오는 것을 "임포트"라 부른다.

JQuery CDN https://www.w3schools.com/jquery/jquery_get_started.asp

<head.></head.> 사이에 넣으면 된다.
'script.src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"</script.> 형태로 삽입된다.'

예제로 알아보는게 쉬울듯 하다.

ex)

<!doctype html>
<html lang="ko">

<head>
   <meta charset="UTF-8">
   <title>jQuery 연습하고 가기!</title>

   <!-- JQuery를 import 합니다 -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <style type="text/css">
      div.question-box {
         margin: 10px 0 20px 0;
     }
  </style>

  <script>
    function q1() {
        // 1. input-q1의 입력값을 가져온다.
        let value = $('#input-q1').val();
        // 2. 만약 입력값이 빈칸이면 if(입력값=='')
        if (value == '') {
            // 3. alert('입력하세요!') 띄우기
            alert('입력하세요!');
        } else {
            // 4. alert(입력값) 띄우기
            alert(value);
        }
    }

    function q2() {
        // 1. input-q2 값을 가져온다.
        let email = $('#input-q2').val();
        // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
        if (email.includes('@')) {
            // 3. info@gmail.com -> gmail 만 추출해서
            // 4. alert(도메인 값);으로 띄우기
            let domainWithDot = email.split('@')[1];
            let onlyDomain = domainWithDot.split('.')[0];
            alert(onlyDomain);
        } else {
          // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
            alert('이메일이 아닙니다.');
        }
    }

    function q3() {
        // 1. input-q3 값을 가져온다.
        let newName = $('#input-q3').val();
        if (newName == '') {
            alert('이름을 입력하세요');
            return;
        }
        // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
        let temp_html = `<li>${newName}</li>`;
        // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
        $('#names-q3').append(temp_html);
    }

    function q3_remove() {
        // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
        $('#names-q3').empty();
    }

    </script>

</head>

  <body>
   <h1>jQuery + Javascript의 조합을 연습하자!</h1>

   <div class="question-box">
     <h2>1. 빈칸 체크 함수 만들기</h2>
     <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
     <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
    <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
  </div>
<hr />
<div class="question-box">
    <h2>2. 이메일 판별 함수 만들기</h2>
    <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
    <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
    <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
    <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
    <h2>3. HTML 붙이기/지우기 연습</h2>
    <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
    <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
    <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
    <button onclick="q3()">이름 붙이기</button>
    <button onclick="q3_remove()">다지우기</button>
    <ul id="names-q3">
        <li>세종대왕</li>
        <li>임꺽정</li>
    </ul>
  </div>
</body>

</html>

JQuery 사용방법
id 값을 통해 특정 버튼/인풋박스/div/..등을 가리켜 사용하면 됩니다.
<css에서는 class를 사용했다.>

('#input-q1').val()('#names-q3').val('색')

#input-q1') → 'input-q1을 지칭하는 부분'
val('') → 해당부분을 처리해라
val은 input 텍스트만 변경함.

  • .show() 보여줘
    -> $('#post-box').show()
  • .hide() 숨겨줘
    -> $('#post-box').hide()
  • .css('margin') 여백값은?
    -> $('#post-box').css('margin')

.text는 input이 아닌곳도 가능하다.
-> $('#post-box').text('우주')

  • function open_box() {
    alert('박스 열기')
    }
  • function close_box() {
    alert('박스 닫기')
    }
  • function open_box() {
    $('#post-box').show()
    }
  • function close_box() {
    $('#post-box').hide()
    }
    코드를 하나씩 console에서 확인해가며 하는 것이 더 원활하게 수행할 수 있다.
    -> console.log()

서버-클라이언트 통신

Json
-> key:value로 구성되어 있다.
자료형 dictionary와 매우 유사하다.

  • 서버=>클라이언트
    ex)

  • 클라이언트=>서버(GET 요청)

API란? 은행 창구와 같은 역할을 한다고 보면 된다.

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재한다.

  • GET → 통상적으로! 데이터 조회(Read)를 요청할 때
    예) 영화 목록 조회
  • POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
    예) 회원가입, 회원탈퇴, 비밀번호 수정

2주 차엔 GET 방식 먼저 배우고 POST는 4주차에 배운다.

GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8
위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)

Ajax

->JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다.
쉽게 말하자면 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.
jquery를 임포트한 페이지에서만 동작 가능하다.
임포트가 되있지 않은 상태에선
Uncaught TypeError: $.ajax is not a function (ajax가 없다) 와 같은 에러가 뜬다.

Ajax 기본 골격

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

=> 

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

코드 해설
type: "GET" -> GET방식으로 요청한다.
url: 요청할 url
data: 요청하면서 함께 줄 데이터(GET 요청시엔 비워둔다.)
success: 성공하면,response 값에 서버의 결과 값을 담아서 함수를 실행한다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) 
}

ex) 결과값 이용하기

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

=>

  • 개발자 도구 콘솔 찍어보기

    $.ajax({
  type: "GET",
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {},
  success: function(response){
	// 값 중 도봉구의 미세먼지 값만 가져와보기
	let dobong = response["RealtimeCityAir"]["row"][11];
	let gu_name = dobong['MSRSTE_NM'];
	let gu_mise = dobong['IDEX_MVL'];
	console.log(gu_name, gu_mise);
  }
})

    =>

  • 모든 값 찍어보기

    반복문: for l(let i = 0; i < rows.length; i++) {}

    	$.ajax({
	     type: "GET",
     url: "http://spartacodingclub.shop/sparta_api/seoulair",
	     data: {},
	      success: function (response) {
            let mise_list = response["RealtimeCityAir"]["row"];
            for (let i = 0; i < mise_list.length; i++) {
            let mise = ise_list[i];
            let gu_name =mise["MSRSTE_NM"];
            let gu_mise =mise["IDEX_MVL"];
            console.log(gu_name, gu_mise);
          }
        }
      })
profile
Jony
알면 알수록 모르는 코생태계
이전 포스트

웹개발 종합반 리부트 - 1주 차

다음 포스트

웹개발 종합반 리부트 - 3주 차

0개의 댓글