081296718180 mastrie90@gmail.com

KODING : JAVASCRIPT

Feb 21, 2025 | ELEKTRONIKA

Javascript merupakan bahasa pemograman dalam bentuk skrip untuk memberikan kemampuan tambahan terhadap bahasa HTML sehingga tampilan web menjadi interaktif/dinamis, dikembangkan oleh Brendan Eich pada tahun 1995 pada browser Netscape demgam nama Mocha, kemudian berubah LiveScript dan  diganti JavaScript, agar dapat digunakan disemua browser maka dibuatkan standarnya yaitu ECMAScript pada tahun 2008.

Untuk menggunakan JavaScript, diperlukan komponen pendukung, yaitu :

Setelah didownload lalu install chrome dan VCS sampai selesai, kemudian lakukan setting untuk VSC, sebagai berikut :

  • Tambahkan extensions Live Server kemudian klik install
  • Buat folder, misalnya dengan nama LATIHAN JS untuk menyimpan file program yang akan dibuat
  • Pilih Go Live dan pilih Chrome klik always, atau klik file pilih preference, pilih setting, pilih custom browser pilih chrome dan simpan

JavaScript memiliki struktur sederhana, kodenya dapat disisipkan pada dokumen HTML atau berdiri sendiri. Struktur penulisan JavaScript dalam dokumen atau internal berada dalam tag script, Cara penulisan program JavaScript, dapat dilakukan dengan 3 cara, yaitu :

  • Embed (Kode Javascript ditempel langsung pada HTML., formatnya sebagai berikut :
    !DOCTYPE html>
    <HTML>
        <HEAD>
            <TITLE>Penulisan JS</TITLE>
        </HEAD>
        <BODY>
            <SCRIPTLANGUAGE=”Javascript”>
            console.log(“penulisan JS”)
            </SCRIPT>
            <h1>Penulisan JS</h1>
        </BODY>
    </HTML>
  • Inline (kode Javascript ditulis pada atribut HTML), formatnya sebagai berikut :
    <!DOCTYPE html>
    <HTML>
        <HEAD>
            <TITLE>Penulisan JS</TITLE>
        </HEAD>
        <BODY>
            <SCRIPTLANGUAGE=”Javascript”>
            console.log(“penulisan JS”)
            </SCRIPT>
            <h1>Penulisan JS</h1>
            <a href=”#” onclick=”alert(‘assalamualaikum’)” >klik salam</a>
        </BODY>
    </HTML>
  • Eksternal (Kode Javascript ditulis terpisah dengan file HTML), formatnya sebagai berikut :
    <!DOCTYPE html>
    <HTML>
        <HEAD>
            <TITLE>Penulisan JS</TITLE>
        </HEAD>
        <BODY>
            <SCRIPTsrc=”penulisan.js”>
            </SCRIPT>
            <h1>Penulisan JS</h1>
            <a href=”#” onclick=”alert(‘assalamualaikum’)” >klik salam</a>
        </BODY>
    </HTML>

Ada 4 cara menampilkan output pada Javascript. antara lain :

  • Menggunakan Fungsi console.log(), untuk menampilkan teks ke console Javascript, contohnya : console.log(“Hello World!”);
  • Menggunakan Fungsi alert(), untuk menampilkan jendela dialog, berada pada objek window, contohnya : window.alert(“Hello World!”); atau alert(“Hello World!”);
  • Menggunakan Fungsi document.write(), merupakan objek yang mewakili dokumen HTML di dalam
    Javascript, terdapat fungsi write() untuk menulis sesuatu ke dokumen HTML, contohnya : dokument.write(“Hello World!”)
  • Menggunakan innerHTML, merupakan sebuah atribut didalam (objek) elemen HTML yang berisi string HTML, dapat menampilkan output ke elemen yang lebih spesifik, contohnya :
    <!DOCTYPE html>
    <html lang=”en”>
        <head>
            <title>Tampilan JS</title>
        </head>
        <body>
            <h1>”innerHTML”</h1>
            <div id = “ouput”> </div>
        <Script>
            var hasil = document.getElementById(“ouput”);
            hasil.innerHTML = “<p> Output innerHTML</p>”;
        </Script>
        </body>
    </html>

DASAR PEMOGRAMAN JS

  • Komentar, untuk memberikan keterangan tanapa dieksekusi, penulisannya dengan 2 cara, yaitu :
    • // komentar
    • /* komentar */
  • Variabel, merupakan wadah untuk menyimpan sesuatu atau nilai seperti string(teks), number (angka), objek, array, dan sebagainya, menggunakan kata kunci var atau let lalu diikuti dengan nama variabel dan nilainya, misalnya : var nama = ” Zaskia Mecca”, var X = 1998. Variabel bersifat mutable, artinya nilai yang tersimpan di dalamnya, dapat kita isi ulang (berubah), untuk menghapus variabel dengan perintah delete, misalnya delete nama. adapun cara penulisannya harus memperhatikan hal berikut :
    • Harus diawalai dengan karakter (huruf atau baris bawah)
    • Tidak boleh menggunakan spasi
    • Huruf Kapital dan kecil memiliki arti yang berbeda
    • Tidak boleh menggunakan kata-kata yang merupakan perintah dalam JavaScript.
  • Data, merupakan isian atau nilai variabel, yang terdiri dari :
    • Numerik, terdiri dari : integer/bulat misalnya 0222532531, 1000, 45,  dan float/pecahan misalnya 3.146789
    • String, berupa kata atau kalimat cara menulisnya diantara tanda petik tunggal (’) atau tanda petik ganda (”) seperti : “Hallo”, “April”, ‘Jl. Setiabudi No 17A’, “Cece Kirani” dsb
    • Boolean, bernilai true atau false digunakan untuk mengecek suatu kondisi atau keadaan, misalnya : var X = (Y > 90); artinya jika Y lebih besar dari 90 maka X akan bernilai True
    • Null, merepresentasikan variabel yang tidak diberi nilai awal/diinisilisasi
  • Operator, merupakan simbol yang digunakan untuk melakukan operasi pada suatu nilai dan variabel, yang terbagi dalam 6 jenis, yaitu :
    • Operator aritmatika, untuk beripe numerik, meliputi : +. -, *, /, %,
    • Operator Penugasan (Assignment), digunakan untuk memberikan tugas kepada variabel, untuk mengisi variabel, meliputi : ==, +=, -=, /=, **=, %=
    • Opeartor relasi atau perbandingan, digunakan untuk membandingkan dua nilai, menghasilkan sebuah nilai boolean true dan false, meliputi : ==, >, <, >=, <=, !=
    • Operator Logika, digunakan untuk membandingkan dua nilai, menghasilkan sebuah nilai boolean true dan false, meliputi : &&, ||, !
    • Operator Bitwise, digunakan untuk operasi berdasarkan bit (biner), meliputi : &, |, ^, ~, <<, >>, <<<, >>>
    • Operator Ternary, operator yang teridiri dari tiga bagian, terdiri dari bagian kiri, tengah, dan kanan, meliputi : ?
  • Percabangan, terdiri dari :
    • if, merupakan percabangan yang hanya memiliki satu blok pilihan saat kondisi bernilai benar, misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if</title>
</head>
<body>
    <script>
        var totalBelanja = prompt("Total belanja?", 0);
        if(totalBelanja > 100000){
            document.write("<h2>Selamat Anda dapat hadiah</h2>");
        }
        document.write("<p>Terima kasih sudah berbelanja di toko kami</p>");
    </script>
</body>
</html>
    • if else, merupakan percabangan yang memiliki dua blok pilihan, Pilihan pertama untuk kondisi benar, dan pilihan kedua untuk kondisi salah (else), misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else</title>
</head>
<body>
    <script>
        var password = prompt("Password:");
        if(password == "kopi"){
            document.write("<h2>Selamat datang bos!</h2>");
        } else {
            document.write("<p>Password salah, coba lagi!</p>");
        }
        document.write("<p>Terima kasih sudah menggunakan aplikasi ini!</p>");
    </script>
</body>
</html>
    • if else if, merupakan percabangan yang memiliki lebih dari dua blok pilihan, misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan if/else/if</title>
</head>
<body>
    <script>
        var nilai = prompt("Inputkan nilai akhir:");
        var grade = "";
        if(nilai >= 90) grade = "A"
        else if(nilai >= 80) grade = "B+"
        else if(nilai >= 70) grade = "B"
        else if(nilai >= 60) grade = "C+"
        else if(nilai >= 50) grade = "C"
        else if(nilai >= 40) grade = "D"
        else if(nilai >= 30) grade = "E"
        else grade = "F";
        document.write(`<p>Grade anda: ${grade}</p>`);
    </script>
</body>
</html>
    • switch/case, merupakan bentuk lain dari percabangan if/else/if, misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan switch/case</title>
</head>
<body>
    <script>
        var jawab = prompt("Kamu beruntung! Silakan pilih hadiahmu dengan memasukkan angka 1 sampai 5");
        var hadiah = "";
        switch(jawab){
            case "1":
                hadiah = "Tisu";
                break;
            case "2":
                hadiah = "1 Kotak Kopi";
                break;
            case "3":
                hadiah = "Sticker";
                break;
            case "4":
                hadiah = "Minyak Goreng";
                break;
            case "5":
                hadiah = "Uang Rp 50.000";
                break;
            default:
                document.write("<p>Opps! anda salah pilih</p>");
        }
        if(hadiah === ""){
            document.write("<p>Kamu gagal mendapat hadiah</p>");
        } else {
            document.write("<h2>Selamat kamu mendapatkan " + hadiah + "</h2>");
        }
    </script>
</body>
</html>
    • itenary, merupakan bentuk lain dari percabangan if/else, misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        var jwb = prompt("Apakah Jakarta ibu kota indonesia?");
        var jawaban = (jwb.toUpperCase() == "IYA") ? "Benar": "Salah";
        document.write(`Jawaban anda: <b>${jawaban}</b>`);
    </script>
</body>
</html>
    • nested, untuk membuat blok percabangan di dalam percabangan, misalnya : 
      <!DOCTYPE html>
<html lang="en">
<head>
    <title>Percabangan Ternary</title>
</head>
<body>
    <script>
        var username = prompt("Username:");
        var password = prompt("Password:");
        if(username == "petanikode"){
            if(password == "kopi"){
                document.write("<h2>Selamat datang pak bos!</h2>");
            } else {
                document.write("<p>Password salah, coba lagi!</p>");
            }
        } else {
            document.write("<p>Anda tidak terdaftar!</p>");
        }
    </script>
</body>
</html>
  • Perulangan,  untuk mengeksekusi kode yang berulang-ulang, secara umum dibagi dua, yaitu :
    • counted loop, merupakan perulangan yang jelas dan sudah jelas jumlah banyak perulangannya, meliputi : Perulangan For, Foreach, Repeat, misalnya :
      • <script>
        let text = “Hello world!”;
        let result = text.repeat(2);document.getElementById(“demo”).innerHTML = result;
        </script>
      • const numbers = [1, 5, 6, 8, 9, 3];numbers.forEach((elemen, indeks, array) => {
        console.log(‘elemen:’, elemen, ‘indeks:’, indeks, ‘array:’, array);
        });
      • for(counter = 0; counter < 50; counter+=2){
    document.write("<p>Perulangan ke-"+counter+"</p>");
}
      • for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}
    • uncounted loop, merupakan perulangan yang tidak jelas berapa kali ia harus mengulang, meliputi : Perulangan While, Do/While, misalnya : 
      • var ulangi = confirm("Apakah anda mau mengulang?");;
var counter = 0;
do {
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
} while(ulangi)
document.write("Perulangan sudah dilakukan sebanyak "+ counter +" kali");
      • var ulangi = confirm("Apakah anda mau mengulang?");
var counter = 0;
while(ulangi){
    counter++;
    ulangi = confirm("Apakah anda mau mengulang?");
}
document.write("Perulangan sudah dilakukan sebanyak "+ counter +" kali");
  • Struktur data, merupakan cara-cara atau metode yang digunakan untuk menyimpan data di dalam memori komputer, salah satunya menggunakan Array, yang merupakan struktur data yang digunakan untuk menyimpan sekumpulan data dalam satu tempat, Ada dua cara yang bisa dilakukan untuk menambah data ke dalam array, yaitu : Mengisi menggunakan indeks dan method,push(), sedangkan suntuk menghapus data memiliki dua cara, yaitu : Menggunakan delete dan method.pop(). Adapun metode array lainnya antara lain :
    • Method filter(), berfungsi untuk menyaring data dari array, seperti method forEach(),  yaitu : sebuah fungsi callback, misalnya :
      • const numbers = [1, 5, 6, 8, 9, 3];const callbackFn = (elemen, indeks, array) => {
        console.log(‘elemen:’, elemen, ‘indeks:’, indeks, ‘array:’, array);
        };numbers.forEach(callbackFn);
    • Method includes(), berfungsi untuk mengecek apakah sebuah data ada di dalam array atau tidak. digunakan untuk melakukan pencarian untuk memastikan data sudah ada di dalam array, misalnya :
      • <!DOCTYPE html>
        <html>
        <body><h1>JavaScript Strings</h1>
        <h2>The includes() Method</h2><p>includes() returns true if a string contains a specified string.</p><p>Find “world”:</p>

        <p id=”hasil”></p>

        <p>includes() is not supported in Internet Explorer.</p>

        <script>
        let text = “Hello world, welcome to the universe.”;
        let result = text.includes(“world”);

        document.getElementById(“hasil”).innerHTML = result;
        </script>

        </body>
        </html>

    • Method sort(), berfungsi untuk mengurutkan data pada array, misalnya :
      • <!DOCTYPE html>
        <html>
        <body>
        <h1>JavaScript Arrays</h1>
        <h2>The sort() Method</h2><p>The sort() method sorts an array alphabetically:</p><p id=”demo1″></p>
        <p id=”demo2″></p><script>
        const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
        document.getElementById(“demo1”).innerHTML = fruits;

        fruits.sort();
        document.getElementById(“demo2”).innerHTML = fruits;
        </script>

        </body>
        </html>

