Bahasa pemrograman khusus untuk meningkatkan kemampuan HTML
•
Tidak sama dengan JAVA tetapi perintah dasar banyak kesamannya
•
“Embeded” /melekat pada HTML
•
Ditulis diantara ...
Manfaat/kemampuan •
Deteksi posisi cursor
•
Deteksi tombol mouse yg di klik/ataupun keyboard
•
Validasi form
•
Mempercantik dialog/tampilan dengan animasi font/latar
•
melakukan operasi perhitungan matematis
•
pengambilan keputusan /percabangan
•
pengulaangan
•
manipulasi tanggal/jam sistem
08/04/10 10:29:50 AM
Hal .2
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
Fungsi/aplikasi JavaScript (JS) Menampilkan teks :Menampilkan teks Ini hasil dari html: Saya sedang kuliah Pengenalan Web di STMIK AKAKOM Ini hasil dari javascript: <script language="JavaScript">
<-- tag awal JavaScript (JS)
document.write(“Pertama dan Utama”);
<-- menampilkan teks JS “Pertama dan Utama”
<-- akhir JS
Validasi isian teks <script language="JavaScript"> function ceknama(form) <--membuat fungsi “ceknama” { if(form.elements[0].value=="") <--jika element[0] – medan isian pertama – masih kosong { alert("Nama harus diisi !"); <-- akan muncul kotak dialog dengan tulisan “Nama harus diisi” 08/04/10 10:29:50 AM
Hal .3
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
form.in_nama.focus(); <-- memaksa kursor ke isian “in_nama” }
Jam dan tanggal komputer Client <script language="javascript"> "); <--ambil tahun dari var “d” document.write("Jam:"); document.write(d.getHours()); <--ambil jam dari var “d” 08/04/10 10:29:50 AM
Hal .4
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
document.write(":"); document.write(d.getMinutes()); <--ambil menit dari var “d” document.write(":"); document.write(d.getSeconds());<--ambil detik dari var “d” //-->
kalkulator- no fungsi
kalkulator- dg fungsi <script language="JavaScript"> function hasil(aa,bb) <--membuat fungsi “hasil(aa,bb)”, aa,bb adalah parameter yang akan dipakai di 08/04/10 10:29:50 AM
Hal .5
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
fungsi tersebut { cc=parseInt(aa)+parseInt(bb); <--penjumlahan nilai aa dan bb ditampung di var cc fhitung.c.value=cc; <-- nilai cc ditransfer ke medan isian c untuk ditampilkan }
Animasi Tombol <style type="text/css"> 08/04/10 10:29:50 AM
Hal .6
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
<script language="javascript"> function ubah() { document.getElementById('tb1').value="Keluar Aplikasi ya"; } function biasa() { document.getElementById('tb1').value='Exit'; }
Informasi/keputusan
08/04/10 10:29:50 AM
Hal .7
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
<script language="JavaScript"> function ceknama(form) { if(form.elements[0].value>=60) alert("Sudah Tua"); else alert("Belum Tua"); } Pemasukan Data
Hitung Usia <script language="JavaScript"> var skr = new Date() document.write("Tanggal Sekarang : "); document.write("Bentuk Asli:"); //format tanggal asli - UTC : universal time document.write(skr);
08/04/10 10:29:50 AM
Hal .8
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
document.write(" Indonesia:"); document.write(skr.getDate()); document.write("-"); document.write(skr.getMonth()); document.write("-"); document.write(skr.getFullYear()+" "); function cekusia(form) { var tg=parseInt(form.elements[0].value); var bl=parseInt(form.elements[1].value); var th=parseInt(form.elements[2].value); var tglahir=new Date(th,bl,tg); var selisih=Date.parse(skr.toGMTString())Date.parse(tglahir.toGMTString()); form.elements[4].value=selisih/(1000*60*60*24*365); } 08/04/10 10:29:50 AM
Hal .9
JavaScript oleh M Guntara- untuk mk : Pengenalan WEB Sem Pendek 2009/2010 STMIK AKAKOM
MATERI LAIN •
HTML - pengaturan font – ◦ dapat dilihat di BUKU Pemrograman WEB – HTML – CSS – JAVA Script oleh Abdul kadir ◦ www.w3schools.com
•
HTML: Frame, hiperlink ◦ lihat di catatan kuliah p Yohakim ◦ Buku Pemrograman Web diatas atau www.w3schools.com