[TIL] 웹개발 종합반 2주차

3 분 소요

웹개발 종합반 2주차

  • Javascript, JQuery, Fetch
    -. Javascript : 웹을 움직이게 하는 코드
    -. JQuery : html 뼈대를 선택해서 쉽게 조작할 수 있다.
    -. Fetch : 짧은 코드로 요청을 보내고 받아올 수 있다.

  • 리스트 & 딕셔너리
    -. 리스트 : 순서를 지켜서 가지고 있는 형태
    -. 딕셔너리 : 키(key)-밸류(value) 값의 묶음

  • Jquery
    -. HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것, 라이브러리!
    -. document.getElementById(“element”).style.display = “none”;
    $(‘#element’).hide(); 와 동일

  • .html()
    -. $(셀렉터).html() : 셀렉터 하위에 있는 자식 태그들을 태그나 문자열 따질 것 없이 전부 가져온다. 
          <script>
          $(function() {
              var word = $("#name").html();
              alert(word);
          }); 
      </script>
      </head>
      <body>
          <div id="name">
              <span>안녕하세요.</span>
          </div>
      </body>
      <!-- 결과 : <span>안녕하세요.</span>-->
  • .text()
    -. $(셀렉터).text() : 셀렉터 하위에 있는 자식 태그들의 문자열만 출력 
          <script>
          $(function() {
              var word = $("#name").text();
              alert(word);
          }); 
      </script>
      </head>
      <body>
          <div id="name">
              <span>안녕하세요.</span>
          </div>
      </body>
      <!-- 결과 : 안녕하세요.-->
  • .val()
    -. $(셀렉터).val() : input 태그에 정의된 value 속성의 값을 확인하고자 할 때 사용 
          <script>
          $(function() {
              var word = $("#name").val();
              alert(word);
          }); 
      </script>
      </head>
      <body>
          <div>
              <input id="nane" type="text" value="텍스트">
          </div>
      </body>
      <!-- 결과 : 텍스트.-->


  • 반복문
      <script>
      let fruits = ['사과, '배', '감', '귤']
      fruits.forEach((a) => {
          console.log(a)
      }) 
  </script>


  • Jquery - append()
      <script>
      let temp_html = `<p>영수는 24살</p>`;
      $('#q3').append(temp_html);
  </script>

    -. 원하는 html 태그를 백틱(``)으로 묶어주기
    -. 태그 안에 들어갈 값은 ${} 로 표시하고, 그 안에는 자료가 있는 변수 넣어주기
    -. 통째로 넣을 html 요소를 $(‘#아이디’)로 골라주고 append(변수) 넣어주기

  • Jquery - empty()
    -. .empty()는 선택한 요소의 내용을 지운다. 내용만 지울 뿐 태그는 남아있다.

  • GET
    -. 통상적으로 데이터 조회(Read)를 요청할 때 (예. 영화 목록 조회)

  • POST
    -. 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 (예. 회원가입, 회원탈퇴, 비밀번호 수정)

  • Fetch 기본 골격 
      <script>
     fetch(" URL ").then(res => res.json()).then(data => { console.log(data)
     })
  </script>

2주차 숙제 : 실시간 서울 날씨 API 적용하기

<!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>
        @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');

        * {
            font-family: 'Gowun Dodum', sans-serif;
        }

        .mytitle {
            background-color: green;
            color: white;
            height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;
        }

        .mytitle>button {
            width: 250px;
            height: 50px;
            background-color: transparent;
            border: 1px solid white;
            color: white;
            border-radius: 50px;
            margin-top: 20px;
        }

        .mytitle>button:hover {
            border: 2px solid white;
        }

        .mycomment {
            color: gray;
        }

        .mycards {
            width: 1200px;
            margin: 20px auto 20px auto;
        }

        .mypost {
            width: 500px;
            margin: 20px auto 20px auto;
            padding: 20px 20px 20px 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }

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

        .mybtn>button {
            margin-right: 10px;
        }
    </style>
  <script>
        $(document).ready(function () {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                console.log(data['temp'])
                let tmp = data['temp'];
                $('#temp').text(tmp);
            })
        })
    </script>
</head>

<body>
<div class="mytitle">
  <h1>내 생애 최고의 영화들</h1>
  <div>현재 서울의 날씨 : <span id="temp">{tmp}</span>도</div>
  <button>영화 기록하기</button>
</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">영화URL</label>
  </div>
  <div class="input-group mb-3">
    <label class="input-group-text" for="inputGroupSelect01">별점</label>
    <select class="form-select" id="inputGroupSelect01">
      <option selected>-- 선택하기 --</option>
      <option value="1">⭐</option>
      <option value="2">⭐⭐</option>
      <option value="3">⭐⭐⭐</option>
      <option value="4">⭐⭐⭐⭐</option>
      <option value="5">⭐⭐⭐⭐⭐</option>
    </select>
  </div>
  <div class="form-floating">
    <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
    <label for="floatingTextarea">코멘트</label>
  </div>
  <div class="mybtn">
    <button type="button" class="btn btn-dark">기록하기</button>
    <button type="button" class="btn btn-outline-dark">닫기</button>
  </div>
</div>
<div class="mycards">
  <div class="row row-cols-1 row-cols-md-4 g-4">
    <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">영화 제목이 들어갑니다.</h5>
          <p class="card-text">여기에 코멘트가 들어갑니다.</p>
          <p>⭐⭐⭐</p>
          <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
        </div>
      </div>
    </div>
    <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">영화 제목이 들어갑니다.</h5>
          <p class="card-text">여기에 코멘트가 들어갑니다.</p>
          <p>⭐⭐⭐</p>
          <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
        </div>
      </div>
    </div>
    <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">영화 제목이 들어갑니다.</h5>
          <p class="card-text">여기에 코멘트가 들어갑니다.</p>
          <p>⭐⭐⭐</p>
          <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
        </div>
      </div>
    </div>
    <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">영화 제목이 들어갑니다.</h5>
          <p class="card-text">여기에 코멘트가 들어갑니다.</p>
          <p>⭐⭐⭐</p>
          <p class="mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
        </div>
      </div>
    </div>
  </div>
</div>

카테고리:

업데이트:

댓글남기기

참고