PEMROGRAMAN WEB: 2013 Transparent Sexy Pink Heart

Rabu, 26 Juni 2013

Praktek Pertemuan X


Materi :
1.   Mengenal fungsi
2.   Memanfaatkan fungsi
Latihan 1.
1.   Buka notepad
2.   Ketikkan struktur html
<html>
  <head>
    <title>Latihan Fungsi</title>
  </head>
  <body>


  </body>
</html>

3.   Simpan kode dengan nama lat101.html
4.   Buka file lat101.html dari web browser


Hasil:
<html>
   <head>
     <title>Latihan Fungsi</title>
     <script>
        function pesan()
        {
         alert('Seribu langkah Dimulai Dari 1 Langkah');
         }
     </script>
   </head>
   <body>
        <form>
          <input type=button value="click" onclick="alert('Web Programming')">
          <input type=button value="Pesan Hari Ini" onclick="pesan()">
        </form>

   </body>
</html>











Gambar 1. Antar Muka Menjumlahkan 2 Buah Bilangan
Jawab :
1.   Buka notepad baru
2.   Ketikkan struktur html
<html>
  <head>
    <title>Latihan Fungsi-2</title>
   
  </head>
  <body>
   

  </body>
</html>

3.   Simpan kode dengan nama lat102.html
4.   Buka file lat102.html dari web browser
5.   Rancang form seperti gambar 1
Kode html:
<html>
   <head>
     <title>Latihan Fungsi-2</title>
      <script>

        function jumlah()
        {
         //deklarasikan variabel untuk menampung nilai txta,     //txtb dan txtc
         var a,b,c;
         //simpan nilai txta ke variabel a dan ubah menjadi angka
         a=parseInt(document.getElementById('txta').value);
         //simpan nilai txtb ke variabel b dan ubah menjadi angka
         b=parseInt(document.getElementById('txtb').value);
         //jumlahkan a  + b dan simpan di c
         c=a+b;
         //tampilkan nilai c di tctc
         document.getElementById('txtc').value=c;
         }
       
        function kali()
        {
         //deklarasikan variabel untuk menampung nilai txta, //txtb dan txtc
         var a,b,c;
         //simpan nilai txta ke variabel a dan ubah menjadi angka
         a=parseInt(document.getElementById('txta').value);
         //simpan nilai txtb ke variabel b dan ubah menjadi angka
         b=parseInt(document.getElementById('txtb').value);
         //kalikan a * b dan simpan di c
         c=a*b;
         //tampilkan nilai c di tctc
         document.getElementById('txtc').value=c;
         }

        function bagi()
        {
         //deklarasikan variabel untuk menampung nilai txta, //txtb dan txtc
         var a,b,c;
         //simpan nilai txta ke variabel a dan ubah menjadi angka
         a=parseInt(document.getElementById('txta').value);
         //simpan nilai txtb ke variabel b dan ubah menjadi angka
         b=parseInt(document.getElementById('txtb').value);
         //bagikan a / b dan simpan di c
         c=a/b;
         //tampilkan nilai c di tctc
         document.getElementById('txtc').value=c;
         }

        function kurang()
        {
         //deklarasikan variabel untuk menampung nilai txta, //txtb dan txtc
         var a,b,c;
         //simpan nilai txta ke variabel a dan ubah menjadi angka
         a=parseInt(document.getElementById('txta').value);
         //simpan nilai txtb ke variabel b dan ubah menjadi angka
         b=parseInt(document.getElementById('txtb').value);
         //kurangkan a - b dan simpan di c
         c=a-b;
         //tampilkan nilai c di tctc
         document.getElementById('txtc').value=c;
         }

     </script>
   </head>
   <body bgcolor=brown>
        <form>
         <table align=center bgcolor=yellow width=200px>
         <tr>
         <td colspan=3 align=center><marquee>Menjumlahkan Dua Buah bilangan</marquee></td>
         </tr>

         <tr>
         <td>Bilangan A</td>
         <td>:</td>
         <td><input type=text size=5 id=txta></td>
         </tr>

         <tr>
         <td>Bilangan B</td>
         <td>:</td>
         <td><input type=text size=5 id=txtb></td>
         </tr>
         <tr>
         <td colspan=3 align=center>
                <input type=button value=" + " onclick="jumlah()">
                <input type=button value=" * " onclick="kali()">
                <input type=button value=" / " onclick="bagi()">
                <input type=button value=" - " onclick="kurang()">
         </tr>

         <tr>
          <td>A + B</td>
         <td>:</td>
         <td><input type=text size=5 id=txtc></td>
         </tr>

         </table>
         </form>
   </body>
