2-1 2주차 오늘 배울 것
- Javascript : 웹을 움직이게 하는 코드
- jQuery : html 뼈대를 선택하여 쉽게 조작할 수 있음
- Fetch : 짧은 코드로 요청을 보내고 받아올 수 있음
2-2 Javascript 맛보기
- 브라우저가 알아들을 수 있는 언어
- 자바와 자바스크립트의 차이 : 아무 상관 X like 바다와 바다코끼리
2-3 Javascript 기초 문법 배우기
- list : let a = [1, 2, 3, 4]
- a[0] => 1
- dictionary : let b = { 'name': '영수', 'age' : 27 } => key, value 쌍
- b['name'], b['age'] => 영수, 27
- list 속 dictionary : let c = [ { 'name': '영수', 'age' : 27 }, { 'name': '철수', 'age' : 15 } ]
- c[0]['name'] => 영수
2-4 Javascript & jQuery 연습하기(1)
- js사용 목적 - html 조작
- jQuery는 누군가가 만들어 놓은 js
- jQuery로 js를 좀 더 쉽게 조작
- id가 q1인 요소의 텍스트를 a로 바꿔주기 : $('#q1').text('a')
2-5 Javascript & jQuery 연습하기(2)
- 반복문
let fruits = ['사과', '배', '감귤']
fruits.forEach((a) => {
console.log(a)
})
- 조건문
let age = 14
if (age > 20) {
console.log('성인입니다.')
} else {
console.log('청소년입니다.')
}
- 반복문 & 조건문 조합
let ages = [14, 17, 20, 25, 15, 50, 72]
ages.forEach((a) => {
if (a > 20) {
console.log('성인입니다.')
} else {
console.log('청소년입니다.')
}
})
2-6 jQuery 연습하기
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)
})2-7 서버 - 클라이언트 통신 이해하기
- JSON : 서버 -> 클라이언트로 내려주는 딕셔너리 형태의 데이터
- 서버에 요청(GET, POST)을 하면 데이터를 전달해 줌
- * API : 서버에서 데이터를 받아올 수 있는 일종의 URL
2-8 Fetch 시작하기 (1)
- 서울시 미세먼지 농도 데이터를 받아와서 콘솔에 출력
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
console.log(data)
})
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>2-9 Fetch 시작하기 (2)
- 미세먼지 데이터의 rows를 리스트로 저장한 후, forEach()로 구 이름과 미세먼지 데이터를 콘솔에 출력
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 시작하기</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})
})
</script>
</head>
<body>
Fetch 연습을 위한 페이지
</body>
</html>
'강의 > 스파르타코딩클럽' 카테고리의 다른 글
| [리액트 입문주차] 1-1 오리엔테이션 ~ 1-4 CRA (0) | 2023.06.23 |
|---|---|
| [웹개발 종합반] 5주차 정리 및 마무리 (0) | 2023.05.22 |
| [웹개발 종합반] 4주차 정리 (0) | 2023.05.22 |
| [웹개발 종합반] 3주차 정리 (1) | 2023.05.21 |
| [웹개발 종합반] 1주차 정리 (0) | 2023.05.18 |
