2주차 : Javascript, jQuery, Fetch
Javascript : 웹을 움직이게 하는 코드
jQuery : html 뼈대를 선택해서 쉽게 조작할 수 있음.
Fetch : 짦은 코드로 요청을 보내고 받음.
기초문법
변수 & 기본연산
let a = 2
a = 'Bob' // 문자열은 작은 따옴표로 감싸줍니다!
// 변수는 값을 저장하는 박스.
// 처음 변수를 저장하려면, let을 앞에 붙여주세요!
let a = 2
let b = 3
console.log(a+b) // 5
let c = '대한'
let d = '민국'
console.log(c+d) // 대한민국리스트 & 딕셔너리
- 리스트 : 순서를 지켜서 가지고 있는 형태.
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = ['사과','수박','딸기','감'] // 로 선언 가능
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//리스트 길이 구하기
console.log(a.length) //4
- 딕셔너리 : 키(key) - 벨류(value) 값을 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let a = {'name':'영수','age':27} // 로 선언 가능
console.log(a)
console.log(a['name']) // 영수
console.log(b_dict['age']) // 27반복문
let fruits = ['사과', '배', '감', '귤']
fruits.forEach((a) => {
console.log(a)
})
// 콘솔창에 사과, 배, 감, 귤 순서대로 출력됨.
// fruits 의 요소를 하나씩 확인하는데 임의의 이름은 a라고 지정.
// a는 b,c,zzz,fruit 어떤 걸로 해도 상관 없음조건문
if (조건) {
// 조건에 맞다면~
} else {
// 아니라면~
}반복문 + 조건문 합치기
let ages = [12,15,20,25,17,37,24]
ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})
jQuery를 왜 쓰는가?
jQuery는 미리 작성된 Javascript 코드. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것임.(그렇기 때문에 쓰기전에 "임포트" 해야 함.
- Javascript
document.getElementById("element").style.display = "none";- jQuery
$('#element').hide();Javascript로도 표현할수 있지만 jQuery는 같은 문장을 짦고 직관적이게 쓸수 있다.
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>head 태그 안에 넣어줘야한다.
jQuery - append
$('#아이디값').append(변수)
- 아이디값이 속해 있는 태그에 변수내용을 뒤에서 부터 추가한다.
- 태그에 덮어 쓸려면 $('#아이디값').empty()을 사용해 비우고 적용한다.
자주 사용되는 코드
$(document).ready(function () {} # 페이지 접속시 실행.Fetch
Fetch를 쓰면 jQuery를 사용할 것이기 때문에 jQuery를 임포트해야 한다. JSON형식의 데이터를 가져 올때 사용함.
JSON : 서버에서 클라이언트로 데이터를 내려줄 때 dictionary 형태로 내려주는게 JSON
Fetch 기본골격
<script>
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
</script>마치며
오늘도 새로운 것을 학습하였다.(Javascript와 그안의 라이브러리인 jQuery, Fetch 등) 최근 몇주간 계속 새로운 것을 학습하니 여전히 머리가 정리가 안되고 복잡한 것 같다. 그래도 블로그로 글을 쓰면서 정리를 하니 나름 글을 쓰기전 보다 어느정도 정리가 된것 같다.
