22.09.23 2주차 웹개발 개발일지

서유정·2022년 9월 23일
0

JQuery

: HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔것.
->Javascript로 할 수 있지만 코드가 복잡하고, 브라우저간 호환성 문제도 고려해봐야 해서 JQuery가 출현.
css (class)와 마찬가지로 JQuery (id)를 쓸 때도 '가리켜야' 조작 가능.

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

    계속 볼 수록 재미있긴한데 머리가 점점 아파온다. ㅎㅎ
    필요한 기능의 JQuery를 구글링 해서 사용 가능! 복습하면서 찾아보자.

input 박스값 가져오기

<div class="form-floating mb-3">
	<input id="url" type="email" class="form-control" placeholder="name@example.com">
	<label>영화URL</label>
</div>
console창

$('#url').val();
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.

div 숨기기 / 보이기

<div class="mypost" id="post-box">
<button onclick="open_box()">영화 기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
console창

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();

div를 움직이고 싶은거이니 div에 id 설정!

포스팅 박스 제어하기.

function open_box(){
	$('#post-box').show()
}
function close_box(){
	$('#post-box').hide()
}

연습 코드 1번

<!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>

서버 - 클라이언트

  • 서버-> 클라이언트 :JSON 이해
    JSON -> key : value 로 이루어짐
  • 클라이언트-> 서버 : GET 요청 이해
    API : 창구
    요청할때 타입 두가지
  1. GET : 데이터 조회 요청할때
  2. POST : 데이터 생성, 변경, 삭제 요청할때

*GET 방식
? : 이후부터 전달 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 것을 의미

Ajax

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

*POST 요청 -> data : {param:'value', param2: 'value2'}

Ajax는 JQuery를 임포트한 페이지에서만 동작 가능.
-> 임포트 x => 에러발생.

Ajax 더 공부하기!
머리가 너무 아프다. 모양 더 보고 분석해보자. 문제 연습 계속 해보자구

profile
안녕하세요. 백엔드 개발자가 되고싶은 학생입니다.

0개의 댓글