serenata: HTML

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

2013年10月16日星期三

Get web content by telnet

We can get http content by telnet.

1. telnet to host server.
telnet www.yahoo.com 80
2. send request
GET / HTTP/1.1
Host: www.yahoo.com

2012年5月4日星期五

List some useful function for web sql database.

  Prototype
openDatabase(name, version, displayName, estimatedSize, creationCallback)

// to open database
var db;
  openDatabase('documents', '1', 'Local document storage', 1024 * 1024,
      function(database) {
          db = database;
      });
}

  // another example to open database
  db = openDatabase('documents', '1', 'Local document storage', 1024 * 1024);

Prototype
transaction(callback, errorCallback, successCallback)

  // to create transaction
db.transaction(
function(tx) {
...
      },
function(error) {
...
      },
function() {
...
      }
}

  Prototype
executeSql(sql, args, callback, errorCallback)

  // to execute sql for non-query command
tx.executeSql("create table Book(id, name)");
tx.executeSql("insert into Book values(?, ?)", [1, "good book"]);
var name = "bad book";
tx.executeSql("update Book set name = ?", [name]);

  // to execute sql for query command
tx.executeSql("select id, name from Book", [],
function(tx, rs) {
for (var i=0; i < rs.rows.length; i++) {
   var row = rs.rows.item(i);
   var bookData = "ID=" + row.id + " / Name=" row.name;
}
});

Example

Reference:
HTML5 & API NYUMON by Shunpei Shiraishi
http://dev.w3.org/html5/webdatabase/#introduction

[HTML5] Web Local Storage

Here bring up some samples for local storage in html5.
Remember that all data is stored as String.
It is stored in sqlite data for Chrome browser, and you can find the sqlite data in folder
C:\Documents and Settings\(UserNmae)\Local Settings\Application Data\Google\Chrome\User Data\Default\Local Storage

// to detect browser whether support local storage
function supports_html5_storage() {
return ('localStorage' in window) && window['localStorage'] !== null;
}

// to get and set local storage
localStorage.setItem("bar1", "haha - foo1");
var foo1 = localStorage.getItem("bar1");

// to get and set local storage using square-bracket
localStorage["bar2"] = "haha - foo2";
var foo2 = localStorage["bar2"];

// to remove specify key-value pair
localStorage.removeItem("bar1");

// to clear storage
localStorage.clear();

// to get total number of values in the storage area.
var storageLength = localStorage.length;

// to get the name of each key by index.
var keyName = localStorage.key(0);

Reference:
[OReilly] HTML5 Up and Running

2011年12月28日星期三

[HTML5] A sample for drag and drop.

<html>
<body>
<form>
<ul id="list1" ondragstart="onDragStart(event)"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)">
<li id="apple1" draggable="true">CCCCC</li>
<li id="orange1" draggable="true">OOOOO</li>
<li id="grape1" draggable="true">ooooo</li>
</ul>
<ul id="list2" ondragstart="onDragStart(event)"
ondragenter="onDragEnter(event)"
ondragover="onDragOver(event)"
ondrop="onDrop(event)">
<li id="apple2" draggable="true">APPLE</li>
<li id="orange2" draggable="true">ORANGE</li>
<li id="grape2" draggable="true">GRAPE</li>
</ul>
</form>

<script type="text/javascript">
function onDragStart(event)
{
if (event.target.tagName.toLowerCase() == "li")
{
event.dataTransfer.setData('Text', event.target.id);
}
else
{
event.preventDefault();
}
}

function onDrop(event)
{
var iid = event.dataTransfer.getData('Text');
var li = document.getElementById(iid);

if (li && li.parentNode != event.currentTarget)
{
li.parentNode.removeChild(li);
event.currentTarget.appendChild(li);
}
event.stopPropagation();
}

function onDragOver(event)
{
event.preventDefault();
}

function onDragEnter(event)
{
var types = event.dataTransfer.types;
for (var i=0; i<types.length; i++)
{
if (types[i] == 'Text')
{
event.preventDefault();
return;
}
}
}
</script>
</body>
</html>

Reference: http://www.books.com.tw/exep/prod/booksfile.php?item=0010480450

2011年12月27日星期二

[HTML5] A simple clock.

This is a shabby clock.

<html>

<body>

setInterval(drawClock, 1000);

function drawClock()
{
// get canvas and datetime
var canvas = document.getElementById("canvas1");
var cx = canvas.getContext("2d");
var currentDate = new Date();
var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();

cx.clearRect(0, 0, canvas.width, canvas.height);

cx.fillStyle = "red";
cx.fillRect(0, 0, 2 * hours * 60 / 24, 20);
cx.fillText("Hour: " + hours, 130, 20);

cx.fillStyle = "blue";
cx.fillRect(0, 20, 2 * mins, 20);
cx.fillText("Minute: " + mins, 130, 40);

cx.fillStyle = "green";
cx.fillRect(0, 40, 2 * secs, 20);
cx.fillText("Second: " + secs, 130, 60);
}

</script>

</body>

</html>

This is its output.

2011年12月26日星期一

[HTML5] Hello Canvas!

This is a simple example to draw on a HTML5 canvas with javascript.

<html>
<body>
<canvas id="canvas1" width="300" height="200"></canvas>
<script type="text/javascript">
// get canvas
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

// fill rectagle
context.fillRect(0,0,150,100);

// fill text
context.fillText("Hello, Canvas!", 155, 110);

// draw a line
context.beginPath();
context.moveTo(0, 100);
context.lineTo(300, 100);
context.moveTo(150, 0);
context.lineTo(150, 200);
context.rect(0, 0, 300, 200);
context.stroke();
context.closePath();
</script>
</body>
</html>

The result such like below,

Reference: http://www.books.com.tw/exep/prod/booksfile.php?item=0010480450

2013年10月16日 星期三

Get web content by telnet

2012年5月4日 星期五

[HTML5] Web SQL Database