언어로그/Html/Javascript/CSS에 해당되는 글 4건

HTML5 Canvas API

언어로그/Html/Javascript/CSS 2012. 3. 11. 23:33 





// canvas template

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");


// draw line
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.moveTo(100, 150);
context.lineTo(450, 50);
context.lineWidth = 15;
context.strokeStyle = "#ff0000"; // line color
context.stroke();


// draw arc

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;

context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();


// draw curve

 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX = 288;
 var controlY = 0;
 var endX = 388;
 var endY = 150;

 context.moveTo(188, 150);
 context.quadraticCurveTo(controlX, controlY, endX, endY);
 context.lineWidth = 10;
 context.strokeStyle = "black"; // line color
 context.stroke();



// draw bezier
var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var controlX1 = 140;
 var controlY1 = 10;
 var controlX2 = 388;
 var controlY2 = 10;
 var endX = 388;
 var endY = 170;

context.moveTo(188, 130);
context.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
context.lineWidth = 10;
context.strokeStyle = "black"; // line color
context.stroke();


// draw path
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160); // line 1
context.quadraticCurveTo(230, 200, 250, 120); // quadratic curve
context.bezierCurveTo(290, -40, 300, 200, 400, 150); // bezier curve
context.lineTo(500, 90); // line 2
context.lineWidth = 5;
context.strokeStyle = "#0000ff";
context.stroke();


// draw rectangle

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var topLeftCornerX = 188;
var topLeftCornerY = 50;
var width = 200;
var height = 100;

context.beginPath();
context.rect(topLeftCornerX, topLeftCornerY, width, height);
context.fillStyle = "#8ED6FF";
context.fill();
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();


// draw pattern

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var imageObj = new Image();
imageObj.onload = function(){
    var pattern = context.createPattern(imageObj, "repeat");

    context.rect(10, 10, canvas.width - 20, canvas.height - 20);     
    context.fillStyle = pattern;
    context.fill();
};
imageObj.src = "wood-pattern.png";



// draw image
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var destX = 69;
var destY = 50;
var imageObj = new Image();

imageObj.onload = function(){
    context.drawImage(imageObj, destX, destY);
};
imageObj.src = "darth-vader.jpg";



// draw text
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var x = 150;
 var y = 100;

 context.font = "40pt Calibri";
 context.fillStyle = "#0000ff"; // text color
 context.fillText("Hello World!", x, y);

// draw shadow

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();


// clear canvas

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.rect(188, 40, 200, 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();



// animation

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
 
    // request new frame
    requestAnimFrame(function(){
        animate();
    });
}
 
window.onload = function(){
    // initialize stage
 
    animate();
};


// linear motion
window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function animate(lastTime, myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
 
    // update
    var date = new Date();
    var time = date.getTime();
    var timeDiff = time - lastTime;
    var linearSpeed = 100; // pixels / second
    var linearDistEachFrame = linearSpeed * timeDiff / 1000;
    var currentX = myRectangle.x;
 
    if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
        var newX = currentX + linearDistEachFrame;
        myRectangle.x = newX;
    }
    lastTime = time;
 
    // clear
    context.clearRect(0, 0, canvas.width, canvas.height);
 
    // draw
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
 
    // request new frame
    requestAnimFrame(function(){
        animate(lastTime, myRectangle);
    });
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    var date = new Date();
    var time = date.getTime();
    animate(time, myRectangle);
};


// animation start & stop

window.requestAnimFrame = (function(callback){
    return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback){
        window.setTimeout(callback, 1000 / 60);
    };
})();
 
function drawRect(myRectangle){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.beginPath();
    context.rect(myRectangle.x, myRectangle.y, myRectangle.width, myRectangle.height);
 
    context.fillStyle = "#8ED6FF";
    context.fill();
    context.lineWidth = myRectangle.borderWidth;
    context.strokeStyle = "black";
    context.stroke();
}
 
function animate(lastTime, myRectangle, animProp){
    if (animProp.animate) {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
 
        // update
        var date = new Date();
        var time = date.getTime();
        var timeDiff = time - lastTime;
        var linearSpeed = 100;
        // pixels / second
        var linearDistEachFrame = linearSpeed * timeDiff / 1000;
        var currentX = myRectangle.x;
 
        if (currentX < canvas.width - myRectangle.width - myRectangle.borderWidth / 2) {
            var newX = currentX + linearDistEachFrame;
            myRectangle.x = newX;
        }
        lastTime = time;
 
        // clear
        context.clearRect(0, 0, canvas.width, canvas.height);
 
        // draw
        drawRect(myRectangle);
 
        // request new frame
        requestAnimFrame(function(){
            animate(lastTime, myRectangle, animProp);
        });
    }
}
 
