비투즈의 노트르담

전체 글 (58)

  1. 2014.04.13 indexd Database API

    indexed Database API : 클라이언트에서 동작하는 데이터베이스를 조작하는 API 오브젝트 스토어. 인덱스키 밸류 스토리지를 작성 오브젝트 스토어 : 자바스크립트 객체형태. 데이터베이스에 정보 저장하고 인덱스 자유롭게 지정해 유연한 검색 가능 Indexed Database 객체 유무 확인 window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; open()함수로 생성 var request = indexDB.open("product_db"); 요청처리후 성공/실패 이벤트 request.onsuccess = start; request.onerror = showerror; 이벤트 발생시 function..

  2. 2014.04.12 지오로케이션 API

    지오로케이션 API : 실행중 브라우저에서 사용자 현재위치 얻기 위한 자바스크립트 API 3개의 함수형태 제공. window.navigator객체에 정의. getCurrentPosition() : 현재위치 한번만 얻음 watchPosition() : 현재위치 계속 추적 clearWatch() : watchPosition()함수 종료 navigator의 geolocation객체 getCurrentPosition()함수를 이용해 콜백함수 정의.

  3. 2014.04.11 웹워커

    웹페이지 단일스레드로 모든 작업 처리 자바스크립트의 새로운 기술 웹워커(Web workers)로 멀티 스레드 구현 가능 자바스크립트 코드를 UI 스레드와는 별도인 백그라운드에서 수행하는 방법 제공 웹브라우저 웹페이지 로드되어 실행될때 하나의 스레드로 동작 (단점 : 용량 큰파일 다운로드 받는작업과 같은 오랜시간 작업 시 다른 작업 할수 없음) 웹워커 : 백그라운드에서 실행시키기위한 기술. 오랜시간걸리는 코드 별도 스레드로 실행 종류 : 전용워커 / 공유워커 전용워커(Dedicated Worker) : 워커 생성한 페이지서만 백그라운드 프로세스 응답하는 형태 공유워커(Shared Worker) : 하나의 워커가 여러개 문서에 응답하는 형태 HTML페이지와 웹워커 코드 자바스크립트 파일 전용워커 시 HTML..

indexed Database API : 클라이언트에서 동작하는 데이터베이스를 조작하는 API

오브젝트 스토어. 인덱스키 밸류 스토리지를 작성

 

오브젝트 스토어 : 자바스크립트 객체형태. 데이터베이스에 정보 저장하고 인덱스 자유롭게 지정해 유연한 검색 가능

 

Indexed Database 객체 유무 확인

  window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;

open()함수로 생성

var request = indexDB.open("product_db");

요청처리후 성공/실패 이벤트

request.onsuccess = start;
 request.onerror = showerror;

이벤트 발생시

function showerror(e){
 console.log(e);
}

성공 이벤트시

function start(e){
 db = e.target.result;
 if(db.version !='1.0'){
  var request = db.setVersion('1.0');
  request.onsuccess = createDB;
  request.onerror = showerror;
 }
 displayList();
}

객체의 저장소 생성

function createDB(){
 var store = db.createObjectStore('product',{keypath:'id'});
}

 

 

지오로케이션 API : 실행중 브라우저에서 사용자 현재위치 얻기 위한 자바스크립트 API

 

3개의 함수형태 제공.

window.navigator객체에 정의.

 

getCurrentPosition() : 현재위치 한번만 얻음

watchPosition() : 현재위치 계속 추적

clearWatch() : watchPosition()함수 종료

 

navigator의 geolocation객체 getCurrentPosition()함수를 이용해 콜백함수 정의.

웹워커2014. 4. 11. 22:05

웹페이지 단일스레드로 모든 작업 처리

 

자바스크립트의 새로운 기술 웹워커(Web workers)로 멀티 스레드 구현 가능

 

자바스크립트 코드를 UI 스레드와는 별도인 백그라운드에서 수행하는 방법 제공

 

 

웹브라우저 웹페이지 로드되어 실행될때 하나의 스레드로 동작

(단점 : 용량 큰파일 다운로드 받는작업과 같은 오랜시간 작업 시 다른 작업 할수 없음)

 

웹워커 : 백그라운드에서 실행시키기위한 기술. 오랜시간걸리는 코드 별도 스레드로 실행

종류 : 전용워커 / 공유워커

   전용워커(Dedicated Worker) : 워커 생성한 페이지서만 백그라운드 프로세스 응답하는 형태

   공유워커(Shared Worker) : 하나의 워커가 여러개 문서에 응답하는 형태

   HTML페이지와 웹워커 코드 자바스크립트 파일

 

전용워커 시

HTML

var worker = new Worker("worker.js");로 객체생성시 자바스크립트 파일을 전달한 후

워커 객체는 자바스크립트 파일을 내려받아 백그라운드에서 실행한다.

비동기로 데이터공유위해

worker.postMessage(message); message는 문자열 혹은 JSON객체

js파일

onmessage = function(e){

postMessage("send message : "+e.data);

};로 전달한다.

 

     공유워커 시

       var worker = new SharedWorker("sharedWorker.js");

    onconnect = function(e){

var port = e.ports[0];

port.onmessage = function (event){};

port.postMessage("welcome!"+event.data);

};

worker.port.postMessage(message);