Praktis JavaContoh Skrip Beserta Kode Sumbernya Code

Oleh: James Hartman James Hartman
Hours Updated

⚡ Ringkasan Cerdas

Praktis Code Contoh penggunaan JavaSkrip ini mendemonstrasikan bagaimana perulangan, validasi formulir, dan event dapat menyelesaikan tugas-tugas browser sehari-hari. Artikel ini menyajikan generator tabel perkalian, validator formulir pendaftaran lengkap, popup yang dipicu oleh hover, jam digital langsung, dan praktik-praktik yang menjaga keandalan skrip tersebut.

  • ️ Perulangan Bersarang: Tabel perkalian tersebut membentuk string HTML dengan perulangan baris luar dan perulangan kolom dalam.
  • 📝 Validasi Formulir: Array paralel menghubungkan setiap input ke kontainer kesalahannya masing-masing, sehingga pesan muncul di samping kolom yang gagal.
  • 📧 Aturan Email: Pemeriksaan posisi pada tanda @ dan titik terakhir menolak alamat yang salah format sebelum pengiriman.
  • ️ Penanganan Acara: addEventListener menambahkan perilaku ke suatu elemen tanpa menempatkan skrip di dalam markup.
  • ⏰ Pembaruan Terjadwal: setInterval mengulang sebuah fungsi sesuai jadwal tetap, yang menggerakkan contoh jam langsung.
  • 🔐 Aturan Server: Pemeriksaan di sisi klien hanya meningkatkan pengalaman, dan setiap nilai harus divalidasi lagi di server.
  • 🧹 Praktek Modern: Ganti `document.write` dan variabel global implisit dengan `textContent`, `let`, dan `const` dalam kode baru.
Baca Selengkapnya

JavaContoh Skrip Beserta Kode Sumbernya Code

Apa yang Akan Anda Bangun di Dalamnya JavaContoh Skrip

Setiap contoh di bawah ini adalah halaman HTML lengkap yang dapat dijalankan di browser mana pun tanpa langkah pembuatan atau pustaka eksternal. Secara bersama-sama, contoh-contoh ini mencakup tiga keterampilan yang muncul di hampir setiap skrip browser: menghasilkan markup dari data, memvalidasi input pengguna, dan bereaksi terhadap peristiwa.

Example Konsep yang Dipraktikkan Metode Utama yang Digunakan
Tabel perkalian Perulangan bersarang dan pembentukan string perintah, untuk, sementara, dokumen.tulis
Validasi formulir Array, kondisi, dan pembaruan DOM getElementById, indexOf, lastIndexOf, innerHTML
Pesan pop-up Penanganan acara tambahkanEventListener, peringatan
Digijam tal Pengatur waktu dan format tanggal setInterval, Tanggal, padStart, konten teks

Pemahaman dasar tentang JavaNaskah Sintaks diasumsikan. Jika perulangan masih asing, bacalah cara menggunakan perulangan di JavaNaskah sebelum memulai.

Contoh#1: JavaTabel Perkalian Skrip

Buatlah tabel perkalian sederhana yang meminta pengguna untuk memasukkan jumlah baris dan kolom.

Larutan:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Output (3 baris dan 4 kolom):

1   2   3   4
2   4   6   8
3   6   9  12

Code penjelasan: Loop for terluar membuat satu baris tabel per iterasi, sedangkan loop while dalam mengisi baris tersebut dengan satu sel per kolom. Penghitung j Nilai tersebut diatur ulang menjadi 1 setelah setiap baris, yang merupakan langkah yang paling sering dilupakan oleh pemula. Tanpa pengaturan ulang tersebut, hanya baris pertama yang akan berisi sel.

💡 Kiat: Fungsi prompt selalu mengembalikan string. Ekspresi i*j berhasil karena JavaSkrip mengubah kedua operan menjadi angka untuk perkalian, tetapi perbandingan seperti rows > 5 akan membandingkan teks. Bungkus input di dalam Number() ketika nilai tersebut digunakan untuk perhitungan aritmatika dan perbandingan.

Contoh #2: Contoh Formulir JS

Buatlah program formulir contoh yang mengumpulkan nama depan, nama belakang, email, ID pengguna, kata sandi, dan konfirmasi kata sandi dari pengguna. Semua input wajib diisi dan alamat email yang dimasukkan harus dalam format yang benar. Selain itu, nilai yang dimasukkan dalam kotak teks kata sandi dan konfirmasi kata sandi harus sama. Setelah divalidasi menggunakan JavaNaskahTampilkan pesan kesalahan yang tepat berwarna merah tepat di sebelah kotak teks tempat terjadi kesalahan.

Solusi dengan Sumber Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

Perilaku yang Diharapkan:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code penjelasan: Tiga array berjalan secara paralel. input menyimpan nilai saat ini, kesalahan menyimpan pesan yang cocok, dan divs menyimpan id dari kontainer yang menampilkan setiap pesan. Oleh karena itu, indeks menghubungkan sebuah field, teks kesalahannya, dan lokasi outputnya. Cabang email hanya menerima alamat jika tanda @ bukan karakter pertama, dan jika setidaknya dua karakter memisahkan tanda @ dari titik terakhir.