window.onload = function(){
    var myRectangle = {
        x: 0,
        y: 50,
        width: 100,
        height: 50,
        borderWidth: 5
    };
 
    /*
     * make the animation properties an object
     * so that it can be modified by reference
     * from an event
     */
    var animProp = {
        animate: false
    };
 
    // add click listener to canvas
    document.getElementById("myCanvas").addEventListener("click", function(){
        if (animProp.animate) {
            animProp.animate = false;
        }
        else {
            animProp.animate = true;
            var date = new Date();
            var time = date.getTime();
            animate(time, myRectangle, animProp);
        }
    });
 
    drawRect(myRectangle);
};


// mouse position
function writeMessage(canvas, message){
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'black';
    context.fillText(message, 10, 25);
}
 
function getMousePos(canvas, evt){
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
 
    // return relative mouse position
    var mouseX = evt.clientX - left + window.pageXOffset;
    var mouseY = evt.clientY - top + window.pageYOffset;
    return {
        x: mouseX,
        y: mouseY
    };
}
 
window.onload = function(){
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
 
    canvas.addEventListener('mousemove', function(evt){
        var mousePos = getMousePos(canvas, evt);
        var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
        writeMessage(canvas, message);
    }, false);
};

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
Canvas, HTML5
트랙백 0개 , 댓글 0개

jquery 간략한 사용법

언어로그/Html/Javascript/CSS 2011. 10. 15. 22:37



html5 변경사항

DOCTYPE 과 meta 태그가 간소화

<!DOCTYPE html>
<meta charset=utf-8> 


자바스크립트 배치하는 습관
자바스크립트를 head 영역에 두면,  모든 자바스크립트 코드를 로드하기 전까지 도큐먼트 컨텐츠를 로드하지 못함.
가능한 자바스크립트 코드를 아래에 위치시키는 것이 컨텐츠 퍼포먼스를 위해 좋음. 



페이지가 준비된 후 자바스크립트 코드 실행
페이지 로드가 완료된후 자바스크립트 코드를 실행하기 위해  다음과 같이 jQuery 를 사용함.

JQuery(document).ready(function() {
// code
});

$(function(){
  // code
});


$  기호는 jQuery 의 축약표시
$(something) 은 실제로 jQuery(something) 이며,   
$(function_callback)  는 ready 이벤트에 대한 또다른 축약표현이다.

다음과 동일하다. 
$(document).ready(function_callback);
jQuery(document).ready(function_callbak);


JQuery
DOM 엘리먼트를 쉽게 네비게이팅 할수 있도록 설계된 자바스크립트 라이브러리
엘리먼트 조작, 이벤트 처리, 비동기 리모트 콜을 생성할 수 있음.

2개의 주요부분을 포함함. 선택자와 변경자. 선택자는 웹페이지 내 일치된 모든 엘리먼트를 선택하기 위해
CSS 셀렉터 문법을 사용함. 변경자는 선택된 엘리먼트에 자식을 추가, 삭제, 스타일을 변경함. jQuery를 사용한다는 것은
선택과 수정을 연속적으로 수행함을 의미한다. 


jQuery 선택자 




jQuery CSS 함수 
css는 선택된 엘리먼트의 css  속성을 얻어오고, 설정하는 함수임. 




jQuery 사용의 장점
DOM 노드를 선택하고 수정하는 코드량을 줄임.
더 짧은 코드로 가독성을 높임
개발 스피드를 증가시킴
크로스브라우저 처리를 대신해줌 

 


absolute position 이해하기 
abosolute position 이 설정되면,  left, top 속성은 좌표로 다루어짐. 양의 y좌표는 아래방임. 
디폴트로 let, top속성은 웹페이지의 top, left 가장자리를 가리킨다. 이 기준 좌표는 DOM 노드가 어떤 postion 속성을
설정하느냐에 따라 달라진다. left, top 속성의 기준점은 그 부모의 top left 가장자리가 된다. 



html5 계층구조 
 html5 게임개발시에는 종종 html 계층를 잘 구조화하는 것부터 시작한다. 
html 계층구조는 유사한 게임 객체들을 그룹핑하는데, Adobe Flash 에서 무비클릭과 유사하다.
그룹핑된 게임 객체들을 일종의 레이어로 간주하면 쉽게 스타일을 적용할 수 있다.



키보드의 키가 눌려졌는지 알아내기 
키보드의 모든 키에는 키번호가 할당되어 있으며, 이 번호를 조회해서 키보드가 눌려졌는지 여부를 검사할 수 있다.
jQuery 의 keydown 이벤트 리스너를 통해 이벤트를 감시하고, event  발생시 event 객체는 key code 속성을 포함하고 있다. 
event 객체의 which  함수를 호출하여 키 코드를 획득할 수 있다.



문자열을 숫자로 변환 
$("#paddleA").css("top") 은 100이 아닌  문자열 "100px"을 반환함. 
parseInt(string, radix) 을 사용하여 명시적으로 숫자로 변환시켜주어야 4칙 연산을 할 수 있음. 



jQuery 함수 html()
선택된 엘리먼트의 컨텐츠를 얻어오고, 수정함.
.html() : 처음으로 일치되는 엘리먼트의 html 컨텐츠를 반환
.html(htmlString) : 모든 일치하는 엘리먼트의 html 컨텐츠를 설정함. 


 

 

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
jquery
트랙백 0개 , 댓글 0개

[HTML5] 데이터 스토리지

언어로그/Html/Javascript/CSS 2011. 6. 26. 16:55



HTML5 학습 참고 사이트
W3School :  http://www.w3schools.com


웹브라우저 클라이언트 단에 사용자에게 편리한 기능을 제공하기 위해 데이터를 저장해야 할 경우가 있다.
예를  들어  쇼핑몰 사이트에서 로그인을 하지 않아도, 쇼핑을 하고 상품을 담아둘 수 있는 장바구니 기능을 생각해보자. 
장바구니에 담긴 상품들은 웹브라우저를 종료하고 나중에 다시 쇼핑물을 다시 방문했을 때도 상품항목이 남아있어서 
사용자는 편리하게 이어서 쇼핑을 할 수 있다. 

만일 매번 방문할 때마다 사용자의 쇼핑상품이 삭제되어 버린다면 상당히 번거로울 것이다. 이처럼 사용자에 기호 등과 
관련된 정보를 웹브라우저 클라이언트에 저장을 하면 사용자에게 편리한 기능을 제공할 수 있다.  이러한 요구사항을 
만족하기 위한 데이터 스토리지 메커니즘을 이 포스트에서 소개하겠다. 

Cookie를 사용하는  방식이 오래전부터 사용되어 왔으며,  HTML5에서는 쿠키의 단점을 보완하기 위해 웹 스토리지 API 와
웹SQL 데이터베이스 API를 제공한다. 이에 대해서 알아보자. 



1. Cookie
Netscape 사에서 개발했으며, 단순히 key와 value의 데이터쌍을 저장하는 텍스트 파일이다.  
Cookie 를 구성하는 데이터에는 name-value, expiry date, Domain and Path 가 있다 그 의미는 다음과 같다. 
name-value 
모든 쿠키는 name-value 쌍을 구성되며, 쿠키의 이름(name)을 통해 정보(value)를 읽을 수 있다. 

expiry date
쿠키가 폐기되는 유효기간. 명시하지 않으면 브라우저를 닫을 때 폐기된다. 만료일은 UTC(표준시)로 설정되야 한다. 

Domain and Path
도메인은 브라우저가 쿠키를 보낼 도메인 주소를 의미하며, Path는 쿠키를 활성화되는 도메인의 디렉토리를 지정한다. 

 쿠키는 자바스크립트 상에서 document.cookie 속성을 통해 접근할 수 있다.  아래의 코드를 보자. 

document.cookie = 'ppkcookie1=testcookie; expires=Thu, 2 Aug 2001 20:47:11 UTC; path=/'

document.cookie = 'ppkcookie2=another test; expires=Fri, 3 Aug 2001 20:47:11 UTC; path=/'

쿠키값을 설정할 때는 위에서와 같이 정해직 포맷에 맞춰  설정해야 한다.  순서는 다음과 같다. 

1 먼저 name-value 쌍을 설정한다
2 다음 세미콜론; 과 공백이 온다
3 다음으로 적절한 형식으로 만료일이 온다. 
4 다시 세미콜론과 공백이 온다
5 다음 path가 온다 

