공부/자바스크립트10 자바스크립트 바벨 이용 es6 → es5 Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io 바벨을 쓰는 이유는 최신 버전의 자바 스크립트가 실행되지 않는 구버전의 브라우저들에서 실행시키기 위해 자바 스크립트를 바벨을 이용해서 변환을 해준다. 역시 nodejs를 설치 해야 한다. 초기화 terminal -> npm init -y -y는 자동으로 yes package.json 파일을 만들어줌 babel-cli 설치 npm install --save-dev babel-cli npm install -g babel-cli -g 옵션으로 글로벌 설치 ( 매번 바벨을 설치할 필요 없이 공용으로 사용함 ) --save-.. 2021. 6. 10. javascript 특정 요소로 이동 See the Pen xxqxjgG by CodingCitron (@codingcitron) on CodePen. 2021. 5. 6. 탑 버튼 scrollTo element.onclick = () => { window.scrollTo({top: 0, behavior: 'smooth'}); } 사이트를 보다가 스크롤을 많이 내렸을 때 탑으로 보내주는 버튼을 볼 수가 있는데 위에 코드로 쉽게 구현할 수 있다. behavior : 'smooth' 를 넣으면 말 그대로 스무스하게 top: 0 좌표로 이동시켜 준다. 넣지 않는다면 순간이동시켜줄 것이다. 2021. 5. 6. javascript 특정 위치로 이동 시키기 document.querySelector('element').focus(); document.querySelector('element').scrollIntoView(); scrollIntoview 메소드는 모든 요소에 적용이 가능하고 해당 요소가 보이는 영역으로 이동한다. 이외에 id 값을 주고 링크를 만들어서 이동시킬 수 있다. 2021. 5. 5. mouseWheel 이벤트 방향 감지 window.onmousewheel = function(e){ if(e.wheelDelta > 0){ console.log('위'); }else{ console.log('아래'); } } mousewheel 이벤트에 event.wheelDelta 를 보면 위는 120 값이 나오고 아래로 이동 시에는 -120 값이 나온다. 2021. 5. 5. 뒤로가기 감지 window.onpageshow = function(event) { if (event.persisted || (window.performance && window.performance.navigation.type == 2)) { } } pageshow 페이지 처음로드 동일한 창 또는 탭의 다른 페이지에서 페이지로 이동 모바일 OS에서 고정 된 페이지 복원 브라우저의 앞으로 또는 뒤로 버튼을 사용하여 페이지로 돌아 가기 persisted - boolean 페이지가 캐시에서 로드 웹 페이지로드는 캐시에서 경우 읽기 전용 속성을 나타냅니다. window.performance 이거는 mdn을 봐도 모르겠다. window.performance.navigation.type == 2 Window.performance.. 2021. 5. 3. 이전 페이지 주소 가져오기 var referrer = document.referrer; 이전 페이지의 URI를 가져온다. 이것을 이용해서 이전 페이지가 로그인 페이지거나 회원가입 페이지일 때 메인 페이지로 이동하게 만들었다 이 외의 페이지들은 이전 페이지의 주소로 이동하게 한다. 즉 예를 들어 상품 구매를 하다가 로그인을 해야 한다면 메인 페이지로의 이동이 아닌 다시 상품 구매 페이지로 가야할 것이다. if(referrer.indexOf(page) != -1){ window.location.href = "index.jsp"; }else{ window.location.href = referrer; } indexOf()는 존재하지 않을 때 -1 나오는데 != 로 해서 존재할 때로 만들어 주었다. 즉 if(referrer.indexOf.. 2021. 5. 3. 로그인 후 뒤로가기 막기 window.history.forward(); 로그인 후 session으로 로그인 페이지의 url을 통한 이동은 막겠지만 뒤로가기는 되는데, 위에 코드를 적으면 저 코드가 적힌 페이지는 뒤로가기로 이동할 수 없다. History.forward() - Web API | MDN History.forward() History.forward() 메서드는 브라우저가 세션 기록의 바로 앞 페이지로 이동하도록 지시합니다. history.go(1)과 같습니다. 다음 페이지가 없는 경우 아무것도 하지 않습니다. 이 메서드는 developer.mozilla.org 또 다시 로그인 되는 부분또한 막을 수 있다. 로그인 페이지와 회원가입 페이지에 사용하면 좋을 거 같다. 2021. 5. 3. 자바스크립트 textarea 자동 높이 조절 keydown : 키보드를 눌렀을 때 keyup : 키보드에서 손을 뗐을 때 textarea는 height의 값을 넣어주지 않으면 높이 값이 변하지 않는다. 그래서 콘텐츠가 보이는 부분을 넘어가면 스크롤 바가 생기게 되는데 스크롤 바의 높이를 height 값으로 준다. 문제는 콘텐츠가 줄어들었을 때 어떻게 height를 줄일까인데 그 부분은 기본 값인 textarea의 height를 auto 상태로 만들어주면 콘텐츠만큼의 스크롤 바 높이를 가지게 된다. 즉 height auto로 가진 콘텐츠만큼의 스크롤 바 높이를 만들어주고 그다음 스크롤 바 높이를 textarea height의 값으로 설정해 주면 keydown은 누르고 있을 시 계속해서 동작하며 keyup은 키보드에서 손을 뗐을 때 동작하므로 자동으로.. 2021. 5. 1. scroll 이벤트 (스크롤 효과) scroll 이벤트 방법 1 window.addEventListener('scroll', scrollEffect); function scrollEffect(){ const ELEMENT = document.querySelector('.element'); if(window.scorllY >= 300){ ELEMENT.style.opacity = '1'; ELEMENT.style.transform = 'translateX(0px)'; ELEMENT.style.transition = '1s ease-in-out'; }else{ ELEMENT.style.opacity = '0'; ELEMENT.style.transform = 'translateX(-100px)'; } } 방법 2 function scrollAp.. 2021. 4. 25. 이전 1 다음
