PEMROGRAMAN WEB 1

Javascript 2
STMIK Asia Malang - 2013

Rina Dewi Indah Sari, S.Kom

Memasukkan data lewat keyboard

Form
Text

box Check box Radio box Text area Select (Combo) box

Prompt
Kotak

inputan

STMIK Asia Malang -

Membaca inputan dari keyboard

Ditangkap pada sebuah variabel Form

nama

= (document.fform.nama.value); isi textbox nama variabel object nama form nama textbox

Prompt
nama=

window.prompt( Masukkan Nama:" ); object fungsi prompt

STMIK Asia Malang -

nama variabel pesan

Control Statement

Tiga struktur control

Sequence

structure Selection structure

If

ifelse
Switch

Repetition
While dowhile For forin

structure

STMIK Asia Malang -

Tanya bilangan (If Sederhana)

Misalnya sebuah form HTML :

<FORM NAME ="fform">

<H2><BR>Bilangan Negatif, Nol, Atau Positif ???</H2>

<INPUT TYPE="button" value="Tanya" onclick="tanyabilangan()"> </FORM>

Fungsi JS :
function tanyabilangan() { bil = window.prompt(Masukkan sebuah bilangan:,0); jenis = " "; if (bil > 0) { jenis = " Adalah bilangan Positif"; } else if (bil < 0) { jenis = " Adalah bilangan Negatif"; } else { jenis = " Adalah Nol"; } alert (bil+" "+jenis); }

STMIK Asia Malang -

Menghitung IP (if majemuk)

<FORM NAME ="fform">

<table border="1" width="100%" ALIGN="center" > <tr><td width="100%" colspan="4"><H2 ALIGN="center">Menghitung Indeks Prestasi</H2></td></tr> <tr><td width="25%">Quis (10%) :<input type="text" size="10 name="iquis"> </td> <td width="25%">Tugas (20%):<input type="text" size="10 name="itugas"> </td> <td width="25%">UTS (30%):<input type="text" size="10 name="iuts"> </td> <td width="25%">UAS (40%) :<input type="text" size="10 name="iuas"> </td> </tr> <tr><td width="100%" colspan="4"><P Align="center">

<INPUT TYPE="button" value="Hitung" onclick="hitungip()">

<INPUT TYPE="reset" value="Ulang"> </p></td></tr> <tr> <td width="100%" colspan="4" align="center"> Indeks Prestasi :<input type="text" size="5" name="oip"> Keterangan :<input type="text" size="25" name="oket"></td> </tr>

STMIK Asia Malang -

Menghitung IP (if majemuk)

function hitungip() {var quis = parseFloat(document.fform.iquis.value); v ar tugas = parseFloat(document.fform.itugas.value);

var uts = parseFloat(document.fform.iuts.value);

var uas = parseFloat(document.fform.iuas.value); var ip =" "; var ket=" "; var na = (0.10*quis)+(0.20*tugas)+(0.30*uts)+(0.40*uas); if ((na > 80) && (na <=100)) { ip ="A"; ket="Lulus dengan Sangat Baik"; } else if ((na > 68) && (na <=80)) { ip ="B"; ket="Lulus dengan Baik"; } else if ((na > 55) && (na <=68)) { ip ="C"; ket="Lulus dengan Cukup"; } else if ((na > 38) && (na <=55)) { ip ="D"; ket="Lulus dengan Kurang"; } else { ip ="E"; ket="Tidak Lulus"; } document.fform.oip.value=ip; document.fform.oket.value=ket; // gunakan untuk mengecek alert (ip+""+na);

STMIK Asia Malang -

Menampilkan nama bulan (Switch)

Untuk latihan, buatlah sebuah form yang berisi inputan sebuah bilangan (1 .. 12) Tambahkan sebuah tombol untuk mengeksekusi dan menampilkan nama bulan ke dalam kotak pesan

STMIK Asia Malang -

Mencetak bilangan ganjil (For)

<!-- menyembunyikan script dan browser non-JS document.writeln("<H2> Latihan Perulangan For</H2>"); document.writeln("-----------------------------------------"); ganjil=1; for (i=1; i<=10; i++) { document.write("Angka ganjil ke-" + i + " -----> : " + ganjil+ "<BR>"); ganjil+=2; } document.writeln("-----------------------------------------"); // akhir dari penyembunyian -->

STMIK Asia Malang -

Menghitung Rata2 (while)

deret = prompt('Masukkan Jumlah Deret :',''); document.writeln("------------------------------------------------");

document.writeln("<BR>");
var jml = 0; var angka = 1; while (angka <= deret)

{
jml= jml+angka; angka++ }

document.writeln("<BR>");
document.writeln("Jumlah Deret dari 1 sampai "+deret+" adalah = +jml); document.writeln("<BR>"); document.writeln(Rata-ratanya + jml/deret);

document.writeln("--------------------------------------------");STMIK Asia

Malang -

Membatasi pemasukan password (Do-while)

function pass() { var coba = 1;

do
{ p = prompt("Tuliskan password dengan benar",""); if (p==ASIA") { alert("Selamat Datang Brow"); window.open("welcome.html"); break; } else { alert("Password Salah !!! Ulangi lagi."); } if (coba==3)

{ alert("maaf, kesempatan anda hanya 3 kali");

history.go(-1); } coba=coba+1; }

while (coba<=3)

STMIK Asia Malang -

Menentukan suku bunga

STMIK Asia Malang -

Array
var nilai = new Array(3); nilai[0]="A"; nilai[1]="B"; nilai[2]="C"; for (a=0;a<3;++a) { document.writeln("<B>Nilai ke "+ [a+1] +" : "+nilai[a]+"<BR>"); }
STMIK Asia Malang -

Function

Memecah software menjadi modules

Mudah

untuk pemeliharaan dan debug

Modules dalam JavaScript

Functions Methods
Milik

object

JavaScript

menyertakan banyak pre-defined

methods
Dikombinasikan

dengan programmer-defined methods untuk membuat program

Mendukung reusability

Program lebih pendek

STMIK Asia Malang -

Kontrol Return

return statement
Dapat

mengembalikan nilai atau tidak mengembalikan nilai mengembalikan nilai sama dengan return;

return expression;
Tidak

Tidak mengembalikan nilai jika terjadi error

STMIK Asia Malang -

Mencari nilai maximum dari 3 angka

Prompt for 3 inputs Konversi ke tipe numbers Pass to maximum Math.max function maximum( x, y, z )
{ return Math.max( x, Math.max( y, z ) ); }

STMIK Asia Malang -

Generate angka acak

Math.random
var

randomValue = Math.random();

Floating point value between 0 and 1 Mengatur range by scaling and shifting Math.floor
Always

round down Math.floor( 1 + Math.random() * 6 )

STMIK Asia Malang -

Random image generator

Misalkan kita mempunyai 7 file gambar : 1.gif, 2.gif...7.gif) Buat fungsi random
document.write ( "<img src = \"" + Math.floor( 1 + Math.random() * 7 ) + ".gif\" width = \"105\" height = \"100\" />" );

STMIK Asia Malang -

JavaScript Global Functions

STMIK Asia Malang -

Fungsi Rekursi

Memanggil dirinya sendiri Harus memiliki base case Menyederhanakan masalah Mengembalikan nilai dengan memanggil dirinya sendiri

STMIK Asia Malang -

Faktorial
function factorial( number ) {

if ( number <= 1 ) // base case

return 1; else return number * factorial( number - 1 );

STMIK Asia Malang -

Escape Sequence

STMIK Asia Malang -

Objek Tanggal ( Date Object)

STMIK Asia Malang -

Objek Tanggal ( Date Object)

STMIK Asia Malang -

Objek Tanggal ( Date Object)

STMIK Asia Malang -

var hari = new Array("Senin","Selasa","Rabu","Kamis","Jumat","Sabtu","Minggu"); var bulan = new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus", "September","Oktober","November","Desember"); var t = new Date(); var hari_ini=hari[t.getDay()-1]; var tanggal=t.getDate(); var bulan_ini=bulan[t.getMonth()];

var tahun=t.getYear();
var jam =t.getHours(); var menit =t.getMinutes(); var detik =t.getSeconds(); document.write("<font size=5 face=arial>"); document.write("<b><center>Sekarang adalah hari :"+hari_ini+",tanggal: "+ tanggal +" "+ bulan_ini +" " +tahun); document.write("<hr width=700>"); document.write("</font>"); document.write("<font size=3 face=arial>"); document.write("<b><center>Jam sekarang = "+ jam +":"+menit+":"+detik);

document.write("</font>");

STMIK Asia Malang -

Objek Math

STMIK Asia Malang -

Objek String

STMIK Asia Malang -

Objek Dokumen

STMIK Asia Malang -

Objek Window

STMIK Asia Malang -

Objek Window

STMIK Asia Malang -

Event (Kejadian)

STMIK Asia Malang -

Latihan

Buatlah latihan pada materi diatas:

Buatlah

latihan menentukan nama bulan dengan

switch Buatlah perulangan yang menampilkan suku bunga

STMIK Asia Malang -