본문 바로가기
728x90

프론트엔드/Javascript58

[프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) [Front-end / Javascript] 프론트엔드 자바스크립트로 좌표 값 구하기 브라우저에서 좌표값은 크게 두가지 종류로 나뉘는데 첫번째는 "전체 스크롤 기준" 으로 구할 수 있고 두번째는 "현재 창 기준"으로 구할수 있다 기본 형태 //브라우저 전체 (스크롤 전체) 기준 좌표 값 event.pageX : 스크롤 전체 기준 X 좌표 값 event.pageY : 스크롤 전체 기준 Y 좌표 값 //현재 창 기준 좌표 값 event.clientX : 현재 창 기준 X 좌표 값 event.clientY : 현재 창 기준 Y 좌표 값 아래 예제는 클릭했을때 현재 포인터가 위치한 좌표를 구하는 예제이다 샘플 예제 출력 결과 2021. 5. 21.
[프론트엔드 / 자바스크립트] 브라우저 엘리먼트 좌표 값 구하기 elem.getBoundingClientRect() [Front-End / Javascript] 브라우저 엘리먼트 좌표 값 구하기 기본 형태 elem.getBoundingClientRect(); 객체 구조 elem.getBoundingClientRect().x : 현재 창기준 x좌표 elem.getBoundingClientRect().y : 현재 창기준 y좌표 elem.getBoundingClientRect().width : 엘리먼트 가로 elem.getBoundingClientRect().height : 엘리먼트 세로 elem.getBoundingClientRect().top : 현재 창기준 세로 시작점 부터 엘리먼트 윗변 까지의 거리 elem.getBoundingClientRect().left : 현재 창기준 가로 시작점 부터 엘리먼트 왼쪽변 까지의 .. 2021. 5. 20.
[프론트엔드] 윈도우 창 / 스크롤바 / 브라우저 사이즈 feat 자바스크립트 [자바스크립트 / Javascript] 윈도우 창 / 스크롤바 / 브라우저 / 컨텐츠 사이즈 알아내기 window.screen.width / window.screen.height : 사용자 전체화면 사이즈 window.outerWidth / window.outerHeight : 브라우저 전체 사이즈 (검색창 포함) window.innerWidth / window.innerHeight : 브라우저 내부 사이즈 (검색창 미포함 / 스크롤바 포함) document.body.clientWidth / clientHeight : 브라우저 현재 화면 사이즈 (검색창 미포함 / 스크롤바 미포함) 샘플 예제 실행 결과 2021. 5. 20.
[Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login 홈페이지 페이스북 간편 로그인 기능 구현 [Javascript Facebook Login] 내 웹 사이트에 페이스북 로그인 기능을 구현하려면 먼저 아래와 같은 준비물이 필요하다 1. 페이스북 개발자 계정 2. 페이스북 개발자 계정 내 페이스북 앱 등록 3. 페이스북 개발자 앱 등록 ID, 웹 URL 등록 페이스북 개발자 계정 가입하기 아래 페이스북 개발자 공홈에서 회원가입을 한다. https://developers.facebook.com/ Facebook for Developers Facebook for Developers와 사용자를 연결할 수 있는 코드 인공 지능, 비즈니스 도구, 게임, 오픈 소스, 게시, 소셜 하드웨어, 소셜 통합, 가상 현실 등 다양한 주제를 둘러보세요. 개발자를 교육하고 연 de.. 2021. 5. 14.
[Javascript] 자바스크립트 엘리먼트 선택자 querySelector, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName [Javascript] 자바스크립트 엘리먼트의 선택 1. 아이디로 찾기 : document.getElementById 2. 클래스명으로 찾기 : document.getElementsByClassName 3. 태그명으로 찾기 : document.getElementsByTagName 4. CSS Selector로 찾기 : document.querySelector, document.querySelectorAll 기본 형태 //아이디로 찾기 document.getElementById('아이디'); //클래스명으로 찾기 document.getElementsByClassName('클래스명'); //태그이름으로 찾기 document.getElementsByTagName('태그이름'); //CSS Selector로 찾.. 2021. 4. 27.
[CSS / Javascript] 메뉴 클릭시 화면 스크롤 이동 CSS / Javascript 메뉴 클릭시 화면 스크롤 부드럽게 이동하기 순수 CSS와 순수 자바스크립트만을 사용하여 구현하였다. 버튼은 간단하게 네모 모양으로 구성하였으며, 메뉴 클릭시 화면 스크롤 이동에 대한 로직은 아래 코드에 모두 구현되어있다. 구동 로직 1. 첫 화면에 초록색 동그란 버튼이 생성되는데 클릭시 가장 하단의 태그에 스크롤이 자동으로 이동된다. 2. 스크롤이 일정범위를 지나면 위쪽의 초록색 버튼이 사라지고 하단에서 최상단으로 한번에 이동할수 있는 오렌지색 버튼이 자동으로 생성된다. 3. 오렌지색 동그란 버튼 클릭시 자동으로 화면의 최상단에 있는 태그 위치로 스크롤을 이동시킨다. 샘플 예제 출력 결과 2021. 4. 17.
[Javascript] 엘리먼트 위치로 스크롤 이동 scrollIntoView() Javascript 엘리먼트 위치로 스크롤 이동 엘리먼트.scrollIntoView() scrollIntoView()는 보통 메뉴바에서 많이 쓰이는데 싱글페이지 앱에서 메뉴 버튼 클릭시 해당되는 위치로 스크롤이 이동되는 기능을 수행한다. 기본 골격 element.scrollIntoView(); //괄호안에 {behavior : 'smooth'} 코드 추가시 //스크롤 이동이 ease-in-out과 같이 부드러워진다 샘플코드 menu1 menu2 menu3 menu4 출력 결과 2021. 4. 15.
[Javascript] cookie 사용하기 Javascript Cookie 사용하기 꼭 서버를 통한 웹서비스가 아니더라도 웹서비스에서 사용자 인증 등을 위해 쿠키를 사용할 일이 있는데, 이번에는 자바스크립트를 통한 간단한 쿠키사용 예시이다. 👇서버측 쿠키 제어는 하단의 링크를 참고하자👇 https://goodmemory.tistory.com/72 Cookie 만들기 Cookie Example Cookie 확인 Cookie Example 출력 결과 2021. 4. 1.
[Javascript] some 배열, 객체 내 원하는 값 있는지 확인 Javacscript 배열Array 또는 객체Object 내 원하는 값 있는지 확인 배열 또는 객체 내 원하는 값이 있는지 확인할수 있는 api는 some이다. 아래 배열, 객체에서의 사용 예제를 참고하자. 사용 예 let result = 배열또는객체.some(value => value === 찾는값); 배열내 확인 //배열 내 원하는 데이터 확인 const arr = [1,2,3,4,5]; const result = arr.some(function(val)=>{ return val === 3; }); 객체 내 확인 //객체 내 30세 이상 찾기 const Person = [ {name: '홍길동', age : 30}, {name: '이영희', age : 18}, {name: '박철수', age : 16.. 2021. 4. 1.
[Javascript] 스크롤 이벤트 (Scroll Event) Javascript 스크롤 이벤트 Scroll Event 마우스 스크롤 이벤트란? 마우스 스크롤을 움직였을때 발생하는 이벤트 기본 구조 //스크롤 이벤트 추가 : 'scroll' window.addEventListener('scroll',e=>{ //스크롤 움직였을때 원하는 기능 삽입 }); 샘플예제 스크롤 이벤트 결과 출력 2021. 3. 31.
728x90