스파르타 코딩클럽 웹개발 종합반 인강 - 공부 기록 |
수강 시작 ~
2023. 06. 06 ~
https://github.com/hotdog7778/sparta
JavaScript는 움직이기
웹 페이지에 생기를 불어넣기
지난번 에는 정적 페이지, 이번에 움직이는 페이지
1. JavaScript
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어.
spart/frontend/index.html 파일로 시작
영화 기록하기 버튼을 누르면 알람이 뜨도록 만들어 보자.
head 안에 <script></script>
<script>
function hey(){
alert('안녕하세요!')
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
2. 자바스크립트 기초 문법
스크립트 안에 코드를 작성하고 console.log() 를 사용하면 결과가 크롬 개발자 도구에 나온다.
우리가 코딩한 것이 맞게 출력되는건가..?를 확인하기 위해 개발자들이 미리 찍어보는 도구가 console.log
1. 변수 & 기본연산
2. 리스트 & 딕셔너리
- 리스트 : 배열이랑 비슷함
- 딕셔너리 : 딕셔너리: 키(key)-밸류(value) 값의 묶음
3. 리스트와 딕셔너리의 조합
// console.log('hello world')
// let a = 2 숫자
// let b = 3
// console.log(a+b) // 5
// let a = 'apple' // 문자
// let b = 'apple'
// let a = '사과'
// let b = '귤'
// console.log(a+b) // 사과귤
// let a = ['사과','수박','딸기','귤']
// console.log(a) // ['사과','수박','딸기','귤']
// console.log(a[0]) // 사과
// console.log(a[1]) // 수박
// console.log(a.length) // 4 . a의 요소가 몇개인지
// 딕셔너리
// let a = {'name' : '영수', 'age' : 27}
// console.log(a)
// console.log(a['name']) // 영수
let a = [
{'name' : '영수', 'age' : 27},
{'name' : '철수', 'age' : 15},
{'name' : '영희', 'age' : 20}
]
console.log(a)
console.log(a[0]['name']) // 영수
console.log(a[1]['age']) // 153. JQuery
Javascript만 사용하면 복잡하니까 jQuery도 쓴다.
Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
- 코드가 복잡하고,
- 브라우저 간 호환성 문제도 고려해야해서, jQuery라는 라이브러리가 등장
- jQuery를 쓰려면 쓰기 전에 "임포트"를 해야함
Ex)
- Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";- Query로 보다 직관적으로 쓸 수 있다.
$('#element').hide();
prac.html 파일로 시작.
제이쿼리에서는 명찰을 id 라는 걸로 달아준다.
<script>
function checkResult(){
// alert('안녕하슈')
// let a = '사과'
// $('#q1').text(a) // 결과 확인하기 를 누르면 q1의 테스트 라는 글자가 사과로 바뀜
let a = ['사과','배','감','귤']
$('#q1').text(a[1]) // 배 로바뀜
// $('#q1').css('color','red') // 색을 빨강으로 바꿔
// $('#q1').css('font-size','40px') // 폰트 사이즈를 바꿔
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>
4. 자바스크립트 반복문
forEach를 사용한 반복문
// // 반복문
// let fruits = ['사과','배','감','귤']
// fruits.forEach( (a) => {
// console.log(a)
// } )
// 조건문
// let age = 24
// if (age > 20) {
// console.log('성인 입니다.')
// } else {
// console.log('청소년 입니다.')
// }
// 반복문과 조건문 섞어서
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if (a > 20) {
console.log('성인 입니다.')
// alert('성인 입니다.')
} else {
console.log('청소년 입니다.')
// alert('청소년 입니다.')
}
})
5. append
자바스크립트 함수
.append() 메소드는 선택된 요소의 마지막에 새로운 HTML 요소나 콘텐츠를 추가한다.
$(target).append(source)source 객체를 target 객체의 마지막에 추가한다.
아래 페이지(prac.html) 에서 연습 시작.
₩ 는 백틱이라고 하는데, 백틱으로 감싸면 html 이된다. 이때 변수도 백틱으로 감쌀수 있다. ex) ₩<p> 사과 </p>₩
- forEach문
- 백틱으로 변수 감싸기
- 제이쿼리 append, empty
<script>
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
// 원래부터 있는 사과 귤 감을 지워보자
$('#q1').empty()
fruits.forEach((a) => {
// let temp_html = `<p>사과</p>`
let temp_html = `<p>${a}</p>`
$('#q1').append(temp_html)
})
}
</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">
<p>사과</p>
<p>귤</p>
<p>감</p>
</div>
</div>
<div class="list-part">
<h2>3. 붙이기</h2>
<div id="q2">
<p>영수는 24살입니다.</p>
<p>세종은 30살입니다.</p>
<p>수영은 20살입니다.</p>
</div>
</div>
</body>
결과 확인하기를 누르면. 기존 것은 사라지고 사과 배 감 귤 수박이 자동으로 생성
같은 케이슨데 리스트와 딕셔너리의 조합을 사용해보자
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 temp_html = `<p>영수는 24살입니다.</p>`
let name = a['name']
let age = a['age']
let temp_html = `<p>${name}는 ${age}살입니다.</p>`
$('#q2').append(temp_html)
})
이런 결과가 나온다
6. Fetch
서버에서 데이터를 받아올 수 있는 URL이 있다면, 그 URL에서 데이터를 받아오는 기능.
prac2.html 파일에서 진행
fetch로 api에서 데이터를 받아오고, 콘솔로그로 원하는 데이터만 뽑아보자.
// fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
// console.log(data)
// })
fetch("<http://spartacodingclub.shop/sparta_api/seoulair>").then(res => res.json()).then(data => {
// console.log(data) // URL에서 데이터를 가져와서 콘솔로그에 찍는다.
// row의 0번째를 조회해보자
// console.log(data['RealtimeCityAir']['row'][0])
// 반복문 활용
let rows = data['RealtimeCityAir']['row']
rows.forEach( (a) => {
// console.log(a)
// console.log(a['MSRSTE_NM']) // 구 이름만 출력
console.log(a['MSRSTE_NM'],a['IDEX_MVL']) // 구 이름, 미세먼지 수치 출력
})
})
7. Fetch연습 2 - 서울시 OpenAPI를 이용하기 (실시간 미세먼지 상태)
prac3.html 에서 시작
function q1() {
// 여기에 코드를 입력하세요
fetch("<<a href=http://spartacodingclub.shop/sparta_api/seoulair>http://spartacodingclub.shop/sparta_api/seoulair</a>>").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
// console.log(rows) // 모든 row 전부 찍어보기
// 돌기 전에 원래있던 html 지우기
$('#names-q1').empty()
// 구이름과 미세먼지 수치만 가져오기
rows.forEach((a) => {
// console.log(a) // 처음부터 돌면서 row를 모두 출력한다.
let gu_name = a['MSRSTE_NM'] // 구이름 값
let gu_mise = a['IDEX_MVL'] // 미세먼지 농도 값
// console.log(gu_name, gu_mise)
// html을 붙여주기. 페이지에 출력되게
// let temp_html = '<li>중구 : 82</li>' // 중구만 주구장장 붙게됨
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`
$('#names-q1').append(temp_html)
})
})
}
업데이트 버튼을 누르면 row를 가져오도록 한다.
중구 : 82 ~~ 같은 원래 있던 html을 지운다.
forEach문으로 리스트를 전부 돌면서,
구이름과 미세먼지 농도 만 골라서 가져온다.
가져온 데이터를 구이름 : 미세먼지 형식의 HTML을 만든다.
append를 사용해서 전부 HTML 형식으로 붙여준다.
추가) 미세먼지 수치가 40이 넘어가면 컬러를 줘보자. 컬러 style을 만들고, temp_html 변수를 비워둔다음. 조건문을 써서 미세먼지 수치가 높으면 스타일을 적용, 아니면 적용 안하도록 작성
8. Fetch연습 3 - 서울시 OpenAPI를 이용하기 (실시간 따릉이 현황)
추가로. 따릉이가 5대 미만으로 남아있다면 빨간색으로 표시해주자.
function q1() {
fetch("<http://spartacodingclub.shop/sparta_api/seoulbike>").then(res => res.json()).then(data => {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
let rack = a['rackTotCnt']
let bike = a['parkingBikeTotCnt']
// console.log(name,rack,bike)
let temp_html = ``
if (bike < 5) {
temp_html = `
${name}
${rack}
${bike}
`
} else {
temp_html = `
${name}
${rack}
${bike}
`
}
// let temp_html = `
// ${name}
// ${rack}
// ${bike}
// `
$('#names-q1').append(temp_html)
})
})
}
9. 내가 만든 영화 소개 페이지에 서울시 온도를 붙여보기.
먼저 온도를 알려주는 텍스트가 있는 박스를 만들고 Id를 달아주자.
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
<div class="mytemp">
현재 서울의 날씨 : <span id="temp">20</span>도
</div>
서울의 온도 데이터를 변수화 한다.
제이쿼리를 이용해서 id가 temp 인 html 에 만든 변수를 대입.
$(document).ready(function () {
fetch("<<a href=http://spartacodingclub.shop/sparta_api/weather/seoul>http://spartacodingclub.shop/sparta_api/weather/seoul</a>>").then(res => res.json()).then(data => {
// console.log(data['temp'])
// 서울 온도 데이터 변수 선언
// seoul_temp = data['temp']
let seoul_temp = data['temp']
// 삽입할 HTML 형식 정의
// html_temp = `현재 서울의 날씨 : ${seoul_temp}도`
// 서울 온도 데이터를 넣기
$('#temp').text(seoul_temp)
})
})
지난번 연습들과는 다르게 버튼을 누르는 동작을 하지 않더라도 계속 온도를 표시하고 있어야 하는데, 아래 처럼 쓰면 코드가 자동으로 시작된다.
$(document).ready(function () {
// code~~~~
})
'들은 강의' 카테고리의 다른 글
| [웹개발 입문 강의] [Python] 기본 문법, 라이브러리, 크롤링 (0) | 2023.06.08 |
|---|---|
| [웹개발 입문 강의] [JavaScript] Fetch 복습 (0) | 2023.06.08 |
| [웹개발 입문 강의] [HTML, CSS] 정적페이지를 만들어 웹에 배포해보기 (0) | 2023.06.07 |
| [혼자 공부하는 C언어] - 1~3 (컴파일러, 데이터 출력, 상수, 데이터 표현, 변수, 데이터 입력) (0) | 2023.06.06 |
| [생활코딩 자바2] - 6. JAVA 예외(checked exception, Finally, Resource, Try with Resource) (1) | 2023.06.06 |