위의 예제에서 ppkcookie2의 값은 이전 쿠키값을 덮어 씌우지 않고 추가된다는 것에 주목하자. 

쿠키를 삭제하기 위해서는 오늘 날짜 이전으로 만료일을 설정하면 브라우저가 만료됐음을 확인하고 삭제한다. 
document.cookie 값 설정시 만료일을 -1로 설정하면 쿠키값이 즉시 삭제되며,  0으로 설정하면 브라우저를 닫을 때
삭제된다. 




2. 웹 스토리지

엄청나게 발전한 쿠키라고 생각할 수 있으며,  쿠키와 비슷하게 name=value 쌍으로 데이터를 저장한다. 
도메인당 최대 5Mb 를 지원하며 sessionStorage, localStorage 를 제공한다. sessionStorage는 브라우저가  닫히기까지(세션)
동안 유효하며,  localStorage 는 명시적으로 데이터를 지우지 않는 한 계속 남아있게 된다. 


브라우저별 웹스토리지 지원현황은 아래와 같이 최신버전의 브라우저 모두에서 지원하는 기능이다. 




* 파이어폭스는 현재 스토리지에 대한 보안정책을 다른 브라우저와 다르게 구현하여서 쿠키를 반드시 지원해야만 
스토리지 API를 사용할 수 있다고 한다. 그래서 쿠키를 사용가능한지 사전에 검사해야 한다. 


쿠키가 가용한지 검사하는 코드는 아래와 같이 쿠키를 하나 생성하고 값 읽기를 시도해봐서 가용한지를 확인할 수 있다. 
var cookieEnabled = (function() {
	var id = new Date().getTime();
	
	document.cookie = 'cookieprobe=' + id + ' ;path=/';
	
	return (document.cookie.indexOf(id) != -1);
})();



웹 스토리지 API 형태는 다음과 같다. 

속성
unsigned int length

메소드 
DOMString  key(unsigned int index)
any getItem(DOMString  key)
void setItem(DOMString key, data)
void removeItem(DOMString  key)
void clear()


데이터 저장 및 조회
sessionStorage.setItem(‘twitter’, ‘@rem’);
sessionStorage.twitter = ‘@rem’;

sessionStorage.getItem(‘cost’);
sessionStorage.twitter


key 메소드 사용
for (var i = 0; i < sessionStorage.length; i++) {
	alert(sessionStorage.key(i) + ‘=’ + sessionStorage.getItem(sessionStorage.key(i)));
}


데이터 삭제
removeItem 과 clear 함수를 사용할 수 있다. removeItem 은 지정한 key에 해당하는 아이템을 삭제하며,   clear 함수는 모든 
아이템을 삭제한다. 



문자열 이외 저장
웹 스토리지는 문자열 형태로 데이터를 저장하기 때문에 객체를 저장할 수 없다.  JSON를 사용해서 객체를 텍스트화하여
저장하고 다시 텍스트를 객체로 복원하는 방식으로 우회하여 사용해야 한다.  

JSON를 사용하여 객체화하고 복원하는 코드는 다음과 같다. 
function stringify() {
	var videoDetails = {
		author: '감우성',
		description: '무법자',
		rating: '5.51'
 	};
 
		
 	sessionStorage.setItem('videoDetails', JSON.stringify(videoDetails));
}

function parse() {
	var videoDetails = JSON.parse(sessionStorage.getItem('videoDetails') || 'null');
	alert(videoDetails.author + "\n" + videoDetails.description + "\n" +  videoDetails.rating);
}




 
3. 웹 SQL 데이터베이스

웹SQL 데이터베이스는 웹브라우저에 내장된 데이터베이스이며, 대량의 데이터를 관리하기에 유용하다. 
SQL 처리 후 콜백형태로 다음 실행내용을 전달하며 비동기 방식으로 동작하며,   서버가 아닌 로컬 데이터베이스를
사용하기 때문에 커넥션을 맺고 닫는 부분이 없다.  한 도메인에는 동일한 이름을 갖는 DB 버전은 하나만 존재한다. 
(현재  1.0 버전을 사용하는데 같은 이름의 DB가 있을 수 없다는 의미 같다. )
 데이터베이스 작업 간에 트랜잭션을 시작하고 그 콜백으로 SQL문을 수행하는 처리를 한다. 데이터 베이스 크기의
제한은 없지만 일반적으저 브라우저들이 5Mb의 크기로 제한한다. 


