공부/웹개발 종합(사전준비)

CSS기초(띵동코딩)2 - 2

뀨뿌뀨뿌 2023. 6. 3. 14:13

1. jQuery 란?

  • 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집의 형태
  • 장점
    • 코드의 가독성이 좋음
    • 자바스크립트를 모두 알 필요 없이도 웹 사이트 제작을 용이하게 해줌
  • 사용하는 방법
    • JQuery 사용을 선언하고 이름표를 붙여주고 이름을 가리키고 원하는 동작을 입력하면됨
      1. jQuery CDN 부분을 참고해서 <head>태그 안에 입력해서 사용을 선언함
      2. id를 사용하여 이름을 붙여줌
      3. $(id).원하는 동작

2.jQuery 기초

ⅰ. jQuery 기본 문법

  • 값 가져오기, 없애기, 보이기, HTML 가져와서 붙이기
// 값 가져오기
$('설정한 id값').val();

// 없애기 보이기
$('설정한 id값').hide();
$('설정한 id값').show();

// HTML 가져와서 붙이기
let name = $('설정한 id값').val();
let temp_html = `<li>${name}</li>`;
$('설정한 id값').append(temp_html);
  • 이메일로 로그인 하기 버튼 누르면 로그인 창 보이게 하기
더보기
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>띵동코딩 - 로그인</title>
    <style>
        * {
            font-family: "Pretendard",serif;
        }
        .wrap {
            display: flex; flex-direction: column;
            justify-content: center;  align-items: center;
            width: 300px;
            margin: 70px auto auto auto;
            padding: 80px 50px 50px 50px;
            border: 1px solid lightgray;
            border-radius: 8px;
        }
        .wrap > img {
            width: 90px;
            height: 46px;
            margin-bottom: 30px;
            margin-right: auto;
        }
        .wrap > p {
            font-size: 24px;
            color: #26343d;
            margin-right: auto;
            line-height: 1.5;
            margin-top: 10px;
        }
        .wrap > button {
            width: 320px;
            height: 60px;
            border-radius: 8px;
            border: none;
            background-color: #ffe237;
            cursor: pointer;
            color: #1c1d1e;
            font-size: 16px;
            font-weight: bold;
            margin-top: 50px;
            margin-bottom: 25px;
        }
        .wrap > span {
            color: #26343d;
            font-size: 14px;
            cursor: pointer;
        }
        .email {
            display: none;
        }
        .email > p {
            margin-right: auto;
            font-weight: bold;
        }
        .email > input {
            width: 292px;
            height: 20px;
            font-size: 16px;
            border-radius: 8px;
            padding: 12px;
            border: 1px solid rgb(219, 221, 224);
        }
        .email > button {
            width: 320px;
            height: 60px;
            background-color: lightgray;
            border-radius: 8px;
            cursor: pointer;
            font-weight: bold;
            font-size: 16px;
            border: none;
            margin-top: 60px;
            margin-bottom: 30px;
            color: white;
            margin-top: 20px;
            margin-bottom: 20px;
            background-color: black;
            color: white;
        }
        .email > span {
            font-size: 14px;
            color: rgb(38, 52, 61);
            display: block;
            text-align: center;
        }
    </style>
    <script>
      // email 로그인 입력창 보여주기
      function openEmail() {
        $("#emailBox").show()
      }
      // input에 담아오는 내용 보여주기
      console.log("#emailLogin").val()
      // 버튼 여러개 만들기
      // let temp_html = `<button>로그인하기</button>`;
      // $("#emailBox").append(temp_html)
    </script>
</head>
<body>
    <div class="wrap">
        <p>
            매주 월요일,<br/>
            내 강의실에 찾아오는<br/>
            코딩 학습지
        </p>
        <button>카카오로 1초만에 시작하기</button>
        <span onclick="openEmail()">이메일로 시작하기</span>
        <div id="emailBox" class="email">
            <p>이메일</p>
            <input id="emailLogin" type="text" placeholder="이메일 주소를 입력해주세요">
            <button>로그인하기</button>
            <span>이메일이 기억나지 않아요.</span>
        </div>
    </div>
