PEMROGRAMAN WEB: Praktek pertemuan VII Transparent Sexy Pink Heart

Rabu, 26 Juni 2013

Praktek pertemuan VII

Materi
1.   Memahami struktur pernyataan if
2.   Mampu membuat kode  javascript dengan memanfaatkan pernyataan if

Terdapat 3 (tiga ) syntax pernyataan if, yaitu :
SYNTAX-1
If (kondisi)
{
   <Pernyataan>
}
Jika nilai kondisi TRUE maka pernyataan di dalam if  akan dieksekusi
     
Latuhan 1
1.   Buka editor notepad
2.   Ketikkan struktur html
<html>
 <head>
    <title>latihan JS Lanjut</title>
 </head>
   <body>

   </body>
</html>
3.   Ketikkan kode javascript berikut:
      Deklarasikan variable ipku
      Beri nilai ipku ß 3.2
      Jika ipku > 3.2 cetak string “Dapat Memperoleh Beasiswa “ di web browser

4.   Ketikkan kode javascript berikut
<html>
    <head>
      <title>Latihan JS Lanjut</title>
    </head>
    <body>
      <script>
        var ipku;
        ipku=3.2;
        if (ipku>3.5)
          {
            document.write("Bisa Memperoleh Beasiswa");
          }
      </script>   
    </body>
 </html>

5.   Simpan kode dengan nama latuhanjs2.html
6.   Jalankan web browser

7.   Buka file js2.html dari browser
-          CTRL+O
-          Arahkan pointer ke pointer  penyimpanan js2.html



SYNTAX-2
If (kondisi)
{
   <pernyataan>
}
Else
{
   <pernyataan>
}
Jika kondisi bernilai TRUE maka pernyataan  di dalam if akan dikerjakan , jika kondisi bernilai FALSE maka pernyataan ai dalam ELSE akan dikerjakan







Latihan 2.
1.   Buka notepad baru
2.   Ketikkan kode berikut:
<html>
    <head>
      <title>Latihan JS Lanjut</title>
    </head>
    <body>
      <script>
        var ipku;
        ipku=3.7;
        if (ipku>3.5)
          {
            document.write("Bisa Memperoleh Beasiswa");
          }
        else
          {
            document.write("TIDAK Bisa Memperoleh Beasiswa");
          }
        document.write("<h1>Belajar IF</h1>");
      </script>   
    </body>
 </html>

3.   Format tag <h1> dari internal css dengan karakteristik sbb:
-          Besar huruf : 70px
-          Warna huruf : magenta
-          Latar belakang warna huruf : black;
-          Jenis huruf : verdana
-          Perataan teks : tengah
-          Bingkai : 10px solid putih

SYNTAX-3
if (kondisi)
  {
     <pernyataan>
   }
else if (kondisi)
  {
     <pernyataan>
   }
else if (kondisi)
  {
     <pernyataan>
   }
else
  {
    <pernyataan>
  }
Jika kondisi bernilai TRUE maka pernyataan  di dalam if akan dikerjakan , jika kondisi bernilai FALSE maka pernyataan ai dalam ELSE akan dikerjakan




















Latihan 2.
Buatlah kode javascript untuk algoritma berikut:
1.   Deklarasikan variabel v,s,t
2.   Beri nilai sß 100
3.   Beri nilai tß 1
4.   v=s/t
5.   Uji nilai V
Jika v>300
    Ket=”Kecepatan Extreme”
Jika v>200
    Ket =”Kecepatan Luar Biasa”
Jika V>100
    Ket =”Kecepatan Lumayan Cepat”
Jika V<=100
    Ket =”Kecepatan Biasa “
6.   Cetak nilai v,s,t dan Ket
<html>
    <head>
      <title>Latihan JS Lanjut</title>
    </head>
    <body bgcolor="teal">
      <script>       
        var v,s,t;
        var ket;
        s=1000;
        t=3;
        v=s/t;
        if (v>300)
          ket="Kecepatan Extreme";
        else if (v>200)
          ket="Kecepatan Luar Biasa";
        else if (v>100)
          ket="Kecepatan Lumayan Cepat";       
        else
          ket="Kecepatan Normal";
        document.write("<br>Nilai V : ",v," km/jam");
        document.write("<br>Nilai S : ",s," km");
        document.write("<br>Nilai T : ",t," jam");
        document.write("<br>Dengan Kecepatan : ",v," km/jam maka ",ket);
  </script>   
    </body>
 </html>

7.   Buat tabel seperti di bawah ini












8.   Kode html nya adalah
<html>
    <head>
      <title>Latihan JS Lanjut</title>
    </head>
    <body bgcolor="teal">
      <script>       
        var v,s,t;
        var ket;
        s=1000;
        t=3;
        v=s/t;
        if (v>300)
          ket="Kecepatan Extreme";
        else if (v>200)
          ket="Kecepatan Luar Biasa";
        else if (v>100)
          ket="Kecepatan Lumayan Cepat";       
        else
          ket="Kecepatan Normal";
        document.write("<br>Nilai V : ",v," km/jam");
        document.write("<br>Nilai S : ",s," km");
        document.write("<br>Nilai T : ",t," jam");
        document.write("<br>Dengan Kecepatan : ",v," km/jam maka ",ket);
document.write("<hr>");
        document.write("<table border=1 width=75% bgcolor=yellow align=center>");
        document.write("<tr><td colspan=3>Logo</td></tr>");
        document.write("<tr height=300px><td width=15%>Menu</td>");
        document.write("<td>Isi</td><td width=15%>news</td></tr>");
        document.write("<tr><td colspan=3 align=center>Hakcipta</td></tr>");
      </script>   
    </body>
 </html>

Note :
window.alert("Sukses... Selamat Belajar");
Menampilkan kotak yang berisi informasi “Sukses.. Selamat Belajar”

9.   Tambahkan windows.alert pada kode html tersebut
<html>
    <head>
      <title>Latihan JS Lanjut</title>
    </head>
    <body bgcolor="teal">
      <script>       
        var v,s,t;
        var ket;
        s=1000;
        t=3;
        v=s/t;
        if (v>300)
          ket="Kecepatan Extreme";
        else if (v>200)
          ket="Kecepatan Luar Biasa";
        else if (v>100)
          ket="Kecepatan Lumayan Cepat";       
        else
          ket="Kecepatan Normal";
        document.write("<br>Nilai V : ",v," km/jam");
        document.write("<br>Nilai S : ",s," km");
        document.write("<br>Nilai T : ",t," jam");
        document.write("<br>Dengan Kecepatan : ",v," km/jam maka ",ket);
        window.alert("Sukses... Selamat Belajar");
        document.write("<hr>");
        document.write("<table border=1 width=75% bgcolor=yellow align=center>");
        document.write("<tr><td colspan=3>Logo</td></tr>");
        document.write("<tr height=300px><td width=15%>Menu</td>");
        document.write("<td>Isi</td><td width=15%>news</td></tr>");
        document.write("<tr><td colspan=3 align=center>Hakcipta</td></tr>");
      </script>   
    </body>
 </html>

Diposting oleh Bernadetha Meliala