2주차 | Notion

JQuery

JS가 너무 길고 복잡한 것을 짧고 직설적으로 표현하기 위해 나온 라이브러리

//js
document.getElementById('articleurl').value;
//jquery
$('#articleurl').val();

//js
document.getElementById('articleurl').value = 'HELLO'
//jquery
$('#articleurl').val('Hello');

//js (=css의 display 값을 none으로 바꾼다)
//jquery
$('#post-box').hide();

//get element's css value
$('#post-box').css('width');

//set element's css value
$('#post-box').css('width', '700px');

//set element's text value
$('#btn_postbox').text('OPEN')

//add more html values
let temp_html = `<button>I am button</button>`
$('#cards-box').append(temp_html)

//save title
let title = "I'm the title"

//save html code
let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="<https://post.healthline.com/wp-content/uploads/2020/07/pizza-beer-1200x628-facebook-1200x628.jpg>"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="#">Pizza</a></h5>
                <p class="card-text">Pizza is a savory dish of Italian origin consisting of a usually round, flattened
                    base of leavened wheat-based dough topped with tomatoes, cheese, and often various other
                    ingredients, which is then baked at a high temperature, traditionally in a wood-fired oven. A small
                    pizza is sometimes called a pizzetta.</p>
                <p class="comment">Here is a comment</p>
            </div>
        </div>`

//if i want to change title to variable "title"
let temp_html = `<div class="card">
            <img class="card-img-top"
                 src="<https://post.healthline.com/wp-content/uploads/2020/07/pizza-beer-1200x628-facebook-1200x628.jpg>"
                 alt="Card image cap">
            <div class="card-body">
                <h5 class="card-title"><a href="#">${title}</a></h5>
                <p class="card-text">Pizza is a savory dish of Italian origin consisting of a usually round, flattened
                    base of leavened wheat-based dough topped with tomatoes, cheese, and often various other
                    ingredients, which is then baked at a high temperature, traditionally in a wood-fired oven. A small
                    pizza is sometimes called a pizzetta.</p>
                <p class="comment">Here is a comment</p>
            </div>
        </div>`

//put below
$('#cards-box').append(temp_html)

Quiz_JQuery 연습하기

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

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="<https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            let val1 = $('#input-q1').val();
            if (val1 == "") {
                alert("입력하세요!")
            } else {
                alert(val1)
            }
        }

        function q2() {
            let val1 = $('#input-q2').val()

            if (val1.includes('@')) {
                alert(val1.split('@')[1].split('.')[0]);
            } else {
                alert("Wrong Input");
            }
        }

        function q3() {
            let val1 = $('#names-q3')
            let val2 = $('#input-q3').val()

            val1.append(`<li>${val2}</li>`)
        }

        function q3_remove() {
            $('#names-q3').empty()
        }

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
    <hr />
    <div class="question-box">
        <h2>3. HTML 붙이기/지우기 연습</h2>
        <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
        <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
        <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
        <button onclick="q3()">이름 붙이기</button>
        <button onclick="q3_remove()">다지우기</button>
        <ul id="names-q3">
            <li>세종대왕</li>
            <li>임꺽정</li>
        </ul>
    </div>
</body>

</html>

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

알고 싶은 값: 지역명, 미세먼지 값

$.ajax({
  type: "GET",
  url: "<http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99>",
  data: {},
  success: function(response){
    let rows = response['RealtimeCityAir']['row']

    for (let i = 0; i < rows.length; i ++) {
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']

        if (gu_mise > 70) {
            console.log(gu_name, gu_mise)
        }
    }
    
  }
})

// clear all
$('#id' or '.class').empty()

// make html
let var1 = "Hello"
let temp_html = `<h1>${var1}!</h1>`
$('#divid').append(temp_html)