Langsung ke konten utama

Program sederhana LIst Traveller dengan HTML dan Javascript (HTML Programming)




Cara membuat program sederhana list perjalanan pada html dengan javascript.
Program ini akan menampilkan daftar list pejalanan dalam bentuk checkbox sesuai yang diinputkan user.  Ketika user mengchecklist item perjalanan, maka tulisan akan berubah seperti dicoret(line-through). Jika di unchecked maka tulisan akan kembali normal.
Program ini membantu jika ada user yang berkunjung ke suatu daerah. Lalu membuat list perjalanan.tempat mana saja yang ingin dikunjungi. Jika sudah mengunjungi maka dichecklist.

File htmlnya, disimpan dg nama travellist.html.
<!DOCTYPE html>
<html>
<head>
     <title>Latihan Javascript</title>
     <script type="text/javascript" src="latjs1.js"></script>
     <style type="text/css">
    
     </style>
</head>
<body>
     <form name="myTravelForm">
           <label>First Name: </label>
           <input type="text" name="firstname"/>
           <br/>
           <label>Last Name: </label>
           <input type="text" name="lastname"/>
           <br/>
           <label>Destination: </label>
           <select name="destination">
                <option value="antarctica">London</option>
                <option value="costarica">Bandung</option>
                <option value="malang" selected>Malang</option>
           </select>
           <br/>
           <input type="button" value="Add this traveller" onclick="prosesTravelForm()"/>
           <br/><br/>
           <div id="travellerInfo"></div>
     </form>

</body>
</html>

File javascriptnya disimpan dengan nama: latjs1.js
function prosesTravelForm(){
     var fn,ln,dest,d;
     fn=document.myTravelForm.firstname.value;
     ln=document.myTravelForm.lastname.value;
     dest=document.myTravelForm.destination.value;
           d="<br/><div>"+fn+" "+ln+" goto "+dest+"</div>"
          document.getElementById("travellerInfo").innerHTML=document.getElementById("travellerInfo").innerHTML+d;
}

Jika ingin mencoret value pada checkbox maka kita akan memanipulasinya dengan memanipulasi menggunakan text-decoration dengan value line. Masalahnya adalah bagaimana kita bisa bilang pada html agar list ke x yg dicoret.
Maka kita harus memberi id pada div. masalahnya lagi adalah. Id tidak boleh ada yang sama. Maka kita akan menggunakan variable untuk membedakannya. Misal item1 item2 item3. Nah itemnya static, tetapi angka 1,2,3 nya bisa dinamis. Untuk membuatnya kita harus membuat variable global di dalam file javascript. Misal variable i. diset 1. Mengapa variable global? Karena agar tidak di destroy saat pemanggilan fungsi (baca:penghancuran variable dalam fungsi setiap fungsi dipanggil).
Kemudian setting div sebagai berikut:
var i=1;
function processForm(){
     var listItem,listed;
     listItem=document.myChecklistForm.checklistitem.value;
     listed="<div id='item"+i+"'><input type='checkbox' onclick=’ crossedOut(\'item”+i+”\')/>"+listItem+" ->item"+i+"</div>";
     i++;
     document.getElementById("checkList").innerHTML=document.getElementById("checkList").innerHTML+listed;
}
->item"+i+" hanya untuk mengecek apakah variable i sudah bertambah/belum.
Lalu kita akan menambahkan event ‘onclick’ di textboxnya yang memanggil fungsi ‘crossOut(n)’ yang berisi parameter si i. fungsi ‘crossOut(n)’ ini yang nantinya akan membuat textbox yang di pilih akan berubah teksnya menjadi dicoret(line through).
O iya, kita juga harus menambahkan class dengan nama ‘checked-off’ yang berisi settingan text-decoration:line-through. Dan class dengan nama ‘checked-on’ untuk jika sewaktu-waktu user ingin membatalkan item yang sudah dicek Class bisa dibuat di halaman css lain atau bisa dihalaman htmlnya. Disini saya akan membuat langsung dihalaman htmlnya. Berikut cuplikannya J :
<!DOCTYPE html>
<html>
<head>
     <title>Latihan javascript</title>
     <script type="text/javascript" src="latjs1.js"></script>
     <style>
     . checkedoff{
          text-decoration:line-through;
          color:red;
     }
     </style>
</head>
<body>
     <form name="myChecklistForm">
          <input type="text" name="checklistitem" />
          <input type="button" value="Add to List" onclick="processForm()"/>
     </form>
     <div id="checkList"></div>
</body>
</html>

Lalu kita buat fungsi crossOut(n) pada file javascriptnya dengan syntax seperti berikut:
function  crossedOut(n){
     document.getElementById(n).className="checkedoff";
}

Semoga bermanfaat :)

Komentar

Postingan populer dari blog ini

Tipe data dalam bahasa C (C Programming)

