[스파르타코딩클럽] 웹개발 종합반 2주차

JQuery

: HTML의 요소들을 조작하는 편리한 Javascript를 미리 작성해둔 라이브러리

모든 jQuery를 외울 필요는 없고, 필요할 때에 필요한 기능을 구글링하면 된다.

 

* 부트스트랩 : 미리 짜여진 CSS코드

 

어떤 값을 가져오기 위해 어떠한 대상을 지칭할 필요가 있음.

ex) CSS는 class를 이용해 지칭했다.

ex) jQuery에서는 id 값을 통해 특정 값을 가리킴.

 

 

$('#url').val('입력을 하고 싶다')

#url : url이라는 id에 jQuery를 적용.

url 창에 '입력을 하고 싶다' 라는 문구 입력

 

 

$('#url').val()

url의 value값을 가져옴. ex) 홍길동

 

 

박스를 감췄다가 보여주기!

1) 박스 id값으로 post-box 작성

2) $('#post-box').hide() -> 박스 감추기

3) $('#post-box').show() -> 박스 보여주기

 

 

---

 

let temp_html = `<button>나는 버튼이다</button>`

백틱(`)

 

$('#cards-box').append(temp_html)

백틱 안의 문자열을 html화 시켜줌.

 

---

 

let temp_html = `<div class="col">
                <div class="card">
                    <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>`

 

-> temp_html에 문자열을 넣음.

 

$('#cards-box').append(temp_html)

-> jQuery를 이용하여 카드를 붙여넣기 함.

 

---

<script>
    function open_box(){
        alert('박스 열기')
    }
    function close_box(){
        alert('박스 닫기')
    }
</script>

<button onclick = "open_box()">영화 기록하기</button>

영화 기록하기 버튼을 누르면 '박스 열기'라는 메시지 출력

<button onclick = "close_box()" type="button" class="btn btn-outline-dark">닫기</button>

닫기 버튼을 누르면 '박스 닫기'라는 메시지 출력

 

 

영화 기록하기 버튼을 누르면 박스가 열리고, 닫기 버튼을 누르면 박스가 닫히게 해보자!

처음 화면에서 박스는 열리지 않은 상태여야 한다.

.mypost {
    max-width : 500px;
    width: 95%;

    margin: 20px auto 0px auto;

    box-shadow: 0px 0px 3px 0px gray;
    padding: 20px;

    display: none;
}

.mypost의 display를 none으로 하면 박스가 처음부터 나오지 않는다.

 

영화 기록하기 버튼을 눌렀을 때 post-box를 show

function open_box(){
    $('#post-box').show()
}

<button onclick = "open_box()">영화 기록하기</button>

 

닫기 버튼을 눌렀을 때 post-box를 hide

function close_box(){
    $('#post-box').hide()
}

<button onclick = "close_box()" type="button" class="btn btn-outline-dark">닫기</button>

---

1. 빈칸 체크 함수 만들기

1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기

1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기

 

function q1() {
    let txt = $('#input-q1').val()
    if (txt == '') {
        alert('빈칸입니다')
    } else {
        alert(txt)
    }
}

<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>

input-q1의 값을 txt에 대입하고, txt가 빈칸이면 빈칸입니다 출력. txt가 있으면 txt 그대로 출력.

 

 

2. 이메일 판별 함수 만들기

2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기

2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기

2-3. 이메일 도메인만 얼럿 띄우기

 

자바스크립트 문자열 확인하기 includes

includes(String)은 문자열에 인자가 있는지 확인함. 있으면 true, 없으면 false

console.log(txt.includes('@'))

txt에 '@'인자가 있는지 없는지 확인. -> 검사 콘솔창에서 true, false 메시지가 나옴.

 

myemail.split('@')
-> ['abc', 'gmail.com']0: "abc"1: "gmail.com"length: 2[[Prototype]]: Array(0)

split()을 이용하여 해당 인자를 기준으로 분리한다.

myemail.split('@')[1]
->'gmail.com'

split('@')으로 분리된 배열 중 1번째 인자 출력

myemail.split('@')[1].split('.')
-> ['gmail', 'com']

split('@')으로 분리된 배열 중 1번째 인자를 다시 split('.')을 이용하여 .을 기준으로 분리한다.

myemail.split('@')[1].split('.')[0]
->'gmail'

분리된 배열에서 0번째 인자인 gmail만을 출력할 수 있다.

 

 

function q2() {
    let txt = $('#input-q2').val()
    if (txt.includes('@') == true) {
        alert(txt.split('@')[1].split('.')[0])
    }
    else {
        alert('이메일이 아닙니다.')
    }
    console.log(txt.includes('@'))
}

<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>

input-q2값을 받은 txt에 '@'가 있으면 gmail만 출력.

txt에 @가 없으면 이메일이 아닙니다 출력.

 

 

3. HTML 붙이기/지우기 연습

3-1. 이름을 입력하면 아래 나오게 하기

 

function q3() {
    let txt = $('#input-q3').val()
    let temp_html = `<li>${txt}</li>`
    $('#names-q3').append(temp_html)
}

<ul id="names-q3">
    <li>세종대왕</li>
    <li>임꺽정</li>

txt에 input-q3 값을 대입해주고, temp_html에 저장한 후 .append()를 이용하여 names-q3 에 붙이기.

 

 

 

3-2. 다지우기 버튼을 만들기

 

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

names-q3 값을 지우기

 

 

---

API는 은행 창구와 같다!

GET  : 데이터 조회

POST  : 데이터 생성 / 변경 / 삭제

 

 

GET

google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

google이라는 서버의 search라는 창구에서 데이터를 가져옴.

?부터 전달할 데이터가 작성되며, &는 데이터를 이어줄 때 사용.

 

API는 프론트엔드 개발자, 백엔드 개발자가 미리 정해둔 약속임.프론트엔드 : code라는 이름으로 영화 번호를 준다고 약속백엔드 : code가 영화번호임을 인지하고 코딩

 

 

---

딕셔너리와 리스트가 합쳐진 형태로 내려오는 것을 JSON형식이라고 함.

.bad {
    color : red;
}

function q1() {
    $('#names-q1').empty()
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulair",
        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']

                let temp_html = ``

                if (gu_mise > 40) {
                    temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                }
                else {
                    temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                }
                $('#names-q1').append(temp_html)
            }
        }
    })
}

GET 방식으로 데이터를 가져와서 names-q1에 temp_html을 이용하여 찍어준다.

for문을 이용하여 지역, 미세먼지 농도를 가져온다.

 

style에서 bad라는 이름표를 만들고, 미세먼지 농도가 40보다 크면 빨간색으로 입력되도록 만든다.

 

맨 처음에 .empty()를 이용하여 업데이트를 할 때마다 비워진 상태로 나타내도록 한다.

 

 

---

서울시 따릉이 데이터

 

 

let rows = response['getStationList']['row']
for (let i = 0; i < rows.length; i++){
    let name = rows[i]['stationName']
    let rack = rows[i]['rackTotCnt']
    let bike = rows[i]['parkingBikeTotCnt']

따릉이 데이터를 열로 구분하여 돌림.

거치대 위치, 거치대 수, 현재 따릉이 수를 각각 name, rack, bike에 대입.

 

 

let temp_html = `<tr>
        <td>${name}</td>
        <td>${rack}</td>
        <td>${bike}</td>
    </tr>`

temp_html에 name, rack, bike를 대입.

 

$('#names-q1').append(temp_html)

names-q1 밑에 temp_html 추가하기.

 

 

지워주고 붙여줘야함! -> .empty()

 

 

$('#names-q1').empty()

 

 

다섯 개보다 적은 곳은 빨간색으로 표기.

1. 클래스를 만든다.

.urgent {
    color : red;
}

 

 

2. temp_html을 만들어서 빈 문자열로 둔다.

let temp_html = ``

 

 

3. 조건문 작성

if (bike < 5) {
    temp_html = `<tr class = "urgent">
        <td>${name}</td>
        <td>${rack}</td>
        <td>${bike}</td>
    </tr>`
} else {
    temp_html = `<tr>
        <td>${name}</td>
        <td>${rack}</td>
        <td>${bike}</td>
    </tr>`
}

bike가 5보다 작으면 class = "urgent" 적용.

 

 

---

Ajax - 이미지 이용하기

 

이미지 바꾸기 : $("#아이디값").attr("src", 이미지 URL);

텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

$('#img-rtan').attr('src')

img-rtan의 src값을 다음 URL로 바꿈.

 

$('#text-rtan').text(msg)

text-rtan의 text를 msg로 바꿈.

 

 

숙제 - 기온 표시하기

<p>현재기온 : <span id = "temp">00.0</span>도</p>

00.0부분만 span으로 묶고 id를 temp로 설정하면, temp 부분만 .text()로 바꿔줄 수 있다.

 

기온은 버튼을 눌러서 바뀌는 게 아니고,

로딩 후 바로 나타나야 하기 때문에 로딩 후 alert을 호출하는 기능을 사용해본다.

$(document).ready(function () {
    alert('다 로딩됐다!')
});

로딩이 완료되면 알림창이 뜬다.

 

$(document).ready(function () {
    $.ajax({
            type: "GET",
            url: "http://spartacodingclub.shop/sparta_api/weather/yongin",
            data: {},
            success: function (response) {
                let msg = response['temp']

                $('#temp').text(msg)
            }
    })
});

 

url을 날씨 API 주소로 바꿔주고,

msg라는 변수에 기온을 대입한다.

temp라는 아이디를 msg로 바꿔주면 기온이 나타난다.