After downloading the Firefox 2.0 beta, I found that It has JavaScript 1.7 engine. I never update my JS skills, so when I found out about several new feature of JS, it amazed me. It seems that JS 1.7 language design becoming more influenced with Ruby and Python. Remember to enable JS 1.7 parser in your HTML script use:

<script type="application/javascript;version=1.7"> Tags

Generators

function range(begin, end) {
  for (let i = begin; i < end; ++i) {
  yield i;
  }
}

for (i in range(0, 10))
  document.write( i );

// or you can use these below
/*
var r = range( 0, 10 );
while(true)
  document.write( r.next() );
*/

Both Will Output:

0123456789

yield is a generator-iterator, so the range function produce an iterator. and whenever the next() method is called, yield got executed. Kinda influenced by the Ruby design.

Array Comprehensions

You can called array initialization shortcut. A one-liner favorite. Example:

var ten_squares = [i * i for (i in range(0, 10))];
document.write( ten_squares );

output: 0,1,4,9,16,25,36,49,64,81

ten_squares will be an array contains of square 0 to square 9. This is python influenced. Another python influenced designs are:

Swapping

a = 10; b = 20;
[a, b] = [b, a];

function f() { return [1, 2]; }
[c, d] = f();

function f2() { return [1, 2, 4]; }
[x, , z] = f2();

I’m tired, I will continue this next time, holidays waiting :p

Pernah coba masukin karakter TAB di Textarea? Bisa ngga? Kalo bisa aku kopi browsernya. Kenapa ngga bisa? Masalahnya karakter TAB diterjemahkan oleh browser untuk pindah kontrol, ini bener2 menjengkelkan bagi saya, saat ngedit tampilan di Textpattern. Akhirnya, saya buat JavaScript sederhana agar bisa masukin karakter TAB di textarea. Ini snippetnya, kopi paste aja

The Code

function textarea_tab(id)
{
    var textarea = document.getElementById(id);
    if (!textarea) return;
    textarea.onkeydown = function(e) {
        e = e ? e : window.event;
        if (e.keyCode == 9 && !e.shiftKey && !e.controlKey && !e.altKey) {
            if (document.selection) {
                this.focus();
                var sel = document.selection.createRange();
                sel.text = "\t";
                this.focus();
            }
            else if (this.selectionStart || this.selectionStart == "0") {
                // MOZILLA/NETSCAPE support
                var top = this.scrollTop;
                var startPos = this.selectionStart;
                var endPos = this.selectionEnd;
                var text = this.value;
                this.value = text.substring(0, startPos) + "\t" +
                    text.substring(endPos, text.length);
                this.selectionStart = startPos+1;
                this.selectionEnd = endPos+1;
                this.scrollTop = top;
            } else {
                // giveup
                this.value += "\t";
            }
            return false;
        }
    }
} 

Contoh pemakaian (Examples):

<textarea id="mytextarea" cols="80" rows="25"></textarea>
<script type="text/javascript"><!--
	textarea_tab('mytextarea');
//--></script>

Tepat 1 minggu yg lalu, saya bersama dengan Isdah, menyelesaikan website GrahaPromo.com—website iklan. Sempet muncul beberapa konsep baru yg emang pengen banget saya share ke pembaca semua. Salah satunya adalah options Propinsi dan Kota. Dua buah select input yg satu berisi daftar propinsi dan yg lain berisi daftar kota. Apabila select propinsi kita pilih “Jawa Timur” Maka select kota akan berisi daftar kota di Jawa Timur aja.

Pengennya sih mau langsung implementasi pakai XmlHttpRequest alias AJAX. Tetapi, ketika saya browsing2 di Aleto.ch, saya nemu sebuah cara untuk buat fungsi ini bekerja tanpa XmlHttpRequest. Alternatifnya kita pakai kemampuan DOM untuk memanipulasi tag <script> dan meng-edit atribut src nya mengarah kepada file PHP penghasil daftar kota kita.

Contoh Kode nya sbb:

// fungsi ini berguna untuk menambah tag html baru lewat
// dom. Ini saya ambil dari http://aleto.ch
function newEle(type, content, toNode, attrs, before) {
    if(type) {
        var ele=toNode.ownerDocument.createElement(type), i;
        if(attrs) for(i=0;i<attrs.length;i+=2) ele[attrs[i]]=attrs[i+1];
        if(content) {
            if(content=="empty") ele.appendChild(
                toNode.ownerDocument.createTextNode(" "));
            else ele.appendChild(toNode.ownerDocument.createTextNode(content));
        }
        if(before) toNode.parentNode.insertBefore(ele, toNode);
        else toNode.appendChild(ele);
        return ele;

    } else {
        toNode.appendChild(toNode.ownerDocument.createTextNode(content));
    }
}