</html>
 




Outputnya adalah seperti gambar di atas




Teori Pertemuan x


Materi :
1.   Memahami pernyataan bersyarat Switch
2.   Memahami pernyataan berulang
-    For
-    While
-    Do-while
A.  Pernyataan Bersyarat Switch
Digunakan jika ditemukan permasalahan yang penyelesaianya memilih salah satu alternatif nilai dari beberapa nilai.

Syntax
Switch (Nillai)
{
        Case : <Pernyataan>
                Break
        Case : <Pernyataan>
                Break
        Case : <Pernyataan>
                Break

        ......................................      
        Default : <pernyataan>
                Break
}



Program
Sebelum kita membuat kode program alangkah baiknya kita membuat flowchart terlebih dahulu, karena program adalah sederetan intruksi yang disusun secara sistematis untuk mencapai suatu tujuan.
Untuk membuat program lakukanlah hal Sebagai berikut :
1.   Algiritma
Adalah langkah-langkah untuk menyelesaikan masalah.
Algoritma dapat disusun dengan menggunakan :
-    Flowchart
-    Definisi algoritma
-    Psudo code
2.   Coding Program
Gambar-gambar flowchart :

     3.   Ciri kode dalam program
-    Sequential (Berurutan)
-    Condition (Bersyarat)
-    Repetition (Berulang)
Setiap program harus ada awal dan akhirnya.
contoh :
misalkan diketahui daftar nilai huruf yang dapat diproleh seorang mahasiswa dari suatu matakuliah.
A+       ->  Luar Biasa     
A     -> Cukup Tinggi
A-      -> Tinggi
B+      -> sangat Baik
B    -> Cukup Tinggi
B-      -> Baik
C+     -> cukup
C     -> pas cukup
D    -> kurang
E    -> Gagal
Jawab :
<html>
<head>
   <title></title>
</head>
  <body>
    <script>
    Var nh,ket;
    nh = “c”;
    Switch (nh)
       {
           Case “A+”:ket =”Luar Biasa”;
                        Break;
           Case “A”:ket =”Cukup Tinggi”;
                        Break;
           Case “A-”:ket = “Tinggi”;
                        Break;
           Case “B+”:ket =”Sangat Baik”;
                        Break;
           Case “B”:ket =”Cukup Baik”;
                        Break;
           Case “B-”:ket =”Baik”;
                        Break;
           Case “C+”:ket =”Cukup”;
                        Break;
           Case “C”:ket =”Pas Cukup”;
                        Break;
          Case “D”:ket =”kurang”;
                        Break;
            Case “E”:ket = “Gagal”;
                        Break;
       }
        Document.write(“nilai huruf =”,nh,”ket=”,ket);
    </script>
  </body>
</html>

Catatan :
 Jika ditemukan kata break di dalam statement switch maka proses program akan otomatis pindah ke pernyataan setelah } (tutup kurung).




 
 







Switch (nilai)
{
   Case (nilai)
     {
        Case nilai :<pernyataan>
                      If (kondisi)
                        <pernyataan>
                       Else
                        <pernyataan>
                               Break
     Case nilai : if (kondisi)
                         <pernyataan>
                         Else if (kondisi)
                         <pernyataan>
                         Else
                         <pernyataan>
                         Break
    }
B.   Pernyataan For
Pernyataan yang digunakan untuk mengerjakan intruksi secara berulang dan sudah pasti.

Syntax 1
For (var = nilai, kondisi, pertambahan/pengurangan)
{
   <pernyataan>
}

Contoh :
Mencetak string “unika” sebanyak 100 kali di web browser
1.   Buka editor notepad
2.   Ketikkan struktur Html
<html>
<head>
   <title></title>
</head>
   <body>
   </body>
</html>
3.   Ketikkan kode javascript untuk mencetak “unika” sebnanyak 100 kali di web browser




<html>
<head>
   <title></title>
</head>
   <body>
  <script>
    Var i;
     For (i=1,i<100,i++)
     {
      Document.write(“Unika”)
      }
  </script>
   </body>
</html>
4.   Simpan kode html dengan nama latihan2.html
5.   Jalankan web browser
6.   Buka file latihan2.html tersebut