웹표준 (32) 썸네일형 리스트형 2. Touch Events 터치이벤트 예제 캔버스 생성 Your browser does not support canvas element. Log: 이벤트 핸들러 설정 //html 캔버스 생성 . . . function startup() { var el = document.getElementById("canvas"); el.addEventListener("touchstart", handleStart, false); el.addEventListener("touchend", handleEnd, false); el.addEventListener("touchcancel", handleCancel, false); el.addEventListener("touchmove", handleMove, false); } document.addEvent.. 1. Camera API - Camera API를 사용하면 디바이스의 카메라로 사진을 찍어 현재 웹페이지에 업로드 가능함. HTML Camera API A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too). Preview: All the code is available in the Camera API repository on GitHub... 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 2 3 4 다음