-
22020311 스파르타코딩 개발일지 EP.22022년 스파르타코딩 2022. 3. 11. 03:19반응형
2주차 목표
- Javascript 문법에 익숙해진다.
1. Javascript 복습 - 짝/홀수에 따라 다른 alert() 띄우는 onclick 함수 만들어보기!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타코딩클럽 | 자바스크립트 복습</title>
<script>
let num = 0;
function handleClick() {
num += 1;
if (num % 2 == 0) {
alert('짝짝짝');
} else {
alert('홀홀홀');
}
}
</script>
</head>
<body>
<button onclick="handleClick()">이 버튼을 눌러보세요</button>
</body>
</html>
- jQuery로 간단한 HTML을 조작할 수 있다.
1. jQuery : HTML의 요소들을 조작하는, 편리한 Javascript를 미리 만들어 둔 라이브러리(미리 작성된 Javascript 코드)
2. JQuery 다뤄보기 : 미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 함
(헤드 사이에 값을 복사해서 붙이면 됨)
https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
3. jQuery를 사용하는 방법 :
- CSS에서는 선택자로 class를 썼지만 jQuery에서는 id 값을 통해 특정 button / input-box / div 등을 가리킨다.
예) 특정 인풋박스의 값을 → 가져와줘! 예) 특정 div를 → 안보이게 해줘!
스텝 1. input 박스의 값을 가져와보기
id 값이 post-url인 곳을 가리키고, val()로 값을 가져온다.
$('#post-url').val();
스텝 2. div 보이기 / 숨기기
id 값이 post-box인 곳을 가리키고,
hide()로 안보이게 한다.(=css의 display 값을 none으로 바꾼다)
$('#post-box').hide();
show()로 보이게 한다. (=css의 display 값을 block으로 바꾼다)
$('#post-box').show();
스텝 3. css의 값 가져와보기
스텝 4. 태그 내 텍스트 입력하기
input box의 경우 4-1)버튼의 텍스트 바꾸기
$('#btn-posting-box').text('포스팅 박스 닫기');
스텝 5. 태그 내 html 입력하기
<div> ~ </div> 내에, 동적으로 html을 넣고 싶을 땐? (예를 들어, 포스팅되면 → 카드 추가)
1) 버튼을 넣어보기
let temp_html = '<button>나는 추가될 버튼이다!</button>';
$('#cards-box').append(temp_html);
2) 버튼 말고, 카드를 넣어보기
// 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다. (키보드 숫자 1왼쪽에 위치함)
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.let img_url = 'https://www.eurail.com/content/dam/images/eurail/Italy%20OCP%20Promo%20Block.adaptive.767.1535627244182.jpg';
let link_url = 'https://naver.com/';
let title = '여기 기사 제목이 들어가죠';
let desc = '기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...';
let comment = '여기에 코멘트가 들어갑니다.';
let temp_html = `<div class="card">
<img class="card-img-top"
src="${img_url}"
alt="Card image cap">
<div class="card-body">
<a href="${link_url}" class="card-title">${title}</a>
<p class="card-text">${desc}</p>
<p class="card-text comment">${comment}</p>
</div>
</div>`;
$('#cards-box').append(temp_html);
★★★★★템플릿 리터럴(Template Literal)★★★★★
- 문자열 표기법이며 문자열 생성시 따옴표 대신, ` ` (백틱)으로 선언할 수 있다.
- 개행(줄바꿈) 문자를 따로 쓰지 않더라도 개행 문자를 인식한다.
- ${} 을 이용해 표현식 삽입 (Expression interpolation) 으로 읽기 쉬운 문자열을 만들 수 있다.
- 표현식에 작성된 값은 문자열로 변환된다.
그래서 `` 이용해서 temp_html에서 ${} 값을 넣어 그대로 가져와 쓸 수 있었단 것임.
- Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.
1. 서버-클라이언트 통신 이해하기 : 클라이언트→서버: GET 요청 이해하기
* 서버(server)는 클라이언트에게 네트워크를 통해 서비스하는 컴퓨터를 의미
클라이언트→서버: GET 요청
GET → 통상적으로! 데이터 조회(Read)를 요청할 때 / 예) 영화 목록 조회
POST : 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 / 예) 회원가입, 회원탈퇴, 비밀번호 수정
2. Ajax시작하기
참고! Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.
즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.
Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻
2-1) jax 기본 골격
$.ajax({
type: "GET", // GET 방식으로 요청한다.
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성 }
})
느낀점 :
여러 명칭이 있지만 제이쿼리가 자바스크립트의 모음집이라 간단히 기억하고
Ajax는 아직까지는 생소하다.
되새겨본다면 url에서 데이터를 가져와 response에 담고 success: function(response){
} 사이에서 let 변수 선언해서 담을 데이터를 response[""][""]식으로 한 후
for 문이나 IF문 조건식을 대입해 데이터를 가져온다.
가져온 데이터를 다시 변수선언 해 AAA에 담아두고
이후 제이쿼리문과 백틱을 이용해 let temp_html = `<a> ${AAA} </a>`
$('#변수명').append(let temp_html) 을 통해 추가시키는 작업을 한다
$("#img-cat").attr("src", imgurl) : 주소값 변경
$(document).ready(function(){
alert('다 로딩됐다!') }); : 로딩 후 호출하기(바로 페이지가 떴을때 실시간 값!!)
이렇게 큰 틀을 정리해 보았다.
친구초대링크: 혜택도 받아가세요
https://spartacodingclub.kr/?f_name=%EA%B9%80%EC%98%81%EC%9D%B8&f_uid=61e82f002664a651fff7fc8d
스파르타코딩클럽
왕초보 5주 완성! 웹/앱/게임 빠르게 배우고 내것을 만드세요!
spartacodingclub.kr
반응형'2022년 스파르타코딩' 카테고리의 다른 글
데이터 분석 EP.01 (0) 2022.06.04 22020318스파르타코딩 개발일지 EP.5 FINAL (0) 2022.03.18 22020315 스파르타코딩 개발일지 EP.4 (1) 2022.03.15 22020313스파르타코딩 개발일지 EP.3 (0) 2022.03.13 22020309 스파르타코딩 개발일지 EP.1 (0) 2022.03.09