Last active
September 20, 2025 08:30
-
-
Save mardommah/f7c8bb9148b4753e0b170a68f8f47052 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment