Cara menggunakan contoh program sederhana javascript

Question

Berandateknologi webContoh Program Javascript Sederhana Event Submit Part 1

JAVASCRIPT

Table of Contents Show

Menampilkan Hasil JavaScript dengan document.write()
Menampilkan Hasil JavaScript dengan innerHTML
Menampilkan Hasil JavaScript dengan alert()
Menampilkan Hasil JavaScript dengan console.log()
Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?
Bagaimana Memulai JavaScript?
JavaScript digunakan untuk apa saja?
Bagaimana cara membuat sebuah fungsi di JavaScript?

Di artikel ini saya akan membuat sebuah program dengan javascript pada event submit. saya membuat program pada event submit ini dalam studi kasus validasi, yah kamu tahu sendiri kan validasi itu? bagi yang belum tahu, saya akan ambil studi kasus validasi itu. validasi ini ketika sebuah login tidak di isi dengan benar ataupun kosong maka akan memberikan pesan kemunculan untuk user dalam sebuah validasi ini akan memberikan segi kenyamanan dan keamanan.

Saya membuat validasi ini sangat sederhana dan agar kamu bisa tahu bagaimana gambaran validasi itu, ouh ya karena ada banyak cara bagaimana cara membuat sebuah validasi. nah untuk ini kamu buat dulu file HTML dengan nama index.html

<!doctype html>
   <html lang="en">
  <head>
    <title>Event Submit Javascript Part 1</title>
  </head>   
    
  <body>         
<!--Buat sebuah form-->
      <form action="" method="post">
<!--      Buat label agar bisa memberi judul kolom masukkan bertipe text-->
          <label for="username">Username</label>
<!--          Buat kolom masukkan bertipe text-->
         <input type="text" id="username">
<!--         Buat spasi agar kolom masukkan berikut nya ke bawah-->
          <br>
          <br>
<!--      Buat label agar bisa memberi judul kolom masukkan bertipe password-->
          <label for="password">Password</label>
 <!--          Buat kolom masukkan bertipe password-->
          <input type="password" id="password">
<!--          Buat sebuah tombol bertipe submit-->
          <button type="submit">Kirim</button>
      </form>
      
            
      <script src="script.js"></script>
  </body>
</html>

Dan kamu buat file javascript nya dengan nama script.js

//buat variabel
let form = document.getElementsByTagName('form')[0];
let username = document.getElementById('username');
let password = document.getElementById('password');

