2주차_ Javascript & JQuery 연습하기

nuri-story 2023. 5. 21. 21:01

Javascript 란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.

<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다. script 태그 안에 자바스크립트를 작성하는 것이죠 아래 코드를 통해 간단한 사용방법을 알아봅니다.

개발자들이 보는 공간

우리가 코딩한 것이 맞게 출력되는건가..?를 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log 입니다!

console.log()

변수

a냐 b냐 하는 것들은 값을 담는 박스라고 생각하면 됩니다. let으로 변수를 선언하며, 사칙연산, 문자열 더하기가 기본적으로 가능합니다.

let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!

// 변수는 값을 저장하는 박스예요.
// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

let a = 2
let b = 3

console.log(a+b) // 5

let c = '대한'
let d = '민국'

console.log(c+d) // 대한민국

1. 리스트

순서를 가지고 있는 형태입니다. 컴퓨터는 0부터 셉니다.

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = ['사과','수박','딸기','감'] // 로 선언 가능

console.log(a[1]) // 수박
console.log(a[0]) // 사과

//리스트 길이 구하기
console.log(a.length) //4

2. 딕셔너리 : 키(key)-밸류(value) 값의 묶음

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!

// 또는,

let a = {'name':'영수','age':27} // 로 선언 가능

console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27

3. 리스트와 딕셔너리의 조합

let a = [
	{'name':'영수','age':27},
	{'name':'철수','age':15},
	{'name':'영희','age':20}
]
console.log(a[0]['name']) //영수
console.log(a[1]['age']) //15

JQuery 란?

jQuery를 왜 쓴다구요? 웹을 조작하려고! 왜 조작하죠? 움직이게 만드려고! 그런데 javascript만 사용하면 복잡하니까 jQuery도 쓰는 겁니다! jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임을 기억해주세요! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

https://www.w3schools.com/jquery/jquery_get_started.asp

Javascript로 길고 복잡하게 써야 하는 것을

document.getElementById("element").style.display = "none";

jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)

$('#element').hide();

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다. 예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘! css에서는 선택자로 class를 썼지요? jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리키게 됩니다. 백문이불여일견! 자주 쓰는 jQuery들을 함께 다뤄보면서 익혀보죠!

script 태그에 checkResult() 함수를 만들어 봅시다

<script>
function checkResult() {}
</script>

<div id="q1">테스트</div>

테스트라는 글씨를 값을 사과로 바꿔볼겁니다! 이게 움직이기입니다!

function checkResult() {
	let a = '사과'
	$('#q1').text(a)
}

$(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정해줍니다!
지정했다면, 바꿔줄 명령어를 적어줍니다 text(a)를 넣어 글자 값으로 a를 넣습니다!

<!DOCTYPE html>
<html>
    <head>
        <title>자바스크립트 문법 연습하기!</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <style>
        .button-part {
            display: flex;
            height: 50px;
        }
    </style>
    <script>
        function checkResult(){
            let a = ['사과','배','감','귤']
            $('#q1').text(a[1])

            let b = {'name':'영수','age':30}
            $('#q2').text(b['name'])

            let c = [
                {'name':'영수','age':30},
                {'name':'철수','age':35}
            ]
            $('#q3').text(c[1]['age'])
        }
    </script>
    <body>
        <div class="top-part">
            <h1>자바스크립트 문법 연습하기!</h1>
        </div>
        <hr/>
        <br>
        <h2>1. 함수</h2>
        <div class="button-part">
            <button onclick="checkResult()">결과 확인하기!</button>
        </div>
        <div class="list-part">
            <h2>2. 리스트</h2>
            <div id="q1">테스트</div>
        </div>
        <div class="dict-part">
            <h2>3. 딕셔너리</h2>
            <div id="q2">테스트</div>
        </div>
        <div>
            <h2>4. 리스트 딕셔너리</h2>
            <div id="q3">테스트</div>
        </div>
    </body>
</html>

결과

반복문

리스트, 리스트-딕셔너리 형식의 자료는 하나하나 뽑아써야 하나요? 그렇지 않겠죠!

우리는 그 중에서도 forEach라는 친구로 간단하게 뽑아볼 거에요!

let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
	console.log(a)
})

결과

조건문

반복문과 더불어 조건에 맞춰 실행을 다르게 해주는 “조건문”도 프로그래밍에선 빼놓을 수 없답니다!