DOM JS

  • Salah satu tugas utama Javascript di dalam web adalah membuat halaman web agar terlihat dinamis dengan bantuan DOM (Document Object Model),
  • DOM merupakan dokumen (HTML) yang dimodelkan dalam sebuah objek, yang menyediakan sekumpulan fungsi dan atribut/data yang dimanfaatkan dalam membuat program Javascript, yang disebut API (Application
    Programming Interface).
  • Objek DOM di javascript bernama document, yang berisi segala hal yang kita butuhkan untuk memanipulasi HTML, Jika kita coba ketik document pada console Javascript, maka yang akan tampil adalah kode HTML.
  • DOM juga menyediakan fungsi untuk membuat elemen HTML,  Salah satunya adalah fungsi createElement(). Maka, akan tercipta elemen <p> baru. Namun tidak akan ditampilkan ke dalam halaman web, Karena belum
    menambahkannya ke dalam body dokumen. Caranya bisa gunakan fungsi append().
  • Jika kita menggunakan fungsiappend() untuk menambahkan elemen, untuk menghapusnya menggunakan
    fungsi remove().
  • Contoh penggunaan DOM :
    • <!DOCTYPE html>
      <html>
      <body><h2>My First Page</h2><p id=”demo”></p>

      <script>
      document.getElementById(“demo”).innerHTML = “Hello World!”;
      </script>

      </body>
      </html>

    • <!DOCTYPE html>
      <html>
      <body>
      <h2>JavaScript HTML DOM</h2>
      <p>Finding HTML Elements by Tag Name.</p>
      <p>This example demonstrates the <b>getElementsByTagName</b> method.</p>
      <p id=”demo”></p>
      <script>
      const element = document.getElementsByTagName(“p”);
      document.getElementById(“demo”).innerHTML = ‘The text in first paragraph (index 0) is: ‘ + element[0].innerHTML;
      </script>
      </body>
      </html>
    • <!DOCTYPE html>
      <html>
      <body>
      <h2>JavaScript HTML DOM</h2>
      <p>Finding HTML Elements by Class Name.</p>
      <p class=”intro”>Hello World!</p>
      <p class=”intro”>This example demonstrates the <b>getElementsByClassName</b> method.</p>
      <p id=”demo”></p>
      <script>
      const x = document.getElementsByClassName(“intro”);
      document.getElementById(“demo”).innerHTML =
      ‘The first paragraph (index 0) with class=”intro” is: ‘ + x[0].innerHTML;
      </script>
      </body>
      </html>

 