//ketika tombol kirim di klik
form.addEventListener('submit', function(e){
    //buat pengkondisian 
    //jika username nya kosong dan password nya kosong
    if(username.value==="" && password.value===""){     
        //buat sebuah peringatan
        alert('Maaf username dan password harus di isi!');
        //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }//jika selain username nya kosong
    else if(username.value===""){
       //buat sebuah peringatan
        alert('Maaf username harus di isi!');
         //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }//jika selain password nya kosong
    else if(password.value===""){
         //buat sebuah peringatan
        alert('Maaf password harus di isi!');
         //buat fungsi prevent default agar menolak untuk di kirim
        e.preventDefault();
    }
});

Ouh ya fungsi dalam value pada javascript ini akan mengambil nilai di dalam tag input html, nah program yang saya buat bisa kamu lihat di sini. semoga bermanfaat :D

Melanjutkan tutorial JavaScript di Duniailkom, kali ini kita akan pelajari Cara Menampilkan Hasil Program JavaScript. Kita akan bahas tentang perintah document.write(), innerHTML, alert(), console.log().

Menampilkan Hasil JavaScript dengan document.write()

Cara pertama untuk menampilkan hasil kode program JavaScript di web browser adalah dengan perintah document.write(). Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <script>
    let foo = 1+3+5+7+9;
    document.write(foo);

    document.write("<br>");

    let bar = {a:'16'};
    document.write(bar);
  </script>
</body>
</html>

Perintah document.write() akan menampilkan teks yang ditulis dalam tanda kurung (sebagai argument).

Di baris 10 saya membuat variabel foo yang akan menampung hasil dari penambahan 1+3+5+7+9. Variabel ini kemudian ditampilkan dengan perintah document.write(foo) di baris 11. Hasilnya, akan tampil angka 25 di web browser.

Penjelasan lebih lanjut mengenai variabel akan kita bahas dalam tutorial terpisah. Fokus tutorial ini sekedar menampilkan hasilnya saya dengan perintah document.write().

Lanjut, di baris 13 terdapat perintah document.write("<br>"). Di HTML, tag <br> dipakai sebagai tanda untuk pindah baris. Ini semata-mata agar tampilan kita lebih rapi saja.

Di baris 15 giliran variabel bar yang saya isi dengan sebuah object {a:'16'}. Kembali, materi tentang object akan dibahas dalam tutorial terpisah. Pada saat ditampilkan, hasilnya adalah [object Object].

Inilah salah satu kelemahan jika ingin menampilkan hasil kode program menggunakan perintah document.write(). Jika datanya cukup kompleks, yang tampil adalah tipe data dari variabel, bukan nilainya.

Menampilkan Hasil JavaScript dengan innerHTML

Cara kedua untuk menampilkan hasil JavaScript adalah dengan mengakses property innerHTML dari sebuah element. Untuk keperluan ini, kita juga harus minta bantuan perintah document.getElementById() untuk mencari dimana hasil ini akan ditampilkan. Berikut contoh kode programnya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    document.getElementById("result1").innerHTML=foo;

    let bar = {a:'16'};
    document.getElementById("result2").innerHTML=bar;
  </script>
</body>
</html>

Sama seperti contoh di document.write(), saya ingin menampilkan isi dari variabel foo dan bar. Hasil tampilan juga akan sama persis seperti sebelumnya.

Di baris 9-10, terdapat 2 tag <div> dengan atribut id="result1" dan id="result2". Disinilah kita akan meletakkan hasil kode program JavaScript.

Caranya, akses kedua element dengan perintah document.getElementById(), lalu isi property innerHTML dengan variabel foo dan bar seperti di baris 13 dan 16.

Penjelasan lebih lanjut terkait cara kerja perintah document.getElementById() akan kita bahas pada tutorial terpisah. Secara singkat perintah ini dipakai untuk mencari element HTM berdasarkan nilai atribut id.

Menampilkan Hasil JavaScript dengan alert()

Perintah alert() sudah beberapa kali kita gunakan, dan ini adalah cara paling sederhana untuk menampilkan hasil program JavaScript. alert() akan menampilkan apapun yang diinput sebagai argument.

Berikut contoh penggunaannya:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    alert(foo);

    let bar = {a:'16'};
    alert(bar);
  </script>
</body>
</html>

Perintah alert() di akses pada baris 13 dan 16. Pada saat dijalankan, isi variabel foo dan bar akan tampil di jendela alert secara bergantian. Setelah men-klik tombol OK dari hasil alert(foo), barulah tampil hasil alert(bar).

Meskipun sangat praktis, perintah alert() tetap menampilkan isi variabel bar sebagai [object Object].

Menampilkan Hasil JavaScript dengan console.log()

Dari ketiga cara yang sudah kita bahas, terdapat sedikit masalah saat menampilkan variabel bar yang berisi object. Ketiganya kurang informatif untuk data-data kompleks JavaScript. Sebagai solusi, kita bisa mengakses hasil kode JavaScript dengan perintah console.log().

Perintah console.log akan menampilkan hasil program ke dalam tab console pada menu Web Developer. Cara penggunaan fungsi ini sama seperti alert, hanya butuh menginput hasil yang ingin ditampilkan sebagai argument.

Berikut contoh penggunaan perintah console.log() dalam menampilkan hasil program JavaScript:

<!DOCTYPE html>
<html lang="id">
<head>
  <title>Belajar JavaScript di Duniailkom</title> 
</head>
<body>
  <h2>Belajar JavaScript</h2>
  <p> Saya sedang belajar JavaScript di duniailkom </p>
  <div id="result1"></div>
  <div id="result2"></div>
  <script>
    let foo = 1+3+5+7+9;
    console.log(foo);

    let bar = {a:'16'};
    console.log(bar);
  </script>
</body>
</html>

Hasilnya, isi variabel foo dan bar tampil beserta nilai yang ada.

Pilihan apakah menggunakan perintah alert() dan console.log() tergantung kepada kenyamanan kita sebagai programmer. Dalam tutorial JavaScript di Duniailkom ini saya akan lebih banyak menggunakan console.log() yang lebih informatif dan tampilan hasil program menjadi lebih rapi.

Namun perintah alert() dan console.log() hanya untuk proses development saja. Untuk web asli nanti, lebih cocok memakai perintah document.getElementById() dan innerHTML seperti cara kedua, sebab hasilnya langsung terlihat di web browser.

Dalam tutorial belajar JavaScript berikutnya, kita akan bahas konsep inti JavaScript, yakni: Pengertian EmcaScript dan DOM (Document Object Model).

Saat ini di Duniailkom tersedia eBook / buku JavaScript Uncover. Dengan total lebih dari 650 halaman A4, materi di buku jauh lebih banyak daripada tutorial di web Duniailkom. Penjelasan lebih lanjut bisa ke: JavaScript Uncover – Panduan Belajar JavaScript.

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan: di antara tag <head>

Bagaimana Memulai JavaScript?

Tips Belajar JavaScript untuk Pemula.

Unduh editor kode atau pakai editor online. ... .

3. Ikuti pelatihan online. ... .

4. Jangan takut untuk bereksperimen. ... .

Cari mentor. ... .

6. Catat selalu hal-hal yang dipelajari. ... .

7. Pahami setiap baris dari kode yang Anda buat. ... .

Selalu manfaatkan panduan referensi. ... .

9. Cari teman untuk belajar bersama..

JavaScript digunakan untuk apa saja?

Javascript bisa digunakan untuk membuat fitur beragam seperti drag, drop komponen yang semuanya bisa bermanfaat untuk meningkatkan tampilan (interface) dan pengalaman menggunakan web. Selain itu, programmer juga bisa memperluas fungsi halaman web dengan menulis snippet Javascript untuk add-on pihak ketiga, contohnya ...

Bagaimana cara membuat sebuah fungsi di JavaScript?

untuk membuat function, penulisannya harus di awali oleh syntax “function” dan kemudian di lanjutkan dengan nama function yang mau di buat. dan isi dari function di tuliskan di dalam tanda kurung kurawal pembuka “{” dan tanda kurung kurawal penutup “}”.

kode javascript Bagaimana Memulai JavaScript? Kode javascript lengkap Belajar Javascript PDF Belajar javascript lengkap JavaScript w3school