⚠️ Peringatan: Validasi sisi klien meningkatkan pengalaman pengguna tetapi tidak memberikan keamanan. Siapa pun dapat menonaktifkannya. JavaSkrip atau kirim langsung ke endpoint, jadi setiap aturan yang ditampilkan di sini harus diulang di server.

ARTIKEL TERKAIT

Contoh #3: Pesan POPUP menggunakan Event

Tampilkan pesan sederhana “Selamat Datang!!!” di halaman web demo Anda, dan ketika pengguna mengarahkan kursor ke pesan tersebut, sebuah pop-up akan ditampilkan dengan pesan “Selamat Datang di Halaman Web Saya!!!”.

Larutan:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

Perilaku yang Diharapkan:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code penjelasan: Listener terpasang di dalam fungsi pemicu, yang berjalan pada event onload body. Menunggu hingga load selesai penting, karena paragraf dengan id “hover” belum ada saat head masih diurai. Hasil yang sama dapat dicapai dengan lebih rapi dengan menempatkan skrip tepat sebelum tag penutup body, atau dengan menambahkan atribut defer.

Contoh #4: Langsung DigiJam tal menggunakan setInterval

Tampilkan waktu saat ini di halaman dan perbarui setiap detik. Contoh ini memperkenalkan timer dan menunjukkan alternatif modern untuk document.write.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

Perilaku yang Diharapkan:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

Memanggil showTime sekali sebelum setInterval akan menghindari penundaan satu detik yang terlihat saat halaman dibuka. Gunakan clearInterval dengan nilai yang dikembalikan oleh setInterval ketika jam perlu berhenti.

Praktik Terbaik untuk Menulis Ini JavaContoh Skrip

Ketiga contoh asli tersebut berasal dari gaya sebelumnya. JavaNaskah. Daftar di bawah ini menunjukkan apa yang perlu diubah saat mengadaptasinya untuk pekerjaan produksi.

  1. Ganti document.write: Fungsi ini menghapus seluruh dokumen jika dipanggil setelah halaman dimuat. Lebih baik buat elemen dan atur textContent atau tambahkan node.
  2. Deklarasikan setiap variabel: Gunakan `let` dan `const` daripada mengandalkan variabel global implisit seperti `counter`. i dalam perulangan di atas.
  3. Lebih suka textContent daripada innerHTML: Menyisipkan teks yang diberikan pengguna dengan innerHTML membuka celah kerentanan cross-site scripting.
  4. Pindahkan handler keluar dari markup: Ganti atribut onkeyup dan onclick dengan addEventListener, yang memisahkan perilaku dari struktur.
  5. Konversikan input perintah: Bungkus nilai dalam Number() sebelum menggunakannya dalam perbandingan, karena prompt selalu mengembalikan string.
  6. Lakukan validasi ulang di server: Anggaplah pemeriksaan browser hanya sebagai lapisan kemudahan.

Untuk membahas contoh-contoh ini lebih lanjut, tinjau JavaMetode array skrip untuk array paralel yang digunakan dalam validator formulir, JavaString skrip untuk pengecekan posisi email, dan cookie di JavaNaskah untuk mengingat nilai-nilai yang dimasukkan pengunjung. Tentukan di mana skrip yang sudah jadi ditempatkan dengan membaca internal dan eksternal JavaNaskah.

Pertanyaan Umum Demo Slot

Simpan kode tersebut dalam sebuah file dengan ekstensi .html dan buka di browser mana pun. Tidak diperlukan server, compiler, atau library apa pun untuk keempat contoh di halaman ini.

Perulangan while berhenti setelah j melewati jumlah kolom. Tanpa mengatur ulang j menjadi 1, setiap baris setelah baris pertama tidak akan menghasilkan sel sama sekali.

Tidak. Itu hanya meningkatkan pengalaman dengan memberikan umpan balik instan. Sebuah permintaan dapat melewati browser sepenuhnya, jadi server harus menerapkan aturan yang sama sebelum menyimpan apa pun.

Peristiwa mouseover akan aktif kembali ketika kursor berpindah ke elemen anak, sedangkan peristiwa mouseenter hanya aktif sekali untuk elemen itu sendiri. Pilih mouseenter jika pemicu berulang tidak diinginkan.

AI berguna untuk draf pertama, tetapi kode yang dihasilkan sering kali menggunakan innerHTML dengan input yang tidak di-escape. Baca setiap baris dan ganti penulisan DOM yang tidak aman sebelum mempublikasikan.

Ya, saat Anda menempelkan pesan kesalahan konsol yang persis sama di samping kode. Kesalahan waktu, seperti skrip yang berjalan sebelum elemen tersebut ada, adalah salah satu yang paling mudah diidentifikasi oleh asisten.

Ringkaslah postingan ini dengan: