Modul 6 - JavaScript (Perulangan dan Array)

In // Mei 09, 2017 // Leave a Comment

LAPORAN PRAKTIKUM PEMROGRAMAN WEB 1 

Modul 5 - JavaScript (Perulangan dan Array)

Dosen Pengampu : Delia, S.Kom. 

Dibuat oleh :

2015091009

Agrian Dwi Lesmana

Sistem Informasi 2015 B 


SISTEM INFORMASI

FAKULTAS ILMU KOMPUTER

UNIVERSITAS KUNINGAN

2016/2017 

[Praktikum]

  • Praktikum 1



<html>
<head>
</head>
<body>
<script language="javascript">
                var nilai = 50;
                if (nilai <= 60){
                alert ("tidak lulus");
                }
                else{
                alert("lulus");
                }
</script>
</body>
</html>              
               
 
Analisa :
var nilai = 50;
menentukan nilai, jika diisi <=60 maka akan tampil seperti berikut:

 jika diisi >= 61 maka akan tampil seperti berikut :
 

  •  Praktikum 2 


    <title>Validasi masukan data</title>
    <script language="JavaScript">
    function val()
    {
    d1=document.frm.data1.value;
    d2=document.frm.data2.value;
    if(d1=="")
    {
    alert("Data pertama tidak boleh dikosongkan");
    document.frm.data1.focus();
    }
    else if(d2=="")
    {
    alert("Data kedua tidak boleh dikosongkan");
    document.frm.data2.focus();
    }
    else
    {
    alert("Data sudah terisi seluruhnya");
    }
    }
    </script>
    <center>UJI DATA FORM</center>
    <form name="frm">
    <table align="center">
    <tr>
    <td>Data pertama</td><td><input type="text" name="data1"></td>
    </tr>
    <tr>
    <td>Data kedua</td><td><input type="text" name="data2"></td>
    </tr>
    <tr>
    <td colspan="2" align="center"><HR><input type="button" value="Cek Data" onClick="val()"><input type="reset" value="Hapus"><HR></td>
    </tr>
    </table>
    </form>
Tampilan :

