html: 뼈대
css: 꾸미기
javascript: 움직이기
jQuery: html 뼈대를 선택해서 쉽게 조작할 수 있게 만든 것 (bootstrapt처럼 남들이 만든 코드모음, 즉 라이브러리)
Fetch: 짧은 코드로 요청을 보내고 받아올 수 있게 한 것
1. Javascript
javascript란?
웹 브라우저가 알아들을 수 있는 언어
javascript 작성방법
<head> ~ </head> 안에 <script> ~ </script> 즉 script 태그 안에 작성!
java vs javascript ?
인도와 인도네시아... 즉, 아무런 연관이 없다!
console.log()
코딩한 결과를 확인하기 위해 개발자들이 미리 찍어보는 도구 → 화면 우클릭한 후 검사 or F12눌러서 확인 가능!
변수, 리스트, 딕셔너리
- 변수: 값을 저장하는 박스
let a = 2 //처음 선언하는 변수는 let으로 선언
a = 'Bob' // 문자열은 작은 따옴표로 감싸주기- 리스트: 순서를 가지고 있는 형태
let a = ['사과','수박','딸기','감']
console.log(a[1]) // 수박
console.log(a[0]) // 사과
//컴퓨터는 0부터 시작, 즉 리스트 안 첫 번째 값은 [0]으로 불러옴
//리스트 길이 구하기
console.log(a.length) //4- 딕셔너리: key - value 값의 묶음
let a = {'name':'영수','age':27} // 딕셔너리 선언
console.log(a['name']) // 영수
console.log(a['age']) // 27반복문
* 리스트 안에 들어있는 값의 개수만큼 반복됨
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a) //사과, 배, 감, 귤 순서대로 출력
})조건문
if (조건) {
// 조건이 참일때
} else {
// 조건이 거짓일때
}2. jQuery
jQuery: 미리 작성된 Javascript 코드, 즉 쓰기 전에 항상 "import"할 것!(<head>태그 안에)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>사용 방법
1) button/div/ .. 등을 id 값을 지정해 조작
2) $(’#아이디값’) 으로 어떤 html 태그를 바꿀 것인지 지정
3) 바꿔줄 명령어 적어줌
function checkResult() {
let a = '사과'
$('#q1').text(a)
}
<div id="q1">테스트</div>
// 실행하면 테스트가 사과로 바뀜붙이기(.append)
- 원하는 html 태그를 백틱(````)으로 묶어 주기
- 태그 안에 들어갈 값은 ${} 로 표시하고, 그 안에는 자료가 있는 변수 넣기
- 통째로 넣을 html 요소를 $('#아이디')로 골라주시고 appnd(변수) 넣기
function checkResult() {
let fruits = ["사과", "배", "감", "귤", "수박"];
$("#q1").empty(); // 기존 값 지우기
fruits.forEach((a) => {
let temp_html = `<p>${a}</p>`;
$("#q1").append(temp_html);
});
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 name = a["name"];
let age = a["age"];
let temp_html = `<p>${name}는 ${age}살입니다.</p>`;
$("#q2").append(temp_html);
});
}
<body>
<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>3. 서버-클라이언트 통신
- JSON: 서버에서 클라이언트로 내려줄 때 dictionary 형태(key:value)형태로 내려줌
- 클라이언트 → 서버 요청 타입
- GET: 통상적으로 데이터 조회(Read)를 요청할 때
- POST: 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
- API: 은행의 창구와 같은 역할
4. Fetch
기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})Fetch 코드 해설
fetch("여기에 URL을 입력") // 이 URL로 웹 통신을 요청한다. 괄호 안에 URL 외에 다른 것이 없다면 GET!
.then(res => res.json()) // 통신 요청을 받은 데이터는 res라는 이름으로 JSON화
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용Fetch는 jQuery를 사용할 것이기 때문에 jQuery를 임포트한 페이지에서만 동작
'항해99' 카테고리의 다른 글
| [항해99 1주차] JS문법 종합반 - 2주차 (0) | 2023.04.05 |
|---|---|
| [항해99 1주차] JS문법 종합반 - 1주차 (0) | 2023.04.05 |
| [항해99 온보딩]웹개발 종합반 4주차 (0) | 2023.03.23 |
| [항해99 온보딩]웹개발 종합반 3주차 (0) | 2023.03.22 |
| [항해99 온보딩]웹개발 종합반 1주차 (0) | 2023.03.20 |
댓글