• Input nama barang
• Input harga
• Input jumlah
• Hitung total

HTML

<input type="text" id="barang">
<input type="number" id="harga">
<input type="number" id="jumlah">

<button onclick="hitung()">
Hitung
</button>

<h2 id="hasil"></h2>

JavaScript

function hitung(){

let harga =
document.getElementById("harga").value;

let jumlah =
document.getElementById("jumlah").value;

let total = harga * jumlah;

document.getElementById("hasil")
.innerHTML =
"Total Bayar : Rp " + total;

}

TUGAS PRAKTIK MANDIRI

Tugas 1

Buat program:

• Input nama siswa
• Input nilai
• Menampilkan status lulus atau tidak

Tugas 2

Buat kalkulator:

• Tambah
• Kurang
• Kali
• Bagi

Tugas 3

Buat daftar hadir siswa menggunakan array.

Tugas 4

Buat aplikasi penghitung luas:

• Persegi
• Persegi Panjang
• Segitiga

Tugas 5 (Proyek Portofolio)

Buat Website Profil Pribadi yang memiliki:

• Header
• Biodata
• Pendidikan
• Skill
• Galeri Foto
• Tombol Ubah Tema Gelap/Terang menggunakan JavaScript
• Tombol Tampilkan/Sembunyikan Biodata

EVALUASI AKHIR

1. Jelaskan fungsi JavaScript dalam website.
2. Apa perbedaan var, let, dan const?
3. Apa fungsi percabangan if?
4. Apa fungsi perulangan for?
5. Apa perbedaan Array dan Object?
6. Jelaskan fungsi DOM.
7. Apa fungsi Event?
8. Bagaimana cara mengambil elemen HTML berdasarkan ID?
9. Buat program menghitung luas persegi.
10. Buat program validasi form login sederhana.

Contoh perintah sederhana validasi form untuk data yang kosong.

HTML

<input type="text" id="nama">

<button onclick="cek()">
Simpan
</button>

JavaScript

function cek(){

let nama =
document.getElementById("nama").value;

if(nama==""){
    alert("Nama wajib diisi");
}
else{
    alert("Data tersimpan");
}

}

Contoh:

<button onclick="klikSaya()">
Klik Saya
</button>

function klikSaya(){
    alert("Tombol Diklik");
}

PRAKTIK 12

MENGUBAH WARNA

<button onclick="warna()">
Ubah Warna
</button>

function warna(){
    document.body.style.backgroundColor="yellow";
}

HTML:

<h1 id="judul">Belajar JavaScript</h1>

JavaScript:

document.getElementById("judul").innerHTML="Belajar DOM";

PRAKTIK 11

HTML

<p id="isi">Halo Dunia</p>

<button onclick="ubah()">Ubah</button>

JavaScript

function ubah(){
    document.getElementById("isi").innerHTML =
    "Teks Berhasil Diubah";
}

let siswa = {
    nama:"Andi",
    umur:17,
    jurusan:"RPL"
};

Menampilkan:

console.log(siswa.nama);

PRAKTIK 10

let barang = {
    kode:"BR001",
    nama:"Laptop",
    harga:5000000
};

console.log(barang.nama);
console.log(barang.harga);

let siswa = [
    "Andi",
    "Budi",
    "Siti"
];

Mengakses data:

console.log(siswa[0]);

PRAKTIK 9

let buah = [
    "Apel",
    "Mangga",
    "Jeruk",
    "Pisang"
];

for(let i=0;i<buah.length;i++){
    console.log(buah[i]);
}

function salam(){
    console.log("Selamat Pagi");
}

Pemanggilan:

salam();

Function dengan Parameter

function halo(nama){
    console.log("Halo " + nama);
}

halo("Andi");

PRAKTIK 8

function luasPersegi(sisi){
    return sisi*sisi;
}

console.log(luasPersegi(10));

FOR

for(let i=1; i<=5; i++){
    console.log(i);
}

WHILE

let i = 1;

while(i<=5){
    console.log(i);
    i++;
}

PRAKTIK 6

MENAMPILKAN 1-100

for(let i=1;i<=100;i++){
    document.write(i + "<br>");
}

PRAKTIK 7

TABEL PERKALIAN

let angka = 5;

for(let i=1;i<=10;i++){
    console.log(angka + " x " + i + " = " + angka*i);
}

IF

let nilai = 80;

if(nilai >= 75){
    console.log("Lulus");
}

IF ELSE

if(nilai >= 75){
    console.log("Lulus");
}else{
    console.log("Tidak Lulus");
}

ELSE IF

let nilai = 90;

if(nilai >= 90){
    console.log("A");
}
else if(nilai >= 80){
    console.log("B");
}
else{
    console.log("C");
}

PRAKTIK 5

PENENTUAN KELULUSAN

let nilai = prompt("Masukkan Nilai");

if(nilai >= 75){
    alert("Lulus");
}
else{
    alert("Tidak Lulus");
}

document.write("Halo");

console.log("Halo");

alert("Halo");

Input

let nama = prompt("Masukkan Nama");

PRAKTIK 4

BIODATA SEDERHANA

let nama = prompt("Nama");
let umur = prompt("Umur");

document.write("Nama : " + nama);
document.write("<br>");
document.write("Umur : " + umur);