Fri. Oct 22nd, 2021

Praktikum 1
Javascript dalam operasi penjumlahan
Buatlah tabel seperti berikut:

Buatlah field id input text pada masing2  ujian.
Ujian 1 -> id= nil1

Ujian 2 -> id=nil2

Ujian 3 -> id=nil3

 

Kemudian pada span pada hasil buatlah Id dengan nama niljml

Kemudian buatlah tombol button dan function onclick=”hitung();”

 

Kemudian pada javascript masukkan kode:

<script type=”text/javascript”>

function hitung(){

var nil1 = document.getElementById(“nil1”).value;

var nil2 = document.getElementById(“nil2”).value;

var nil3 = document.getElementById(“nil3”).value;

 

var tnil1 = parseInt(nil1);

var tnil2 = parseInt(nil2);

var tnil3 = parseInt(nil3);

document.getElementById(“niljml”).innerHTML = tnil1+tnil2+tnil3;

}

</script>

FULLCODE

<html>
<head>
<title> Soal Ujian 1 </title>
<script type="text/javascript">
function hitung(){
  var nil1 = document.getElementById("nil1").value;
  var nil2 = document.getElementById("nil2").value;
  var nil3 = document.getElementById("nil3").value;
  
  var tnil1 = parseInt(nil1);
  var tnil2 = parseInt(nil2);
  var tnil3 = parseInt(nil3);

  document.getElementById("niljml").innerHTML = tnil1+tnil2+tnil3;
  
  
     

}


</script>
</head>


<body>

<table border="1">
      
      <tr>
        <td colspan="4" align="center"><b>DAFTAR UJIAN PWEB</b></td>
        
      <tr>
      <tr>
        <td align="center" colspan="2"> Nilai Ujian</td>
        
      </tr>
      <tr>
        <td> Ujian 1 </td>
        <td><input type="text" size="20" id="nil1" /></td>
        
      </tr>
      <tr>
        <td> Ujian 2 </td>
        <td><input type="text" size="20" id="nil2" /></td>
      </tr>
      <tr>
        <td> Ujian 3 </td>
        <td><input type="text" size="20" id="nil3" /></td>
      </tr>
      <tr>
        <td align="center" colspan="2">NILAI PENJUMLAHAN: <b><span id="niljml"></span></b></td>
      </tr>
    
    
    
</table><br/><br/>
<input type="button" value="HITUNG" onclick="hitung();">
</body>

Praktikum 2 (KONDISIONAL)

kondisional merupaka suatu kondisi, dimana jika memenuhi persyaratan maka akan di eksekusi.

misalnya pengecekan sebuah inputan nilai, jika nilai >= 70 maka “LULUS” jika tidak maka “GAGAL”

code untuk function cek()

if( nil1 >=70){
document.getElementById(“status”).innerHTML = “LULUS”;
} else {
document.getElementById(“status”).innerHTML = “GAGAL”;
}

Fullcode

<html>
<head>
<title> Soal Ujian 1 </title>
<script type="text/javascript">
function cek(){
  var nil1 = document.getElementById("nil1").value;

  if( nil1 >=70){
  document.getElementById("status").innerHTML = "LULUS";
  } else {
  document.getElementById("status").innerHTML = "GAGAL";
  }
  
}

</script>
</head>


<body>

<table border="1">			
      <tr>
        <td colspan="4" align="center"><b>DAFTAR UJIAN PWEB</b></td>
        
      <tr>
      <tr>
        <td align="center" colspan="2"> Nilai Ujian</td>
        
      </tr>
      <tr>
        <td> Nilai Ujian </td>
        <td><input type="text" size="20" id="nil1" /></td>
        
      </tr>
    
      <tr>
        <td align="center" colspan="2">STATUS <b><span id="status"></span></b></td>
      </tr>
    
</table><br/><br/>
<input type="button" value="CEK STATUS" onclick="cek();">
</body>

Praktikum 3 (KONDISIONAL – WARNA)

Sama seperti praktikum 2 namun disini ada pemberian warna, jika lulus berwarna hijau dan gagal berwarna merah. adapun codenya

if( nil1 >=70){
document.getElementById(“status”).innerHTML = “LULUS”;
document.getElementById(“status”).style.backgroundColor=”Green”
} else {
document.getElementById(“status”).innerHTML = “GAGAL”;
document.getElementById(“status”).style.backgroundColor=”Red”

}

FULLCODE

<html>
<head>
<title> Soal Ujian 1 </title>
<script type="text/javascript">
function cek(){
  var nil1 = document.getElementById("nil1").value;

  if( nil1 >=70){
  document.getElementById("status").innerHTML = "LULUS";
  document.getElementById("status").style.backgroundColor="Green"
  } else {
  document.getElementById("status").innerHTML = "GAGAL";
  document.getElementById("status").style.backgroundColor="Red"

  }
  
}

</script>
</head>


<body>

<table border="1">			
      <tr>
        <td colspan="4" align="center"><b>DAFTAR UJIAN PWEB</b></td>
        
      <tr>
      <tr>
        <td align="center" colspan="2"> Nilai Ujian</td>
        
      </tr>
      <tr>
        <td> Nilai Ujian </td>
        <td><input type="text" size="20" id="nil1" /></td>
        
      </tr>
    
      <tr>
        <td align="center" colspan="2">STATUS <b><span id="status"></span></b></td>
      </tr>
    
</table><br/><br/>
<input type="button" value="CEK STATUS" onclick="cek();">
</body>

 

TUGAS

  1. Buatlah code javascript, menghitung jumlah mobil dan harga, kemudian menampilkan total harga penjualan mobil, data dapat diambil di https://www.istanaagungtoyota.com/harga
  2. Buatlah code javascript dari perhitungan penjualan mobil. dengan ketentuan jika total harga jual lebih dari 300 juta maka akan mendapatkan diskon 30%,  200 juta – 299juta diskon 20% dan kurang dari 200 juta diskon 10%.
  3. banyaknya jenis mobil sesuai dengan jenis mobil yang ada di web https://www.istanaagungtoyota.com/harga sebanyak 15 Jenis.

Buatlah laporan pada tugas tersebut. dikumpulkan di email: trpl.polman@gmail.com paling lambat  Jumat 5 feb 2021

Gambaran Sistem

User memasukkan nama mobil, Jumlah Mobil dan Harga. ketika user klik Hitung maka field total akan otomatis terisi begitu juga dengan total bayay dan diskon. kemudian % akan muncul sesuai diskon