Script Syuaa: JavaScript

Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

HTML 5 Web Worker

Semakin berkembangnya dunia internet, developers semakin mengutamakan kecepatan proses data, sehingga semakin banyak coder melakukan proses data di client daripada di server.

Untuk melakukan suatu proses data besar atau proses yang membutuhkan resource besar, maka html5 telah menyediakan fitur web worker yang dapat melakukan proses tersebut tanpa menghentikan sementara UI perambah. Akan sangat mengganggu jika semuanya proses ini dilakukan oleh javascript melihat proses panjang dan besar oleh javascript bisa menghentikan UI perambah, atau lebih parah lagi dapat mengakibatkan perambah pengguna jadi crash.

Ini merupakan tutorial singkat untuk menjalankan web worker :

Buat sebuah berkas dengan nama worker.js yang berisi :

self.onmessage = function(e) {

 // mengambil data yang dikirim ke worker
 var dat = e.data;
 var ret = "";
 for(var i = 0;i<=100;i++)
  ret+= dat;

 // mengirim data ke pemanggil worker
 self.postMessage(ret);

 // mematikan worker
 self.close();
};

Buat sebuah berkas dengan nama index.html yang berisi :

<!DOCTYPE html><head><title>Web Worker Tester</title></head>

<script type="text/javascript">
 var worker = new Worker("worker.js");

 // mengambil data yang dikembalikan worker
 worker.addEventListener("message", function(e) {
  document.write(e.data);
 }, false);

 // mengirim data ke worker
 worker.postMessage("Syuaa");
</script>

</body></html>

Skrip diatas akan menulis teks "Syuaa" sebanyak 100 kali ke perambah.

Dikarenakan web worker baru digunakan di HTML5, maka perlu adanya pengecekan jika perambah pengguna sudah mendukung web worker atau belum.

Fungsi dibawah akan mengembalikan false jika perambah belum mendukung HTML5 Web Worker, dan true jika sudah.

function is_webworker() {
 return !window.Worker;
}

Mengganti Address Bar Setelah Ajax Request

Setelah melakukan ajax request, tentu saja Anda akan melihat address bar tidak berubah. Karena memang tidak ada reload halaman yang akan mengubah address bar.

Untuk dapat mengubah address bar setelah ajax request, Anda bisa menambahkan fungsi javascript ini setelah melakukan ajax request :

window.history.pushState("object or string", "Title", "/url-baru");

Berikut ini contoh implementasi nya pada jQuery ajax request :

