강의 4개
자바스크립트 / sort()의 원리
결론
결과가 +이면, 오른쪽에 있는(b)를 왼쪽으로 보낸다.
원리
결과가 +이면, b를 왼쪽으로 보낸다.
결과가 -이면, b를 오른쪽으로 보낸다.
- 예시
- 오름차순 정리
- 7-3=4 결과는 +이다. 그러므로 3을 왼쪽으로 보낸다.
const arr1 = [7,3,5]; arr1.sort(function(a,b){ return a-b; });
- 예시2
- cba순 정리
- 's'는 'a'보다 크다.
- 그러므로 's'를 왼쪽으로 보낸다.
const arr1 = ['a','s','d']; arr1.sort(function(a,b){ return a < b : 1 ? -1 });
코드리뷰 / 코드 짜는 방법
결론
- 만들기
- 확장성잡기
확장성 잡는 방법
반복문화
- 숫자빼고, 같은 것들
함수화
- 반복되는 코드들
갯수를 변경하더라도 같은 결과를 출력하도록 만들기
- 설명
- 물건 판매 카드 만들고 있음
- 물건 종류가 3개라서 물건 카드를 html로 3개 만들었음
- 근데 확장성 있게 만드려면, 물건 종류가 늘어나도, 그 만큼 물건 카드가 더 생기도록 만들고 싶음
자바스크립트 / 백틱 문자열에 js변수 추가하기
변수를 ${}로 감싼다.
`abc${변수}def`cf) 따옴표 문자열에 js변수 추가
- 변수를 넣고 싶은 곳을 기준으로 문자열을 쪼갠다.
- "abcd" -> "ab""cd"
- 쪼갠 문자열 사이에 +변수+ 를 넣는다.
- "ab""cd" -> "ab" + 변수 + "cd"
"abc"+ 변수 +"def"jQuery 동적 html 생성
결론 : 변수에 html을 넣고, append(변수)아니라 그냥 바로 append(html 코드)를 하자
- 이유 : append(변수)를 이용하면, 화면에 변수의 초기값도 생성된다.
$(".card-group").html("");
for (let i = 0; i < lowPriceProducts.length; i++) {
$(".card-group").append(`<div class="card">
<img src="https://via.placeholder.com/600" />
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p>가격 : <span class="card-price">70000</span>원</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>`);
$(".card-title").eq(i).text(lowPriceProducts[i].title);
$(".card-price").eq(i).text(lowPriceProducts[i].price);
}첫번째 : 일단 html을 없앤다.
$(".card-group").html("");
두번째 : 원하는 부분에 html을 넣는다.
for (let i = 0; i < lowPriceProducts.length; i++) { $(".card-group").append(`<div class="card"> <img src="https://via.placeholder.com/600" /> <div class="card-body"> <h5 class="card-title">Card title</h5> <p>가격 : <span class="card-price">70000</span>원</p> <button class="btn btn-danger">주문하기</button> </div> </div>`); }
자바스크립트 / forEach() -> 반복문 + 배열
- 배열의 요소 갯수만큼 반복시킨다.
- 익명함수의 인수 a는 변수의 요소이다.
- 첫번째 실행일 때는 a는 26이다.
- 두번째 실행일 때는 a는 28이다.
... - 네번째 실행일 때는 a는 32이다.
const arr = [26, 28, 30, 32];
arr.forEach(function(a){
`<div>${a}</div>`
})자바스크립트 / DOM 개념
정의
- 자바스크립트가 html을 가져올 때, html을 읽을 수 있도록, html을 자바스크립트의 object(객체)로 바꾸는 것이다.
왜 오류가 나는지
- html을 가져오려고 할 때, 해당 html의 DOM이 생성되지않아서, 자바스크립트가 이해하지 못하기 때문에 오류가 발생한다.
<script>
document.getElementById('test').innerHTML = '안녕'
</script>
<p id="test">임시글자</p>jQuery ready 이벤트
- 모든 html의 DOM을 생성한 후에, 내부 코드를 실행시켜서, html을 가져온다.
<script>
$(document).ready(function(){
document.getElementById('test').innerHTML = '안녕'
});
</script>
<p id="test">임시글자</p>ready 이벤트의 쌩 자바스크립트 버전
document.addEventListener('DOMContentLoaded', function() {
//DOM생성이 완료되었을 때 실행할 코드
});load 이벤트
응용 : 이미지가 다 로딩되면, 이미지 UI가 뜨도록 한다.
- 이미지, css, js파일의
DOM생성뿐만아니라파일이 로드됐는지 체크한다.
$('img').on('load', function(){
//이미지가 다 로드가 되었을 경우 실행할 코드
});- 모든 것이
로드됐는지 체크한다.
$(document).on('load', function(){
//이미지가 다 로드가 되었을 경우 실행할 코드
});jQuery / Ajax
정의
- 서버에 데이터를 요청해서 받아오는 것, 새로고침없이 받아온다.
쓰는 이유
- 새로고침없이 GET/POST방식으로 데이터를 요청하기 때문에,
방식
- GET
- URL에 정보를 담아서 요청한다.
- 검색
- POST
- 데이터를 다른 곳에 담아서 요청한다
- 로그인
코드 예시
- jQuery 코드이다.
$.ajax().done()
- 버튼 클릭하면, ajax를 통해서 요청한다.
- ajax()
- 함수안은 객체형태이다.
- 데이터를 받아올 url입력
- 요청방식 입력
- done()
- 함수안에는 익명함수가 있다.
- 익명함수의 파라미터 e는 요청이 성공했을 때, 받아온 데이터이다.
- 요청이 성공하면, html의 content를 받아온 데이터로 바꾼다.
- fail()
- 요청이 실패하면, 실행되는 함수
- always()
- 요청 성공, 실패 상관없이 항상 실행되는 함수
$(".ajax-btn").on("click", function () {
$.ajax({
url: "https://codingapple1.github.io/hello.txt",
type: "GET",
}).done(function (e) {
$(".ajax-text").text(e);
}).fail(function () {})
.always(function () {});
});
dev