브라우저별 웹 SQL 데이터베이스의 지원현황은 아래와 같다. 
아직은 브라우저에서의 지원이 미비하기 때문에, 사용시 반드시 지원유무를 확인하는 처리를 해야한다는 것에 주의하자. 





데이터베이스를 조작하는 코드는 아래와 같다. 


DB 생성 및 Open / API 지원유무 확인하기
var db; 
if (window.openDatabase) {
	db = openDatabase(‘mydb’, ‘1.0’, ‘My first database’, 2 * 1024 * 1024);
}
openDatabase의 인자는 DB이름, 버전, DB에 대한 설명, DB 의 크기이다.
위 코드에서는 mydb 라는 이름의  2MB(2 * 1024 * 1024) 데이터베이스를 생성하였고,
window.openDatabase 속성을 확인하여  웹SQL 데이터베이스  API를 지원하는지 확인했다. 





SQL 실행
db.transaction(
    function(tx) {
  tx.executeSql(sql, [], function () {
  // 실행코드
  }); 
  },
  function(tx, error) { 
      alert(‘에러: ‘ + error.message);   
  }
});

function(tx,error) 함수는 transaction 실패시 실행되는 에러처리 함수로 옵션사항이다. 별도의 에러처리를 하지 않아도
된다면 명시하지 않아도 된다. 
또 executeSql(sql, [], function () {}) 함수는 실제로 SQL을 수행하는 함수로 필수 인자는 실행할 질의문 sql 인자 뿐이다. 
[] 는 SQL 의 와일드 카드 문자에 삽입할 파라미터를 담은 배열이며, function()은  SQL 을 수행후 후속 작업을 처리할 
함수이다. 





테이블 생성하기 
var db; 
if (window.openDatabase) {
	db = openDatabase(‘tweetdb’, ‘1.0’, ‘All my tweets’, 2 * 1024 * 1024); 
	db.transaction(function (tx) {
	tx.executeSql(‘CREATE TABLE tweets (id, date, tweet)’); });
}






데이터 삽입하기
function saveTweets(tweets) { 
	tweets.results.forEach(function (tweet) {
		db.transaction(function (tx) { 
			var time = (new Date(Date.parse(tweet.created_at))).getTime(); 
			tx.executeSql(‘INSERT INTO tweets (id, screen_name, ¬date, text) VALUES (?, ?, ?, ?)’, 
			[tweet.id, ¬tweet.from_user, time / 1000, tweet.text]);
			 					
		}); 
	});
}





데이터 조회하기 
var tweetEl = document.getElementById(‘tweets’); 

function show(amount) {
	db.transaction(function (tx) { 
		tx.executeSql(‘SELECT * FROM tweets’ + (amount != ‘all’ ? ‘ WHERE date > strftime(“%s”, “now”, “-’ + amount + ‘ minutes”)’ : ‘’), [], 
			function (tx, results) {
				var html = [], len = results.rows.length;
				for (var i = 0; i < len; i++) { 
					html.push(‘<li>’ + results.rows.item(i).text + ‘</li>’);
				}
				tweetEl.innerHTML = html.join(‘’); 
			}
		});
	});
}


위 SQL문에서 strftime(string format time) 함수는 sqlite 의 함수로 포맷팅 문자열에 맞게 날짜를 출려하는 함수이다. 
위 코드에서는 amount가 all 아니면 현재시간(now)에서 amount 분만큼을 뺀 값을 1970-01-01 이후 경과한 초(%s)로 나타내고있다.

다음 링크에서 함수에 대한 설명을 참고하자 :  SQLite

 


데이터 조회시에는 다음과 같은 속성을 사용할 수 있다.

insertId :  삽입시에만 사용
rowAffected : select 조회시에는 이 값은 0임
rows : 컬렉션. rows 객체를 사용해
results.rows.item(i).screen_name 형태로 필드값을 가져올 수 있음. 
results.rows.length 로 컬렉션의 길이를 알수 있음. 




 
 

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
HTML5, webSQL, 웹sql, 웹스토리지
트랙백 0개 , 댓글 0개

HTML 소개

언어로그/Html/Javascript/CSS 2011. 6. 13. 23:22



1. HTML (Hyper Text Markup Language)
문서가 서로 다른 OS에서 동일한 형식으로 보여지게 하기위한 필요성에 의해 등장했으면, SGML 이란 마크업 언어를
원류로 하고 있다.