Dengan fungsi di atas, kita bisa memanipulasi tag <script> untuk mengakses URL php kita, dimana file PHP mengoutputkan kode JavaScript yg akan mengisi select kita dengan data kota yg di-inginkan.

Kemudian kita buat fungsi Callback yang akan dipanggil oleh aplikasi server kita—dalam hal ini sebuah script PHP yang mengoutputkan kode2 javascript.

// dipanggil oleh file PHP yang kita akan request via tag <script>
// kerjanya cuman nge-reset isi select propinsi dan kota, kemudian
// mengisi dengan data baru
function setCity(selProp, selKota) {
    if (p = document.getElementById("propinsi")) {
        if (p.options.length == 0) {
            selIndex = -1;
            for(i=0;i<arrPropinsi.length;i++) {
                p.options[i] = new Option(arrPropinsi[i], arrPropinsi[i]);
                if (arrPropinsi[i] == selProp) selIndex = i;
            }
            p.selectedIndex = selIndex;
        }
    }

    if (k = document.getElementById("kota")) {
        k.options.length = 0;
        k.selectedIndex = -1;
        selIndex = -1;
        for(i=0;i<arrKota.length;i++) {
            k.options[i] = new Option(arrKota[i], arrKota[i]);
            if (arrKota[i] == selKota) selIndex = i;
        }
        k.selectedIndex = (selIndex == -1) ? 0 : selIndex;
    }
}

OK. JavaScript nya kita putus sebentar, kita buat kode PHP nya.

<?php
header("Content-Type: text/javascript");

$conn = mysql_connect($host,$user,$pass) or die(mysql_error());
mysql_select_db($data) or die(mysql_error());

$p = isset($_GET["p"]) ? $_GET["p"] : "";
$k = isset($_GET["k"]) ? $_GET["k"] : "";

$arr_propinsi[] = "";
$arr_kota = array();

$rs = mysql_query("SELECT DISTINCT propinsi FROM kota", $conn)
    or die(mysql_error());
while($row = mysql_fetch_array($rs)) {
    $arr_propinsi[] = $row["propinsi"];
}
mysql_free_result($rs);

if ($p) {
    $rs = mysql_query("SELECT * FROM kota WHERE propinsi LIKE '$p'", $conn)
        or die(mysql_error());
    while($row = mysql_fetch_array($rs)) {
        $arr_kota[] = $row["kota"];
    }
}
?>

arr_propinsi = ['<?php echo implode("','", $arr_propinsi); ?>'];
arr_kota = ['<?php echo implode("','", $arr_kota); ?>'];

// pemanggilan fungsi setCity kita tulis di sini,
setCity('<?php echo $p; ?>', '<?php echo $k; ?>');

INGAT: kode diatas adalah kode PHP yang outputnya berupa JavaScript, bukan HTML, jadi jangan lupa, content-type header kita set ke javascript, bukan standard PHP yang text/html.

Kita lanjutkan ke JavaScript kita, sekarang tinggal kita sambungkan “missing-link” dari keduanya dengan menggunakan DOM.

function getCity() {
    propinsi = ((p=document.getElementById("propinsi")) && p.selectedIndex > -1)
        ? p.value
	: currProp;
    kota = ((k=document.getElementById("kota")) && k.selectedIndex > -1) ? k.value : currCity;
    if(server=document.getElementById("server")) server.parentNode.removeChild(server);
    newEle("script","",document.getElementsByTagName("head")[0],
        ["src","/getcity.php?p="+propinsi+"&k="+kota,"type","text/javascript","id","server"]);
}

currProp="";
currCity="";

window.onload = function() { getCity(); }

Fungsi diatas, akan kita sambung dengan event onClick select propinsi. Tugas utamanya cuman mengambil isi dari propinsi & kota yang kita pilih, kemudian mencari tag <script> dengan atribut id = server di bagian head html, dan mengganti atribut src nya dengan URL getCity.php?p=nilai_propinsi&k=nilai_kota
Untuk inisialisasi awal, hook event onLoad, dengan fungsi diatas, untuk inisialisasi select propinsi dan kota, dan variabel global inisialisasi.

Tinggal setting html nya

Propinsi: <select id="propinsi" name="state"
	onchange="getCity()"
	onkeyup="getCity()"></select><br />
Kota: <select id="kota"
	name="city"></select><br />

Pengen liat hasilnya? Silahkan coba Live Demo nya. Bila anda ingin men-download dan mencobanya sendiri, silahkan download attachment di bawah. Mungkin anda perlu database propinsi dan kota se-Indonesia untuk menjalankannya. Anda juga bisa lang meng-execute file insertkota.php yang saya generate dari wikipedia, untuk mengisi data propinsi dan kota anda.

Attachment:

• propinsi-dan-kota.zip
• insertkota.zip