만약 20살보다 크면 성인입니다 작으면 청소년입니다 를 출력하려면?

let age = 24

if (age > 20) {
	console.log('성인입니다')
} else {
	console.log('청소년입니다')
}

반복문 + 조건문

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
	if (a > 20) {
		console.log('성인입니다')
	} else {
		console.log('청소년입니다')
	}
})

1) JQuery - append (1)

사과가 아니라 forEach문으로 돌린 반복문의 데이터가 들어가야겠죠?

function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}

처음에 나오는 사과, 귤 감은 빼줘야겠죠?

$('#q1').empty()

결과

function checkResult() {
	let fruits = ['사과','배','감','귤','수박']
	$('#q1').empty()
	fruits.forEach((a)=>{
		let temp_html = `<p>${a}</p>`
		$('#q1').append(temp_html)
	})
}

1) JQuery - append (2)

let people = [
	{'name':'서영','age':24},
	{'name':'현아','age':30},
	{'name':'영환','age':12},
	{'name':'서연','age':15},
	{'name':'지용','age':18},
	{'name':'예지','age':36}
]
$('#q2').empty()
people.forEach((a)=>{
		let name = a['name']
		let age a['age']
		let temp_html = `<p>${a}</p>`
		$('#q2').append(temp_html)
	})

서버-클라이언트 통신 이해하기

크롬 익스텐션 JSONView를 설치해볼까요? 그럼 좀 더 예쁘게 JSON을 볼 수 있습니다.

https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko

JSONVue

Validate and view JSON documents

chrome.google.com

JSON은, Key:Value로 이루어져 있습니다. 자료형 Dictionary와 아주- 유사하죠

API는 은행 창구와 같은 것!
같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.
* GET → 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
* POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정 이 중에서 오늘은 GET 방식에 대해 배워보겠습니다. (POST는 4주차에 배웁니다)

https://movie.daum.net/moviedb/main?movieId=161806
위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.
* 서버 주소: https://movie.daum.net/moviedb/main?movieId=161806 * 영화 정보: movieId=161806

👉GET 방식으로 데이터를 전달하는 방법
? : 여기서부터 전달할 데이터가 작성된다는 의미입니다.
& : 전달할 데이터가 더 있다는 뜻입니다.
예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

위 주소는 google.com의 search 창구에 다음 정보를 전달합니다!
q=아이폰 (검색어)
sourceid=chrome (브라우저 정보)
ie=UTF-8 (인코딩 정보)

👉여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은 누가 정하는 것일까요?
→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.
프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

Fetch 시작하기

fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
	.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
	.then(data => { 
		console.log(data) // 개발자 도구에 찍어보기
	}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다

Fetch 코드 설명
- fetch("여기에 URL을 입력") ← 이 URL로 웹 통신 요청을 보낼 거야!
  - ← 이 괄호 안에 URL밖에 들어있지 않다면 기본상태인 GET!
- .then() ← 통신 요청을 받은 다음 이렇게 할 거야!
- res ⇒ res.json()
  - ← 통신 요청을 받은 데이터는 res 라는 이름을 붙일 거야(변경 가능)
  - ← res는 JSON 형태로 바꿔서 조작할 수 있게 할 거야!
- .then(data ⇒ {}) ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙일거야

Fetch 연습하기 (1)

뼈대

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

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

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

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

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr/>

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

미세먼지 OpenAPI

http://spartacodingclub.shop/sparta_api/seoulair

완성

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

<head>
    <meta charset="UTF-8">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>

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

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

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then((response) => response.json()).then((data) => {
                    $('#names-q1').empty()
				    let rows = data['RealtimeCityAir']['row']
                    rows.forEach((a) => {
                        let gu_name = a['MSRSTE_NM']
						let gu_mise = a['IDEX_MVL']
                        let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        $('#names-q1').append(temp_html)
                    });
                })
        }
    </script>

</head>

<body>
    <h1>Fetch 연습하자!</h1>

    <hr/>

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
</body>

</html>

    <script>
        function q1() {
            fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a)=> {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']

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

$(document).ready(function() {

->진입하자마자 동작

    <script>
        $(document).ready(function() {
            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {
                    // console.log(data)
                    let number = data['temp']
                    $('#temp').text(number)
                })
        })
    </script>