程式設計 Club: HTML5

顯示具有 HTML5 標籤的文章。顯示所有文章

2012年6月10日星期日

html5 Database Storage

//创建数据库
var db = openDatabase("users", "1.0", "用户表", 1024 * 1024); 
if(!db){
    alert("Failed to connect to database."); 
} else {
    alert("connect to database 'K'."); 
}

// 创建表
db.transaction( function(tx) { 
    tx.executeSql(
        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", 
        [], 
        function(){ alert('创建users表成功'); }, 
        function(tx, error){ alert('创建users表失败:' + error.message); }
    );
}); 

// 插入数据
db.transaction(function(tx) { 
    tx.executeSql(
        "INSERT INTO users (id, name) values(?, ?)", 
        [Math.random(), 'space'], 
        function(){ alert('插入数据成功'); }, 
        function(tx, error){ alert('插入数据失败: ' + error.message);}
    ); 
}); 

// 查询
db.transaction( function(tx) { 
    tx.executeSql(
        "SELECT * FROM users", [],  
         function(tx, result) {
            var rows = result.rows, length = rows.length, i=0;
            for(i; i < length; i++) { 
                alert(
                    'id=' + rows.item(i)['id'] + 
                    'name='+ rows.item(i)['name']
                ); 
            } 
        }, 
        function(tx, error){
            alert('Select Failed: ' + error.message);
        }
    ); 
}); 

// 删除表
db.transaction(function (tx) {  
    tx.executeSql('DROP TABLE users'); 
});

HTML5的另一項功能，本地端資料庫
<!DOCTYPE html>
<html>
<head>
<title>Web SQL Database Test</title>
<script>
function pageLoad() {
//1024 * 1024 = 1 MB
//採用SQLite Script，Create Table :http://www.sqlite.org/lang_createtable.html
//W3C文件:http://www.w3.org/TR/webdatabase/#dom-sqltransaction-executesql
      var SQLScript = 'create table if not exists tCustomer(id integer primary key autoincrement ,name varchar(10) default "")';
   var db = openDatabase('dbBOM', '1.0', 'test database', 1024 * 1024);
   document.getElementById('create').addEventListener('click', function ()
   {
     db.transaction(function (t)
   {
     t.executeSql(SQLScript);
   }, function (e)
   {
     alert(e.message);
   });
    }, false);

    document.getElementById('set').addEventListener('click', function ()
    {
       db.transaction(function (t)
    {
      t.executeSql("insert into tCustomer(name) values('andy')");
      t.executeSql("insert into tCustomer(name) values('bill')");
    },
     function (e)
     {
       alert(e.message);
     });
    }, false);

    document.getElementById('drop').addEventListener('click', function ()
    {
       db.transaction(function (t)
    {
      t.executeSql("drop table tCustomer");                },
      function (e)
      {
     alert(e.message);
      });
    }, false);

    document.getElementById('get').addEventListener('click', onGetData, false);
    function onGetData()
    {                db.readTransaction(function (t)
        {
        t.executeSql('select * from tCustomer', [], SetData);
        });
    }
    function SetData(t, r)
    {
     for (var i = 0; i < r.rows.length; i++)
     {
      for (var o in r.rows.item(i))
      {
      alert(r.rows.item(i)[o]);
      }
     }
    }
   }
   </script></head>
   <body onload="pageLoad();">
   <input value="建立資料表" id="create" type="button"><br>
   <input value="刪除資料表" id="drop" type="button"><br>
   <input value="插入資料" id="set" type="button"><br>
   <input value="取得資料" id="get" type="button"><br>
   </body>
</html>

2012年4月12日星期四

[Mac] 解決Lion滑鼠滾輪方向相反的問題

前幾天開始使用 Mac OS X 10.7 Lion
發現滑鼠的滾輪怎麼方向是相反的
瀏覽網頁之類的動作就很不習慣
在這裡我要把滑鼠的滾輪方向設定回來

在系統偏好設定裡的滑鼠
將捲視或導覽時依照手指移動的方向來搬移內容取消選取
Move content in the direction of finger movement when scrolling or navigating

2012年4月9日星期一

如何重設 mini server 密碼

翻了一下手冊，接上外接光碟機，放入安裝光碟，開機按住 Alt 選擇從安裝光碟開機，
從工具 -> 重設密碼，將 root 和第一次設定時的帳號密碼重設。
重新啟動系統，再輸入帳號密碼

2012年6月10日 星期日

html5 Database Storage

Web SQL Database實作

2012年4月12日 星期四

[Mac] 解決Lion滑鼠滾輪方向相反的問題

2012年4月9日 星期一

如何重設 mini server 密碼

2012年6月10日星期日

2012年4月12日星期四

2012年4月9日星期一