AKSI NYATA

  • Perusahaan Travel ”FD Produk” mempunyai armada dengan tujuan :
    • Jakarta harga tiket 100.000
    • Cirebon harga tiket 150.000
    • Tasikmalaya harga tiket 200.000
    • Diskon 10 % untuk member
    • Subtotal : Harga tiket X Jumlah tiket
    • Diskon : 0.10 X Subtotal
    • Total : Subtotal – Diskon
  • Buat Program dengan menggunakan Javascript dengan ketentuan sebagai berikut :
    • Input : Nama pemesan, Tujuan, Jumlah Tiket, Member
    • Output : Harga Tiket, Sub Total, Diskon, Total Bayar, hitung, ulang
  • <!DOCTYPE html>
    <HTML>
        <HEAD><TITLE>Kasir Travel</TITLE></HEAD>
        <BODY>
        <SCRIPTlanguage=”JavaScript”>
        <!–
        function hitungtotal()
        {
         var nama = (document.fform.inama.value);
         var tujuan = (document.fform.itujuan.value);
         var jumlahtiket = parseFloat(document.fform.ijumlah.value);
         var ht = 0.0;
         var sub = 0.0;
         var diskon =0.0;
         var total =0.0;
         if (tujuan==”Jakarta”)
         {
           ht =100000;
         }
         else if (tujuan==”Cirebon”)
         {
           ht =150000;
         }
         else
         {
           ht =200000;
         }
         sub = jumlahtiket*ht;
         if (document.fform.imember.checked==true)
         {
          diskon =0.10*sub;
         }
         else
         {
          diskon=0.0;
         }
         total = sub-diskon;
         document.fform.otiket.value=eval(ht);
         document.fform.osub.value=eval(sub);
         document.fform.odiskon.value=eval(diskon);
         document.fform.ototal.value=eval(total);
         // gunakan untuk mengecek !!! alert (total);
        }
        //–></SCRIPT>
        <FORMNAME =”fform”>
        <tableborder=”1″align=”center”width=”70%”>
          <tr>
            <td
        width=”100%”colspan=”2″><H2ALIGN=”center”>Travel FD Produk</H2></td>
          </tr>
          <tr>
            <tdwidth=”50%”><PRE>
        Nama         :<inputtype=”text”size=”20″name=”inama”>
        Tujuan       :<selectname=”itujuan”size=1>
                         <optionvalue=”Jakarta”>Jakarta</option>
                         <optionvalue=”Cirebon”>Cirebon</option>
                         <optionvalue=”Tasikmalaya”>Tasikmalaya</option>
                      </select>
        Jumlah Tiket :<inputtype=”text”size=”11″name=”ijumlah”>
        Member       :<inputtype=”checkbox”name=”imember”>Ya</td></pre>
            <tdwidth=”50%”><pre>
        Harga Tiket  :<inputtype=”text”size=”10″name=”otiket”>
        Sub Total    :<inputtype=”text”size=”10″name=”osub”>
        Diskon       :<inputtype=”text”size=”10″name=”odiskon”>
        Total Bayar  :<inputtype=”text”size=”10″name=”ototal”></td><pre>
          </tr>
          <tr>
            <tdwidth=”100%”colspan=”2″>
            <center>
        <INPUTTYPE=”button”value=”Hitung”onclick=”hitungtotal()”>
        <INPUT TYPE=”reset” value=”Ulang”>
            </center></td>
          </tr>
        </table>
        </FORM>
        </BODY>
        </HTML>

LAMPIRAN :

Submit a Comment

Your email address will not be published. Required fields are marked *