내가 보려고 쓰는 기록

if 대신 switch 문법 쓸 수 있음 switch(변수){ 변수가 3이면 이거 실행해주세요 변수가 4이면 이거 실행해주세요 } let 변수 = 2+2; switch(변수){ case 3: alert('변수가 3이네요'); break case 4: alert('변수가 4이네요'); break default: alert('아무것도 해당안됨') } case - if와 비슷 breack - switch문 중지해주세요 default - else와 비슷 if는 다양한 조건식 가능 switch는 변수 1개만 테스트 가능, 코드 깔끔, 변수 하나만 검사할 때 간편하게 사용 가능

⭐a,b 값 구하기 위한 1차 함수 ⭐스크롤이벤트 ⭐opacity(불투명도) ⭐position : stiky *top 속성 필수 ⭐transform html, javascript css /*스크롤*/ .card-background{ height:3000px; margin-top: 800px; margin-bottom: 1600px; } .card-box img { display: block; margin:auto; /*가운데 정렬*/ max-width:80%; } .card-box{ position:sticky; top:400px; /*top 400px 부터 고정됨*/ margin-top:200px; }​

👏드래그(터치)해서 이미지 넘기기 기능 만들어 보잣 ✔ 기능 1. 내가 드래그 한 거리만큼 박스도 왼쪽으로 움직여야 함 내가 50px만큼 드래그했으면 이미지박스도 50px 움직여야 함 so 내가 얼만큼 드래그 했는지 알아야함 알아야할 이벤트 mousedown - 마우스 버튼 누를 때 발생하는 이벤트 = touchstart mouseup - 마우스 버튼 뗄 때 = touchend mousemove - 마우스 움직였을 때 = touchmove e.clientX - 지금 마우스 있는 x 좌표 *왼쪽으로 갈수록 0에 가까워짐, 오른쪽으로 갈수록 증가 ex) 현재 mousedown한 x 좌표는? $('.slide-box').eq(0).on('mousedown',function(e){ console.log(e.cl..

※ 구매버튼 누르면 장바구니에 상품명 추가되는 기능 버튼눌렀을때 내정보, 내가 선택한 상품이 서버에 보내진 후 저장 되어야함 but 우리는 서버 안만들음 반영구적으로 데이터 저장할 수 있는곳 만들어야함 브라우저 안에 몰래 데이터 저장 가능 브라우저 -> 개발자도구 -> Application 탭 -> Storage 쭈루룩 우리가 쓸 storage 는 - Local Storage - Session Storage 둘다 키값:밸류값 형태로 저장 가능 둘다 5MB의 문자/숫자만 저장 가능 LocalStrorage는 사이트 재접속해도 유지됨 *반영구적 SessionStorage는 사이트 나가면 자동삭제 ● LocalStorage에 데이터 저장 localStroage.setItem('키값','밸류값'); localS..

array 함수 .sort()는 원본 변형 O .filter()는 원본 변형 X -변수 새로 만들음 .map()은 원본 변형 X -변수 새로 만들음 1. sort() : 정렬함수 ● 문자정렬 - 가나다순 array.sort(); -역순 var 어레이문자=['가','나','다']; 어레이문자.sort(function(a,b){ if (a

반복문의 용도 1. 코드반복 2.array, object 데이터 전부 꺼낼 때 function -> arrow function 사용 가능 *주의 arrow function 쓰면 함수의 this 뜻이 달라질수있음 ex) 쇼핑몰에서 바지를 선택하면 거기에 맞는 바지 사이즈 옵션 열어줌 만약 바지사이즈가 매일 달라지면? 계속 바꾸기 너무 불편 서버에서 데이터 가져와서 그 데이터 갯수만큼 태그 만들면 됨 데이터가 array라면 array 함수 forEach 반복문 forEach : array 안에있는 데이터 갯수 만큼 반복 forEach(function(a){ 실행할 코드 }) *a는 array에서 가져온 데이터들 var shirts = [95, 100, 105, 110]; var pants = [28, 30,..

insertAdjacentHTML : 앞에 요소에 문자형 HTML 추가해주는 함수, insertAdjacentHTML(추가할 위치, 추가할 문자) var 테스트 = '안녕'; document.querySelector('#test').insertAdjacentHTML('beforeend',테스트); //jQuery $('#test').append(테스트); Q. 추가말고 아예 바꾸고 싶으면? innerHTML document.querySelector('#test').innerHTML="하요"; //jQuery $('#test').html('하요');

안에 옵션 넣으면 됨, 사용자가 입력하는 것이므로 과 비슷 모자 셔츠 Q. 그럼 왜 안 쓰고 씀? 은 사용자가 직접 입력하는 거라 자유로워서 이상한 거 입력할 수도 있는데 은 사용자가 입력할 수 없고 고르는 것만 가능 ✨ 안에 넣기 $('.form-select').eq(0).on('input',function(){ //input : 값 변경될때 이벤트 작동 if(this.value =='셔츠'){ //this == e.currentTarget, 현재 선택한 밸류가 셔츠면 $('.form-select').eq(1).removeClass('form-hide'); }else{$('.form-select').eq(1).addClass('form-hide');} }) 안에 대충 적은 코드는 페이지 로드 시 1회만..