웹표준/Performance & Intergration (7) 썸네일형 리스트형 8. requestAnimationFrame () window.requestAnimationFrame()은 window객체에 정의되어있다. 이는 WebGL과 함께 제공되며 지정된 함수의 호출을 다른 연산에 방해 주지않고 최대한 빨리 호출해준다. 화면에서 애니메이션을 업데이트 할 준비가 될 때마다 window.requestAnimationFrame()를 호출해야한다. window.requestAnimationFrame ( 콜백함수 ); - 콜백함수 : next repaint를 하기위해 애니메이션을 업데이트 할때 호출 할 함수. 6. hasFocus() - hasFocus() : 문서 내부의 요소에 초점이 있는지 여부를 나타내는 Document를 리턴한다. (true/false) var focused = document.hasFocus(); //true, false 리턴 예제 다른 윈도우창을 띄워서 기존 페이지와 윈도우 팝업창을 각각 클릭하면서 포커싱이 어디로 되어있는지 확인. Awaiting focus check. Open a new window 5. HTML요소의 드래그&드랍 API 특정 엘리먼트를 원하는 위치로 드래그하여 옮기는 방식이며 아래와 같은 경우에 사용할 수 있다. 데이터를 가진 엘리먼트 위치를 바꾸는 경우 파일을 업로드 하는 경우 데이터를 삭제/추가 하는 경우 드래그&드랍 이벤트 이벤트 설명 dragstart 사용자가 객체(object)를 드래그하려고 시작할 때 발생함. dragenter 마우스가 대상 객체의 위로 처음 진입할 때 발생함. dragover 드래그하면서 마우스가 대상 객체의 위에 자리 잡고 있을 때 발생함. drag 대상 객체를 드래그하면서 마우스를 움직일 때 발생함. drop 드래그가 끝나서 드래그하던 객체를 놓는 장소에 위치한 객체에서 발생함. dragleave 드래그가 끝나서 마우스가 대상 객체의 위에서 벗어날 때 발생함. dragend 대상 객체를 .. 4. contenteditable 속성 거의 모든 html요소에 속성( contenteditable="true" )으로 설정하여 텍스트 편집이 가능하도록 설정. This text can be edited by the user. 텍스트 편집기 예제 Edit Document A Nice Heading. Last Edited By - Monty Shokeen Some content that needs correction. https://codepen.io/Shokeen/pen/OMggQQ localStorage Inline Editor ... codepen.io 3. history API SPA (싱글 페이지 애플리케이션) : 하나의 페이지로 만들어진 웹. 페이지 이동시 로딩효과(화면 깜빡임)없이 내용과 주소가 바뀌는 홈페이지. window객체에 내장된 history를 사용. 앞뒤로 이동 window.history.back(); window.history.forward(); 특정 지점으로 이동 window.history.go(-1) window.history.go(1) window.history.length 주소 내역은 하나의 목록이며, 이 목록을 추가하면 페이지를 이동하는셈이다. 목록에 주소를 추가하기위한 2개의 HTML5 메소드가 추가되었다. pushState replaceState 1. window.history.pushState() // pushState(바귄주소와함께 저장할 데이.. 2. XMLHttpRequest (XHR) Ajax : Javascript라이브러리 중 하나이며 비동기식 자바스크립트이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해 전체 페이지를 리로드 하지않고 페이지의 일부만을 위한 데이터를 로드할 수 있다. 비동기(async)방식 : 웹 페이지를 리로드 하지않고 데이터를 불러오는 방식. 불필요한 리소스낭비를 막을 수 있다. XMLHttpRequest를 이용한 Ajax 구현 과정 1) XMLHttpRequest 객체 구하기 2) 웹 서버에 요청 전송하기 3) 웹 서버에서 응답이 도착하면 화면에 반영 웹 서버에 요청 전송 - open() : 요청의 초기화. 3개의 인자값을 가진다. 인자1 : GET / POST / HEAD 중 하나의 방식설정 인자2 : 접속할 URL 인자3 : 동기/비동기 .. 1. Web Worker Web Worker는 백그라운드 스레드에서 스크립트를 실행할 방법을 제공함. Javascript : 싱글 스레드에서 동작. 웹 브라우저 : 다중 스레드에서 동작함. Web Worker는 브라우저의 메인 스레드와 별개로 작동되는 스레드를 생성 할 수 있다. 이러한 스레드는 브라우저 렌더링같은 메인 스레드의 작업을 방해하지않고, 새로운 스레드에서 스크립트를 실행하는 간단한 방법을 제공한다. Web Worker 예제 var n = 'done'; // 오래걸리는 // 무언가를 // 처리함... postMessage(n); // 데이터를 메인쓰레드의 .onmessage에게 전달 if( window.Worker ) { var worker = new Worker('worker.js'); // 워커 쓰레드 생성 wor.. 이전 1 다음