Analisa :

  • if(d1=="") 
{ 
alert("Data pertama tidak boleh dikosongkan");
document.frm.data1.focus();
menampilkan notifikasi jika data pertama dikosongkan

  • else if(d2==""){ alert("Data kedua tidak boleh dikosongkan"); 
    document.frm.data2.focus();
     
    menampilkan notifikasi jika data kedua dikosongkan

     
  • else { 
    alert("Data sudah terisi seluruhnya");
    }
menampilkan notifikasi jika kedua data telah terisi


  • Praktikum 3

    Membuat file CSS

    <head>
    <title> tulisan </title>
    <script language="JavaScript">
                    <!--
                    function pass()
                    {
                    var komentar="";
                    if(document.data.password.value == "uniku" && document.data.nama.value == "admin")
                                    komentar = "selamat" + document.data.nama.value + "Anda benar ..";
                    else
                                    komentar= "Maaf ..." + document.data.nama.value + "anda tidak berhak";
                    document.write(komentar);
                    }
                   
                    //-->
                    </script>
    </head>             

    <body>
                    <center> AUTENTIFIKASI </center>
                    <form name="data">
                                    <table border="0" align="center">
                                                    <tr>
                                                                    <td>masukan nama user</td> <td><input type="text" name="nama" size="10"></td>
                                                    </tr>
                                                   
                                                    <tr>
                                                                    <td>masukan password</td> <td><input type="password" name="password" size="10"></td>
                                                    </tr>    
                                                   
                                                    <tr>
                                                                    <td colspan="2" align="center"><input type="button" value="OK" onclick="pass()"></td>
                                                    </tr>
                                    </table>             
                    </form>
    </body>             


    Membuat file HTML

    <head>
    <title> tulisan </title>
    <script language="JavaScript">
                    <!--
                    function pass()
                    {
                    var komentar="";
                    if(document.data.password.value == "uniku" && document.data.nama.value == "admin")
                                    komentar = "selamat " + document.data.nama.value + " Anda benar ..";
                    else
                                    komentar= "Maaf ... " + document.data.nama.value + " anda tidak berhak";
                    document.write(komentar);
                    }
                   
                    //-->
                    </script>
    </head>             

    <body>
                    <center> AUTENTIFIKASI </center>
                    <form name="data">
                                    <table border="0" align="center">
                                                    <tr>
                                                                    <td>masukan nama user</td> <td><input type="text" name="nama" size="10"></td>
                                                    </tr>
                                                   
                                                    <tr>
                                                                    <td>masukan password</td> <td><input type="password" name="password" size="10"></td>
                                                    </tr>    
                                                   
                                                    <tr>
                                                                    <td colspan="2" align="center"><input type="button" value="OK" onclick="pass()"></td>
                                                    </tr>
                                    </table>             
                    </form>
    </body>             


    Tampilan :

    Analisa :
    var komentar="";
    if(document.data.password.value == "uniku" && document.data.nama.value == "admin")
    komentar = "selamat" + document.data.nama.value + "Anda benar ..";
    else
    komentar= "Maaf ..." + document.data.nama.value + "anda tidak berhak";
    document.write(komentar);
    }
 pada file css telah ditentukan nama user, yaitu "admin" dan passwordnya "uniku", jika user dan password diisi sesuai dengan yang telah ditentukan maka akan tampil sbb :

jika tidak sesuai maka akan tampil :


  • Praktikum 4



    <html>

    <head>

                    <script language="JavaScript">

                    function tampil_perulangan()

                    {

                                    for (i=1; i<=10; i++)

                                    {

                                    document.write("Bilangan"+ i + "<br>")

                                    }

                    }

                    </script>             

    </head>

    <body onload="tampil_perulangan()">

    </body>

    </html>




    Tampilan :

    Analisa :
    function tampil_perulangan()
                    {
                                    for (i=1; i<=10; i++)
                                    {
                                    document.write("Bilangan"+ i + "<br>")
                                    }
                    }
    Kata "Bilangan akan muncul karena telah ditentukan pada for (i=1; i<=10; i++)
 

  • Praktikum 5


<html>
<head>
                <title>JavaScript</title>
</head>
<script language="javascript">
function hit()
{
                                var buah = new Array("mangga","jeruk","salak");
                                document.write("Data Buah : ");
                                for(i=0; i<=2; i++)
                                {
                                                document.write("<br>Buah Ke-" + (i+1) + "=" + buah[i]);
                                }
}
</script>
<body onload="hit()">
</body>
</html>

  • Tampilan :


    for(i=0; i<=2; i++)
                                    {
                                                    document.write("<br>Buah Ke-" + (i+1) + "=" + buah[i]);
                                    }

    Menampilkan variabel buah yang telah ditentukan, yaitu var buah = new Array("mangga","jeruk","salak");

  • Praktikum 6

<html>
<head><title>Javascript</title></head>
<script language="JavaScript">
                var d=new Date ();
                var h=new Array(7);

                h[0]="Minggu"; h[1] = "Senin";
                h[2]="Selasa"; h[3] = "Rabu";
                h[4]="Kamsi"; h[5] = "Jumat";
                h[6]="Sabtu";
               
                var x= new Date ();
                var tgl= x.getDate();
                var bln= x.getMonth ();
                var thn= x.getYear ();
               
                document.write ("Hari ini "+ h[d.getDay()]);
                document.write (", Tanggal "+ tgl + "-" + bln + "-" + thn );
</script>
<body></body>
</html>              
               

  • Tampilan :

    Analisa :
  • var x= new Date ();
    var tgl= x.getDate();
    var bln= x.getMonth ();
    var thn= x.getYear ();

    mengambil data tanggal, bulan, dan tahun pada komputer

[POSTEST]

  • Buat script untuk menghitung pembayaran SPP 

<html>
<script language="JavaScript">
function kali()
{
                var a = parseInt(document.data.jmlsks.value);
                var b = parseInt(document.data.tetap.value);
                document.data.jmlh.value = a * 40000;
                var c = parseInt(document.data.jmlh.value);
               
                document.data.total.value = b + c;
               
}
</script>

<body>
                <table border="1" align ="center">
                                <tr align="center">
                                                <td colspan="2">PERHITUNGAN SPP</td>
                                </tr>
                                <tr>
                                                <td>Nama</td><td><input type="text" name="nama" size="20" maxlength="20"></td>
                                </tr>
                                <tr>
                                                <td>NIM</td><td><input type="text" name="nim" size="20" maxlength="20"></td>
                                </tr>    
                                <tr>
                                                <td>Jumlah SKS yang diambil</td><td><input type="text" name="jmlsks" size="20" maxlength="20"></td>
                                </tr>
                                <tr>
                                                <td colspan="2" align="center"><input type="button" value="HITUNG" onclick="kali()"></td>
                                </tr>
                                <tr>
                                                <td>SPP Tetap</td><td><input type="text" name="tetap" size="20" maxlength="20" value="900000"></input></td>
                                </tr>
                                <tr>
                                                <td>Jumlah SKS</td><td><input type="text" name="jmlh" size="20" maxlength="20"></td>
                                </tr>    
                                <tr>
                                                <td>Total Pembayaran</td><td><input type="text" name="total" size="20" maxlength="20"></td>
                                </tr>
                </table>
</body>
</html>              
                               
                               

Tampilan :

Keterangan :
  • variabel a = Jumlah SKS
  • variabel b = Jumlah SKS dikalikan Harga per sks = 40.000
  • variabel c = SPP Tetap = 100.000
  • Total Pembayaran = b + c

[TUGAS] 

<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
<script>
function tampilkan(){
  var nama_kota=document.getElementById("form1").select1.value;
  var p_kontainer=document.getElementById("container");
  if (nama_kota=="Televisi 21")
    {
        p_kontainer.innerHTML="Nama barang : Televisi <br> harga : Rp.1.500.000 <br> Discount 10% : Rp.150000";
    }
  else if (nama_kota=="Kulkas")
    {
        p_kontainer.innerHTML="Nama barang : Kulkas <br> harga : Rp.1.850.000 <br> Discount 8% : Rp.148000";
    }
  else if (nama_kota=="Mesin Cuci")
    {
        p_kontainer.innerHTML="Nama barang : Mesin Cuci <br> harga : Rp.2.150.000 <br> Discount 15% Rp.322500";
    }
}
</script>
</head>
<body>
 <ol type="1">
 <li>Televisi 21"</li>
 <li>Kulkas</li>
 <li>Mesin Cuci</li><br></br>
<form id="form1" name="form1" onsubmit="return false">
  <label for="select1">Ketik nomor barang: </label>
  <select id="select1" name="select1">
    <option value="Televisi 21">1</option>
    <option value="Kulkas">2</option>
    <option value="Mesin Cuci">3</option>
  <input type="submit" value="Proses" onclick="tampilkan()">
</form>
<p id="container"></p>
 <table border="1">
            <tr>
            <td>No.</td>
            <td align="center">Nama Barang</td>
            <td align="center">Harga</td>
            <td align="center">Discount</td>
            </tr>
            <tr>
            <td>1.</td>
            <td align="center">Televisi</td>
            <td align="center">1.500.000</td>
            <td align="center">10%</td>
            </tr>
            <tr>
            <td>2.</td>
            <td align="center">Kulkas</td>
            <td align="center">1.850.000</td>
            <td align="center">8%</td>
            </tr>
            <tr>
            <td>3.</td>
            <td align="center">Mesin Cuci</td>
            <td align="center">2.150.000</td>
            <td align="center">15%</td>
            </tr>
 </table>
</body>
 
Tampilan :
 setelah proses :







 -Selesai-

0 komentar:

Posting Komentar

Copyright 2013 Pemrograman Web 1

designed by Template Trackers