More Games - PAINONE
Android games
sites.google.com
Web SQL Database 실행 순서
1. 데이터베이스를 연다.
var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);
openDatabase(name, version, displayName, estimatedSize, creationCallback);
name - 데이터베이스 이름. 지정한 이름이 없을 땐 새로 생성
version - 데이터베이스의 버전 문자열. 공백 문자를 지정하면 버전에 관계없이 데이터베이스를 열림
displayName - 사용자에 표시될 데이터베이스 이름
estimatedSize - 데이터베이스 크기. 바이트(Bite) 단위, 브라우저에 따라 달라질 수 있음
creationCallback - 처리가 완료되었을 때 호출할 콜백함수. 생략할 수 있음
2. 트랜잭션을 시작한다.
var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);
db.transaction(function(tx) {
// SQL 처리
},
function(error) {
// 에러처리
},
function() {
// 트랜잭션 성공 시 처리
});
transaction(callback, errorCallback, successCallback);
callback - 트랜잭션 안에서 처리를 지정하기 위한 함수
errorCallback - 트랜잭션이 에러로 종료되었을 때 호출되는 함수 생략할 수 있음
successCallback - 트랜잭션이 정상적으로 종료되었을 때 호출되는 함수 생략할 수 있음
3. 트랜잭션 안에서 SQL을 실행한다.
var db = openDatabase("vizooo_db", "1", "비주 데이터베이스", 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("INSERT INTO member (id, password) VALUES (?, ?) ",
["painone7", "1111"],
function() {
alert("SQL 문 실행 성공!");
},
function() {
alert("SQL 문 실행 실패!");
});
});
executeSql(sql, args, callback, errorCallback);
sql - SQL 문자열. SQL 문 안에 "?" 문자를 넣어 args에 지정한 값을 치환할수 있음
args - SQL 문 안에 "?" 치환할 배열."?" 순서대로 나열한 배열을 지정 생략할 수 있음
callback - SQL 문이 성공 시 처리할 함수 생략할 수 있음
errorCallback - SQL이 에러로 종료 되었을때 처리할 함수 생략할 수 있음
SQL 실행 결과 처리
insertId - INSERT 문의 결과 자동으로 생성된 ID. AUTOINCREMENT 지정 된 값
rowsAffected - UPDATE, DELETE 문으로 영향을 받은 행수
rows - SELECT 문을 실행한 결과 열
SELECT
var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM member",
[],
// tx = 트랜잭션, rs = SQLResultSet
function(tx, rs) {
for(var i = 0; I < rs.rows.length; i++ ) {
// 행에 객체를 얻음
var row = rs.rows[i];
alert("아이디 : " + row.id + "비밀번호 : " + row.password);
}
});
});
INSERT
var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("INSERT INTO member (id, password) VALUES (?, ?) ",
["painone7", "1111"],
function(tx, rs) {
// AUTOINCREMENT 지정 된 값
alert(ts.insertId);
});
});
UPDATE, DELETE
var db = openDatabase("vizooo_db", "", "비주 데이터베이스", 1024 * 1024);
db.transaction(function(tx) {
tx.executeSql("DELETE FROM member",
[],
function(tx, rs) {
// 영향을 받은 행수
alert(ts.rowsAffected);
});
});
Web SQL Database 예제
// 데이타베이스를 연다.(데이타베이스가 존재하지 않을 경우 새로 만든다.)
var db = openDatabase("TestDb", "", "Test Database", 1024 * 1024);
// 트랜잭션을 연다.
db.transaction(function(tx) {
// SQL문을 실행 시킨다.
tx.executeSql("CREATE TABLE IF NOT EXISTS TestTable (no integer primary key autoincrement, title, content, password, index(title))");
});
/**
* INSERT 문 실행
*/
function Insert() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var password= document.getElementById("password").value;
db.transaction(function(tx) {
tx.executeSql("INSERT INTO TestTable (title, content, password) VALUES (?, ?, ?)",
[title, content, password],
function(tx, ts) {
document.getElementById("title").value = "";
document.getElementById("content").value = "";
document.getElementById("password").value = "";
Select();
},
function(tx, ts) {
alert("저장 실패");
});
});
}
/**
* SELECT 문 실행
*/
function Select() {
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM TestTable ORDER BY no DESC",
[],
function(tx, rs) {
var list = document.getElementById("list");
list.innerHTML = "";
var rows = rs.rows;
for(var i = 0; i < rows.length; i++) {
var row = rows.item(i);
list.innerHTML += '<div><span onclick="FormChange(\''+ row.no +'\', \''+ row.title +'\', \''+ row.content +'\')" style="cursor:pointer;">' +
row.no + ' ' + row.title + ' ' + row.content +
'</span><input type="button" value="삭제" onclick="Delete(\''+ row.no +'\')"></div>';
}
});
});
}
/**
* UPDATE 문 실행
*/
function Update(no, title, content, password) {
db.transaction(function(tx) {
tx.executeSql("UPDATE TestTable SET title = ?, content = ?, password = ? WHERE no = ?",
[title, content, password, no],
function(tx, ts) {
document.getElementById("title").value = "";
document.getElementById("content").value = "";
document.getElementById("password").value = "";
var insert = document.getElementById("insert");
insert.style.display= "block";
var update = document.getElementById("update");
update.style.display= "none";
var cancel = document.getElementById("cancel");
cancel.style.display= "none";
Select();
},
function(tx, ts) {
alert("저장 실패");
});
});
}
/**
* DELETE 문 실행
*/
function Delete(no) {
var no = no;
db.transaction(function(tx) {
tx.executeSql("DELETE FROM TestTable WHERE no = ?",
[no],
function() {
Select();
});
});
}
function FormChange(no, title, content) {
document.getElementById("title").value = title;
document.getElementById("content").value= content;
var insert = document.getElementById("insert");
insert.style.display= "none";
var update = document.getElementById("update");
update.style.display= "block";
update.onclick = function() {
var title = document.getElementById("title").value;
var content = document.getElementById("content").value;
var password= document.getElementById("password").value;
Update(no, title, content, password);
};
var cancel = document.getElementById("cancel");
cancel.style.display= "block";
cancel.onclick = function() {
document.getElementById("title").value = "";
document.getElementById("content").value = "";
document.getElementById("password").value = "";
var insert = document.getElementById("insert");
insert.style.display= "block";
var update = document.getElementById("update");
update.style.display= "none";
var cancel = document.getElementById("cancel");
cancel.style.display= "none";
};
}
window.onload = Select();
<h1>Web SQL Database</h1>
<div>제목 : <input id="title" type="text" style="width:300px;"></div>
<div>내용 : <textarea id="content" style="width:300px;height:100px;"></textarea></div>
<div>비밀번호 : <input id="password" type="password"></div>
<div>
<input id="insert" type="button" value="작성" onclick="Insert()">
<input id="update" type="button" value="수정" style="display:none;">
<input id="cancel" type="button" value="취소" style="display:none;">
</div>
<h3>리스트 출력</h3>
<div id="list"></div>
안드로이드 게임들(Android games)
탱그램 XOR - Google Play 앱 탱그램 XOR은 XOR 로직을 기반으로하는 퍼즐 게임입니다. 각 스테이지마다 정해진 문제와 동일한 퍼즐을 완성해야합니다. play.google.com 벽돌깨기 - Google Play 앱 벽돌깨기 게임..
painone7.tistory.com
'Language > html5' 카테고리의 다른 글
| Server-Sent Events (0) | 2010.08.04 |
|---|---|
| Web Workers (0) | 2010.07.24 |
| Web Storage (세션 스토리지) (0) | 2010.07.16 |
| Web Storage (로컬 스토리지) (0) | 2010.07.16 |
| 선과 채우기의 색상 지정하기 (0) | 2010.06.03 |
More Games - PAINONE
Android games
sites.google.com