$.ajax({
 "type":"get",
 "url":"http://same-site/a/b/c/",
 "success":function(html) {
  $("body").html(html);
  if("http://same-site/a/b/c" != window.location) {
    window.history.pushState({path: "http://same-site/a/b/c"}, "", "http://same-site/a/b/c/");
 });

Selanjutnya, ketika user klik back pada browser mereka, untuk sementara tidak ada aksi yang terjadi. Untuk ini kita perlu menambahkan event popstate pada window.

$(window).bind("popstate", function() {
  $.ajax({
    "type": "get",
    "url": location.pathname,
    "success": function(html) {
        $("body").html(html);
    }
  });
});

Membuat Menu Tree PHP jQuery

Kali ini syuaa akan memberikan tutorial membuat Menu Tree dengan PHP dan jQuery.

Sebelum memulai, alahkah baiknya jika kita membuat table yang berisi informasi menu tersebut. Silahkan eksekusi query berikut untuk membuat table t_tree dengan isinya.

create table t_tree ( id integer not null auto_increment, id_parent integer, text varchar ( 50 ), link varchar ( 50 ), primary key ( id ));

insert into t_tree values ( null, 0, 'menu 1', 'index.php#' ),  ( null, 0, 'menu 2', 'index.php#' ),  ( null, 0, 'menu 3', 'index.php#' ),  ( null, 0, 'menu 4', 'index.php#' ),  ( null, 0, 'menu 5', 'index.php#' ),  ( null, 2, 'sub menu 2 1', 'index.php#' ),  ( null, 2, 'sub menu 2 2', 'index.php#' ),  ( null, 2, 'sub menu 2 3', 'index.php#' ),  ( null, 2, 'sub menu 2 4', 'index.php#' ),  ( null, 2, 'sub menu 2 4', 'index.php#' ),  ( null, 6, 'sub menu 2 1 1', 'index.php#' ),  ( null, 6, 'sub menu 2 1 2', 'index.php#' ),  ( null, 6, 'sub menu 2 1 3', 'index.php#' ),  ( null, 11, 'sub menu 2 1 1 1', 'index.php#' ),  ( null, 11, 'sub menu 2 1 1 2', 'index.php#' ),  ( null, 11, 'sub menu 2 1 1 3', 'index.php#' ),  ( null, 11, 'sub menu 2 1 1 4', 'index.php#' ),  ( null, 11, 'sub menu 2 1 1 5', 'index.php#' ),  ( null, 16, 'sub menu 2 1 1 2 1', 'index.php#' ),  ( null, 16, 'sub menu 2 1 1 2 2', 'index.php#' ),  ( null, 16, 'sub menu 2 1 1 2 3', 'index.php#' ),  ( null, 16, 'sub menu 2 1 1 2 4', 'index.php#' ),  ( null, 16, 'sub menu 2 1 1 2 5', 'index.php#' ),  ( null, 3, 'sub menu 3 1', 'index.php#' ),  ( null, 3, 'sub menu 3 2', 'index.php#' ),  ( null, 3, 'sub menu 3 3', 'index.php#' ),  ( null, 3, 'sub menu 3 4', 'index.php#' ),  ( null, 3, 'sub menu 3 5', 'index.php#' ),  ( null, 27, 'sub menu 3 4 1', 'index.php#' ),  ( null, 27, 'sub menu 3 4 2', 'index.php#' ),  ( null, 27, 'sub menu 3 4 3', 'index.php#' ),  ( null, 27, 'sub menu 3 4 4', 'index.php#' );

Dan akan menghasilkan table dengan bentuk kurang lebih seperti ini :

mysql> select * from t_tree;
+----+-----------+--------------------+------------+
| id | id_parent | text               | link       |
+----+-----------+--------------------+------------+
|  1 |         0 | menu 1             | index.php# |
|  2 |         0 | menu 2             | index.php# |
|  3 |         0 | menu 3             | index.php# |
|  4 |         0 | menu 4             | index.php# |
|  5 |         0 | menu 5             | index.php# |
|  6 |         2 | sub menu 2 1       | index.php# |
|  7 |         2 | sub menu 2 2       | index.php# |
|  8 |         2 | sub menu 2 3       | index.php# |
|  9 |         2 | sub menu 2 4       | index.php# |
| 10 |         2 | sub menu 2 4       | index.php# |
| 11 |         6 | sub menu 2 1 1     | index.php# |
| 12 |         6 | sub menu 2 1 2     | index.php# |
| 13 |         6 | sub menu 2 1 3     | index.php# |
| 14 |        11 | sub menu 2 1 1 1   | index.php# |
| 15 |        11 | sub menu 2 1 1 2   | index.php# |
| 16 |        11 | sub menu 2 1 1 3   | index.php# |
| 17 |        11 | sub menu 2 1 1 4   | index.php# |
| 18 |        11 | sub menu 2 1 1 5   | index.php# |
| 19 |        16 | sub menu 2 1 1 2 1 | index.php# |
| 20 |        16 | sub menu 2 1 1 2 2 | index.php# |
| 21 |        16 | sub menu 2 1 1 2 3 | index.php# |
| 22 |        16 | sub menu 2 1 1 2 4 | index.php# |
| 23 |        16 | sub menu 2 1 1 2 5 | index.php# |
| 24 |         3 | sub menu 3 1       | index.php# |
| 25 |         3 | sub menu 3 2       | index.php# |
| 26 |         3 | sub menu 3 3       | index.php# |
| 27 |         3 | sub menu 3 4       | index.php# |
| 28 |         3 | sub menu 3 5       | index.php# |
| 29 |        27 | sub menu 3 4 1     | index.php# |
| 30 |        27 | sub menu 3 4 2     | index.php# |
| 31 |        27 | sub menu 3 4 3     | index.php# |
| 32 |        27 | sub menu 3 4 4     | index.php# |
+----+-----------+--------------------+------------+
32 rows in set (0.01 sec)

Step 1 :
Membuat file tree.php yang berisi skrip untuk kontruksi menu tree

<?php

$cont = mysql_connect("localhost", "root", "");
$sel = mysql_select_db("test");

$qtree = mysql_query("SELECT * FROM `t_tree` ORDER BY `id_parent`, `id` ASC");

while(false !== $tr = mysql_fetch_assoc($qtree))
     if(!empty($tr))
          $tre[] = $tr;

global $tree;
foreach($tre as $v)
     $tree[$v['id']] = $v;
$tx = "";
$tx.= my_parent(0);

function my_parent($id) {
     global $tree;
     $tx = "";
     foreach($tree as $v){
          if($v['id_parent'] == $id){
               $me = $v;
               unset($tree[$v['id']]);
               $child = my_parent($me['id']);

               $class = empty($child) ? "unchild" : "has_child";

               $tx.= "<li class='$class'>";
               $tx.= "<a href='$me[link]' title='$me[text]'>$me[text]</a>";
               $tx.= $child;
               $tx.= "</li>";
          }
     }
     if(!empty($tx)){
          $cl = $id > 0 ? " class='child'" : "";
          return "<ul$cl>$tx</ul>";
     }
     return "";
}

Step 2 : Membuat file index.php yang menampilkan menu tree

<?php require_once('tree.php'); ?>
<html>
<head>
<title>PHP Tree</title>

<style>
body {
     font: 12px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}
ul {
     list-style-type:none;
     margin:0;
     padding:5px;
}
ul.child {
     display:none;
}
li {
     padding-left:40px;
     background:transparent url(folder-unchild.png) 0 0 no-repeat;
     width:125px;
}
li.has_child {
     background-image: url(sign-close.png);
     background-position: top left;
}
li.open_child {
     background-image:url(sign-open.png);
     background-position: top left;
}

</style>
<script type='text/javascript' src='jq.js'></script>
</head>

<body>
<?php echo $tx; ?>

<script>
     $('li').click(function(event) {
          event.stopPropagation();
          if($(this).children('ul').get(0)) {
               var m = $(this).children('ul').get(0);
               if($(m).css('display') == 'none'){
                    $(this).attr('class', 'open_child');
                    $(m).slideDown('fast');
               }else{
                    $(this).attr('class', 'has_child');
                    $(m).slideUp('fast');
               }
          }
     });
</script>
</body>
</html>

Demo : http://demo.syuaa.net/Menu_Tree_PHP_jQuery/demo.html
Download : http://demo.syuaa.net/Menu_Tree_PHP_jQuery/download/

Penggunaan Fungsi Timer Pada Javascript

Pada kesempatan kali ini Syuaa akan memberikan tips trik penggunaan fungsi timer pada JavaScript.

Ada dua fungsi Timer pada JavaScript yang umum digunakan saat ini, yaitu setTimeout(), dan setInterval().

1. Timer setTimeout

Fungsi ini akan menunda eksekusi suatu fungsi dalam waktu yang telah ditentukan, contoh penggunaanya :

function TimeOut() {
	setTimeout(function() { alert("Yay,,, i get you"); }, 5000);
}

Klik dan tunggu 5 detik

Jika dalam suatu kondisi Anda ingin menghentikan timer yang sedang berjalan untuk fungsi setTimeout, maka bisa dilakukan dengan cara sebagai berikut :

_to = null;
function TimeOut() {
	_to = setTimeout(function() { alert("Yay,,, i get you"); }, 5000);
}
function clearTimeOut() {
	clearTimeout(_to);
}

Klik dan tunggu 5 detik
Klik untuk mematikan timer, (cancel alert)

2. Timer setInterval

Fungsi setInterval merupakan fungsi timer javascript yang akan selalu melakukan pengulangan sampai fungsi ini dimatikan, untuk setiap kurun waktu yang ditentukan. Contoh penggunaan :

_si = null;
_gn = 0;
function Interval() {
	_si = setInterval(function() {
		var btn = document.getElementById("buttonIn");
		_gn++
		btn.value = "Interval ("+_gn+")";
	}, 1000);
}
function clearInter() {
	clearInterval(_si);
}

Klik dan tunggu setiap 1 detik
Klik untuk menghentikan timer

Laman

HTML 5 Web Worker

Mengganti Address Bar Setelah Ajax Request

Membuat Menu Tree PHP jQuery

Penggunaan Fungsi Timer Pada Javascript