코딩기록
자바스크립트 함수 및 정보 정리 - 3 본문
for 문 에서 i는 let 변수 사용해야 함
이유:
let 변수의 적용범위는 { } 안이기 때문에 각 중괄호 안에서 지정된 숫자가 출력됨
var 변수의 적용범위는 function이기 때문에 향후 이벤트리스너 실행 시 for문의 최종 숫자가 i에 적용됨
for (let i = 0; i < $(".list li").length; i++) {
$(".tab-button")
.eq(i)
.on("click", function () {
$(".tab-button").removeClass("orange");
$(".tab-content").removeClass("show");
$(".tab-button").eq(i).addClass("orange");
$(".tab-content").eq(i).addClass("show");
});
}
이벤트버블링: 이벤트가 상위html로 퍼지는 현상
이벤트리스너 e 활용방법
e.target; // 유저가 실제로 누른 태그 산출
e.currentTarget; // 이벤트리스너 달린 태그 산출
this; // (e.currentTarget 와 똑같이) 이벤트리스너 달린 태그 산출
e.preventDefault(); // 이벤트 기본동작 막아줌
e.stopPropagation(); // 내 상위요소로 이벤트 버블링 막아줌
<모달창 바깥 누르면 닫게 하는법>
$(".black-bg").on("click", function (e) {
console.log(e.target);
console.log(document.querySelector(".black-bg"));
if (e.target == document.querySelector(".black-bg")) { // (참고) JQuery는 .black-bg 찾을때 다른 형태로 나와서 바로 사용 불가, 별도 라이브러리 사용 필요
$(".black-bg").removeClass("show-modal");
}
});
오브젝트 자료형 = key : value 형태로 저장, 순서 개념 없음(따라서 인덱싱, 정렬 불가 / ※array는 정렬 가능)
var car2 = {name: "소나타", price: 50000, color: "white"};
꺼낼때 car2.name 또는 car2[‘name’]
1. 클라이언트 사이드 렌더링
완성된 html 파일
2. 서버 사이드 렌더링
빈 html 파일 + 데이터(html 완성은 js가 하도록)
데이터 바인딩: 데이터를 빈칸에 꽃아넣는 것
텍스트박스에서 현재 선택한 값 가져오는 법
e.currentTarget.value
array.forEach
sizeList.forEach(function(data ,i ) {
sizeSelectBox += `<option>${data}</option>`;
});
// 함수 () 안에 아무 변수 써주면, 그 변수가 array 인자 하나씩 반복하는 것임 // 쉼표 뒤 i 는 0부터 1씩 증가하는 정수가 나옴
arrow function 사용 방법
sizeList.forEach( (size ,i ) => {
sizeSelectBox += `<option>${size}</option>`;
});
function과 차이점: this를 function 안에서 쓰면 뜻이 달라질 수 있음
오브젝트 자료 반복문
for (var key in obj {
console.log(obj[key]);
)
자바스크립트 정렬
문자순 정렬
array.sort();
숫자 오름차순 정렬
array.sort(function (a, b) {
return a - b;
});
a, b는 array안의 자료이고 모든 숫자를 둘씩 비교해서, a-b가 양수면 a를 오른쪽으로 옮김
내림차순은 => b - a
자바스크립트 필터
var newArray = array.filter(function (a) { // 필터는 어딘가 저장해서 쓰게 되어있음
return a > 50;
});
map => 값을 바꿀때 사용
var mapArray = array.map(function (a) {
return a * 50;
});
console.log(mapArray);
DOM(Document Object Model): 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한 것
localStorage
localStorage는 사이트 재접속해도 유지
localStorage.setItem('이름', 'kim') 저장하는법
localStorage.getItem('이름'); key 가져오는법
localStorage.removeItem('이름'); 삭제하는법
개발자도구 -> Application에서 확인 가능
문자만 저장 가능(array 등은 저장 불가)
그러나 JSON.stringify으로 변경하여 json으로 저장 가능
var arr = [1,2,3];
var newArr = JSON.stringify(arr);
localStorage.setItem('num', newArr);
(저장한 걸 가져올 때 JSON.parse(x)로 다시 배열로 변경 가능)
수정하려면 자료꺼냄 -> 꺼낸거 수정 -> 다시넣음
sessionStorage는 사이트 나가면 자동삭제
sessionStorage.xxx로 사용 가능