Tutorial menampilkan output pada Javascript

0
239

Pada kesempatan kali ini saya akan membahas tutorial Javascript dasar. Dalam menampilkan data ada berbagai cara, seperti :

Menulis ke elemen HTML, menggunakan innerHTML,

Menulis ke dalam output HTML menggunakan document.write(),

Menulis ke dalam kotak peringatan, menggunakan windows.alert(),

Menulis ke konsol browser, menggunakan console.log().

Pertama, menggunakan innerHTML

Untuk mengakses elemen HTML, javascript dapat menggunakan metode document.getElementById(id)

Contoh sintaks:

<!DOCTYPE html>
<html>
<body>
  <h1>Ayo belajar di ontuto.com</h1>
  <p>Belajar online</p>
  <p id="contoh"></p>
  <script type="text/javascript">
    document.getElementById("contoh").innerHTML = "<strong>Ini kalimat dari javascript</strong>" ;
  </script>
</body>
</html>

 

*keterangan : Mengubah innerHTML dari elemen HTML adalah cara yang umum digunakan untuk menampilkan data dalam HTML.

Kedua, menggunakan document.write()

Contoh sintaks :

<!DOCTYPE html>
<html>
<body>
  <h1>Ayo belajar di ontuto.com</h1>
  <p>Belajar Online</p>
  <script type="text/javascript">
    document.write("<strong>Ini kalimat dari javascript</strong>")
  </script>
</body>
</html>

 

Menggunakan document.write() setelah dokumen HTML dimuat penuh, akan menghapus semua HTML yang ada.

<!DOCTYPE html>
<html>
<body>
  <h1>Ayo belajar di ontuto.com</h1>
  <p>Belajar Online</p>
  <button type="button" onclick="document.write('<strong>Ini kalimat dari javascript</strong>')">Tekan Disini</button>
</body>
</html>

 

*keterangan : Metode document.write() hanya boleh digunakan untuk pengujian.

Ketiga, menggunakan window.alert()

Anda dapat menggunakan kotak peringatan untuk menampilkan data.

Contoh Sintaks :

<!DOCTYPE html>
<html>
<body>
  <h1>Ayo belajar di ontuto.com</h1>
  <p>Belajar Online</p>
  <script type="text/javascript">
    window.alert("Ini kalimat dari javascript");
  </script>
</body>
</html>

 

Keempat, menggunakan consol.log()

Selanjutnya untuk keperluan debugging, anda dapat menggunakan console.log() untuk menampilkan data.

Contoh sintaks :

<!DOCTYPE html>
<html>
<body>
  <h1>Ayo belajar di ontuto.com</h1>
  <p>Aktifkan debugging dengan tekan f12, lalu pilih console.</p>
  <script>
    console.log("Ini kalimat dari javascript");
  </script>
</body>
</html>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here