웹 개발 종합반 2주차

[수업 목표]

1. Javascript의 사용방식에 대해 이해하고 문법에 익숙해진다
2. JQuery로 HTML을 조작할 수 있다
3. Fetch로 서버 API에 데이터를 주고, 결과를 받아온다

• Javascript : 웹을 움직이게 하는 코드 (동적 사이트)
• jQuery는 html 뼈대를 선택해서 쉽게 조작한다. jQuery는 라이브러리의 종류다.
• Fetch는 짧은 코드로 요청을 보내고 받아올 수 있다.

1.Javascript

    </style>
    <script>
        function hey(){
            alert('안녕')
        }
    </script>
</head>

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

alert print의 역할?
console.log() -> 개발자도구(F12) console에서 내용을 확인 할 수 있다.

    <script>
        function hey(){
            // alert('안녕')
            let a = '대한' // 변수 자바스크립트는 ''로 문자열을 저장한다.
            let b = ['사과','딸기','포도','배'] // 리스트 []
            let c = {'이름':'가나','나이':'18'} // 딕셔너리 key:value
            
        }
    </script>

    <script>
        function hey(){
            // alert('안녕')
            let a = [
                {'이름':'가', '나이':'17'},
                {'이름':'나', '나이':'20'},
                {'이름':'다', '나이':'23'},
            ]
            console.log(a[0]['이름']) // 결과 값 : 가
            
        }
    </script>

js 반복문

    <script>
        let 과일 = ['사과','딸기','포도','배','감']
        과일.forEach((a) => {
            console.log(a)
        })
    </script>

js 조건문

    <script>
        let age =20
        if (age > 20) {
            console.log('성인')
        } else {
            console.log('청소년')
        }
    </script>

js 반복문 + 조건문

<script>
    let ages = [12, 15, 20, 25]
    ages.forEach((a) => {
        if (a >= 20) {
            alert('성인')
        } else {
            alert('청소년')
        }
    })

</script>

2. JQuery

HTML을 조작하기위해서
Javascript

와 사이 ``` ```

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

JQuery

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

이렇게 간단하게 사용할 수 있어서 JQuery를 사용한다!
css는 class를 사용 / js는 id를 사용해서 지칭한다.

코드

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

        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>${name}는 ${age}입니다.</p>`
            $('#q2').append(temp_html)
        }) 
    }
</script>

Before

After

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

OpenAPI를 Json형식 -> 딕셔너리 형식으로 가져와서 사용한다. 딕셔너리 Key : Value
API는 은행 창구와 같은 것!
GET (Read)
POST (Create/Update/Delete)

4. Fetch

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

fetch("http://spartacodingclub.shop/sparta_api/seoulair") // 기본 요청(GET)
	.then(res => res.json()) // 요청해서 받은 데이터를 JSON화
	.then(data => { // JSON화 한 데이터를 다시 data로 이름짓기
		let rows = data['RealtimeCityAir']['row']
		rows.forEach((a) => {
			// 미세먼지 데이터 리스트의 길이만큼 반복해서 하나씩 개발자 도구에서 보기
			// 구의 이름, 미세먼지 수치 값을 개발자 도구에서 찍어보기
			console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
		})
	})