03 - HTML5 Api PDF

HTML5 API
Bukan merupakan HTML murni ->

memerlukan script
HTML5 API:
HTML Geolocation
HTML Drag/Drop
HTML Local Storage
HTML App Cache
HTML Web Workers
HTML SSE (Server-Sent Events)
Geolocation
<body>
<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
Digunakan untuk <script>
mengetahui lokasi var x = document.getElementById("demo");
pengguna. function getLocation() {

if (navigator.geolocation) {
Perlu persetujuan navigator.geolocation.getCurrentPosition(showPosition);
} else {
dari pengguna x.innerHTML = "Geolocation is not supported by this browser.";
dikarenakan dapat }
}
mengganggu
function showPosition(position) {
privacy. x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
Drag & Drop
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
Fungsi drag & drop
function drag(ev) {
merupakan bagian ev.dataTransfer.setData("text", ev.target.id);
dari standart html5. }
Semua elemen function drop(ev) {

ev.preventDefault();
dalam dokumen var data = ev.dataTransfer.getData("text");
html5 dapat ev.target.appendChild(document.getElementById(data));
}
dikenakan fungsi </script>
ini. </head>
<body>
Semua browser <div id="div1" ondrop="drop(event)
ondragover="allowDrop(event)"></div>
modern sudah
support fitur ini. <img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69>
</body>
Local Storage
<body>
<div id="result"></div>
<script>
// Check browser support
Digunakan untuk if (typeof(Storage) !== "undefined") {
menyimpan data // Store
localStorage.setItem("lastname", "Smith");
secara lokal. // Retrieve
document.getElementById("result").innerHTML =
Mirip seperti localStorage.getItem("lastname");
} else {
cookies tapi lebih document.getElementById("result").innerHTML = "Sorry, your
aman dan lebih browser does not support Web Storage...";
}
besar </script>
Disimpan per origin </body> <div id=hasil"></div>

(domain dan
<script>
protokol) document.getElementById(hasil").innerHTML =
localStorage.getItem("lastname");
</script>
App Cache
<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
Digunakan untuk <p id="timePara"><button onclick="getDateTime()">Get Date and
menyimpan aplikasi Time</button></p>
web secara lokal <p><img src="img_logo.gif" width="336" height="69"></p>
Keuntungan: <p>Try opening <a href="tryhtml5_html_manifest.htm"

target="_blank">this page</a>, then go offline, and reload the page.
Offline browsing
The script and the image should still work.</p>
Kecepatan
</body>
Mengurangi beban </html>
kerja server (browser
hanya mendownload
resource yang
berubah saja)
Web Worker
<body>
<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<script>
Ketika browser var w;
menjalankan javascript function startWorker() {

dalam sebuah halaman if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
web, maka halaman w = new Worker("demo_workers.js");
}
web tersebut menjadi w.onmessage = function(event) {
tidak responsive. };
document.getElementById("result").innerHTML = event.data;
} else {
Web Worker document.getElementById("result").innerHTML = "Sorry, your browser does not support
merupakan javascript Web Workers...";
}
yang berjalan di- }
background, tanpa function stopWorker() {

// demo_workers.js
var i=0;
mempengaruhi w.terminate();
w = undefined; function timedCount()
performa aplikasi web. } {
i=i+1;
</script>
postMessage(i); //posts a message back to the HTML page.
setTimeout("timedCount()",500);
</body> }
timedCount();
<body>
Server-Sent Event <h1>Getting server updates</h1>

<div id="result"></div>
<script>
if(typeof(EventSource) !== "undefined") {
Server meng- var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
update halaman };
document.getElementById("result").innerHTML += event.data + "<br>";
} else {
web secara document.getElementById("result").innerHTML = "Sorry, your browser does not support
server-sent events...";
otomatis. }
</script> <?php
date_default_timezone_set("America/New_York");
Contoh: facebook, </body>
header("Content-Type: text/event-stream\n\n");
gmail, twitter, dll. $counter = rand(1, 10);

while (1) {
// Every second, sent a "ping" event.
echo "event: ping\n";

$curDate = date(DATE_ISO8601);
echo 'data: {"time": "' . $curDate . '"}';
echo "\n\n";
// Send a simple message at random intervals.
echo 'data: This is a message at time ' . $curDate . "\n\n";
ob_flush(); flush(); sleep(5);

}
?>
Belajar Lebih Lanjut?
http://www.w3schools.com/html/default.asp
Google
Youtube

03 - HTML5 Api PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

03 - HTML5 Api PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML5 API

Bukan merupakan HTML murni ->

<p>Click the button to get your coordinates.</p>

pengguna. function getLocation() {

Semua elemen function drop(ev) {

Disimpan per origin </body> <div id=hasil"></div>

web secara lokal <p><img src="img_logo.gif" width="336" height="69"></p>

Keuntungan: <p>Try opening <a href="tryhtml5_html_manifest.htm"

<p>Count numbers: <output id="result"></output></p>

menjalankan javascript function startWorker() {

background, tanpa function stopWorker() {

Server-Sent Event <h1>Getting server updates</h1>

gmail, twitter, dll. $counter = rand(1, 10);

echo "event: ping\n";

// Send a simple message at random intervals.

echo 'data: This is a message at time ' . $curDate . "\n\n";

ob_flush(); flush(); sleep(5);

Anda mungkin juga menyukai