스파르타 코딩 클럽 내일 배움단 - 웹개발 2주차

스파르타 코딩 클럽 내일 배움단 5일차 일지

오늘로 웹개발 2주차를 마무리했다.

여기서는 JavaScript 프레임워크인 JQuery와 JQuery를 사용해 Ajax 통신을 배우게 된다.

여기까지도 내가 알고 있던 내용이라 수월하게 진행하는게 가능 했다.

 

학습 내용

1. JavaScript 복습

2. JQuery 기초

3. Ajax 기초

4. 2주차 숙제

1. JavaScript 복습

짝/홀수에 따라 경고 메세지 띄우는 onClick 함수 함께 만들기

 

스크립트

let count = 1;
function hey() {
    if (count % 2 == 0) {
        alert("짝수입니다");
    } else {
        alert("홀수입니다");
    }
    count++;
}

HTML

<p class="lead">
    <a class="btn btn-primary btn-lg" href="#" role="button" onClick="hey()">포스팅박스 열기</a>
</p>

버튼 두번 클릭했을 때

 

2. JQuery 기초

JQuery란? HTML의 요소들을 조작하는 편리한 JavaScript 코드들을 미리 작성해둔 라이브러리.

브라우저간 호환성도 고려되어 있다는 아주 큰 장점이 있다.


JQuery를 사용하려면?

<head></head> 태그 사이에 아래의 코드를 넣어야 한다.

다만 아래의 코드는 3.4.1버전에 해당한다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 

최신버전의 JQuery를 받아 사용할 때는 아래 링크에서 다운 받을 수 있다.

https://jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

 

 

자주 쓰는 jQuery 다뤄보기

input 태그의 값을 가져오기

<input id="post-url" type="email" class="form-control" aria-describedby="emailHelp" placeholder="">
// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();

 

div 보이기 / 숨기기

<div class="posting-box" id="post-box">
    <div class="form-group">
        <label for="exampleInputEmail1">아티클 URL</label>
        <input id="post-url" type="email" class="form-control" aria-describedby="emailHelp" placeholder="">
    </div>
<!-- ... CODE 생략 ... -->
</div>
// 크롬 개발자도구 콘솔창에 쳐보기
// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();

// show()로 보이게 한다.(=css의 display 값을 block으로 바꾼다)
$('#post-box').show();

 

CSS 값 가져오기

$('#post-box').hide();
$('#post-box').css('display');

$('#post-box').show();
$('#post-box').css('display');

 

태그 내 텍스트 입력하기

input 태그

$('#post-url').val('여기에 텍스트를 입력하면!');

 

그 외 태그

// 가리키고 싶은 버튼에 id 값을 준다음
<button id="btn-posting-box" type="button" class="btn btn-primary">포스팅 박스 열기</button>
$('#btn-posting-box').text('포스팅 박스 닫기');

 

태그 내 html 입력하기

// 사이에 html을 넣고 싶은 태그에 id값을 준 다음
<div id="cards-box" class="card-columns">
    <div class="card">
        <img class="card-img-top" src="https://www.fodors.com/wp-content/uploads/2018/10/4_UltimateRome_PiazzaNavona-975x650.jpg" alt="Card image cap">
        <div class="card-body">
            <a href="https://naver.com/" class="card-title">여기 기사 제목이 들어가죠</a>
            <p class="card-text">여기에 기사 내용이 들어가겠죠</p>
            <p class="card-text comment">여기엔 코멘트가 들어갑니다</p>
        </div>
    </div>
</div>

 

버튼 삽입

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

 

카드리스트 삽입

// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';

let temp_html = `<div class="card">
                    <img class="card-img-top"
                        src="${img_url}"
                        alt="Card image cap">
                    <div class="card-body">
                        <a href="${link_url}" class="card-title">${title}</a>
                        <p class="card-text">${desc}</p>
                        <p class="card-text comment">${comment}</p>
                    </div>
                </div>`;
$('#cards-box').append(temp_html);

 

3. Ajax 기초

Ajax란? 서버에서 제공하는 API데이터를 JQuery로 수신받아서 사용할 수 있는 기능

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

 

4. 2주차 숙제

기존에 만들었던 주문 페이지에 달러-원 환율 데이터를 받아와서 출력하기

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

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

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
    <style>
        @font-face {
            font-family: 'SuncheonB';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonB.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        @font-face {
            font-family: 'SuncheonR';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/SuncheonR.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

        * {
            font-family: 'SuncheonR';
            font-size: 24px;
        }

        .wrap {
            width: 800px;
            margin: 0 auto;
        }

        .image {
            width: 100%;
        }

        h1 {
            font-size: 36px;
            font-weight: bold;
            font-family: 'SuncheonB';
            margin-top: 20px;
        }

        h1 span {
            margin-left: 20px;
            font-size: 30px;
        }

        p {
            text-align: left;
        }

        .button-wrap {
            width: 100%;
            text-align: center;
            padding-bottom: 20px;
        }

        button {
            margin: 0 auto;
        }

        .doller {
            color: #a36767;
        }
    </style>
    <script>
        $(document).ready(function() {
            getData();
        });

        function getData() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rate",
                data: {},
                success: function (response) {
                    let rate = response.rate;
                    $("#data-rate").text(rate)
                }
            })
        }

        function btnClick() {
            alert("주문 완료")
        }
    </script>
</head>

<body>
    <div class="wrap">
        <img class="image" src="https://cdn.pixabay.com/photo/2021/09/24/10/00/chick-6652163_960_720.jpg" alt="chick">
        <h1>병아리 분양<span>가격 : 1,000원 / 마리</span></h1>
        <p>이 병아리는 특별한 힘을 가지고 있어요. 한달이면 닭이 된답니다.</p>
        <p class="doller">달러-원 환율: <span id="data-rate"></span></p>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">주문자 이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="form-group">
          <select class="form-control" id="exampleFormControlSelect1">
            <option>수량을 선택하세요</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon2">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon2">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon3">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Username" aria-describedby="basic-addon3">
        </div>
        <div class="button-wrap">
            <button type="button" class="btn btn-primary" onClick="btnClick()">주문하기</button>
        </div>
    </div>
</body>

</html>

 

'일기 > 스파르타코딩클럽' 카테고리의 다른 글

스파르타 코딩 클럽 내일 배움단 - 앱개발 3주차  (0) 2022.03.28
스파르타 코딩 클럽 내일 배움단 - 웹개발 3주차  (0) 2022.03.27
스파르타 코딩 클럽 내일 배움단 - 앱개발 2주차  (0) 2022.03.24
스파르타 코딩 클럽 내일 배움단 - 웹개발 1주차  (0) 2022.03.23
스파르타 코딩 클럽 내일 배움단 - 앱개발 1주차  (0) 2022.03.22

+ Recent posts

티스토리툴바