</body>
</html>
  • 이메일을 올바르게 입력했는지 확인하기
      ...............
      
      function login() {
        let email = $("#emailLogin").val()
        if(email === '') {
          alert("이메일을 입력해주세요")
        } else {
          if(email.includes("@") === true) {
            alert("로그인을 시도합니다.")
          } else {
            alert("이메일 형식이 아닙니다.")
          }
        }
      }
      
      ...........
          <button onclick="login()">로그인하기</button>
        .........
  • 올바른 이메일이 입력되면 색을 gray로 바꾸고 로그인하기 글자 바꾸기
       .................
      
      function login() {
        let email = $("#emailLogin").val();
        if (email === "") {
          alert("이메일을 입력해주세요");
        } else {
          if (email.includes("@") === true) {
            $("#btnLogin").text("로그인 중입니다");
            $("#btnLogin").css("background-color", "gray");
          } else {
            alert("이메일 형식이 아닙니다.");
          }
        }
      }
      
      .............
      <button id="btnLogin" onclick="login()">로그인하기</button>
      .............
  • 로그인 버튼 누르면 input 버튼 없애기
      ................
      function login() {
        let email = $("#emailLogin").val();
        if (email === "") {
          alert("이메일을 입력해주세요");
        } else {
          if (email.includes("@") === true) {
            $("#btnLogin").text("로그인 중입니다");
            $("#btnLogin").css("background-color", "gray");
            $("emailLogin").hide();
          } else {
            alert("이메일 형식이 아닙니다.");
          }
        }
      }
      .....................

3.  서버와 통신하기

  • 서버와 통신 한다는 것은, 데이터를 보내주고 가져온다는 것을 의미함
    => 어딘가로부터 데이터를 가져온다는 것!!

ⅰ. fetch

  • fetch 사용하는 방법
    • fetch의 기본 골격을 작성
    • 호출할 정보를 가져올 파일경로 또는 URL 경로 작성
    • 호출 성공하면 불러올 정보 조건 작성
// fetch의 기본 골격
// 경로 부분에 URL입력
fetch("경로").then(res => res.json()).then((data) => {
    console.log(data);
})

❌ Json이란?
✔ 데이터를 주고 받을 때 쓰는 객체 형태(key: value)의 데이터 구조

  • fetch 사용하여 서울시의 각 구의 미세먼지 데이터 가져오기
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>띵동코딩 - fetch 연습</title>
    <style>
      .client {
        margin: 10px 10px;
      }
    </style>
    <script>
      function mise() {
      // empty()를 활용하여 먼저 빈값으로 만들기
        $("#city").empty()
        let url =
          "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99";
        fetch(url)
          .then((res) => res.json())
          .then((data) => {
          // 가져온 데이터를 rows에 반환받기
            let rows = data["RealtimeCityAir"]["row"];
            for (let i = 0; i < rows.length; i++) {
              let gu = rows[i]["MSRSTE_NM"];  // 모든 구이름
              let value = rows[i]["IDEX_MVL"];  // 모든 구의 미세먼지 정도
              let status = rows[i]["IDEX_NM"];  // 미세먼지 단계
              
              // append를 활용하여 가져온 데이터 붙이기
              let temp_html = `<li>${gu}: ${value} (${status})</li>`
              $("#city").append(temp_html)
            }
          });
      }
    </script>
  </head>

  <body>
    <div>
      <button onclick="mise()">미세먼지 정보</button>
      <div class="client">지역별</div>
      <ul id="city">
        <li>용산구 : 80</li>
        <li>동작구 : 29</li>
        <li>도봉구 : 58</li>
      </ul>
    </div>
  </body>
</html>

 

저작자표시

'공부 > 웹개발 종합(사전준비)' 카테고리의 다른 글

CSS기초(띵동코딩)3  (0) 2023.06.03
CSS기초(띵동코딩)2 - 3  (0) 2023.06.03
CSS기초(띵동코딩)2 - 1  (0) 2023.06.02
CSS기초(띵동코딩) 1 - 2  (0) 2023.06.02
CSS기초(띵동코딩) 1 - 1  (1) 2023.06.01

'공부/웹개발 종합(사전준비)'의 다른글

  • 현재글CSS기초(띵동코딩)2 - 2

관련글

티스토리툴바