-
웹개발 2주차 (Java Script, JQuery, Fetch)Python 2023. 4. 27. 20:30
https://teamsparta.notion.site/2-6458f24becaf446b87f4eff5836906c1#e7e0a940dc264e4dbb53608ace9444d9
Java Script : 웹을 움직이게 하는 코드
JQuery : html 뼈대를 선택해서 쉽게 조작할수있도록 함 Bootstrap 처럼 jQuery도 남들이 만든 코드모음, 라이브러리.
Fetch : 짧은 코드로 요청을 보내고 받아올 수 있음
<title>안에 CSS를 써준 뒤 (.mytitle { }, .mytitle>button { } .mycomment { } 등),
<body>안에 상응하는 CSS를 써준것 처럼 <div class="mytitle">, <div class=".mycomment"> 등
<head>안에는 JavaScript 써줌. 보통 <style>~</style> 아래에 씀.1.<script>let a = 5let b = 3console.log(a+b)</script>2.<script>let a = ['사과', '수박', '딸기', '감']console.log(a[0]) -> 첫번째 요소 사과. 첫번째가 숫자0부터 시작.</script>3.<script>let a = ['사과', '수박', '딸기', '감']console.log(a.length) ->요소가 몇개들었는지 (4개)</script>4.<script>let a = {'name' : '영수', 'age' : 27} (dictionary : 중괄호)console.log(a['name']) -> dictionary가 중괄호이지만, 내용물은 대괄호</script>5.<script>let a = [{'name' : '영수', 'age' : 27},{'name' : '철수', 'age' : 15},{'name' : '영희', 'age' : 20}]console.log(a[1]['age']) -> 0번째는 영수, 1번째는 철수, 2번째는 영희. (a[1]['age']) 이므로 답은 15.</script>▼ JQuery 함수
<script>function checkResult(){let a = ['사과', '배', '감', '귤']$('#q1').text(a[1]) -> 특이하므로 잘알아둬야함. $('#바꿀아이디').text(바꿀대상)
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>▼ 반복문
<script>let fruit = ['사과', '배', '감', '귤']fruit.forEach((a) => { ->반복문 순서 : 소괄호, 소괄호, 화살표, 중괄호 (( ) => { })console.log(a) -> a는 임의지정 문자. 다른것 써도})</script>▼ 조건문
<script>let age = 24
if (age > 20){console.log('성인입니다')} else {console.log('청소년입니다')}</script>▼ 반복문 + 조건문
<script>let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {if (a > 20) {console.log('성인입니다')} else {console.log('청소년입니다')}})
</script><script> function checkResult() {
$('#q1').empty() -> empty로 기존 변수 없앰.let fruits = ['사과', '배', '감', '귤', '수박']fruits.forEach((a) => {let temp_html = `<p>${a}</p>`$('#q1').append(temp_html) -> JQuery로 순서대로 한번씩.})
let people = [{ 'name': '서영', 'age': 24 },{ 'name': '현아', 'age': 30 },{ 'name': '영환', 'age': 12 },{ 'name': '서연', 'age': 15 },{ 'name': '지용', 'age': 18 },{ 'name': '예지', 'age': 36 }]$('#q2').empty() -> empty로 기존 변수 없앰.people.forEach((a) => {let name = a['name']let age = a['age']let temp_html = `<p>${name}는 ${age}살입니다.</p>` -> name과 age를 구분지어줌.$('#q2').append(temp_html)})
}</script>Fetch 연습하기.
<head><meta charset="UTF-8"><title>Fetch 시작하기</title><script>console.log(data) → data 부분에 url정보가 입력됨.})</script></head>Fetch의 기본 골격.
fetch("URL주소 입력").then(res => res.json()).then(data => {console.log(data)})fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
Fetch 연습하기
<script>function q1() {let rows = data ['RealtimeCityAir']['row']console.log(rows)})}</script><script>
let rows = data['RealtimeCityAir']['row'] -> 'ReadtimeCityAir'와, 'row'는 웹사이트에서 구하고자하는 값row.forEach((a)=>{console.log(a) -> url웹사이트에 있는 내용 전체 다 나옴.})})</script>
<script>let rows = data['RealtimeCityAir']['row']rows.forEach((a) => {console.log(a['MSRSTE_NM'],a['IDEX_MVL']) -> 도심권과 현재 온도 데이터만 선택적으로 추출해낼수 있음.})})
</script><script>function q1() {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 = `<li>${gu_name} : ${gu_mise}</li>` ->$(구이름), $(미세먼지 농도)$('#names-q1').append(temp.html)})})}</script><style type="text/css">.bad {color: red; ->미세먼지 농도가 40이 넘는 지역만 빨간색 처리 (밑에 if절)}</style><script>function q1(){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>따릉이 예제
<script>function q1() {
let rows = data['getStationList']['row']rows.forEach((a) => {let name = a['stationName']let rack = a['rackTotCnt']let bike = a['parkingBikeTotCnt']console.log(name, rack, bike)})})}</script>console창에 전체 나옴.
<script>function q1() {
let rows = data['getStationList']['row']$('#names-q1').empty()rows.forEach((a) => {let name = a['stationName']let rack = a['rackTotCnt']let bike = a['parkingBikeTotCnt']
let temp_html = `<tr><td>${name}</td><td>${rack}</td><td>${bike}</td></tr>`$('#names-q1').append(temp_html)})})}</script><style type="text/css">.bad {color: red; ->주차된 따릉이 개수가 5대 미만 지역만 빨간색 처리 (밑에 if절)}</style><script>function q1() {
let rows = data['getStationList']['row']$('#names-q1').empty()rows.forEach((a) => {let name = a['stationName']let rack = a['rackTotCnt']let bike = a['parkingBikeTotCnt']
let temp_html = ``
if (bike < 5) {temp_html = `<tr class="bad"><td>${name}</td><td>${rack}</td><td>${bike}</td></tr>`} else {temp_html = `<tr><td>${name}</td><td>${rack}</td><td>${bike}</td></tr>`}
$('#names-q1').append(temp_html)})})}</script>'Python' 카테고리의 다른 글
웹개발 4주차 - 2 (메타태그) (0) 2023.05.03 웹개발 4주차 (백엔드-프론트엔드, 프로젝트1 : 화성땅 공동구매) (0) 2023.05.02 웹개발 3주차 (파이썬, 크롤링, 지니뮤직 예제) (0) 2023.05.01 웹개발 1주차 (서버-클라이언트, HTML, CSS) (0) 2023.04.26