Javascript
- 브라우저가 알아들을 수 있는 언어 (표준)
- 웹을 움직이게 하는 코드
- 호출 및 선언 방법
<script>
funtion hey() {
console.log('안녕하세요')
}
</script>
<body>
<button onclick="hey()">영화 기록하기</button>
</body>
jQuery
- Javascript를 기반으로 한 빠르고 간편한 웹 개발을 위한 자바스크립트 라이브러리
- html 문서의 요소 선택, 조작, 이벤트 처리, 애니메이션 등을 쉽게 처리할 수 있는 강력한 도구를 제공
- 즉, html 뼈대를 선택해서 쉽게 조작할 수 있게 해주는 도구
// 반복문
let frults = ['사과', '배', '김', '귤']
frults.forEach((f) => {
console.log(f)
})
// 조건문
let age = 24
if (age > 20){
console.log('성인입니다.')
} else {
console.log('청소년입니다.')
}
// 삽입 (append)
// 1. 리스트
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((f) => {
let temp_html = `<p>${f}</p>`
$('#q1').append(temp_html)
})
// 2.딕셔너리
let people = [
{'name':'서영','age':24},
{'name':'현아','age':30},
{'name':'영환','age':12},
{'name':'서연','age':15},
{'name':'지용','age':18},
{'name':'예지','age':36}
]
people.forEach((p) => {
let name = p['name']
let age = p['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
// 초기화
$('#q1').empty()
fetch
- 네트워크를 통해 서버로부터 데이터를 비동기적으로 가져오기 위한 기능을 제공하는 메서드
- http 요청을 생성하고 응답을 받아올 수 있음
// 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
// 사용 예시 (서울시 미세먼지)
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((r) => {
console.log(r['MSRSTE_NM'], r['IDEX_MVL'])
});
})