2. HTML의 구성
<head> 와 같은 눈에 보이지 않는 요소 와 <table>. <div>와 같은 눈에 보이는 요소 로 나뉜다
눈에 보이는 요소는 다시 block-level 과 inline-level 로 구분된다.
 block-level 은 <div>와 같이 한라인에 하나만 위치할 수 있는 요소이고,
inline-level 은  <span>과 같이 한라인에 복수로 위치할 수 있는 요소이다.

<div style="border:1px gray solid;">block-level element </div>
<div style="border:1px gray solid;">block-level element </div>
   
<span style="border:1px gray solid;">inline-level element </span>
<span style="border:1px gray solid;">inline-level element </span>

 block-level 요소는 inline-level 요소를 포함할 수 있지만, 그 반대는 불가능하다 .



2.1 block-level elements
p               - 문단태그
h1~h6        - 글씨 태그
ul              - 도형목록 태그
ol              - 순서목록 태그
pre            - 공백까지 그대로 출력
dl                
div             - 영역을 지정해줌
noscript       
blockquote 
form           
hr                - 수평선을 그려줌
table
fieldset
address


2.2 inline-level elements
samp
kbd
var
cite
abbr
acronym
a                  - 링크
img               - 이미지
object
br
script
map
q
sub
sup
span
bdo
input
select
textarea
label
button



 2.3 table 태그
사이트에 레이아웃을 잡는데 활용되며, 중첩해서 사용할 수 있다.
 
<table border=1 width="700" height="400">
 <tr>
     <td height="10%">상단</td>
 </tr>

 <tr>
     <td height="80%" width="100%">
     <table border=1 height="100%" width="100%" >
             <tr>
               <td> 테스트 1</td>
               <td> 테스트 2</td>
            </tr>
        </table>
        </td>
    </tr>

<tr>
   <td height="10%">하단</td>
</tr>
</table>


2.4 table 선을 단선으로 표현하기 : border-collapse
table에 border 속성을 주면 2중 선으로 테투리가 그려지는데, style 속성으로 border-collapse:collapse 를 줘서 단선으로 그릴수 있다.
 
  <table width="90%" cellpadding="5" cellspacing="0" border="1" align="center" style="border-collapse:collapse;border:1px gray solid;">
  <tr>
   <td style="border:1px gray solid;">Css </td>
   <td style="border:1px gray solid;">Cascading Style Sheet</td>
  </tr>
 </table>


2.5 table 셀 크기 고정하기 : table-layout 속성
 table 태그에 한글을 쓰면 중간중간 공백이 들아가기 때문에 테이블의 width에 맞춰 자동 줄바꿈이 된다.
그러나 공백이 없는 영문 주소와 같은경우,  width 를 지정해줘도 밀리는 경우가 생긴다.
이때 table 태그 style 속성에 style="table-layout:fixed" 를 지정해서 밀리는 것을 방지할 수 있다. 
그러나 이럴경우, width 를 넘어서는 부분은 내용이 잘리는데, word-break:break-all 속성으로  width에 맞춰
줄바꿈하게 해줄 수 있다.
 
 
<!--  한글은 공백으로 인해 자동 줄바꿈 -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
  <tr>
   <td> 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.</td>  
  </tr>
  </table>
  
  <!-- 공백이 없는 영문주소는 width를 지정해도 셀이 측면으로 밀림 -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center">
  <tr>
   <td>http://www.homejjang.com/09/border-callapse.php</td>  
  </tr>
  </table>
  <!-- table-layout:fixed 를 설정해서 셀 크기 고정 : 하지만 내용이  잘린다. -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout: fixed;">
  <tr>
   <td>http://www.homejjang.com/09/border_collapse.php</td>
  </tr>
  </table>
  <!-- word-break:break-all; 지정해서 width에 맞춰  줄바꿈이 일어나게 함   -->
  <table width="200" cellpadding="5" cellspacing="2" border="1" align="center" style="table-layout:fixed; word-break:break-all;">
  <tr>
   <td>http://www.homejjang.com/09/border_collapse.php</td>
  </tr>
  </table>

'언어로그 > Html/Javascript/CSS' 카테고리의 다른 글

HTML5 Canvas API  (0) 2012.03.11
jquery 간략한 사용법  (0) 2011.10.15
[HTML5] 데이터 스토리지  (0) 2011.06.26
HTML 소개  (0) 2011.06.13
block-level, html, HTML5, inline-level, table
트랙백 0개 , 댓글 0개
1

티스토리툴바