Hai.. ketemu lagi dengan saya di blog yang sederhana ini.. dalam kesempatan kali ini saya akan memposting tentang tipe data dalam bahasa C. yuk kita simak :) Tipe data adalah suatu pengenal (identifier) yang merupakan bagian program yang paling penting karena tipe data mempengaruhi setiap instruksi yang akan dilaksanakan oleh k omputer. Misalnya saja 5 dibagi 2 bisa saja menghasilkan hasil yang berbeda tergantung tipe datanya. Jika 5 dan 2 bertipe integer maka akan menghasilkan nilai 2, namun jika keduanya bertipe float maka akan menghasilkan nilai 2.5000000. Pemilihan tipe data yang tepat akan membuat proses operasi data menjadi lebih efisien dan efektif. Bahasa C menyediakan 5 macam tipe data dasar, yaitu 1. Tipe data integer yaitu bilangan bulat dideklarasikan dengan int . 2. Floating point yaitu bilangan pecahan dideklarasikan dengan float . 3. Double precision yaitu bilangan pecahan ketepatan ganda dideklarasikan dengan double . 4. karakter dideklaras...

Kimia (Polimer)

A.    DEFINISI POLIMER DAN PEMBENTUKAN POLIMER 1.    Pengertian Polimer Polimer adalah suatu makromolekul yang terbentuk dari molekul-molekul sederhana yang kita sebut sabagai monomer. Monomer adalah bagian terkecil dari suatu polimer. 2.    Pembentukan Polimer Proses pembentukan polimer dari monomer-monomernya disebut polimerisasi. Reaksi polimerisasi adalah reaksi penggabungan beberapa monomer. a.    Reaksi Polimer Adisi Polimerisasi terjadi pada monomer yang memiliki ikatan rangkap. Adalah perkaitan langsung antarmonomer berdasarkan reaksi adisi. 1)    Pembentukan Polietilena (Polietena) Polietilena dibentuk oleh monomer-monomer etena. Etena diperoleh dari hasil perengkahan (cracking) minyak bumi atau gas bumi. Pembentukan polimer ini digambarkan sebagai berikut CH 2 =CH 2   +   CH 2 =CH 2    →    --CH 2 -- CH 2 -- CH 2 -- CH 2 -- →   ( --CH 2 --...

Apa itu using namespace std?

Assalamu’alaikum.. Hai teman-teman.. dalam posting kali ini saya akan sedikit menjelaskan tentang namespace std. using namespace std , perintah ini digunakan untuk mendeklarasikan/ memberitahukan kepada compiler bahwa kita akan menggunakan semua fungsi/class/file yang terdapat dalam namespace std. namespace sendiri memiliki kesamaan dengan paket pada bahasa Java yang berisi pengelompokan fungsi, class dan yang sejenis. Pada C++ library- library umumnya disimpan dalam namespace std, seperti perintah cin dan cout. Perbedaan penulisan apabila kita menggunakan namespace std atau tidak adalah : Tanpa using namespace std               std::cout << " Tanpa menggunakan namespace std " ;       std::cin >> pil; Menggunakan using namespace std      #include <iostream>      using namespace std;      ...

MEMBACA DAN MENGIDENTIFIKASIKAN MOS,CMOS DAN FET

1)       Komponen MOS, CMOS dan FET diidentifikasi tipenya, rating operasinya .     MOSFET ( Metal Oxide Semiconductor Field Effect Transistor ) MOSFET disebut juga Transistor Efek Medan Oksida Logam, hal ini karena pada Gate di isolasi dari saluran mayoritas pembawa muatan hal ini mengakibatkan arus Gate sangat kecil dan tidak dipengaruhi oleh Positif atau Negatifnya Gate tersebut. MOSFET sering juga disebut sebagai IGFET (Insulated Gate Field Effect Transistor) , mempunyai elektroda Source, Drain dan Gate . Bekerjanya MOSFET berbeda dengan JFET, pada MOSFET Gate/Gerbang di isolasi dari kanal sehingga dapat dioperasikan menggunakan tegangan positif (+), sedang pada JFET menggunakan tegangan negatif (-). Tegangan positif tersebut memeberi manfaat mempertinggi konduktifitas kanal. Makin positif tegangan gerbang, semakin besar konduktifitas dari Source ke Drain (Sumber ke Cerat). Keuntungan utama menggunakan FET adalah, imped...

Mengenal Tipe data dan Operator di VB .net (VB Programming)

Assalamu'alaikum.. pada tutorial kali ini saya ingin berbagi tentang tipe data danoperator yang digunakan dalam pemrograman Visual Basic. selamat menyimak.. :) Teori 2.1. Variabel Variabel   adalah pengalokasian tempat di memory komputer dengan type data tertentu dan datanya dapat diubah. Aturan pendefinisian variabel -           Harus dimulai dengan huruf -           Tidak boleh menggunakan spasi -           Tidak melebihi 255 karakter -           Untuk vb. Net tidak case sensitive (tidak membedakan huruf kecil dan besar -           Boleh menggunakan underscore Contoh penulisan variabel yang benar : -           Dim Dataku as integer -         ...