728x90 전체 글156 [Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() Javascript 원하는 태그로 스크롤 이동하기 Element.scrollIntoView 이동 원하는 엘리먼트.scrollIntoView() 기능에 대한 설명은 샘플예제 속 주석 처리를 위해 소스 코드 하나하나 설명해놓았음 기본 형태 //Element : 이동 원하는 엘리먼트 Element.scrollIntoView(옵션); 샘플 예제 : 액션가면을 찾아라! 출력 결과 2021. 5. 23. [Javascript] 마우스 이벤트 mouse event [자바스크립트] 마우스 이벤트 모음 Mouse Events mouseover : 해당 엘리먼트 위에 마우스 커서가 진입한 순간 이벤트 발생 mouseout : 해당 엘리먼트 위에서 마우스 커서가 이탈하는 순간 이벤트 발생 mousedown : 해당 엘리먼트 위에서 마우스 버튼을 클릭하는 순간 이벤트 발생 mouseup : 해당 엘리먼트 위에서 마우스 버튼 클릭 후 떼는 순간 이벤트 발생 mousemove : 해당 엘리먼트 위에서 마우스의 커서가 움직이는 동안 이벤트발생 샘플 예제 출력 결과 2021. 5. 21. [Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload [자바스크립트 / Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload와 unload 차이와 사용 예제 웹 로드시 이벤트 window.addEventListener('load', 콜백함수); DOM 요소 로드시 이벤트 window.addEventListener('DOMContentLoaded', 콜백함수); 웹 브러우저 윈도우 창 종료 직전 이벤트 window.addEventListener('beforeunload', 콜백함수); 웹 브라우저 윈도우 창 종료 이벤트 window.addEventListener('unload', 콜백함수); 샘플 예제 출력 결과 ps. unload는 종료해야 생기는 이벤트 이므로 console.log에 출력되지 않는 것을 알수 있다 2021. 5. 21. [Javascript] script 태그 안에 defer란? [자바스크립트] script 태그 안에 defer란? DOM 요소의 로드가 끝나고 난 후 해당 스크립트를 실행하라는 속성이다 유사한 기능을 수행하는 것으로는 윈도우 로드 이벤트가 있는데 window.addEventListener('load',e=>{}); 해당 이벤트는 DOM 요소 뿐 아니라 모든 요소의 로드 이후에 실행을 하라는 이벤트인 점에서 defer와 차이가 있다 기본 형태 샘플 예제 [index.html] [example.js] console.log(`example.js 실행~!`); 출력 결과 (콘솔) example.js 실행~! index.html:13 window > load 이벤트 실행! 2021. 5. 21. [FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo [프론트엔드 / 자바스크립트] 스크롤 이동하기 window.ScrollBy window.ScrollTo 현재 좌표를 기준으로 전달된 좌표만큼 이동하고 싶다면 window.scrollBy(x,y) 전달된 좌표로 이동 하고 싶다면 window.scrollTo(x,y) 기본 형태 //현재 좌표값 + 전달된 좌표값 window.scrollBy(x,y) //전달된 좌표값으로 이동 window.scrollTo(x,y) 샘플 예제 500px 지점 출력 결과 2021. 5. 21. [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (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] 페이스북 아이디로 로그인 하기 코드 샘플 (소스코드) 자바스크립트 / Javascript 를 통해 페이스북 아이디로 로그인 하기 코드 샘플 사용 방법 1. 페이스북 개발자 아이디 생성 및 앱 등록 💡 자세한 방법은 하단의 링크 참조 https://goodmemory.tistory.com/99 [Javascript] 페이스북 아이디로 간편 로그인 기능 구현 Facebook Login 홈페이지 페이스북 간편 로그인 기능 구현 [Javascript Facebook Login] 내 웹 사이트에 페이스북 로그인 기능을 구현하려면 먼저 아래와 같은 준비물이 필요하다 1. 페이스북 개발자 계정 2. 페이스북 goodmemory.tistory.com 2. 자신의 프로젝트에 facebook.js 파일 생성 하고, 하단의 코드를 facebook.js 파일에 복붙 하기 let.. 2021. 5. 15. [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. 이전 1 ··· 3 4 5 6 7 8 9 ··· 16 다음 728x90
