-
728x90더보기
배운것
1. Javascript의 동작과 리스트, 딕셔너리 사용법
2. JQuery의 사용형태 : $(’#아이디값’)
3. forEach의 기본형태 및 사용방법
4. append의 기본형태 및 사용방법
5. Fetch 의 기본형태 및 사용방법
6. Fetch의 단건, 다건 조회 및 변경방법
[목표]
- Javascript의 사용방식에 대해 이해하고 문법에 익숙해진다.
- JQuery로 HTML을 조작할 수 있다.
- Fetch로 서버 API에 데이터를 주고, 결과를 받아온다.
1강을 토대로 움직이는 웹을 만들어 보자!
HTML : 뼈대
CSS:꾸미기
javascript: 움직이기Javascript: 웹을 움직이게 하는 코드(동작을 명령함)
jQuery: html를 간편하게 수행할 수 있도록 도와주는 도구
Fetch: 웹 브라우저와 서버 간의 HTTP 요청을 처리하기 위한 메소드로 클라이언트와 서버간의 통신을 관리함
🔷 1. Javascript
: 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어이다.
✅ 실습(1) - 버튼을 클릭하면 경고창이 뜨게하기
<head>
(......)
<script>
function hey() {
alert('안녕하세요')
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
<head> </head> 안에 <script> </script> 내용을 입력하고 함수를 설정한다.
부여한 함수를 원하는 태그에 onclick으로 부여해준다.
👉 해석하자면
(1) 버튼을 클릭하면(onclick)
(2) hey()를 불러서
(3) alert(’안녕’)을 실행하라는 의미가 된다.
🔻 리스트란?
: 자바스크립트에서 "리스트"는 여러 개의 항목을 저장하고 관리하는 자료구조를 의미한다.일반적으로 배열(Array)이 자바스크립트에서 리스트의 역할을 수행하며,
배열은 순서가 있는 항목들의 집합으로, 각 항목은 인덱스를 통해 접근할 수 있다.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let a = ['사과','수박','딸기','감'] // 로 선언 가능 console.log(a[1]) // 수박 console.log(a[0]) // 사과 //리스트 길이 구하기 console.log(a.length) //4
값을 불러올때는 선언된 변수의 명에 인덱스값을 입력한다
ex) 변수명[인덱스값]🔻 딕셔너리란?
: 자바스크립트에서 "딕셔너리"는 키-값 쌍을 저장하고 관리하는 자료구조를 의미한다.
딕셔너리는 특정 키(key)에 대응하는 값(value)을 저장하며, 각 키는 고유해야 한다.
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능! // 또는, let a = {'name':'영수','age':27} // 로 선언 가능 console.log(a) console.log(a['name']) // 영수 console.log(b_dict['age']) // 27
값을 불러올때는 선언된 변수의 명에 '키값'을 입력한다
ex) 변수명['키 값']
반드시 ' '(작은 따옴표)를 사용한다.
📌 리스트와 딕셔너리의 조합
: 순서를 표시할 수 있고 정보를 묶을수 있기 때문에 자주 사용되는 조합이다.
<기존정보>
let customer_1_name = '김대한';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박민국';
let customer_2_phone = '010-4321-4321';
....
⏬ 딕셔너리로 변환시 ⏬
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
⏬⏬ 리스트로 변환시 ⏬⏬
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]위의 코드를 통해 리스트와 딕셔너리의 장점을 모두 활용할 수 있는것을 확인했다.
추후에 데이터의 추가등록이 필요할 경우 .push를 통해 간단하게 조작이 가능하다.
✅ 실습(2) - 리스트와 딕셔너리의 혼합형
let a = [ {'name':'영수','age':27}, {'name':'철수','age':15}, {'name':'영희','age':20} ] console.log(a[0]['name']) //영수 console.log(a[1]['age']) //15
리스트와 딕셔너리의 성질을 그대로 이어서
값을 불러올때 변수명[인덱스]['키 값']을 사용한다.
🔷 2. JQuery
: jQuery는 JavaScript 기반의 빠르고 강력한 라이브러리로, HTML 문서의 요소 선택, 조작, 이벤트 처리 등을 간편하게 수행할 수 있도록 도와주는 도구이다. jQuery는 웹 개발자들에게 다양한 기능과 유용한 도구를 제공하여 웹 애플리케이션 개발을 더욱 쉽고 효율적으로 만들어 준다.
🔍 javascript도 웹을 움직이게 할 수 있는데 굳이 jQuery를 사용하는 이유가 무엇일까❓
👉 javascript를 사용해도 되지만 jQuery을 사용하면 코드를 더 편리하게 쓸 수 있다는 장점이 있다.// Javascript 코드 document.getElementById("element").style.display = "none";// jQuery 코드 $('#element').hide();⛔ 주의할 점
: jQuery로 사용할 경우 보다 직관적으로 쓸 수 있지만 jQuery는 미리 작성된 Javascript 코드를 가져오는 것이라서 반드시 임포트를 하고 사용해야된다.
// jQuery CDN 임포트 //사이트: https://www.w3schools.com/jquery/jquery_get_started.asp <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> </head>
✅ 실습(3) - jQuery 사용해보기
① id로 지칭해준다. (<div id="q1"></div>)
<div class="list-part">
<h2>2. 리스트</h2>
<div id="q1"></div>
</div>
② $(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정한다.
<script>function checkResult() {let a = '사과'$('#q1').text(a)}</script>$(’#아이디값’)
👉 $('#q1') = q1을 .text(a) = a값 으로 바꿔줘
즉, 사이트에서 checkResult() 를 실행했을 때
q1을 text(a) 로 변경하게 된다.
👆 리스트형 예시
✔ 이렇게도 리스트로도 사용 가능하다.
해석:<divid="q1"></div> 을 문자열 리스트의 두 번째 값으로 바꿔라.
<script>
function checkResult() {
let a = ['사과','배','감','귤']
$('#q1').text(a[1])
$('#q1').css('color','red')
}
</script>
✔ 이렇게 색상 지정도 가능하다!
✌ 딕셔너리형 예시
let b = { "name" : "영수", "age" : 30 }$('#q2').text(b['name'])✔ 3. 딕셔너리의 값을 불러내서 q2라는 아이디 값이 있는 곳에 넣는다.
✔ 4. 리스트 딕셔너리를 통해 q3이라는 아이디 값이 있는 곳에 넣는다.
📘 Javascript & JQuery 연습하기
1. 반복문 (forEach)
2. 조건문 (if-else)🔸 1. 반복문 (forEach)
: forEach()는 자바스크립트 배열(Array)의 메서드 중 하나로, 배열의 각 요소에 대해 주어진 함수를 순회하면서 실행하는 역할을 한다.
forEach() 메서드는 반복문을 대체하여 간편하게 배열 요소에 접근하고 작업을 수행할 수 있도록 도와준다.
형태
: <요소>.forEach((변수) => {})
ex)
let fruits = ['사과', '배', '감', '귤']
fruits.forEach((a) => {
console.log(a)
})
<script>
let fruits = ['사과', '배', '감', '귤']
fruits.forEach((a) => {
console.log(a)
})
// fruits 의 요소를 하나씩 확인하는데 이름을 a라고 함
// a자리에는 다른 문자 b,c,zzz,fruit등등 어떤 것을 사용해도 상관없다.
</script>
📍TIP : 반복문과 자주 사용되는 append
자바스크립트의 append()는 요소에 새로운 요소를 추가하는 기능을 한다.append() 메서드는 주어진 요소를 선택한 요소의 마지막 자식(child)으로 추가한다.
parentElement.append(childElement);* parentElement: 새로운 요소를 추가할 부모 요소
* childElement: 추가할 요소👉 반복문(forEach) 에 appand 쓰면 어떤 데이터를 하나씩 받아와서 붙여준다고 보면 된다.
✅ 실습(4) appand 사용방법
function checkResult() { let fruits = ['사과', '배', '감', '귤', '수박'] $('#q1').empty() fruits.forEach((a) => { let temp_html = `<p>${a}<p>` $('#q1').append(temp_html) })① 반복문을 실행한다.
② 변수 let temp_html = `` 을 선언한다
🔍 백틱(``)안에 원하는 html의 태그를 넣어준다!!
🔍 감싼 백틱(``)안에 변수를 넣을 경우 반드시 ${ }을 사용한다
③ 원하는 id 값에 .append를 해준다.
④ 기존값이 있는 경우 반복문(forEach)를 진행하기 전에 $('#q1').empty()를 해준다.
즉, append는 외부 데이터를 가져와서 붙이는 작업이 가능하다.
🔷 3. 서버-클라이언트 통신
1) 서버→클라이언트: "JSON"을 이해하기
: 서버에서 클라이언트로 데이터를 내려줄 때 딕셔너리 형태로 주는것을 말한다.
: RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어있다.
2) 클라이언트→서버: GET 요청 이해하기
: API (Application Programming Interface) 의 약자로, 소프트웨어 애플리케이션끼리 서로 통신하기 위해 정의된 규약이나 인터페이스를 말한다. 서버와 클라이언트 간의 상호작용을 단순화하고 표준화하기 위해 사용된다.
🔷 4. Fetch
: fetch() 함수는 클라이언트 측에서 서버에 HTTP 요청을 보내고 응답을 받는 기능을 제공한다.
: jQuery가 임포트 된 상태인지 확인해보고 진행하기.
<Error>
Uncaught TypeError: $ is not a function
→ jQuery 라는 게 없다는 뜻이다.// fetch의 기본형태
<script>
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
</script>
- Fetch 코드 설명 - `fetch("여기에 URL을 입력")` ← 이 URL로 웹 통신 요청을 보낸다 - ← 이 괄호 안에 **URL밖에 들어있지 않다면** `기본상태인 GET!` - `.then()` ← 통신 요청을 받은 다음 이렇게 하겠다. - `res ⇒ res.json()` - ← 통신 요청을 받은 데이터는 res 라는 이름을 붙인다 (변경 가능) - ← res는 JSON 형태로 바꿔서 조작할 수 있게 하겠다! - `.then(data ⇒ {})` ←JSON 형태로 바뀐 데이터를 data 라는 이름으로 붙인다
✅ 실습(5) 미세먼지 API로 원하는 값 출력하기
<script>let rows = data['RealtimeCityAir']['row']rows.forEach((a) => {console.log(a['MSRSTE_NM'],a['IDEX_MVL'])})
})</script>🔽 fetch 부분 확인
- URL: 서울시 미세먼지 API
- let rows = data['RealtimeCityAir']['row'] API의 row를 rows로 지정
- rows 요소를 하나씩 확인하는 이름을 a라고 정함
구 이름과 미세먼지 수치를 찍어달라
ㄴ> Fetch는 서버에서 데이터를 받아올게 있는 URL이라면 Fetch의 URL자리에 해당 주소를 넣으면 데이터를 받아온다.
기존 데이터의 양식을 보고 필요한 값을 걸러낸다.
✅ 실습(6) fetch 예시
👉 [if문 사용] 현재 이용가능한 자전거가 5대 미만이면 style .red를 실행( 빨간색으로 변경)✅ 실습(6) fetch 예시 - 기존 HTML에서 fetch로 받아온 온도값 1개만 수정하는 방법
$('#temp').text(number)
<div>현재 서울의 날씨 : <span id="temp">20</span>도</div>
728x90'웹개발 종합반' 카테고리의 다른 글
[4강 정리] Flask, GET요청, POST요청 (0) 2023.08.03 [3강 정리] MongoDB, pymongo 저장, 조회, 변경, 삭제 (0) 2023.08.03 [3강 정리] 파이썬(Python) 반복문, venv 설정, 웹크롤링(bs4), select, select_one (0) 2023.08.03 [1강 정리] HTML, CSS(중앙정렬, 파일분리) 백그라운드 이미지 채우기, 이미지 어둡게 (0) 2023.08.03