script.js

// kode javascript
const judulHTML2 = document.getElementById("judul")

judulHTML2.innerHTML="Judul via External JS"

// tipe data
/**
 * 1. string = huruf, angka
 * 2. number = angka
 * 3. boolean = true, false 
 * 4. array = [1,2,"tes",false]
 * 5. object = {key, value}
 * 
 * variabel = const, let
 * 
 */

// deklarasi variabel, tempat menyimpan data
/**
 * let = data yang berubah2
 * const = data yang statis, fix
 * 
 * syarat penulisan nama variabel:
 * - diawali dengan huruf kecil (camel case) -> variabelSatu variabelNomorDua
 * - tidak boleh ada spasi
 * - tidak boleh diawali dengan angka, tetapi di tengah kata / akhir boleh ada angka
 * - tidak boleh memiliki karakter spesial
 * - tidak boleh menggunakan reserverd word dari javascript
 * - direkomendasikan memiliki arti / tujuan yang jelas
 * - isi variabel bisa bermacam macam, kalau string tambahkan petik ""
 */
 

let variabel1

// model penulisan string
let variabel2 = "Test"
let variabel3 = 'Test3'
let variabel4 = `Test 1`

// A. string (' = petik 1, "" petik 2, `` = backtick)
let string1 = "Budi"
let string2 = "Arie"

let namaLengkap1 = string1 + " " + string2
console.log(namaLengkap1)

let namaLengkap2 = `${string1} ${string2} Setiadi`
console.log(namaLengkap2)

// model penulisan angka
let variabel5 = 1

// B Angka
let angka1 = 5
let angka2 = 10

console.log("Penjumlahan: ", angka2 + angka1)
console.log("Pengurangan: ", angka2 - angka1)
console.log("Pembagian: ", angka2 / angka1)
console.log("Perkalian: ", angka2 * angka1)
console.log("Perpangkatan: ", angka2 ** angka1)

// sisa bagi
console.log("Modulo: ", angka2 % angka1)

// C Boolean (true false)
let boolean1 = true
let boolean2 = false

console.log(boolean1)
console.log(boolean2)
 

// D Array
// 
// urutan - 1 = index
let array1 = [1, 2, 3, "tes", true, [1,2,3,[2,3]], "alamat"]
// akses data ke array menggunakan index dimulai dari 0

// saya ingin mencetak angka 1, index pertama di array1
console.log(`Mencetak ${array1[0]}`, array1[0])

// mencetak angka 1 di dalam index 5
console.log(array1[5])

// E. Object (key, value)

let obj1 = {
    // key: value
    nama : "Alex Espargaro",
    kelas : 1,
    sudahLulus : true,
    hobi : ["balapan", "tidur", "mancing"],
    riwayatPendidikan : {
        SD: "123",
        SMP : "456"
    },
    riwayatDetail : [
        {
            nama: "SD 1"
        },
        {
            nama: "SMP 1"
        }
    ]
}

console.log(obj1)
console.log(obj1["sudahLulus"])



// if, else if, else, switch

/**
 * if (kondisi){
 *      statement
 * } else {
 *      statement
 * }
 * 
*/

/**
 *  > = lebih besat
 *  < = lebih kecil
 *  = deklarasi variabel, pemberian nilai (value)
 *  == sama dengan
 *  >= lebih besar / sama dengan
 *  <= lebih kecil / sama dengan
 *  === cek nilai & tipe data
 * 
 */

// A. If Else (berlaku 2 kondisi)
// mengecek apakah bilangannya lebih besar dari 5
let kondisi1 = 10

if (kondisi1 > 5){
    console.log("Angka lebih besar dari 5")
} else {
    console.log("Angka lebih kecil dari 5")
}


// B. If, Else if, else (3 atau lebih kondisi)
let kondisi2 = "Selasa"
if (kondisi2 == "Senin"){
    console.log("Hari Kerja")
} else if (kondisi2 == "Selasa"){
    console.log("Hari Kerja Juga")
} else if (kondisi2 == "Rabu"){
    console.log("Hari Kerja Lagi")
} else {
    console.log("Hari Libur")
}

// C. Switch
let kondisi3 = "Rabu"

switch(kondisi3){
    case "Senin":
    case "Selasa":
    case "Rabu":
    case "Kamis":
    case "Jumat":
        console.log("Hari Kerja")
        break
    case "Sabtu":
    case "Minggu":
        console.log("Hari Libur")
        break
    default:
        console.log("Bukan Nama Hari")
}

// kondisi if (membandingkan angka) & switch (mengecek jabatan)

// function 

// function tanpa parameter
function tambahTeks(){
    console.log("Halo Tambah Teks")
}

tambahTeks()

// function dengan parameter
function tambahAngka(angka1, angka2){
    console.log(angka1 + angka2)
}

tambahAngka(1, 1)


// DOM (Document Object Models)
// 1. tangkap / ambil id di html menggunakan function document
let paragraf = document.getElementById("paragraf1")

// 2. tambahkan value
paragraf.innerHTML = "<h1>Halo Paragraf</h1>"

// 3. jika kita ingin memberikan action
// 

let tombol = document.getElementById("tombol")

// action: click, hover, dsb
// function callback, untuk memproses action
function tampilAlert(){
    alert("Selamat Datang")
}

tombol.addEventListener('click', tampilAlert)


// kalkulator penjumlahan
const bilangan1 = document.getElementById("angka1")
const bilangan2 = document.getElementById("angka2")
const hitungTombol = document.getElementById("hitung")
const tampilHasil = document.getElementById("hasil")

function prosesAngka(){
    // konversi ke bilangan, menggunakan function number
    let hasil = Number(bilangan1.value) + Number(bilangan2.value)
    tampilHasil.innerHTML = `Hasilnya adalah: ${hasil}`
}

hitungTombol.addEventListener("click", prosesAngka)