내가 보려고 쓰는 기록

문자 중간에 변수 넣을때 '문자' + 변수명 + '문자' 넣어도 되지만 더 쉽게 넣는 방법 있음 var a = '안녕' `문자${a}문자` ex)

프론트엔드 특징 - 데이터 꺼내는 일이 매우 많음 array, object 둘다 복잡한 자료에서 원하는 데이터 꺼낼때 사용 Then, 걍 하드코딩하면 되는데 왜씀? 서버에서 html파일을 유저에게 보낼때 방법이 두가지 있음(유저가 웹사이트 열었을때) 1.server-side-rendering 완성된 html 파일 전송 서버가 html 다 만들어야해서 서버가 귀찮음 2.client-side-rendering(*요즘유행) 빈html파일 + 데이터 - 빈html 완성은 JS가 하도록 서버가 편함 서버가 보낸 데이터들을 html에 꽂아 넣는 것

✔ array 순서대로여러자료 저장 가능 [자료1, 자료2, 자료3 ...] var car = ['소나타',50000,true]; array에서 자료 꺼내기 var car = ['소나타',50000,true]; console.log(car[0]); array 자료 추가/수정하려면 var car = ['소나타',50000,true]; car[0] = '아반떼'; ✔ object key:value (자료이름 : 자료) 형태로 저장가능한게 장점(!key값 꼭 붙여야함) {key:value, key:value} *key부분이 자료라고 오해하는데 실제 오브젝트에 저장된 자료는 value! (key는 자료이름일뿐) var2 = {name : '소나타',price : 50000}; object에서 자료 꺼내기-키값으..

html 태그안에 몰래 정보 숨기기 가능 data-자료이름 = "값" Products Information Shipping Company User 몰래 숨겼던 자료출력 셀렉터.dataset.자료이름

모든 브라우저는 이벤트 버블링이 일어남 (이벤트가 상위 html로 퍼지는 현상) ex) 로그인하세요 위의 코드에서 white-bg를 클릭하면 클릭을 총 두번한 것 → white-bg + black-bg 위의 코드에서 h4를 클릭하면 클릭을 총 세번한 것 → h4 + white-bg + black-bg ★유용한 이벤트관련 함수들(이벤트이상하게 동작하는 것을 고칠수있음 ex)이벤트 버블링) 이벤트리스너의 콜백함수에 e 넣어주기 document.querySelector('.black-bg').addEventListener('click',function(e){ e.target;//유저가 실제로 누른것 e.currentTarget;//이벤트리스너 달린곳 this; //위와 같은뜻, this는 콜백함수에 e 안넣어..

for 반복문 비슷한 코드 복붙 안해도됨, 코드 반복실행 하는 것 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 $('.tab-button').eq(0).on('click',function(){ // .eq(n) : 왼쪽의 n번째 $('.tab-button').removeClass('orange'); $('.tab-button').eq(0).addClass('orange'); $('.tab-content').removeClass('show'); $('.tab-content').eq(0).addClass('show'); }) $('.tab-button').eq(1).on('click',function(){ $('.tab-button').removeClass('o..

window : document와 비슷한 의미, 현재 html 페이지를 의미 scroll 이벤트리스너 쓸때는 window 쓰기 ★ jQuery $(window).on('scroll',function(){}) ● 유저가 스크롤바를 얼만큼 내렸는지 알려줌(현재 스크롤바 위치 출력) (가로 스크롤은 scrollX) window.scrollY​ ● 한번의 스크롤로 y위치에 가기 ex) window.scrollTo(0,100) : 스크롤바 한번 내리면 위치 100으로 이동 window.scrollTo(x,y) ● 현재위치에서 y만큼 스크롤 해주세요 window.scrollBy(x,y) ★ jQuery $(window).scrollTop() ex) $(window).scrollTop():스크롤 양 $(window)..

function 안의 return은 함수종료기능도 가지고 있음 return 밑에 코드 있어도 실행 안됨 소수점 있는 숫자 연산시 주의점 소수점 반올림하기 .toFixed(소수점 몇자리까지 반올림할건지); toFixed 쓰면 문자로 변환되므로 parseFloat(숫자로 변환할 숫자인척하는 문자)