js 공부(ft. sparta)/2주차 (12) 썸네일형 리스트형 2주차 끝 숙제 우리가 만들었던 스파르타피디아에 온도를 붙여넣어주는거다. 스파르타피디아는 처음에 만들었던 index.html인 영화기록하기가 있는 html이다. 우선 추가 수정을 해보자 현재 서울의 날씨 : 20도 위 코드를 내생애 최고의 영화들! 과 영화 기록하기 사이에 아래 처럼 붙여 넣어준다. 내 생애 최고의 영화들! 현재 서울의 날씨 : 20도 영화 기록하기 그리고 script부분에 쓴 코드들을 다 지워주고 아래 코드를 붙여넣어준다 $(document).ready(function () { fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => { console.log(data) }) }) 실.. 2-10. Fetch 퀴즈(2) 이번엔 앞서 한것과 같이 자전거 수가 5개 미만인 것만 빨간색 글씨로 표현하고 싶다. let temp_html = `` if (bike < 5) { temp_html = ` ${name} ${rack} ${bike} ` } else { temp_html = ` ${name} ${rack} ${bike} ` } ('#names-q1').append(temp_html) 위 처럼 작성하면 사진처럼 나온다. 2-9. Fetch 퀴즈 (1) 이번에는 서울시 따릉이를 가지고 반복하면서 익숙해지도록 한다. 정류장이름과 따릉이 갯수를 내보내는 걸로 만들어보려한다. 우선 따릉이 openAPI를 복사해서 열어주면 아래창이 나온다. http://spartacodingclub.shop/sparta_api/seoulbike 이걸 아래 페이지의 표처럼 붙여넣으려한다. 우선 console창에 위 페이지에서 필요한것인 위치, 거치대수, 자전거 수를 불러온다. function q1() { fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => { let rows = data['getStationList']['row'] rows.forEach((a).. 2-8. Fetch 연습하기(2) 앞서 한 fetch 연습하기(1)에서 한걸음만 더 나가보려한다. 미세먼지 수치가 40이 넘는 친구들의 글씨를 빨강으로 바꿔주고싶다. 우선 모든 글씨를 빨강으로 바꿔주려한다. 그럼 아래와 같이 작성해보자. 먼저 style에 가서 아래 코드를 작성해준뒤, .bad{ color : red; } 아까 작성한 let temp_html = `${gu_name}: ${gu_mise}` 이부분의 li에 위 코드처럼 class로 bad를 가리키면 아래 사진처럼 빨갛게 나온다. 그럼 이번엔 40이 넘으면 빨갛게 하고 그렇지 않으면 냅둬라를 해볼꺼다. 우선 우리가 배웠던 if문을 가지고 아래 코드처럼 작성해준다. let temp_html =`` if(gu_mise > 40){ temp_html= `${gu_name}: ${.. 2-7. Fetch 연습하기(1) 미세먼지 데이터를 가지고 html을 만들어서 붙여주는 연습하려한다. 우선 새로운 파일을 만들어준 뒤 코드스니펫에서 받아온 코드를 붙여넣어준다. doctype html> 미세먼지 API로Fetch 연습하고 가기! div.question-box { margin: 10px 0 20px 0; } function q1() { // 여기에 코드를 입력하세요 } Fetch 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다. 업데이트 중구 : 82 종로구 : 87 용산구 : 84 은평구 : 82 코드를 보면 업데이트 버튼을 누르게 되면 q1이라는 함수가 적용되있다. 우리가 하고싶은건 버튼을 누르면 밑으로 쭈.. 2-6. Fetch 시작하기(2) 앞서 했던 미세먼지 데이터를 불러와서 보기까지 했다. 잘 들어왔는지 확인하기 위해서는 아래 코드를 작성해보자. fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => { console.log(data['RealtimeCityAir']['row'][0]) }) 위 console.log란을 수정해주었다. 실행해보면 중구가 잘 나온다. 이제 반복문을 활용해보자. let rows = data['RealtimeCityAir']['row'] rows.forEach((a) => { console.log(a) }) 이걸 저장후 확인해보면 row에 해당하는 모든 구들의 미세먼지 정보들이 쭈르르륵 나온다. 보.. 2-5. Fetch 시작하기(1) 서버에서 데이터를 가지고와서 활용할 수있는것이 Fetch. Fetch를 가지고 아까 봤던 미세먼지 데이터를 가지고 와서 코드에서 활용할 수 있게 된다. 먼저 새로운 파일을 만들어 준 다음. 코드스니펫에있는 것을 복사해 붙여넣어준다. doctype html> Fetch 시작하기 Fetch 연습을 위한 페이지 그리고 나서 Fetch 기본 골격이란 코드스니펫을 복사해서 script에 넣어준다. fetch("여기에 URL을 입력").then(res => res.json()).then(data => { console.log(data) }) 위 코드의 뜻은 "여기에 url을 입력" 이건 내가 가져오고싶은곳의 url을 입력해주고, res =>res.json() 은 json 형태로 바꿔줄꺼다. data =>{ ... .. 2-4. 서버-클라이언트 통신 이해하기 우선 이번엔 코딩이 없기 때문에 글로만 작성한다. 먼저 보는게 이해가 빠르니 코드스니펫에 있는 openAPI를 클릭해서 아래 사이트에 들어가준다.http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99 위 사이트에 들어가면 복잡하게 써있는데, 이게 리얼타임 서울 미세먼지이다. 보기 힘드니 아래 사이트에 들어가서 chrome에 추가를 누른 뒤 확장 프로그램 추가하면 끝이다. https://chrome.google.com/webstore/detail/jsonvue/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko JSONVue Validate and view JSON documents c.. 이전 1 2 다음
