자바스크립트
Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어이며, 오늘날 HTML, CSS와 함께 웹을 구성하는 요소
HTML이 웹 페이지의 기본 구조를 담당, CSS가 디자인을 담당 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당
기본용어
- 자바스크립트: 웹을 움직이게 하는 코드, 브라우저가 알아먹는 유일한 프로그래밍 언어
- jQuery: html 뼈대를 선택해서 쉽게 조작할 수 있게 함
- Fetch: 짧은 코드로 요청을 보내고 받아올 수 있음
리스트와 딕셔너리
리스트: []의 형태 속에 여러개의 값을 가진다.
딕셔너리: {}의 형태 속에 키와 값으로 구성된 형태를 가진다.
<script>
let a = [
{'name' : '영수', 'age' : 27},
{'name' : '철수', 'age' : 15},
{'name' : '영희', 'age' : 20}
]
console.log(a[1] ['age'])
</script>a라는 리스트 안에 딕셔너리 3개가 들어가 있는 형태(리스트 안에 있기때문에 ,로 구분을 해주어야한다.)
a의 1번 인덱스안에 age의 키를 갖는 값을 출력 -> 15가 출력이 된다.
Jquery 연습하기
<!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>밑에 checkResult 함수를 사용한다 되어있기 때문에 함수 를 만들어 줘야한다.
script 안에 checkResult 함수를 만들어 주고 a, b, c 각각 값을 넣어 지정해줌
- a는 일반적인 리스트형태
- b는 일반적인 딕셔너리 형태
- c는 리스트 속 딕셔너리 형태
밑에 html을 보면 q1, q2, q3를 id를 통해 명찰을 정해 줬다
$('#q1').text(a[1]) → q1의 텍스트를 a[1]으로 바꿔라
$('#q2').text(b['name']) → q2의 텍스트를 b[’name’]으로 바꿔라
$('#q3').text(c[1]['age']) → q1의 텍스트를 c[1][’age’]으로 바꿔라
밑의 함수발동 조건이 클릭 시라서 클릭전에는 q1,q2,q3모두 ‘테스트’ 라는 문구가 나오다가
‘결과 확인하기!’ 라는 버튼을 누르는 순간 checkResult 함수가 작동하여 ‘배’, ‘영수’, ‘35’로 바뀌게 된다.
조건문과 반복문
<script>
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if (a > 20) {
alert('성인입니다.')
} else {
alert('청소년입니다.')
}
})
</script>ages라는 변수를 정희하고 리스트 값을 채워 줬다.
forEach(E는 무조건 대문자)를 통해 반복문을 생성하고 ages로 부터 하나씩 값들을 가져오며 그 값은 a라 칭한다,
if(만약) a가 20보다 크다면 ‘’성인입니다’라는 알림창이 뜰것이고 else(아니라면) ‘청소년입니다.’라는 알림창이 뜬다.
실행시키면 하나씩 값들이 들어가기 때문에 총 7번의 알림문이 뜨고 청,청,청,성,청,성,성 이 순서대로 나올것이다.
APPEND
<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>append는 말그대로 추가하는 것이다.
위 함수가 발동되면 id가 q1과 q2로 지정되어있는 html이 바뀌게 된다.
q1을 먼저 살펴보면 맨처음 q1을 지정해주고 empty를 통해 원래 있던 값을 날려버리고 시작한다. 위에는 기재가 되어 있지 않지만 밑 html코드에 이미 다른 텍스트가 적혀져 있었기 때문에 그것을 날리고 시작하는것이다.
그 후 forEach문으로 a라는 변수에 furits 리스트의 값들을 하나씩 가져올 것이다.
temp_html이라는 변수를 정의하고 작은 따옴표와 헷갈리 수 있는데 시프트를 누르면 물결표가 나오는 `(백틱)을 쓴다.
temp_html에 p타입 안에 텍스트 형태로 a의 값을 넣는 다는 뜻이다.
이후 q1을 지정하고 temp_html을 append함으로서 값이 하나씩 불러올 때마다 p타입으로 html이 기록된다.
결과적으로는 q1의 자리에 사과, 배 , 감, 귤 … 이 차례대로 기록된다고 보면 된다.
밑에는 딕셔너리를 이용했으나 위와 내용이 같기때문에 설명을 생략한다.
Json
일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식.
클라이언트가 사용하는 언어에 관계 없이 통일된 데이터를 주고받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 된다.
편하게 생각하자면 서버에서 클라이언트로 데이터를 내려줄때 딕셔너리 형태로 내려주는것으로 이해
API
Application Programming Interface(응용 프로그램 프로그래밍 인터페이스)의 약자
프로그래밍에서, 프로그램을 작성하기 위한 일련의 부(Sub) 프로그램, 프로토콜 등을 정의하여 상호 작용을 하기 위한 인터페이스 사양을 말한다.
서버가 클라이언트 요청을 받으려면 받는 문이 있다고 가장하자면 그 문에 접근하는 방식이 API이다.
은행을 예시로 한다면 은행 창구가 있어야하는데 그 창구 이름, 창구에 접근하는 방식이 API다.
(https://movie.naver.com/movie/bi/mi/basic.naver?code=161967) 이러한 링크가 있을때
https://movie.naver.com = 컴퓨터의 위치, 예시)용산지점 은행
movie/bi/mi/basic.naver = 창구이름
code=161967 = 주민등록번호
이렇게 나누어 진다.
FETCH
데이터를 받아오는 url이 있다면 데이터를 받아오는 문구
<!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>fetch에 데이터가 있는 url을 기재하고 rows라는 변수에 'RealtimeCityAir'속에 'row'안에 있는 데이터를 입력해준다.
foreach문을 통해 a라는 변수에 rows의 데이터를 하나씩 접어 넣는다.
consloe.log를 통해 페이지 검사 콘솔모드에서 보여지게끔 만들고 출력시킬 데이터는 ‘MSRSTE_NM’ 과 'IDEX_MVL’ 이다.
FETCH 연습하기
<!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;
}
.bad {
color: red;
}
</style>
<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='bad'>${gu_name} : ${gu_mise}</li>`
} else {
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>fetch를 이용해 미세먼지 openAPI의 정보를 가져오고 rows라는 변수에 'RealtimeCityAir'속에 'row'안에 있는 데이터를 입력해준다.
반복문이 돌기 전에 먼저 적혀있는 데이터를 없애주고 기재해야하기 때문에 name-q1에 해당하는 문구들을 empty를 이용해 삭제해준다.
forEach문에 rows를 넣고 a라는 변수에 데이터를 하나씩 넣어준다.
그리고 guname에 a의 구 이름에 해당하는 이름을 넣어주고 gu_mise에 a의 미세먼지 지수에 해당하는 이름을 넣어준다.
temp_html에 비어있는 백틱(타자 ~부분)을 정의해주고
if문을 이용해 gu,mise가 40이 넘어가면 li의 클래스를 bad로 지정하고 style에 .bad를 추가해 글씨가 빨간색이 되도록 만들어 주고
그게 아니라면 else문을 넣어 일반적으로 리턴되게 만든 뒤
names-q1에 temp_html을 추가하게 만들었다.
