ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • [개발일지] 웹개발 종합반 2주
      Study/Development 2022. 7. 23. 20:38

      <스파르타코딩 웹개발종합반 수강일지>

      웹개발 종합반 2주차 수강

       

      수업내용: 웹 - Jquery / Ajax

       

      1. Jquery를 이용하여 id를 선택하고 html 태그를 동적으로 조작하는 방법 학습

      2. Ajax를 이용하여 외부에서 데이터를 불러와 나의 웹페이지에 반영하고, 그것을 동적으로 재구성하는 방법 학습

       

      Ajax와 JSON에 대해 잘 모르고 있었는데, 조금 더 정확히 알게 된 것 같다.

       

      <과제>

      팬명록 페이지에 Jquery / Ajax 이용하여 외부에서 불러온 날씨정보(온도) 표시하기

       

      <기억할것들>

       

      1. 자주 쓰는 Jquery 기본함수

       - 알아두면 편한 기본함수들

      // 나타내기
$('#element').show(); 

// 숨기기
$('#element').hide(); 

// HTML 태그 내부에 content 추가하기, HTML 태그도 추가 가능
$('#element').append('content'); 

// HTML 태그 내부 비우기
$('#element').empty(); 

// input 값 가져오기
$('#element').val();

// HTML 태그의 속성 제어하기
$('#element').attr('key','value');

// HTML 태그의 텍스트 변경하기
$('#element').text('content');

       


      2. append() 로 html 추가하기

       - 변수를 만들어 추가한다.

      let temp_html = `<button>나는 추가될 버튼이다!</button>`;
$('#cards-box').append(temp_html);

       

      - 백틱과, ${}를 이용하여 Jquery 변수를 웹페이지에 노출시킬 수 있다.

      // 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

       

       

      3. JSON

       - Dictionary와 유사하며, Key:Value로 이루어져 있다.

       

      *요청 타입

       - GET: 데이터 조회(Read) 요청

       - POST: 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청

       

       

      4. Ajax 기본 골격

       - url을 입력하고, 아래 function 내에서 response의 데이터를 이용한다.

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


//Ajax 코드 해설

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

       

       

      5. Ajax와 for문

       - 자료 내의 모든 값을 불러온다

      $.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 = mise_list[i];
      let gu_name = mise["MSRSTE_NM"];
      let gu_mise = mise["IDEX_MVL"];
      console.log(gu_name, gu_mise);
    }
  }
});

       

       

      6. 로딩 후 호출하기

       -로딩 완료 후 함수를 호출

      $(document).ready(function(){
	alert('다 로딩됐다!')
});

       

      7. 2주차 숙제

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        .mytitle {
            background-color: green;

            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://e3.365dm.com/19/09/2048x1152/skynews-sam-smith-gender-non-binary_4773202.jpg);
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .wrap {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;
        }

        .wrap div{
        margin-top: 10px;
        }

        .mypost {
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0 auto;

            box-shadow: 0 0 3px 0 gray;
            padding: 20px;

        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
        }

    </style>
    <script>
        $(document).ready(function () {
            listing();
        });


        $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
                data: {},
                success: function (response) {
                    let temp = response['temp']
                    $('#mytemp').empty()
                    $('#mytemp').append(`${temp}`)
                }
            }
        )
    </script>

</head>

<body>
    <div class="mytitle">
        <h1>샘스미스 팬명록</h1>
        <p>현재기온: <span id="mytemp">00.00</span>도</p>
    </div>

    <div class="mypost">

        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
            <label for="floatingInput">닉네임</label>
        </div>

        <div class="form-floating">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                          style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>

        <div class="mybtn">
            <button type="button" class="btn btn-dark">응원남기기</button>
        </div>

    </div>

    <div class="wrap">

        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>새로운 앨범 너무 멋져요!</p>
                    <footer class="blockquote-footer">호빵맨</footer>
                </blockquote>
            </div>
        </div>


    </div>


</body>

</html>
      반응형
      저작자표시 비영리 변경금지 (새창열림)

      'Study > Development' 카테고리의 다른 글

      [개발일지] JavaScript & JQuery 기초 수업 Level 1-1  (0) 2022.08.01
      [개발일지] 웹개발 종합반 5주  (0) 2022.07.25
      [개발일지] 웹개발 종합반 4주  (0) 2022.07.24
      [개발일지] 웹개발 종합반 3주  (0) 2022.07.24
      [개발일지] 웹개발 종합반 1주  (0) 2022.07.23

      관련글 관련글 더보기

      댓글

    © 2023. titann all rights reserved

    티스토리툴바