개발자 꼬부기의 성장일기
[스파르타 코딩클럽] 웹개발종합반 개발일지(2주차) 본문
1. Javascript / 2. JQuery / 3. Fetch
Javascript 는 웹을 움직이게 하는 코드
jQuery 는 html 뼈대를 선택해서 쉽게 조작할 수 있음
Fetch 는 짧은 코드로 요청을 보내고 받아올 수 있음
1. Javascript : 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
<head></head> 안에 <script></script> 내에 자바스크립트를 작성한다.
1) javascript 기본문법
- console.log(변수) : 콘솔창에 찍어볼 때
- let num = 20 : 변수선언하는 방법
- 리스트: 순서를 지켜서 가지고 있는 형태 ex) let a_list = [] / let b_list = [1,2,'hey',3]
- 딕셔너리: 키(key)-밸류(value) 값의 묶음 ex) let b_dict = {'name' : 'Bob', 'age':21}
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 새로운 정보가 추가되어도 .push 함수를 이용해 간단하게 대응 할 수 있다.
forEach문
2. JQuery : HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리
자바스크립트보다 직관적으로 쓸 수 있다.
1) 쓰는방법
a. import 먼저 하기 <head></head>안에 삽입
주석 처리 : 주석처리하고 싶은 줄앞에 "//" 쓰면됨
$(’#아이디’) 라고 작성하면 같은 아이디 값에 해당하는 html요소를 선택합니다!
$('#q1').append(temp_html) : q1이라는 아이디 값에 temp_html 변수의 값을 추가한다.
예제에서는 html 문을 temp_html값에 대입해서 백틱을 통하여 유동적으로 html 문장을 만들 수 있다.
3. 서버-클라이언트 통신 이해하기 (JSON)
4. Fetch
예제) 서울따릉이 현황
fetch함수로 json형태의 row값들을 받아온다.
넣고자하는 부분을 일단 비우고(empty())
forEach문을 통해 각각의 요소를 가져온다.
백틱을 통해 html문을 추가하면서 보여준다.
여기서는 따릉이수가 5대 미만이면 빨간색으로 표시되게 함으로 class 값 적용여부에 따라 디자인이 달라진다.
느낀점
JQuery를 써본적이 있어서 기억이 잘 나긴하는데 forEach문과 Fetch는 좀 생소했다. 써먹어봐야 알것 같다.
역시 기술이란... 금방금방 바뀌는것 같다. 부지런하게 공부했어야했는데 너무 소홀했다.
'언어공부 > 웹' 카테고리의 다른 글
| Vue.js 3.0 개발가이드 정리(1) (0) | 2024.06.19 |
|---|---|
| 도커 Docker 란 (0) | 2023.06.20 |
| [러닝핏] 파이썬공부 7차시-8차시 변수 입력, 출력 (0) | 2023.03.18 |
| [스파르타 코딩클럽] 웹개발종합반 개발일지(3주차) (0) | 2023.03.18 |
| [스파르타 코딩클럽] 웹개발종합반 개발일지(1주차) (0) | 2023.03.02 |
