Cara menggunakan tampilan data dengan javascript

Question

Pada tutorial kali ini kita akan membahas bagaimana menampilkan output dalam javascript, biasanya di setiap bahasa pemrograman ada cara untuk menampilkan output, atau hasil yang ingin ditampilkan pada perangkat program, salah satunya adalah javascript.

Table of Contents Show

Cara Menampilkan Keluaran di JavaScript
Apa itu innerHTML dalam javascript?
Apa itu keluaran javascript?
Bagaimana cara membuat fungsi dalam javascript?
Apa fungsi alert() dalam javascript?

Pada tutorial kali ini kita akan membahas bagaimana cara menampilkan output di browser, karena ini adalah javascript maka ada beberapa tempat yang bisa digunakan untuk menampilkan hasil coding yang sudah kita lakukan, berikut penjelasannya masing-masing

Menggunakan innerHTML_ yang menampilkan keluaran dalam elemen HTML
Menggunakan document.write()_, tampilkan output langsung dalam javascript
Menggunakan window.alert()_, yaitu menampilkan output menggunakan semacam browser popup
Menggunakan console.log(), tampilkan output menggunakan konsol di browser

Cara Menampilkan Keluaran di JavaScript

Dari penjelasan sebelumnya di atas kita akan membahas satu persatu penggunaan kode output untuk dapat menampilkan output dalam bentuk javascript, masing-masing fungsi adalah kode javascript murni, sehingga kita tidak membutuhkan bantuan dari library lain.

Metode 1 menggunakan innerHTML

Cara menggunakan innertHTML adalah dengan memanfaatkan elemen html, dimana kita perlu menentukan elemen mana yang ingin kita gunakan untuk menampilkan output

<!DOCTYPE html>
<html>
<head>
     <title>Belajar Output Javascript</title>
</head>
<body>

<h1>Belajar Output JavaScript</h1>
<p>Teks dibawah ini dibuat oleh javascript:</p>

<p id="teks"></p>

<script>
     document.getElementById('teks').innerHTML = 'Hallo JavaScript';
</script>

</body>
</html>
Code language: HTML, XML (xml)

Hasilnya seperti gambar di bawah ini

Dari gambar diatas dapat kita lihat bahwa kata “Hello JavaScript” ditampilkan pada tag <p> dengan id “text”

Metode 2 menggunakan dokumen. menulis()

Fungsi document.write()_ ini akan menampilkan output langsung ke browser setelah halaman selesai dimuat

<!DOCTYPE html>
<html>
<head>
     <title>Belajar Output Javascript</title>
</head>
<body>

<h1>Belajar Output JavaScript</h1>
<p>Teks dibawah ini dibuat oleh javascript:</p>

<script>
     document.write('Halo JavaScript');
</script>

</body>
</html>
Code language: HTML, XML (xml)

_

Silahkan jalankan di browser anda, karena fungsi document.write() diletakkan di bawah maka akan muncul tulisan "Hello JavaScript" di bagian bawah halaman, begitu juga sebaliknya jika diletakkan di antara

<!DOCTYPE html>
<html>
<head>
     <title>Belajar Output Javascript</title>
</head>
<body>

<h1>Belajar Output JavaScript</h1>
<p>Teks dibawah ini dibuat oleh javascript:</p>

<script>
     document.write('Halo JavaScript');
</script>

</body>
</html>
Code language: HTML, XML (xml)

1 maka akan muncul tulisan "Hello JavaScript" di atas halaman, itu karena browser memuat dokumen html dari atas ke bawah, sehingga jika di atas selesai dibuat maka akan menjalankan di atas terlebih dahulu

Metode 3 menggunakan jendela. peringatan()

Cara ini akan menampilkan alert atau popup bawaan browser, dimana setiap browser pasti memiliki fitur alert ini

<!DOCTYPE html>
<html>
<head>
     <title>Belajar Output Javascript</title>
     <script>
          window.alert('Ini adalah popup alert');
     </script>
</head>
<body>

<h1>Belajar Output JavaScript</h1>

</body>
</html>
Code language: HTML, XML (xml)

Hasil dari penggunaan window.alert() akan seperti gambar di bawah ini

Perlu dicatat, fitur window.alert()_ ini akan, jika tombol "Ok" tidak diklik, browser akan tetap menampilkan status loading, dan konten tidak akan dimuat sebelum tombol "Ok" diklik.

Metode 4 menggunakan fitur konsol. catatan()

Fitur ini sebenarnya adalah fitur untuk debugging, jadi setiap kita ingin mengetahui setiap nilai pada sebuah variabel tanpa harus menampilkannya di halaman web, kita juga bisa melakukan debug dengan menggunakan console.log() ini. begini caranya

<!DOCTYPE html>
<html>
<head>
     <title>Belajar Output Javascript</title>
     <script>
          console.log('Ini adalah console.log()');
     </script>
</head>
<body>

<h1>Belajar Output JavaScript</h1>

</body>
</html>
Code language: HTML, XML (xml)

_

Cara menggunakan console.log() adalah klik kanan dan pilih Inspect pada saat menggunakan Google Chrome, namun pada saat menggunakan Firefox menu yang muncul adalah Inspect Element. Setelah itu klik tab Console, maka akan muncul seperti gambar di bawah ini

Console ini bisa digunakan untuk men-debug data misalnya dari API tanpa harus menggunakan web page sehingga sebelum kita menampilkan data kita sudah mengetahui variabel atau data apa yang akan kita gunakan

Apa itu innerHTML dalam javascript?

innerHTML adalah properti yang digunakan untuk mendapatkan atau mengubah konten elemen itu sendiri . Dengan innerHTML, kita dapat menampilkan keluaran ke elemen yang lebih spesifik dengan menggunakan metode dokumen. getElementById(id).

Apa itu keluaran javascript?

Output adalah tampilan program yang biasanya digunakan untuk menampilkan hasil akhir. Output biasanya ditampilkan dalam bentuk teks dengan fungsi print().

Bagaimana cara membuat fungsi dalam javascript?

untuk membuat fungsi , penulisan harus didahului dengan sintaks " fungsi " lalu lanjutkan dengan nama fungsi yang ingin Anda buat . dan isi fungsi ditulis dalam kurung kurawal buka “{” dan kurung kurawal tutup “}”.

Apa fungsi alert() dalam javascript?

Peringatan . Definisi dan Penggunaan . Fungsi alert() biasanya digunakan pada kasus ketika kita ingin meyakinkan informasi kepada user atau pengguna. Fungsi alert () menampilkan jendela dialog dengan pesan dan tombol “OK”. Ketika jendela alert () muncul, pengguna harus menekan tombol "OK" untuk melanjutkan.

kode javascript