F/Eプログラミング独学器(2)


第2週コアコンテンツ

  • jQueryの概念と用法
  • Ajaxの概念と使い方
  • Javascript基礎文法復習
  • jQueryって何?

  • jQueryはオープンソースベースのJavaScriptライブラリであり、JavaScript言語の使用を簡略化しています.
  • Javascriptは他の(!=)ソフトウェアとは異なり、あらかじめ作成されたJavascriptコードを想像してみてください!(==)
  • 主にコード
  • 「id値」を使用します.
  • 使用するjQuery文...


  • コンソールから値を取得するには、$('#id값').val( );

  • 初期化値:$('#id값').empty();

  • 既存の要素に新しいコンテンツを追加する方法:$('id값').append();

  • Javascriptロード直後実行:$(document).ready(function() { 제이쿼리 코드; });....... 他にも...
    これらの文は暗記ではなく、「認知」してスキップします!
    △グーグルはいつでもどこでも見つけられる!!!
  • Ajaxとは?


  • AjaxはJavaScriptのライブラリの1つで、非同期JavaScriptとXMLの略です.

  • JavaScriptを使用して非同期通信を行い、クライアントとサーバの間でXMLデータを交換する技術.
    詳しい勉強は基礎授業が終わってから一つ一つ読みましょう.まず基礎概念から始めましょう.
  • Javascritp基礎文法(復習)


    反復文の基礎式

  • let 변수A = response['B']['C']        - list 'B' 안에있는 'C'값을 변수A로 지정해라
    for (let i < 0; i < A.length; i++){}   - i가 0부터 변수A까지 하나씩 증가해라 ```
  • 基本フレームワークは変更されません。参考までに!


    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>
    
        <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    
        <style>
            * {
                font-family: 'Jua', sans-serif;
            }
    
            .item-img {
                width: 500px;
                height: 300px;
    
                background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG");
                background-position: center;
                background-size: cover;
            }
    
            .price {
                font-size: 20px;
            }
    
            .item-desc {
                width: 500px;
                margin-top: 20px;
                margin-bottom: 20px;
            }
    
            .item-order {
                width: 500px;
            }
    
            .btn-order {
                margin: auto;
                width: 100px;
    
                display: block;
            }
    
            .wrap {
                width: 500px;
                margin: auto;
            }
    
            .rate {
                color: blue;
            }
        </style>
    
        <script>
            $(document).ready(function () {
                get_rate();
            });
    
            function get_rate(){
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/rate",
                    data: {},
                    success: function (response) {
                        let now_rate = response['rate'];
                        $('#now-rate').text(now_rate);
                    }
                })
            }
    
            function order() {
                alert('주문이 완료되었습니다!');
            }
        </script>
    </head>
    
    <body>
    <div class="wrap">
        <div class="item-img"></div>
        <div class="item-desc">
            <h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
            <p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>
            <p class="rate">달러-원 환율: <span id="now-rate">1219.15</span></p>
        </div>
        <div class="item-order">
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">주문자이름</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">수량</label>
                </div>
                <select class="custom-select" id="inputGroupSelect01">
                    <option selected>-- 수량을 선택하세요 --</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">주소</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </div>
            <div class="input-group mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text">전화번호</span>
                </div>
                <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
            </div>
            <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
        </div>
    </div>
    </body>
    
    </html>

    1週目の参考資料(jQuery,Ajax)

        <script>
            $(document).ready(function () {
                get_rate();
            });
    
            function get_rate(){
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/sparta_api/rate",
                    data: {},
                    success: function (response) {
                        let now_rate = response['rate'];
                        $('#now-rate').text(now_rate);
                    }
                })
            }
    
            function order() {
                alert('주문이 완료되었습니다!');
            }
        </script>

    成果物(取得)



    結論/感受

  • AjaxとjQueryを基本的に使用する方法はすでに把握されているが、コンピュータ科学の面での深さはまだ足りないようだ.例えば、なぜこれらの部分の詳細とそれらの関係を使用するのか.まず、流れと基本的な背景を熟知することに集中し、復習のレベルに戻り、概念を掘り起こし、記録します.
  • 第3週も頑張ります!!